@scalar/components 0.27.10 → 0.27.11

package/dist/components/ScalarToggle/ScalarTristateToggleInput.vue.script.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTristateToggleInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle Input component\n *\n * A tristate toggle input component for use in forms, supporting an\n * additional \"unset\" state alongside on/off.\n *\n * @example\n *  <ScalarTristateToggleInput v-model=\"model\">\n *    Label\n *  </ScalarTristateToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarTristateToggle from './ScalarTristateToggle.vue'\n\nconst model = defineModel<boolean | undefined>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', {\n        'text-c-1': model !== undefined,\n      })\n    \">\n    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <ScalarTristateToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ,SAAgC,SAAA,aAAC;EAG/C,MAAM,EAAE,gBAAgB,eAAe,WAAU;;uBAG/C,YAYkB,MAAA,wBAAA,EAZlB,WAYkB,EAXhB,IAAG,SAAO,EACK,MAAA,eAAc,CAAA,qCAAA,EAAA,YAA4D,MAAA,UAAU,KAAA,GAAA,CAAA,CAAA,EAAA;2BAKtC,CAA7D,mBAA6D,OAA7D,YAA6D,CAAd,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA,EACvD,YAGwB,8BAHxB,WAGwB;iBAFb,MAAA;wEAAK,QAAA;KACd,OAAM;OACE,MAAA,WAAU,CAAA,EAAA,MAAA,IAAA,CAAA,aAAA,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarTristateToggleInput.vue.script.js","names":[],"sources":["../../../src/components/ScalarToggle/ScalarTristateToggleInput.vue"],"sourcesContent":["<script lang=\"ts\">\n/**\n * Scalar Tristate Toggle Input component\n *\n * A tristate toggle input component for use in forms, supporting an\n * additional \"unset\" state alongside on/off.\n *\n * @example\n *  <ScalarTristateToggleInput v-model=\"model\">\n *    Label\n *  </ScalarTristateToggleInput>\n */\nexport default {}\n</script>\n<script setup lang=\"ts\">\nimport { useBindCx } from '@scalar/use-hooks/useBindCx'\n\nimport { ScalarFormInput } from '../ScalarForm'\nimport ScalarTristateToggle from './ScalarTristateToggle.vue'\n\nconst model = defineModel<boolean | undefined>()\n\ndefineOptions({ inheritAttrs: false })\nconst { stylingAttrsCx, otherAttrs } = useBindCx()\n</script>\n<template>\n  <ScalarFormInput\n    is=\"label\"\n    v-bind=\"\n      stylingAttrsCx('cursor-pointer gap-2 hover:bg-b-2', {\n        'text-c-1': model !== undefined,\n      })\n    \">\n    <div class=\"flex-1 text-left min-w-0 truncate\"><slot /></div>\n    <ScalarTristateToggle\n      v-model=\"model\"\n      class=\"shrink-0\"\n      v-bind=\"otherAttrs\" />\n  </ScalarFormInput>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAoBA,MAAM,QAAQ,SAAgC,SAAA,YAAC;EAG/C,MAAM,EAAE,gBAAgB,eAAe,UAAU;;uBAG/C,YAYkB,MAAA,uBAAA,GAZlB,WAYkB,EAXhB,IAAG,QAAO,GACK,MAAA,cAAA,CAAc,CAAA,qCAAA,EAAA,YAA4D,MAAA,UAAU,KAAA,EAAA,CAAA,CAAA,GAAA;2BAKtC,CAA7D,mBAA6D,OAA7D,YAA6D,CAAd,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,GACvD,YAGwB,8BAHxB,WAGwB;iBAFb,MAAA;wEAAK,QAAA;KACd,OAAM;OACE,MAAA,UAAA,CAAU,GAAA,MAAA,IAAA,CAAA,YAAA,CAAA,CAAA,CAAA"}

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

@@ -1,7 +1,7 @@
 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({
+var ScalarHotkeyTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarHotkeyTooltip",
 	props: {
 		content: { default: "" },

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarHotkeyTooltip.vue.script.js","names":["$slots"],"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 { type Ref, computed, h, ref, render } 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,KAAI;AA4CpD,aAAW;GACT,SAxCsB,eAAuB;AAC7C,QAAI,CAAC,SAAU,QAAO;IAGtB,MAAM,KAAK,SAAS,cAAc,MAAK;IAEvC,MAAM,cACJ;AAEF,QAAI,QAAA,QAEF,QACE,EAAE,OAAO,EAAE,OAAO,2BAA2B,EAAE,CAC7C,QAAA,SACA,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,CACH,CAAC,EACF,GACF;QAEA,QACE,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;KACR,CAAC,EACF,GACF;AAMF,WAHa,GAAG;KAIjB;GAIC,eAAe;GACf,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"ScalarHotkeyTooltip.vue.script.js","names":["$slots"],"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 { type Ref, computed, h, ref, render } 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;EA4CpD,WAAW;GACT,SAxCsB,eAAuB;IAC7C,IAAI,CAAC,UAAU,OAAO;IAGtB,MAAM,KAAK,SAAS,cAAc,KAAK;IAEvC,MAAM,cACJ;IAEF,IAAI,QAAA,SAEF,OACE,EAAE,OAAO,EAAE,OAAO,0BAA0B,GAAG,CAC7C,QAAA,SACA,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;IACT,CAAC,CACH,CAAC,GACD,EACF;SAEA,OACE,EAAE,sBAAc;KACd,OAAO;KACP,QAAK,QAAA;KACL,UAAO,QAAA;IACT,CAAC,GACD,EACF;IAMF,OAHa,GAAG;GAIlB,CAGW;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;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,QAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/components/ScalarTooltip/ScalarTooltip.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"names":[],"mappings":"AAgHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA6CJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}
+{"version":3,"file":"ScalarTooltip.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/ScalarTooltip.vue"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAIjD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;cA6CJ,CAAC,KAAK,IAAgB,KAAK,GAAG;EAWxC,CAAC;AACL,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KACV,CAAA;CACD,CAAC"}

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/** Global styles for the tooltip */\n:where(body) > .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) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":""}
+{"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:where(body, dialog) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border 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":""}

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

@@ -1,6 +1,6 @@
 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({
+var ScalarTooltip_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarTooltip",
 	props: {
 		content: { default: "" },

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarTooltip.vue.script.js","names":["$slots"],"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/** Global styles for the tooltip */\n:where(body) > .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) > .scalar-tooltip[data-side='top'] {\n  padding-bottom: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='bottom'] {\n  padding-top: calc(\n    var(--scalar-tooltip-padding-y) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='left'] {\n  padding-right: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n:where(body) > .scalar-tooltip[data-side='right'] {\n  padding-left: calc(\n    var(--scalar-tooltip-padding-x) + var(--scalar-tooltip-offset)\n  );\n}\n\n:where(body) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border shadow;\n}\n\n/* Leave the gap on the target-facing side so the other edges stay flush */\n:where(body) > .scalar-tooltip[data-side='top']:before {\n  bottom: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='bottom']:before {\n  top: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='left']:before {\n  right: var(--scalar-tooltip-offset);\n}\n:where(body) > .scalar-tooltip[data-side='right']:before {\n  left: var(--scalar-tooltip-offset);\n}\n</style>\n"],"mappings":";;;;;;;;;;;EA2BA,MAAM,aAAsC,IAAI,KAAI;AAEpD,aAAW;GACT,SAAS,eAAe,QAAA,QAAQ;GAChC,OAAO,eAAe,QAAA,MAAM;GAC5B,WAAW,eAAe,QAAA,UAAU;GACpC,QAAQ,eAAe,QAAA,OAAO;GAC9B,WAAW,eACH,WAAW,OAAO,WAAW,MAAM,WAAW,SAAS,KAAA,EAC9D;GACF,CAAA;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,SAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"ScalarTooltip.vue.script.js","names":["$slots"],"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:where(body, dialog) > .scalar-tooltip:before {\n  content: '';\n  inset: 0;\n  @apply absolute rounded-lg bg-b-tooltip -z-1 backdrop-blur border 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":";;;;;;;;;;;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;;uBAGC,mBAIM,OAAA;aAHA;IAAJ,KAAI;IACH,OAAK,eAAA,EAAA,UAAA,CAAA,CAAgBA,KAAAA,OAAO,QAAO,CAAA;OACpC,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,CAAA"}

package/dist/components/ScalarTooltip/useTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAS,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA+I1D;;GAEG;AACH,wBAAgB,qBAAqB,SAGpC;AA2ED;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,QAwEpD"}
+{"version":3,"file":"useTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAS,oBAAoB,EAAE,MAAM,SAAS,CAAA;AA4J1D;;GAEG;AACH,wBAAgB,qBAAqB,SAGpC;AAgID;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,oBAAoB,QA8EpD"}

package/dist/components/ScalarTooltip/useTooltip.js

@@ -20,7 +20,7 @@ var el = ref();
 * If no tooltip is active it should be undefined
 */
 var config = ref();
-var { floatingStyles, placement } = useFloating(computed(() => unref(config.value?.targetRef)), el, {
+var { floatingStyles, placement, update } = useFloating(computed(() => unref(config.value?.targetRef)), el, {
 	placement: computed(() => unref(config.value?.placement)),
 	whileElementsMounted: autoUpdate,
 	middleware: computed(() => [flip(), shift()])
@@ -40,6 +40,7 @@ watch(floatingStyles, () => {
 watch(config, (opts) => {
 	if (!el.value) return;
 	if (opts) {
+		if (moveTooltipToHost(unref(opts.targetRef))) update();
 		const contentTarget = unref(opts?.contentTarget) ?? "textContent";
 		el.value[contentTarget] = unref(opts?.content) ?? "";
 		const offset = unref(opts?.offset) ?? 4;
@@ -50,6 +51,7 @@ watch(config, (opts) => {
 		el.value.innerHTML = "";
 		el.value.style.removeProperty("--scalar-tooltip-offset");
 		el.value.style.setProperty("display", "none");
+		moveTooltipToHost(void 0);
 	}
 }, { deep: true });
 /**
@@ -96,6 +98,42 @@ function handleEscape(e) {
 		hideTooltip(e);
 	}
 }
+/**
+* Find the modal dialog containing an element, if there is one
+*
+* Only a dialog opened with `showModal()` is promoted to the browser's top layer, and
+* `:modal` matches exactly those. The `open` property is not a substitute: it is also
+* true for `dialog.show()`, which leaves the dialog in the normal flow where the
+* tooltip already paints correctly.
+*/
+function getModalDialog(target) {
+	const dialog = target?.closest("dialog");
+	if (!dialog) return;
+	try {
+		return dialog.matches(":modal") ? dialog : void 0;
+	} catch {
+		return;
+	}
+}
+/**
+* Move the tooltip element into the host it needs to paint above
+*
+* Top layer content paints above the rest of the document whatever `z-index` anything
+* else carries, so the only way to sit above a modal dialog is to live inside it.
+* Everywhere else the tooltip belongs on the body.
+*
+* This doubles as a repair step: appending an element that is no longer in the document
+* puts it back, which covers a dialog being unmounted while the tooltip sat inside it.
+*
+* Returns whether the element actually moved.
+*/
+function moveTooltipToHost(target) {
+	if (!el.value) return false;
+	const host = getModalDialog(target) ?? document.body;
+	if (el.value.parentElement === host) return false;
+	host.appendChild(el.value);
+	return true;
+}
 /** Clears the current timer */
 function clearTimer() {
 	if (timer.value) {
@@ -147,6 +185,7 @@ function useTooltip(opts) {
 			once: true,
 			capture: true
 		});
+		moveTooltipToHost(unref(opts.targetRef));
 		config.value = opts;
 	}
 	watch(() => unref(opts.targetRef), (newRef, oldRef) => {

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

@@ -1 +1 @@
-{"version":3,"file":"useTooltip.js","names":[],"sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"sourcesContent":["import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'\nimport { computed, onScopeDispose, ref, unref, watch } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET, ELEMENT_CLASS, ELEMENT_ID } from './constants'\nimport type { Timer, TooltipConfiguration } from './types'\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\n/**\n * The delay timer for the tooltip\n *\n * If there's not a timer running it should be undefined\n */\nconst timer = ref<Timer>()\n\n/**\n * A reference to the tooltip element\n *\n * If the hook hasn't been initialized it should be undefined\n */\nconst el = ref<HTMLElement>()\n\n/**\n * The configuration for the active tooltip\n *\n * If no tooltip is active it should be undefined\n */\nconst config = ref<TooltipConfiguration>()\n\n// ---------------------------------------------------------------------------\n// Core watcher and floating UI setup\n// ---------------------------------------------------------------------------\n\n// Set up floating UI\nconst { floatingStyles, placement } = useFloating(\n  computed(() => unref(config.value?.targetRef)),\n  el,\n  {\n    placement: computed(() => unref(config.value?.placement)),\n    whileElementsMounted: autoUpdate,\n    middleware: computed(() => [flip(), shift()]),\n  },\n)\n\n// Expose the resolved placement side (post-flip) so the CSS can apply the offset\n// gap only on the side facing the target. We key off the side (the part before\n// the '-') because that is where the tooltip sits relative to the target. The\n// initial side is set synchronously when the tooltip is shown (see the config\n// watcher below); this watcher keeps it in sync once Floating UI flips it.\nwatch(placement, (value) => {\n  if (!el.value || !value) {\n    return\n  }\n  el.value.dataset.side = value.split('-')[0]\n})\n\n// Update the tooltip element's positioning when Floating UI updates the styles\nwatch(floatingStyles, () => {\n  if (!el.value) {\n    return\n  }\n\n  el.value.style.position = floatingStyles.value.position\n  el.value.style.top = floatingStyles.value.top\n  el.value.style.left = floatingStyles.value.left\n  el.value.style.transform = floatingStyles.value.transform ?? ''\n  el.value.style.willChange = floatingStyles.value.willChange ?? ''\n})\n\n// Show or hide the tooltip when the config changes\nwatch(\n  config,\n  (opts) => {\n    if (!el.value) {\n      return\n    }\n\n    if (opts) {\n      const contentTarget = unref(opts?.contentTarget) ?? 'textContent'\n\n      // Update the tooltip content\n      el.value[contentTarget] = unref(opts?.content) ?? ''\n\n      // Show the tooltip\n      const offset = unref(opts?.offset) ?? DEFAULT_OFFSET\n      el.value.style.setProperty('--scalar-tooltip-offset', `${offset}px`)\n\n      // Set the side the tooltip sits on so the offset gap is only applied to\n      // the target-facing side. Floating UI defaults to 'bottom' when no\n      // placement is provided; the placement watcher above refines this after\n      // any flip.\n      el.value.dataset.side = (unref(opts?.placement) ?? 'bottom').split('-')[0]\n\n      el.value.style.setProperty('display', 'block')\n    } else {\n      // Clear the tooltip content\n      el.value.innerHTML = ''\n\n      // Hide the tooltip\n      el.value.style.removeProperty('--scalar-tooltip-offset')\n      el.value.style.setProperty('display', 'none')\n    }\n  },\n  { deep: true },\n)\n\n// ---------------------------------------------------------------------------\n// Lifecycle Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Initialize the tooltip element\n *\n * If the tooltip is already initialized it will be ignored\n */\nfunction initializeTooltipElement(): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') {\n    // Skip tooltip initialization during SSR\n    return\n  }\n\n  if (el.value) {\n    // Tooltip already initialized\n    return\n  }\n\n  // See if the tooltip element already exists\n  // (Sometimes this happens with HMR)\n  const existingTooltipElement = document.getElementById(ELEMENT_ID)\n\n  if (existingTooltipElement) {\n    el.value = existingTooltipElement\n  } else {\n    // Create the tooltip element\n    el.value = document.createElement('div')\n    el.value.role = 'tooltip'\n    el.value.id = ELEMENT_ID\n    el.value.classList.add(ELEMENT_CLASS)\n    el.value.classList.add('scalar-app')\n    el.value.style.setProperty('display', 'none')\n    el.value.addEventListener('mouseleave', hideTooltip)\n    document.body.appendChild(el.value)\n  }\n}\n\n/**\n * Cleanup and reset the tooltip element\n */\nexport function cleanupTooltipElement() {\n  document.getElementById(ELEMENT_ID)?.remove()\n  el.value = undefined\n}\n\n// ---------------------------------------------------------------------------\n// Helper Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Hide the tooltip\n *\n * If the mouse is moving between the tooltip and the target we don't hide the tooltip\n */\nfunction hideTooltip(_e: Event) {\n  if (!isMovingOffElements(_e)) {\n    // Don't hide the tooltip if the mouse is moving between the tooltip and the target\n    return\n  }\n\n  // Clear any existing timer\n  clearTimer()\n\n  // Hide the tooltip\n  config.value = undefined\n}\n\n/**\n * Handle the escape key\n *\n * If the escape key is pressed we need to hide the tooltip\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role#keyboard_interactions\n */\nfunction handleEscape(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.stopPropagation()\n    hideTooltip(e)\n  }\n}\n\n/** Clears the current timer */\nfunction clearTimer() {\n  if (timer.value) {\n    clearTimeout(timer.value)\n    timer.value = undefined\n  }\n}\n\n/** Get all the parents of an element */\nfunction getAllParents(el: Element): Element[] {\n  const parents: Element[] = []\n  let parent = el.parentElement\n  while (parent) {\n    parents.push(parent)\n    parent = parent.parentElement\n  }\n  return parents\n}\n\n/** Check if mouse moved off the target but onto the tooltip */\nfunction isMovingOffElements(e: Event): boolean {\n  const target = unref(config.value?.targetRef)\n  if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {\n    const relatedTargetParents = getAllParents(e.relatedTarget)\n    return (\n      e.relatedTarget.id !== ELEMENT_ID &&\n      !relatedTargetParents.some((parent) => parent.id === ELEMENT_ID) &&\n      e.relatedTarget !== target\n    )\n  }\n  return true\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Create a tooltip\n *\n * If there isn't a tooltip element it will be created\n */\nexport function useTooltip(opts: TooltipConfiguration) {\n  initializeTooltipElement()\n\n  /**\n   * Show the tooltip after the delay if configured\n   */\n  function showTooltipAfterDelay(_e: Event) {\n    const delay = unref(opts.delay) ?? DEFAULT_DELAY\n    clearTimer()\n\n    // Show the tooltip after the delay\n    if (delay > 0) {\n      timer.value = setTimeout(() => showTooltip(_e), delay)\n    } else {\n      showTooltip(_e)\n    }\n  }\n\n  /**\n   * Show the tooltip\n   */\n  function showTooltip(_e: Event) {\n    clearTimer()\n\n    // Handle the escape key\n    document.addEventListener('keydown', handleEscape, { once: true, capture: true })\n\n    // Show the tooltip\n    config.value = opts\n  }\n\n  watch(\n    () => unref(opts.targetRef),\n    (newRef, oldRef) => {\n      if (oldRef) {\n        oldRef.removeEventListener('mouseenter', showTooltipAfterDelay)\n        oldRef.removeEventListener('mouseleave', hideTooltip)\n        oldRef.removeEventListener('focus', showTooltip)\n        oldRef.removeEventListener('blur', hideTooltip)\n\n        oldRef.removeAttribute('aria-describedby')\n      }\n      if (newRef) {\n        newRef.addEventListener('mouseenter', showTooltipAfterDelay)\n        newRef.addEventListener('mouseleave', hideTooltip)\n        newRef.addEventListener('focus', showTooltip)\n        newRef.addEventListener('blur', hideTooltip)\n\n        newRef.setAttribute('aria-describedby', ELEMENT_ID)\n      }\n    },\n    { immediate: true },\n  )\n\n  // Cleanup the tooltip when the component is unmounted\n  onScopeDispose(() => {\n    clearTimer()\n\n    const target = unref(opts.targetRef)\n    if (target) {\n      target.removeEventListener('mouseenter', showTooltipAfterDelay)\n      target.removeEventListener('mouseleave', hideTooltip)\n      target.removeEventListener('focus', showTooltip)\n      target.removeEventListener('blur', hideTooltip)\n      target.removeAttribute('aria-describedby')\n    }\n\n    // If the tooltip is showing on this target hide it\n    if (unref(config.value?.targetRef) === unref(opts.targetRef)) {\n      config.value = undefined\n    }\n  })\n}\n"],"mappings":"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"}
+{"version":3,"file":"useTooltip.js","names":[],"sources":["../../../src/components/ScalarTooltip/useTooltip.ts"],"sourcesContent":["import { autoUpdate, flip, shift, useFloating } from '@floating-ui/vue'\nimport { computed, onScopeDispose, ref, unref, watch } from 'vue'\n\nimport { DEFAULT_DELAY, DEFAULT_OFFSET, ELEMENT_CLASS, ELEMENT_ID } from './constants'\nimport type { Timer, TooltipConfiguration } from './types'\n\n// ---------------------------------------------------------------------------\n// State\n// ---------------------------------------------------------------------------\n\n/**\n * The delay timer for the tooltip\n *\n * If there's not a timer running it should be undefined\n */\nconst timer = ref<Timer>()\n\n/**\n * A reference to the tooltip element\n *\n * If the hook hasn't been initialized it should be undefined\n */\nconst el = ref<HTMLElement>()\n\n/**\n * The configuration for the active tooltip\n *\n * If no tooltip is active it should be undefined\n */\nconst config = ref<TooltipConfiguration>()\n\n// ---------------------------------------------------------------------------\n// Core watcher and floating UI setup\n// ---------------------------------------------------------------------------\n\n// Set up floating UI\nconst { floatingStyles, placement, update } = useFloating(\n  computed(() => unref(config.value?.targetRef)),\n  el,\n  {\n    placement: computed(() => unref(config.value?.placement)),\n    whileElementsMounted: autoUpdate,\n    middleware: computed(() => [flip(), shift()]),\n  },\n)\n\n// Expose the resolved placement side (post-flip) so the CSS can apply the offset\n// gap only on the side facing the target. We key off the side (the part before\n// the '-') because that is where the tooltip sits relative to the target. The\n// initial side is set synchronously when the tooltip is shown (see the config\n// watcher below); this watcher keeps it in sync once Floating UI flips it.\nwatch(placement, (value) => {\n  if (!el.value || !value) {\n    return\n  }\n  el.value.dataset.side = value.split('-')[0]\n})\n\n// Update the tooltip element's positioning when Floating UI updates the styles\nwatch(floatingStyles, () => {\n  if (!el.value) {\n    return\n  }\n\n  el.value.style.position = floatingStyles.value.position\n  el.value.style.top = floatingStyles.value.top\n  el.value.style.left = floatingStyles.value.left\n  el.value.style.transform = floatingStyles.value.transform ?? ''\n  el.value.style.willChange = floatingStyles.value.willChange ?? ''\n})\n\n// Show or hide the tooltip when the config changes\nwatch(\n  config,\n  (opts) => {\n    if (!el.value) {\n      return\n    }\n\n    if (opts) {\n      // Keep the element in the right host if the target moved into or out of a modal\n      // dialog while the tooltip was already showing. Opening a tooltip is handled in\n      // `showTooltip` before the config is assigned, so this only fires when `targetRef`\n      // changes underneath an open tooltip, and it has to ask Floating UI for a fresh\n      // position because a reparent is neither a scroll nor a resize.\n      if (moveTooltipToHost(unref(opts.targetRef))) {\n        update()\n      }\n\n      const contentTarget = unref(opts?.contentTarget) ?? 'textContent'\n\n      // Update the tooltip content\n      el.value[contentTarget] = unref(opts?.content) ?? ''\n\n      // Show the tooltip\n      const offset = unref(opts?.offset) ?? DEFAULT_OFFSET\n      el.value.style.setProperty('--scalar-tooltip-offset', `${offset}px`)\n\n      // Set the side the tooltip sits on so the offset gap is only applied to\n      // the target-facing side. Floating UI defaults to 'bottom' when no\n      // placement is provided; the placement watcher above refines this after\n      // any flip.\n      el.value.dataset.side = (unref(opts?.placement) ?? 'bottom').split('-')[0]\n\n      el.value.style.setProperty('display', 'block')\n    } else {\n      // Clear the tooltip content\n      el.value.innerHTML = ''\n\n      // Hide the tooltip\n      el.value.style.removeProperty('--scalar-tooltip-offset')\n      el.value.style.setProperty('display', 'none')\n\n      // Park the element back on the body. Left inside a dialog it would be removed from\n      // the document when that dialog unmounts, taking the shared tooltip with it.\n      moveTooltipToHost(undefined)\n    }\n  },\n  { deep: true },\n)\n\n// ---------------------------------------------------------------------------\n// Lifecycle Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Initialize the tooltip element\n *\n * If the tooltip is already initialized it will be ignored\n */\nfunction initializeTooltipElement(): void {\n  if (typeof document === 'undefined' || typeof window === 'undefined') {\n    // Skip tooltip initialization during SSR\n    return\n  }\n\n  if (el.value) {\n    // Tooltip already initialized\n    return\n  }\n\n  // See if the tooltip element already exists\n  // (Sometimes this happens with HMR)\n  const existingTooltipElement = document.getElementById(ELEMENT_ID)\n\n  if (existingTooltipElement) {\n    el.value = existingTooltipElement\n  } else {\n    // Create the tooltip element\n    el.value = document.createElement('div')\n    el.value.role = 'tooltip'\n    el.value.id = ELEMENT_ID\n    el.value.classList.add(ELEMENT_CLASS)\n    el.value.classList.add('scalar-app')\n    el.value.style.setProperty('display', 'none')\n    el.value.addEventListener('mouseleave', hideTooltip)\n    document.body.appendChild(el.value)\n  }\n}\n\n/**\n * Cleanup and reset the tooltip element\n */\nexport function cleanupTooltipElement() {\n  document.getElementById(ELEMENT_ID)?.remove()\n  el.value = undefined\n}\n\n// ---------------------------------------------------------------------------\n// Helper Functions\n// ---------------------------------------------------------------------------\n\n/**\n * Hide the tooltip\n *\n * If the mouse is moving between the tooltip and the target we don't hide the tooltip\n */\nfunction hideTooltip(_e: Event) {\n  if (!isMovingOffElements(_e)) {\n    // Don't hide the tooltip if the mouse is moving between the tooltip and the target\n    return\n  }\n\n  // Clear any existing timer\n  clearTimer()\n\n  // Hide the tooltip\n  config.value = undefined\n}\n\n/**\n * Handle the escape key\n *\n * If the escape key is pressed we need to hide the tooltip\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/tooltip_role#keyboard_interactions\n */\nfunction handleEscape(e: KeyboardEvent) {\n  if (e.key === 'Escape') {\n    e.stopPropagation()\n    hideTooltip(e)\n  }\n}\n\n/**\n * Find the modal dialog containing an element, if there is one\n *\n * Only a dialog opened with `showModal()` is promoted to the browser's top layer, and\n * `:modal` matches exactly those. The `open` property is not a substitute: it is also\n * true for `dialog.show()`, which leaves the dialog in the normal flow where the\n * tooltip already paints correctly.\n */\nfunction getModalDialog(target: Element | undefined | null): HTMLDialogElement | undefined {\n  const dialog = target?.closest('dialog')\n\n  if (!dialog) {\n    return undefined\n  }\n\n  try {\n    return dialog.matches(':modal') ? dialog : undefined\n  } catch {\n    // `:modal` reached Safari a couple of releases after `showModal()` did, and an\n    // unknown pseudo-class throws. Treating it as \"not modal\" degrades to the old\n    // behaviour for that one case instead of breaking every tooltip on the page.\n    return undefined\n  }\n}\n\n/**\n * Move the tooltip element into the host it needs to paint above\n *\n * Top layer content paints above the rest of the document whatever `z-index` anything\n * else carries, so the only way to sit above a modal dialog is to live inside it.\n * Everywhere else the tooltip belongs on the body.\n *\n * This doubles as a repair step: appending an element that is no longer in the document\n * puts it back, which covers a dialog being unmounted while the tooltip sat inside it.\n *\n * Returns whether the element actually moved.\n */\nfunction moveTooltipToHost(target: Element | undefined | null): boolean {\n  if (!el.value) {\n    return false\n  }\n\n  const host = getModalDialog(target) ?? document.body\n\n  if (el.value.parentElement === host) {\n    return false\n  }\n\n  host.appendChild(el.value)\n\n  return true\n}\n\n/** Clears the current timer */\nfunction clearTimer() {\n  if (timer.value) {\n    clearTimeout(timer.value)\n    timer.value = undefined\n  }\n}\n\n/** Get all the parents of an element */\nfunction getAllParents(el: Element): Element[] {\n  const parents: Element[] = []\n  let parent = el.parentElement\n  while (parent) {\n    parents.push(parent)\n    parent = parent.parentElement\n  }\n  return parents\n}\n\n/** Check if mouse moved off the target but onto the tooltip */\nfunction isMovingOffElements(e: Event): boolean {\n  const target = unref(config.value?.targetRef)\n  if (e instanceof MouseEvent && e.relatedTarget instanceof Element && target) {\n    const relatedTargetParents = getAllParents(e.relatedTarget)\n    return (\n      e.relatedTarget.id !== ELEMENT_ID &&\n      !relatedTargetParents.some((parent) => parent.id === ELEMENT_ID) &&\n      e.relatedTarget !== target\n    )\n  }\n  return true\n}\n\n// ---------------------------------------------------------------------------\n// Tooltip Hook\n// ---------------------------------------------------------------------------\n\n/**\n * Create a tooltip\n *\n * If there isn't a tooltip element it will be created\n */\nexport function useTooltip(opts: TooltipConfiguration) {\n  initializeTooltipElement()\n\n  /**\n   * Show the tooltip after the delay if configured\n   */\n  function showTooltipAfterDelay(_e: Event) {\n    const delay = unref(opts.delay) ?? DEFAULT_DELAY\n    clearTimer()\n\n    // Show the tooltip after the delay\n    if (delay > 0) {\n      timer.value = setTimeout(() => showTooltip(_e), delay)\n    } else {\n      showTooltip(_e)\n    }\n  }\n\n  /**\n   * Show the tooltip\n   */\n  function showTooltip(_e: Event) {\n    clearTimer()\n\n    // Handle the escape key\n    document.addEventListener('keydown', handleEscape, { once: true, capture: true })\n\n    // Move the element before the config is assigned, not after. Floating UI watches the\n    // target with `flush: 'sync'`, so it measures the position the instant the config\n    // lands, and that measurement has to happen with the tooltip already in its final\n    // parent or the first frame is positioned against the wrong offset parent.\n    moveTooltipToHost(unref(opts.targetRef))\n\n    // Show the tooltip\n    config.value = opts\n  }\n\n  watch(\n    () => unref(opts.targetRef),\n    (newRef, oldRef) => {\n      if (oldRef) {\n        oldRef.removeEventListener('mouseenter', showTooltipAfterDelay)\n        oldRef.removeEventListener('mouseleave', hideTooltip)\n        oldRef.removeEventListener('focus', showTooltip)\n        oldRef.removeEventListener('blur', hideTooltip)\n\n        oldRef.removeAttribute('aria-describedby')\n      }\n      if (newRef) {\n        newRef.addEventListener('mouseenter', showTooltipAfterDelay)\n        newRef.addEventListener('mouseleave', hideTooltip)\n        newRef.addEventListener('focus', showTooltip)\n        newRef.addEventListener('blur', hideTooltip)\n\n        newRef.setAttribute('aria-describedby', ELEMENT_ID)\n      }\n    },\n    { immediate: true },\n  )\n\n  // Cleanup the tooltip when the component is unmounted\n  onScopeDispose(() => {\n    clearTimer()\n\n    const target = unref(opts.targetRef)\n    if (target) {\n      target.removeEventListener('mouseenter', showTooltipAfterDelay)\n      target.removeEventListener('mouseleave', hideTooltip)\n      target.removeEventListener('focus', showTooltip)\n      target.removeEventListener('blur', hideTooltip)\n      target.removeAttribute('aria-describedby')\n    }\n\n    // If the tooltip is showing on this target hide it\n    if (unref(config.value?.targetRef) === unref(opts.targetRef)) {\n      config.value = undefined\n    }\n  })\n}\n"],"mappings":"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"}

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

@@ -3,7 +3,7 @@ import ScalarCodeBlockCopy_default from "../ScalarCodeBlock/ScalarCodeBlockCopy.
 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({
+var ScalarVirtualCodeBlock_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarVirtualCodeBlock",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualCodeBlock.vue.script.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  lang = 'plaintext',\n  copy = 'hover',\n  lineHeight = 20,\n} = defineProps<{\n  /** Text content to display */\n  content: 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      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      :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      :showLang=\"true\"\n      :lang=\"lang\">\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":";;;;;;;;;;;;;;;;;;EAsCA,MAAM,EAAE,OAAO,WAAU;;uBAGvB,mBAwBM,OAAA,eAAA,mBAvBW,MAAA,GAAE,CAAA,oDAAA,kCAAA,CAAA,CAAA,EAAA,CAMjB,YAIoB,2BAAA;IAHlB,gBAAe;IACf,cAAa;IACZ,YAAY,QAAA;IACZ,MAAM,QAAA;wCAED,QAAA,QAAA,WAAA,EADR,YAWsB,6BAAA;;IATpB,OAAK,eAAA,CAAC,+CAA6C,CAAA,EAAA,eACzB,QAAA,SAAI,UAAA,CAAA,CAAA,CAAA;IAC7B,SAAS,QAAA;IACT,UAAU;IACV,MAAM,QAAA;;IACI,UAAQ,cAEuC,CADxD,YACwD,4BAAA,EAAtD,OAAM,+CAA6C,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarVirtualCodeBlock.vue.script.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  lang = 'plaintext',\n  copy = 'hover',\n  lineHeight = 20,\n} = defineProps<{\n  /** Text content to display */\n  content: 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      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      :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      :showLang=\"true\"\n      :lang=\"lang\">\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":";;;;;;;;;;;;;;;;;;EAsCA,MAAM,EAAE,OAAO,UAAU;;uBAGvB,mBAwBM,OAAA,eAAA,mBAvBW,MAAA,EAAA,CAAE,CAAA,oDAAA,iCAAA,CAAA,CAAA,GAAA,CAMjB,YAIoB,2BAAA;IAHlB,gBAAe;IACf,cAAa;IACZ,YAAY,QAAA;IACZ,MAAM,QAAA;wCAED,QAAA,QAAA,UAAA,GADR,YAWsB,6BAAA;;IATpB,OAAK,eAAA,CAAC,+CAA6C,CAAA,EAAA,eACzB,QAAA,SAAI,SAAA,CAAA,CAAA,CAAA;IAC7B,SAAS,QAAA;IACT,UAAU;IACV,MAAM,QAAA;;IACI,UAAQ,cAEuC,CADxD,YACwD,4BAAA,EAAtD,OAAM,8CAA6C,CAAA,CAAA,CAAA"}

package/dist/components/ScalarVirtualText/ScalarVirtualText.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"names":[],"mappings":"AAkXA;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;IAClB,6CAA6C;iBAChC,OAAO;;IAXpB,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;IAClB,6CAA6C;iBAChC,OAAO;;gBALP,MAAM;oBACF,MAAM;kBACR,MAAM;eACT,MAAM;gBAEL,OAAO;6EA+ZpB,CAAC"}
+{"version":3,"file":"ScalarVirtualText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarVirtualText/ScalarVirtualText.vue"],"names":[],"mappings":"AAkXA;;;;;;;;;;;;GAYG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY;IAEd,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;IAClB,6CAA6C;iBAChC,OAAO;;IAXpB,sBAAsB;UAChB,MAAM;IACZ;;;OAGG;iBACU,MAAM;qBACF,MAAM;mBACR,MAAM;gBACT,MAAM;IAClB,6CAA6C;iBAChC,OAAO;;gBALP,MAAM;oBACF,MAAM;kBACR,MAAM;eACT,MAAM;gBAEL,OAAO;6EAoapB,CAAC"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import ScalarVirtualText_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualText.vue.script.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-77b9d685"]]);
 //#endregion
 export { ScalarVirtualText_default as default };
 

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

@@ -5,7 +5,7 @@ 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({
+var ScalarVirtualText_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarVirtualText",
 	props: {
 		text: {},

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualText.vue.script.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":"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"}
+{"version":3,"file":"ScalarVirtualText.vue.script.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":"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"}

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

@@ -2,7 +2,7 @@ import _plugin_vue_export_helper_default from "../../_virtual/_plugin-vue_export
 import ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default from "./ScalarVirtualTextSearch.vue.script.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-95edadbb"]]);
 //#endregion
 export { ScalarVirtualTextSearch_default as default };
 

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

@@ -7,7 +7,7 @@ var _hoisted_1 = {
 };
 var _hoisted_2 = ["disabled"];
 var _hoisted_3 = ["disabled"];
-var ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+var ScalarVirtualTextSearch_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	__name: "ScalarVirtualTextSearch",
 	props: {
 		query: {},

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarVirtualTextSearch.vue.script.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":";;;;;;;;;;;;;;;;;;;;;;;EA2BA,MAAM,QAAQ;EASd,MAAM,OAAO;EAOb,MAAM,iBAAiB,IAA6B,KAAI;EAExD,MAAM,aAAa,IAAI,MAAM,MAAK;AAElC,cACQ,MAAM,QACX,QAAQ;AACP,cAAW,QAAQ;IAEvB;AAEA,QAAM,aAAa,QAAQ;AACzB,QAAK,gBAAgB,IAAG;IACzB;;EAGD,MAAM,cAAc;AACb,kBAAe,eAAe,OAAO,OAAO,CAAA;;;EAInD,MAAM,uBAAuB,MAAqB;AAChD,OAAI,EAAE,QAAQ,SAAS;AACrB,MAAE,gBAAe;AACjB,QAAI,EAAE,SAAU,MAAK,OAAM;QACtB,MAAK,OAAM;;AAElB,OAAI,EAAE,QAAQ,UAAU;AACtB,MAAE,gBAAe;AACjB,SAAK,QAAO;;;AAIhB,WAAa,EAAE,OAAO,CAAA;;uBAIpB,mBAmDM,OAAA;IAlDJ,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,IAAW,CAAA,OAAA,CAAA;;IACX,YAC2D,MAAA,0BAAA,EAAA,EAAzD,OAAM,kDAAgD,CAAA;mBACxD,mBASmC,SAAA;cAR7B;KAAJ,KAAI;6EACe,QAAA;KACnB,cAAW;KACX,cAAa;KACb,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;KACJ,WAAS;iCAPD,WAAA,MAAU,CAAA,CAAA;IASb,WAAA,SAAA,WAAA,EADR,mBAQO,QARP,YAQO,gBAJH,QAAA,aAAU,IAAA,GAAoB,QAAA,mBAAgB,EAAA,MAAW,QAAA,eAAA,aAAA,EAAA,EAAA,IAAA,mBAAA,IAAA,KAAA;8BAK7D,mBAAyC,QAAA,EAAnC,OAAM,4BAA0B,EAAA,MAAA,GAAA;IACtC,mBAQS,UAAA;KAPP,cAAW;KACX,OAAM;KACL,UAAU,QAAA,eAAU;KACrB,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;QACZ,YAAoC,MAAA,kBAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,EAAA,GAAA,WAAA;IAEnC,mBAQS,UAAA;KAPP,cAAW;KACX,OAAM;KACL,UAAU,QAAA,eAAU;KACrB,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;QACZ,YAAsC,MAAA,oBAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,EAAA,GAAA,WAAA;IAErC,mBAOS,UAAA;KANP,cAAW;KACX,OAAM;KACN,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,QAAA;QACZ,YAA8B,MAAA,YAAA,EAAA,EAAjB,OAAM,UAAQ,CAAA,CAAA,CAAA"}
+{"version":3,"file":"ScalarVirtualTextSearch.vue.script.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":";;;;;;;;;;;;;;;;;;;;;;;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;;uBAIpB,mBAmDM,OAAA;IAlDJ,OAAM;IACL,SAAK,OAAA,OAAA,OAAA,KAAA,oBAAN,CAAA,GAAW,CAAA,MAAA,CAAA;;IACX,YAC2D,MAAA,yBAAA,GAAA,EAAzD,OAAM,iDAAgD,CAAA;mBACxD,mBASmC,SAAA;cAR7B;KAAJ,KAAI;6EACe,QAAA;KACnB,cAAW;KACX,cAAa;KACb,OAAM;KACN,aAAY;KACZ,YAAW;KACX,MAAK;KACJ,WAAS;iCAPD,WAAA,KAAU,CAAA,CAAA;IASb,WAAA,SAAA,UAAA,GADR,mBAQO,QARP,YAQO,gBAJH,QAAA,aAAU,IAAA,GAAoB,QAAA,mBAAgB,EAAA,MAAW,QAAA,eAAA,YAAA,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;8BAK7D,mBAAyC,QAAA,EAAnC,OAAM,2BAA0B,GAAA,MAAA,EAAA;IACtC,mBAQS,UAAA;KAPP,cAAW;KACX,OAAM;KACL,UAAU,QAAA,eAAU;KACrB,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;QACZ,YAAoC,MAAA,iBAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,GAAA,GAAA,UAAA;IAEnC,mBAQS,UAAA;KAPP,cAAW;KACX,OAAM;KACL,UAAU,QAAA,eAAU;KACrB,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;QACZ,YAAsC,MAAA,mBAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,GAAA,GAAA,UAAA;IAErC,mBAOS,UAAA;KANP,cAAW;KACX,OAAM;KACN,OAAM;KACN,MAAK;KACJ,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,OAAA;QACZ,YAA8B,MAAA,WAAA,GAAA,EAAjB,OAAM,SAAQ,CAAA,CAAA,CAAA"}

package/dist/components/ScalarWrappingText/ScalarWrappingText.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalarWrappingText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGtD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,0TA2Dd,CAAC"}
+{"version":3,"file":"ScalarWrappingText.vue.d.ts","sourceRoot":"","sources":["../../../src/components/ScalarWrappingText/ScalarWrappingText.vue"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAA;AAGtD;;;;;;;;;GASG;wBACkB,OAAO,YAAY;AAAxC,wBAAyC;AAGzC,QAAA,MAAM,YAAY,0TA6Dd,CAAC"}

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

@@ -2,7 +2,7 @@ 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({
+var ScalarWrappingText_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	inheritAttrs: false,
 	__name: "ScalarWrappingText",
 	props: {

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

@@ -1 +1 @@
-{"version":3,"file":"ScalarWrappingText.vue.script.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":";;;;;;;;;;;;;;;;;;EA8BA,MAAM,OAAO;EAKb,MAAM,QAAQ,eAAyB;GACrC,MAAM,YAAY,IAAI,OAAO,QAAA,SAAS,QAAQ,QAAA,SAAS,IAAG;AAI1D,UAFe,QAAA,KAAK,QAAQ,WAAW,GAAG,KAAK,IAAG,CAEpC,MAAM,KAAK,CAAC,OAAO,QAAO;IACzC;;2BAGC,mBAIW,UAAA,MAAA,WAHW,MAAA,QAAZ,MAAM,MAAC;4DACT,GAAC,EAAA,CACI,MAAC,KAAA,WAAA,EAAZ,mBAAsB,OAAA,WAAA,IAAA,mBAAA,IAAA,KAAA,EAAA,gBAAA,gBAAG,KAAI,EAAA,EAAA,CAAA,EAAA,GAAA"}
+{"version":3,"file":"ScalarWrappingText.vue.script.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":";;;;;;;;;;;;;;;;;;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;;2BAGC,mBAIW,UAAA,MAAA,WAHW,MAAA,QAAZ,MAAM,MAAC;4DACT,EAAC,GAAA,CACI,MAAC,KAAA,UAAA,GAAZ,mBAAsB,OAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,GAAA,gBAAA,gBAAG,IAAI,GAAA,CAAA,CAAA,GAAA,EAAA"}

package/dist/components/ScalarWrappingText/constants.js

@@ -3,7 +3,12 @@
 * A list of preset regexes for word breaks
 */
 var PRESETS = {
+	/** Breaks on `/`, '.' and `-` for urls or file paths */
 	"path": /[\/\.-]/,
+	/**
+	* Breaks on capitals, `_` and `.` for properties written in
+	* camel, pascal or snake case
+	*/
 	"property": /[A-Z\_\.-]/
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarWrappingText/constants.ts"],"sourcesContent":["/**\n * A list of preset regexes for word breaks\n */\nexport const PRESETS = {\n  /** Breaks on `/`, '.' and `-` for urls or file paths */\n  'path': /[\\/\\.-]/,\n  /**\n   * Breaks on capitals, `_` and `.` for properties written in\n   * camel, pascal or snake case\n   */\n  'property': /[A-Z\\_\\.-]/,\n} as const satisfies Record<string, RegExp>\n"],"mappings":";;;;AAGA,IAAa,UAAU;CAErB,QAAQ;CAKR,YAAY;CACb"}
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/ScalarWrappingText/constants.ts"],"sourcesContent":["/**\n * A list of preset regexes for word breaks\n */\nexport const PRESETS = {\n  /** Breaks on `/`, '.' and `-` for urls or file paths */\n  'path': /[\\/\\.-]/,\n  /**\n   * Breaks on capitals, `_` and `.` for properties written in\n   * camel, pascal or snake case\n   */\n  'property': /[A-Z\\_\\.-]/,\n} as const satisfies Record<string, RegExp>\n"],"mappings":";;;;AAGA,IAAa,UAAU;;CAErB,QAAQ;;;;;CAKR,YAAY;AACd"}

package/dist/helpers/add-scalar-classes.js.map

@@ -1 +1 @@
-{"version":3,"file":"add-scalar-classes.js","names":[],"sources":["../../src/helpers/add-scalar-classes.ts"],"sourcesContent":["const CLASS_NAME = 'scalar-app'\nconst ROOT_ID = 'headlessui-portal-root'\n\n/**\n * Type guard to check if an element is an HTMLElement\n */\nconst isHTMLElement = (element: Node | Element | null): element is HTMLElement => {\n  return element !== null && element instanceof HTMLElement\n}\n\n/**\n * Helper method for adding the scalar classes to an element\n */\nconst addClasses = (el?: HTMLElement | undefined | null) => {\n  if (!el || el.classList.contains(CLASS_NAME)) {\n    return\n  }\n\n  el.classList.add(CLASS_NAME)\n}\n\n/**\n * Makes sure the scalar classes are added to the HeadlessUI portal root\n *\n * Returns the mutation observer instance\n */\nexport const addScalarClassesToHeadless = () => {\n  // Add classes to the element if it already exists\n  addClasses(document.getElementById(ROOT_ID))\n\n  // Mutation observer to catch the element being added or removed later\n  const observer = new MutationObserver((records: MutationRecord[]) =>\n    records.forEach(({ addedNodes }) =>\n      addedNodes.forEach((node) => {\n        if (isHTMLElement(node) && node.id === ROOT_ID) {\n          addClasses(node)\n        }\n      }),\n    ),\n  )\n\n  // Observe the body for changes to the portal root\n  observer.observe(document.body, { childList: true })\n\n  return observer\n}\n"],"mappings":";AAAA,IAAM,aAAa;AACnB,IAAM,UAAU;;;;AAKhB,IAAM,iBAAiB,YAA2D;AAChF,QAAO,YAAY,QAAQ,mBAAmB;;;;;AAMhD,IAAM,cAAc,OAAwC;AAC1D,KAAI,CAAC,MAAM,GAAG,UAAU,SAAS,WAAW,CAC1C;AAGF,IAAG,UAAU,IAAI,WAAW;;;;;;;AAQ9B,IAAa,mCAAmC;AAE9C,YAAW,SAAS,eAAe,QAAQ,CAAC;CAG5C,MAAM,WAAW,IAAI,kBAAkB,YACrC,QAAQ,SAAS,EAAE,iBACjB,WAAW,SAAS,SAAS;AAC3B,MAAI,cAAc,KAAK,IAAI,KAAK,OAAO,QACrC,YAAW,KAAK;GAElB,CACH,CACF;AAGD,UAAS,QAAQ,SAAS,MAAM,EAAE,WAAW,MAAM,CAAC;AAEpD,QAAO"}
+{"version":3,"file":"add-scalar-classes.js","names":[],"sources":["../../src/helpers/add-scalar-classes.ts"],"sourcesContent":["const CLASS_NAME = 'scalar-app'\nconst ROOT_ID = 'headlessui-portal-root'\n\n/**\n * Type guard to check if an element is an HTMLElement\n */\nconst isHTMLElement = (element: Node | Element | null): element is HTMLElement => {\n  return element !== null && element instanceof HTMLElement\n}\n\n/**\n * Helper method for adding the scalar classes to an element\n */\nconst addClasses = (el?: HTMLElement | undefined | null) => {\n  if (!el || el.classList.contains(CLASS_NAME)) {\n    return\n  }\n\n  el.classList.add(CLASS_NAME)\n}\n\n/**\n * Makes sure the scalar classes are added to the HeadlessUI portal root\n *\n * Returns the mutation observer instance\n */\nexport const addScalarClassesToHeadless = () => {\n  // Add classes to the element if it already exists\n  addClasses(document.getElementById(ROOT_ID))\n\n  // Mutation observer to catch the element being added or removed later\n  const observer = new MutationObserver((records: MutationRecord[]) =>\n    records.forEach(({ addedNodes }) =>\n      addedNodes.forEach((node) => {\n        if (isHTMLElement(node) && node.id === ROOT_ID) {\n          addClasses(node)\n        }\n      }),\n    ),\n  )\n\n  // Observe the body for changes to the portal root\n  observer.observe(document.body, { childList: true })\n\n  return observer\n}\n"],"mappings":";AAAA,IAAM,aAAa;AACnB,IAAM,UAAU;;;;AAKhB,IAAM,iBAAiB,YAA2D;CAChF,OAAO,YAAY,QAAQ,mBAAmB;AAChD;;;;AAKA,IAAM,cAAc,OAAwC;CAC1D,IAAI,CAAC,MAAM,GAAG,UAAU,SAAS,UAAU,GACzC;CAGF,GAAG,UAAU,IAAI,UAAU;AAC7B;;;;;;AAOA,IAAa,mCAAmC;CAE9C,WAAW,SAAS,eAAe,OAAO,CAAC;CAG3C,MAAM,WAAW,IAAI,kBAAkB,YACrC,QAAQ,SAAS,EAAE,iBACjB,WAAW,SAAS,SAAS;EAC3B,IAAI,cAAc,IAAI,KAAK,KAAK,OAAO,SACrC,WAAW,IAAI;CAEnB,CAAC,CACH,CACF;CAGA,SAAS,QAAQ,SAAS,MAAM,EAAE,WAAW,KAAK,CAAC;CAEnD,OAAO;AACT"}