markstream-svelte 2.0.12 → 2.0.14

package/dist/components/InfographicBlockNode.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
+  import { createPanGesture } from 'markstream-core'
   import { onDestroy, onMount, tick, untrack } from 'svelte'
   import { useSafeI18n } from '../i18n/useSafeI18n'
   import { getInfographic } from '../optional/infographic'
@@ -65,6 +66,9 @@
   let modalOpen = $state(false)
   let modalMarkup = $state('')
   let zoom = $state(1)
+  let translateX = $state(0)
+  let translateY = $state(0)
+  let isDragging = $state(false)
   let copyTimer: ReturnType<typeof setTimeout> | null = null
 
   let source = $derived(getString((node as any)?.code))
@@ -82,10 +86,18 @@
   let previewStyle = $derived([
     `min-height: ${previewHeight}px`,
     maxHeight && maxHeight !== 'none' ? `max-height: ${maxHeight}` : '',
+    `cursor: ${isDragging ? 'grabbing' : 'grab'}`,
   ].filter(Boolean).join('; '))
-  let transformStyle = $derived(`transform: scale(${zoom}); transform-origin: center center;`)
+  let transformStyle = $derived(`transform: translate(${translateX}px, ${translateY}px) scale(${zoom}); transform-origin: center center;`)
   let shouldRender = $derived(!(resolvedLoading && !source.trim()))
 
+  // The diagram is scaled to fit the preview box, so at fit zoom nothing is
+  // off-screen and panning only shifts it inside the box. Touch therefore keeps
+  // scrolling the page at that zoom (a chat is mostly scrolling) and only claims
+  // the gesture once the diagram is zoomed in and actually overflows the box.
+  // The fullscreen modal always claims it.
+  let panSurfaceClaimsTouch = $derived(modalOpen || zoom > 1)
+
   onMount(() => {
     mounted = true
     queueInfographicRender(true)
@@ -107,6 +119,8 @@
     renderToken += 1
     destroyInstance()
     lastCompletedRenderSignature = ''
+    // A drag in progress must not keep its window listeners after unmount.
+    panGesture.stop()
     if (copyTimer)
       clearTimeout(copyTimer)
   })
@@ -343,6 +357,39 @@
     zoom = Math.max(0.5, Math.round((zoom - 0.1) * 10) / 10)
   }
 
+  function resetZoom() {
+    zoom = 1
+    translateX = 0
+    translateY = 0
+  }
+
+  // Drag functionality. The gesture lifecycle (window listeners, pointer identity,
+  // lost releases) lives in markstream-core so every package pans identically.
+  const panGesture = createPanGesture({
+    getTranslate: () => ({ x: translateX, y: translateY }),
+    setTranslate: (next) => {
+      translateX = next.x
+      translateY = next.y
+    },
+    canStart: (event) => {
+      // Nothing to pan until the diagram exists. Without this the pending/error
+      // source panel the block renders in the preview would be claimed by the
+      // gesture, and `preventDefault` would take text selection away from it.
+      if (!hasPreview)
+        return false
+
+      // Touch pans only where the surface claims the gesture. Elsewhere the page
+      // keeps the swipe for scrolling, and panning along with it would shift the
+      // diagram by a few pixels before the browser takes the gesture over.
+      return event.pointerType !== 'touch' || panSurfaceClaimsTouch
+    },
+    onActiveChange: active => (isDragging = active),
+  })
+
+  function startDrag(event: PointerEvent) {
+    panGesture.start(event)
+  }
+
   function showButtonTooltip(event: MouseEvent | FocusEvent, text: string) {
     const target = event.currentTarget as HTMLElement | null
     if (!target || (target instanceof HTMLButtonElement && target.disabled))
@@ -453,10 +500,11 @@
               <button type="button" class="markstream-svelte-enhanced-block__action markstream-svelte-enhanced-block__action--icon infographic-action-btn" aria-label={t('common.zoomOut') || 'Zoom out'} onblur={() => hideTooltip()} onclick={zoomOut} onfocus={(event) => showButtonTooltip(event, t('common.zoomOut') || 'Zoom out')} onmouseleave={() => hideTooltip()} onmouseenter={(event) => showButtonTooltip(event, t('common.zoomOut') || 'Zoom out')}>
                 <svg aria-hidden="true" role="img" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21l-4.35-4.35M8 11h6"/></g></svg>
               </button>
-              <button type="button" class="markstream-svelte-enhanced-block__action infographic-action-btn infographic-zoom-reset" onblur={() => hideTooltip()} onclick={() => (zoom = 1)} onfocus={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')} onmouseleave={() => hideTooltip()} onmouseenter={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')}>{Math.round(zoom * 100)}%</button>
+              <button type="button" class="markstream-svelte-enhanced-block__action infographic-action-btn infographic-zoom-reset" onblur={() => hideTooltip()} onclick={resetZoom} onfocus={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')} onmouseleave={() => hideTooltip()} onmouseenter={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')}>{Math.round(zoom * 100)}%</button>
             </div>
           {/if}
-          <div class="infographic-render" style={previewStyle}>
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div class="infographic-render" class:markstream-svelte-pan-touch={panSurfaceClaimsTouch} style={previewStyle} onpointerdown={startDrag}>
             {#if !hasPreview && !renderError}
               <pre class="infographic-source-code infographic-pending-source"><code>{source}</code></pre>
             {/if}
@@ -480,13 +528,14 @@
               <button type="button" class="markstream-svelte-enhanced-block__action markstream-svelte-enhanced-block__action--icon infographic-action-btn" aria-label={t('common.zoomOut') || 'Zoom out'} onclick={zoomOut}>
                 <svg aria-hidden="true" role="img" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21l-4.35-4.35M8 11h6"/></g></svg>
               </button>
-              <button type="button" class="markstream-svelte-enhanced-block__action infographic-action-btn infographic-zoom-reset" aria-label={t('common.resetZoom') || 'Reset zoom'} onclick={() => (zoom = 1)}>{Math.round(zoom * 100)}%</button>
+              <button type="button" class="markstream-svelte-enhanced-block__action infographic-action-btn infographic-zoom-reset" aria-label={t('common.resetZoom') || 'Reset zoom'} onclick={resetZoom}>{Math.round(zoom * 100)}%</button>
               <button type="button" class="markstream-svelte-enhanced-block__action markstream-svelte-enhanced-block__action--icon infographic-action-btn" aria-label={t('common.close') || 'Close'} onclick={closeModal}>
                 <svg aria-hidden="true" role="img" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>
               </button>
             </div>
-            <div class="mermaid-modal-body">
-              <div class="mermaid-modal-content infographic-modal-content" style={`transform: scale(${zoom});`}>{@html modalMarkup}</div>
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="mermaid-modal-body" class:markstream-svelte-pan-touch={panSurfaceClaimsTouch} style={`cursor: ${isDragging ? 'grabbing' : 'grab'}`} onpointerdown={startDrag}>
+              <div class="mermaid-modal-content infographic-modal-content" style={`transform: translate(${translateX}px, ${translateY}px) scale(${zoom});`}>{@html modalMarkup}</div>
             </div>
           </div>
         </div>

package/dist/components/MermaidBlockNode.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { SvelteRenderableNode, SvelteRenderContext } from './shared/node-helpers'
+  import { createPanGesture } from 'markstream-core'
   import { onMount, tick, untrack } from 'svelte'
   import { toSafeMermaidSvgMarkup } from 'stream-markdown-parser'
   import { useSafeI18n } from '../i18n/useSafeI18n'
@@ -77,6 +78,9 @@
   let showSource = $state(false)
   let modalOpen = $state(false)
   let zoom = $state(1)
+  let translateX = $state(0)
+  let translateY = $state(0)
+  let isDragging = $state(false)
   let blockHost: HTMLElement | null = $state(null)
   let previewHost: HTMLElement | null = $state(null)
   let modalHost: HTMLElement | null = $state(null)
@@ -100,11 +104,19 @@
   let previewStyle = $derived([
     `min-height: ${previewHeight}px`,
     maxHeight && maxHeight !== 'none' ? `max-height: ${maxHeight}` : '',
-    `transform: scale(${zoom})`,
+    `transform: translate(${translateX}px, ${translateY}px) scale(${zoom})`,
+    `cursor: ${isDragging ? 'grabbing' : 'grab'}`,
   ].filter(Boolean).join('; '))
   let shouldRender = $derived(!(resolvedLoading && !source.trim()))
   let canUsePreview = $derived(Boolean(svgMarkup && !showSource))
 
+  // The diagram is scaled to fit the preview box, so at fit zoom nothing is
+  // off-screen and panning only shifts it inside the box. Touch therefore keeps
+  // scrolling the page at that zoom (a chat is mostly scrolling) and only claims
+  // the gesture once the diagram is zoomed in and actually overflows the box.
+  // The fullscreen modal always claims it.
+  let panSurfaceClaimsTouch = $derived(modalOpen || zoom > 1)
+
   onMount(() => {
     mounted = true
     scheduleRender(true)
@@ -113,6 +125,8 @@
       mounted = false
       renderToken += 1
       clearRenderTimer()
+      // A drag in progress must not keep its window listeners after unmount.
+      panGesture.stop()
       if (copyTimer)
         clearTimeout(copyTimer)
     }
@@ -460,6 +474,39 @@
     zoom = Math.max(0.5, Math.round((zoom - 0.1) * 10) / 10)
   }
 
+  function resetZoom() {
+    zoom = 1
+    translateX = 0
+    translateY = 0
+  }
+
+  // Drag functionality. The gesture lifecycle (window listeners, pointer identity,
+  // lost releases) lives in markstream-core so every package pans identically.
+  const panGesture = createPanGesture({
+    getTranslate: () => ({ x: translateX, y: translateY }),
+    setTranslate: (next) => {
+      translateX = next.x
+      translateY = next.y
+    },
+    canStart: (event) => {
+      // Nothing to pan until the diagram exists. Without this the pending/error
+      // source panel the block renders in the preview would be claimed by the
+      // gesture, and `preventDefault` would take text selection away from it.
+      if (!svgMarkup)
+        return false
+
+      // Touch pans only where the surface claims the gesture. Elsewhere the page
+      // keeps the swipe for scrolling, and panning along with it would shift the
+      // diagram by a few pixels before the browser takes the gesture over.
+      return event.pointerType !== 'touch' || panSurfaceClaimsTouch
+    },
+    onActiveChange: active => (isDragging = active),
+  })
+
+  function startDrag(event: PointerEvent) {
+    panGesture.start(event)
+  }
+
   function showButtonTooltip(event: MouseEvent | FocusEvent, text: string, placement: TooltipPlacement = 'top') {
     const target = event.currentTarget as HTMLElement | null
     if (!target || (target instanceof HTMLButtonElement && target.disabled))
@@ -568,10 +615,11 @@
               <button type="button" class="mermaid-btn mermaid-action-btn mermaid-btn--icon" aria-label={t('common.zoomOut')} onblur={() => hideTooltip()} onclick={zoomOut} onfocus={(event) => showButtonTooltip(event, t('common.zoomOut') || 'Zoom out')} onmouseleave={() => hideTooltip()} onmouseenter={(event) => showButtonTooltip(event, t('common.zoomOut') || 'Zoom out')}>
                 <svg aria-hidden="true" role="img" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21l-4.35-4.35M8 11h6"/></g></svg>
               </button>
-              <button type="button" class="mermaid-btn mermaid-action-btn mermaid-zoom-reset" aria-label={t('common.resetZoom')} onblur={() => hideTooltip()} onclick={() => (zoom = 1)} onfocus={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')} onmouseleave={() => hideTooltip()} onmouseenter={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')}>{Math.round(zoom * 100)}%</button>
+              <button type="button" class="mermaid-btn mermaid-action-btn mermaid-zoom-reset" aria-label={t('common.resetZoom')} onblur={() => hideTooltip()} onclick={resetZoom} onfocus={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')} onmouseleave={() => hideTooltip()} onmouseenter={(event) => showButtonTooltip(event, t('common.resetZoom') || 'Reset zoom')}>{Math.round(zoom * 100)}%</button>
             </div>
           {/if}
-          <div bind:this={previewHost} class="mermaid-preview markstream-svelte-mermaid" style={previewStyle}>
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          <div bind:this={previewHost} class="mermaid-preview markstream-svelte-mermaid" class:markstream-svelte-pan-touch={panSurfaceClaimsTouch} style={previewStyle} onpointerdown={startDrag}>
             {#if svgMarkup}
               {@html svgMarkup}
             {:else if renderError}
@@ -598,13 +646,14 @@
               <button type="button" class="mermaid-btn mermaid-action-btn mermaid-btn--icon" aria-label={t('common.zoomOut')} onclick={zoomOut}>
                 <svg aria-hidden="true" role="img" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21l-4.35-4.35M8 11h6"/></g></svg>
               </button>
-              <button type="button" class="mermaid-btn mermaid-action-btn mermaid-zoom-reset" aria-label={t('common.resetZoom')} onclick={() => (zoom = 1)}>{Math.round(zoom * 100)}%</button>
+              <button type="button" class="mermaid-btn mermaid-action-btn mermaid-zoom-reset" aria-label={t('common.resetZoom')} onclick={resetZoom}>{Math.round(zoom * 100)}%</button>
               <button type="button" class="mermaid-btn mermaid-action-btn mermaid-btn--icon" aria-label={t('common.close')} onclick={closeModal}>
                 <svg aria-hidden="true" role="img" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/></svg>
               </button>
             </div>
-            <div class="mermaid-modal-body">
-              <div bind:this={modalHost} class="mermaid-modal-content markstream-svelte-mermaid" style={`transform: scale(${zoom});`}>{@html svgMarkup}</div>
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div class="mermaid-modal-body" class:markstream-svelte-pan-touch={panSurfaceClaimsTouch} style={`cursor: ${isDragging ? 'grabbing' : 'grab'}`} onpointerdown={startDrag}>
+              <div bind:this={modalHost} class="mermaid-modal-content markstream-svelte-mermaid" style={`transform: translate(${translateX}px, ${translateY}px) scale(${zoom});`}>{@html svgMarkup}</div>
             </div>
           </div>
         </div>

package/dist/index.css

@@ -1099,9 +1099,14 @@ body > div[id^="dmermaid-"] {
   color: var(--code-fg);
 }
 
+/* The pan transform is applied to `.mermaid-preview` itself, and a transformed
+   element paints above the header it overlaps; the body is what clips the panned
+   diagram back into the preview area. clip (not auto/hidden) means it is not a
+   scroll container at all, so a touch swipe keeps scrolling the page. */
 .markstream-svelte .mermaid-body {
   position: relative;
   padding: 0;
+  overflow: clip;
 }
 
 .markstream-svelte .markstream-svelte-zoom-controls {
@@ -1128,7 +1133,11 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .mermaid-preview {
   width: 100%;
   min-height: var(--ms-size-diagram-min-height);
-  overflow: auto;
+  /* clip, not auto: an overflow:auto pan surface is a "user-scrollable" box,
+     so a touch swipe latches onto it and, when nothing can scroll there, the
+     page does not scroll either. clip is never a scroll container and clips
+     the same (the diagram is scaled to fit). */
+  overflow: clip;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1141,6 +1150,14 @@ body > div[id^="dmermaid-"] {
   height: auto;
 }
 
+/* The pan surface takes the touch gesture instead of letting the page scroller
+   claim it, which would fire pointercancel and stop the drag mid-gesture. The
+   class is only bound while panning can reveal something (zoomed in, or in the
+   fullscreen modal), so at fit zoom a swipe keeps scrolling the page. */
+.markstream-svelte .markstream-svelte-pan-touch {
+  touch-action: none;
+}
+
 .markstream-svelte .mermaid-source {
   margin: 0;
   padding: var(--ms-inset-panel-body);
@@ -1401,6 +1418,10 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .infographic-block-body {
   padding: 0;
   background: var(--diagram-bg);
+  /* The pan transform is applied to .infographic-render itself, so the body is
+     what clips the panned diagram back into the preview area. clip (not the
+     base __body's auto) so it is not a scroll container a swipe could latch on. */
+  overflow: clip;
 }
 
 .markstream-svelte .infographic-source {
@@ -2162,7 +2183,9 @@ body > div[id^="dmermaid-"] {
   position: relative;
   width: 100%;
   min-height: var(--ms-size-diagram-min-height);
-  overflow: auto;
+  /* clip, not auto — same reason as .mermaid-preview: a scrollable pan surface
+     would latch touch swipes and stop the page from scrolling. */
+  overflow: clip;
   text-align: center;
 }
 

package/dist/index.px.css

@@ -1099,9 +1099,14 @@ body > div[id^="dmermaid-"] {
   color: var(--code-fg);
 }
 
+/* The pan transform is applied to `.mermaid-preview` itself, and a transformed
+   element paints above the header it overlaps; the body is what clips the panned
+   diagram back into the preview area. clip (not auto/hidden) means it is not a
+   scroll container at all, so a touch swipe keeps scrolling the page. */
 .markstream-svelte .mermaid-body {
   position: relative;
   padding: 0;
+  overflow: clip;
 }
 
 .markstream-svelte .markstream-svelte-zoom-controls {
@@ -1128,7 +1133,11 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .mermaid-preview {
   width: 100%;
   min-height: var(--ms-size-diagram-min-height);
-  overflow: auto;
+  /* clip, not auto: an overflow:auto pan surface is a "user-scrollable" box,
+     so a touch swipe latches onto it and, when nothing can scroll there, the
+     page does not scroll either. clip is never a scroll container and clips
+     the same (the diagram is scaled to fit). */
+  overflow: clip;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1141,6 +1150,14 @@ body > div[id^="dmermaid-"] {
   height: auto;
 }
 
+/* The pan surface takes the touch gesture instead of letting the page scroller
+   claim it, which would fire pointercancel and stop the drag mid-gesture. The
+   class is only bound while panning can reveal something (zoomed in, or in the
+   fullscreen modal), so at fit zoom a swipe keeps scrolling the page. */
+.markstream-svelte .markstream-svelte-pan-touch {
+  touch-action: none;
+}
+
 .markstream-svelte .mermaid-source {
   margin: 0;
   padding: var(--ms-inset-panel-body);
@@ -1401,6 +1418,10 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .infographic-block-body {
   padding: 0;
   background: var(--diagram-bg);
+  /* The pan transform is applied to .infographic-render itself, so the body is
+     what clips the panned diagram back into the preview area. clip (not the
+     base __body's auto) so it is not a scroll container a swipe could latch on. */
+  overflow: clip;
 }
 
 .markstream-svelte .infographic-source {
@@ -2162,7 +2183,9 @@ body > div[id^="dmermaid-"] {
   position: relative;
   width: 100%;
   min-height: var(--ms-size-diagram-min-height);
-  overflow: auto;
+  /* clip, not auto — same reason as .mermaid-preview: a scrollable pan surface
+     would latch touch swipes and stop the page from scrolling. */
+  overflow: clip;
   text-align: center;
 }
 

package/dist/index.tailwind.css

@@ -1099,9 +1099,14 @@ body > div[id^="dmermaid-"] {
   color: var(--code-fg);
 }
 
+/* The pan transform is applied to `.mermaid-preview` itself, and a transformed
+   element paints above the header it overlaps; the body is what clips the panned
+   diagram back into the preview area. clip (not auto/hidden) means it is not a
+   scroll container at all, so a touch swipe keeps scrolling the page. */
 .markstream-svelte .mermaid-body {
   position: relative;
   padding: 0;
+  overflow: clip;
 }
 
 .markstream-svelte .markstream-svelte-zoom-controls {
@@ -1128,7 +1133,11 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .mermaid-preview {
   width: 100%;
   min-height: var(--ms-size-diagram-min-height);
-  overflow: auto;
+  /* clip, not auto: an overflow:auto pan surface is a "user-scrollable" box,
+     so a touch swipe latches onto it and, when nothing can scroll there, the
+     page does not scroll either. clip is never a scroll container and clips
+     the same (the diagram is scaled to fit). */
+  overflow: clip;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1141,6 +1150,14 @@ body > div[id^="dmermaid-"] {
   height: auto;
 }
 
+/* The pan surface takes the touch gesture instead of letting the page scroller
+   claim it, which would fire pointercancel and stop the drag mid-gesture. The
+   class is only bound while panning can reveal something (zoomed in, or in the
+   fullscreen modal), so at fit zoom a swipe keeps scrolling the page. */
+.markstream-svelte .markstream-svelte-pan-touch {
+  touch-action: none;
+}
+
 .markstream-svelte .mermaid-source {
   margin: 0;
   padding: var(--ms-inset-panel-body);
@@ -1401,6 +1418,10 @@ body > div[id^="dmermaid-"] {
 .markstream-svelte .infographic-block-body {
   padding: 0;
   background: var(--diagram-bg);
+  /* The pan transform is applied to .infographic-render itself, so the body is
+     what clips the panned diagram back into the preview area. clip (not the
+     base __body's auto) so it is not a scroll container a swipe could latch on. */
+  overflow: clip;
 }
 
 .markstream-svelte .infographic-source {
@@ -2162,7 +2183,9 @@ body > div[id^="dmermaid-"] {
   position: relative;
   width: 100%;
   min-height: var(--ms-size-diagram-min-height);
-  overflow: auto;
+  /* clip, not auto — same reason as .mermaid-preview: a scrollable pan surface
+     would latch touch swipes and stop the page from scrolling. */
+  overflow: clip;
   text-align: center;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "markstream-svelte",
   "type": "module",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "Svelte 5 and SvelteKit streaming Markdown renderer for AI chat, LLM token streams, SSE/WebSocket output, incomplete Markdown, Mermaid, KaTeX, stream-diffs powered code blocks, and custom Svelte components.",
   "author": "Simon He",
   "license": "MIT",
@@ -100,8 +100,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.8.0",
-    "markstream-core": "2.0.12",
-    "stream-markdown-parser": "1.2.16"
+    "markstream-core": "2.0.14",
+    "stream-markdown-parser": "1.2.17"
   },
   "devDependencies": {
     "@sveltejs/package": "^2.5.8",