@tnotesjs/core 0.4.1 → 0.5.0

package/dist/vitepress/config/index.js

@@ -28,7 +28,8 @@ var DEFAULT_OPTIMIZE_DEPS_INCLUDE = [
   // Mermaid 11 的 ESM chunk 默认导入 CommonJS fastdom。pnpm 的严格
   // 依赖布局下 Vite 无法从知识库根目录自动发现这条嵌套依赖，开发
   // 模式会直接把 fastdom.js 当作 ESM 加载并导致整页白屏。
-  "@tnotesjs/core > mermaid > fastdom"
+  "@tnotesjs/core > mermaid > fastdom",
+  "@tnotesjs/core > mermaid > fastdom/extensions/fastdom-promised.js"
 ];
 
 // vitepress/configs/constants.ts
@@ -64,45 +65,24 @@ import mila from "markdown-it-link-attributes";
 import markdownItTaskLists from "markdown-it-task-lists";
 import path from "path";
 
-// vitepress/components/MindmapPreview/compat.ts
+// vitepress/components/MindmapPreview/markdown.ts
 function cleanHeadingText(value) {
   return value.trim().replace(/\s+#+\s*$/, "").trim();
 }
-function promoteLegacyRootList(body, rootTitle) {
-  const firstContentIndex = body.findIndex((line) => line.trim() !== "");
-  if (firstContentIndex < 0) return body;
-  const firstItem = body[firstContentIndex].match(/^[-+*]\s+(.+?)\s*$/);
-  if (!firstItem || cleanHeadingText(firstItem[1]) !== rootTitle) return body;
-  const descendants = body.slice(firstContentIndex + 1);
-  if (descendants.some((line) => line.trim() !== "" && !/^\s{2,}/.test(line))) return body;
-  return [
-    ...body.slice(0, firstContentIndex),
-    ...descendants.map((line) => line.replace(/^ {2}/, ""))
-  ];
-}
-function parseMarkmapFence(openLine) {
+function parseMindmapFence(openLine) {
   const fenceBody = openLine.trim().replace(/^`+\s*/, "");
-  const nameMatch = fenceBody.match(/^(mindmap|markmap)(?=\s|\{|\[|$)/);
-  if (!nameMatch) return {};
-  let rest = fenceBody.slice(nameMatch[1].length).trim();
+  const nameMatch = fenceBody.match(/^mindmap(?=\s|\[|$)/);
+  if (!nameMatch) return null;
+  let rest = fenceBody.slice(nameMatch[0].length).trim();
   const options = {};
   const titleMatch = rest.match(/\[([^\]]+)\]/);
   if (titleMatch) {
-    options.title = titleMatch[1].trim();
+    options.title = cleanHeadingText(titleMatch[1]) || void 0;
     rest = `${rest.slice(0, titleMatch.index)} ${rest.slice((titleMatch.index ?? 0) + titleMatch[0].length)}`.trim();
   }
-  const braceMatch = rest.match(/\{([^}]*)\}/);
-  const paramPart = braceMatch ? braceMatch[1].trim() : rest;
-  const tokens = paramPart.match(/"[^"]*"|'[^']*'|\S+/g) ?? [];
-  for (const [index, token] of tokens.entries()) {
-    if (/^\d+$/.test(token) && index === 0) {
-      options.initialExpandLevel = Number(token);
-      continue;
-    }
-    const pair = token.match(/^([^=:\s]+)\s*(?:=|:)\s*(.+)$/);
-    if (!pair || pair[1] !== "initialExpandLevel") continue;
-    const value = pair[2].replace(/^['"]|['"]$/g, "");
-    if (/^\d+$/.test(value)) options.initialExpandLevel = Number(value);
+  if (rest && !/^\d+$/.test(rest)) return null;
+  if (rest) {
+    options.initialExpandLevel = Math.max(1, Number(rest));
   }
   return options;
 }
@@ -131,30 +111,12 @@ function normalizeMindmapMarkdown(source, options = {}) {
     break;
   }
   const rootTitle = cleanHeadingText(options.title || existingTitle || options.defaultTitle || "root") || "root";
-  const body = [];
-  let headingDepth = null;
-  for (let index = 0; index < lines.length; index++) {
-    if (index === rootIndex) continue;
-    const line = lines[index];
-    const heading = line.match(/^\s{0,3}(#{2,6})\s+(.+?)\s*$/);
-    if (heading) {
-      headingDepth = heading[1].length - 2;
-      body.push(`${"  ".repeat(headingDepth)}- ${cleanHeadingText(heading[2])}`);
-      continue;
-    }
-    const listItem = line.match(/^(\s*)([-+*])\s+(.+)$/);
-    if (listItem && headingDepth !== null) {
-      body.push(`${"  ".repeat(headingDepth + 1)}${line}`);
-      continue;
-    }
-    body.push(line);
-  }
-  const normalizedBody = promoteLegacyRootList(body, rootTitle);
-  while (normalizedBody[0]?.trim() === "") normalizedBody.shift();
-  while (normalizedBody[normalizedBody.length - 1]?.trim() === "") normalizedBody.pop();
-  return normalizedBody.length > 0 ? `# ${rootTitle}
+  const body = lines.filter((_, index) => index !== rootIndex);
+  while (body[0]?.trim() === "") body.shift();
+  while (body[body.length - 1]?.trim() === "") body.pop();
+  return body.length > 0 ? `# ${rootTitle}
 
-${normalizedBody.join("\n")}
+${body.join("\n")}
 ` : `# ${rootTitle}
 `;
 }
@@ -191,145 +153,13 @@ var simpleMermaidMarkdown = (md) => {
     return fence(tokens, index, options, env, slf);
   };
 };
-function configureMindmapContainer(md) {
-  md.use(markdownItContainer, "markmap", {
-    marker: "`",
-    validate(params) {
-      return (params || "").trim().startsWith("markmap");
-    },
-    render() {
-      return "";
-    }
-  });
-  md.core.ruler.after("block", "tn_replace_markmap_container", (state) => {
-    const src = state.env.source || "";
-    const lines = src.split("\n");
-    const tokens = state.tokens;
-    for (let i = 0; i < tokens.length; i++) {
-      const t = tokens[i];
-      if (t.type === "container_markmap_open") {
-        const containerName = "markmap";
-        const closeType = "container_markmap_close";
-        let j = i + 1;
-        while (j < tokens.length && tokens[j].type !== closeType)
-          j++;
-        if (j >= tokens.length) continue;
-        const open = t;
-        const startLine = open.map ? open.map[0] + 1 : null;
-        const endLine = open.map ? open.map[1] - 1 : null;
-        const params = {};
-        let explicitTitle;
-        if (open.map && typeof open.map[0] === "number") {
-          const openLine = (lines[open.map[0]] || "").trim();
-          const fenceOptions = parseMarkmapFence(openLine);
-          explicitTitle = fenceOptions.title;
-          let paramPart = "";
-          const braceMatch = openLine.match(/\{([^}]*)\}/);
-          if (braceMatch) {
-            paramPart = braceMatch[1].trim();
-          } else {
-            const after = openLine.replace(/^`+\s*/, "");
-            if (after.startsWith(containerName)) {
-              paramPart = after.slice(containerName.length).trim();
-            }
-          }
-          if (fenceOptions.initialExpandLevel !== void 0) {
-            params.initialExpandLevel = fenceOptions.initialExpandLevel;
-          }
-          if (paramPart) {
-            const tokenArr = paramPart.match(/"[^"]*"|'[^']*'|\S+/g) || [];
-            let startIdx = 0;
-            if (tokenArr.length > 0 && /^\d+$/.test(tokenArr[0])) {
-              params.initialExpandLevel = Number(tokenArr[0]);
-              startIdx = 1;
-            }
-            for (let k = startIdx; k < tokenArr.length; k++) {
-              const pair = tokenArr[k];
-              if (!pair) continue;
-              const m = pair.match(/^([^=:\s]+)\s*(=|:)\s*(.+)$/);
-              if (m) {
-                const key = m[1];
-                let val = m[3];
-                if (/^".*"$/.test(val) && val.length >= 2 || /^'.*'$/.test(val) && val.length >= 2) {
-                  val = val.slice(1, -1);
-                } else if (/^\d+$/.test(val)) {
-                  val = String(Number(val));
-                }
-                params[key] = val;
-              }
-            }
-          }
-        }
-        let content = "";
-        if (startLine !== null && endLine !== null) {
-          for (let k = startLine; k <= endLine && k < lines.length; k++) {
-            content += lines[k] + "\n";
-          }
-        } else {
-          for (let k = i + 1; k < j; k++) {
-            content += tokens[k].content || "";
-          }
-        }
-        const firstNonEmptyLine = (content || "").split("\n").find((ln) => ln.trim() !== "") || "";
-        const reference = parseMindmapReference(firstNonEmptyLine);
-        let referencedTitle;
-        if (reference) {
-          const refRaw = reference.path;
-          referencedTitle = reference.title;
-          try {
-            const env = state.env || {};
-            const possibleRel = env.relativePath || env.path || env.filePath || env.file || "";
-            let refFullPath = refRaw;
-            if (!path.isAbsolute(refRaw)) {
-              if (possibleRel) {
-                const currentDir = path.dirname(possibleRel);
-                refFullPath = path.resolve(process.cwd(), currentDir, refRaw);
-              } else {
-                refFullPath = path.resolve(process.cwd(), refRaw);
-              }
-            } else {
-              refFullPath = refRaw;
-            }
-            const fileContent = fs.readFileSync(refFullPath, "utf-8");
-            content = fileContent;
-          } catch (err) {
-            const errorMsg = err instanceof Error ? err.message : String(err);
-            content = `- Failed to load referenced file: ${esc(String(refRaw))}
-  - Error: ${esc(errorMsg)}`;
-          }
-        }
-        content = normalizeMindmapMarkdown(content, {
-          title: explicitTitle || referencedTitle
-        });
-        const encodedContent = encodeURIComponent(content.trim());
-        let propsStr = `content="${encodedContent}"`;
-        for (const [k, v] of Object.entries(params)) {
-          if (typeof v === "number" || /^\d+$/.test(String(v))) {
-            propsStr += ` :${k}="${v}"`;
-          } else {
-            const safe = String(v).replace(/"/g, "&quot;");
-            propsStr += ` ${k}="${safe}"`;
-          }
-        }
-        const html = `<MindmapPreview ${propsStr}></MindmapPreview>
-`;
-        const htmlToken = new state.Token("html_block", "", 0);
-        htmlToken.content = html;
-        tokens.splice(i, j - i + 1, htmlToken);
-      }
-    }
-    return true;
-  });
-}
 function configureMindmapFence(md) {
   const fence = md.renderer.rules.fence ? md.renderer.rules.fence.bind(md.renderer.rules) : () => "";
   md.renderer.rules.fence = (tokens, index, options, env, slf) => {
     const token = tokens[index];
     const info = token.info.trim();
-    if (!/^mindmap(?=\s|\{|\[|$)/.test(info)) {
-      return fence(tokens, index, options, env, slf);
-    }
-    const fenceOptions = parseMarkmapFence(info);
+    const fenceOptions = parseMindmapFence(info);
+    if (!fenceOptions) return fence(tokens, index, options, env, slf);
     let content = token.content;
     const firstNonEmptyLine = content.split("\n").find((line) => line.trim()) ?? "";
     const reference = parseMindmapReference(firstNonEmptyLine);
@@ -423,7 +253,6 @@ function getMarkdownConfig() {
         return true;
       });
       simpleMermaidMarkdown(md);
-      configureMindmapContainer(md);
       configureMindmapFence(md);
       md.use(markdownItTaskLists);
       md.use(mila, {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@tnotesjs/core",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "TNotes 知识库核心框架 —— 基于 VitePress 的笔记管理系统",
   "type": "module",
   "packageManager": "pnpm@10.17.1",
   "bin": {
-    "tnotes": "./dist/cli/index.js"
+    "tnotes": "dist/cli/index.js"
   },
   "exports": {
     ".": {
@@ -85,7 +85,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/tnotesjs/core"
+    "url": "git+https://github.com/tnotesjs/core.git"
   },
   "keywords": [
     "tnotes",

package/vitepress/components/MindmapPreview/MindmapPreview.vue

@@ -3,9 +3,12 @@ import { CanvasViewer, MindmapSession } from '@tnotesjs/mindmap-core'
 import { onContentUpdated, useData } from 'vitepress'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
 
-import { normalizeMindmapMarkdown } from './compat'
 import { applyInitialExpandLevel } from './expandLevel'
+import { normalizeMindmapMarkdown } from './markdown'
 import MindmapOutlineNode from './MindmapOutlineNode.vue'
+import MindmapViewIcon from './MindmapViewIcon.vue'
+import { gateMindmapWheel } from './wheelInteraction'
+import { icon__fullscreen, icon__fullscreen_exit, icon__zoom_fit } from '../../assets/icons'
 
 type PreviewView = 'mindmap' | 'outline' | 'source'
 
@@ -19,12 +22,21 @@ const props = withDefaults(defineProps<{
 
 const { isDark } = useData()
 const activeView = ref<PreviewView>('mindmap')
+const previewRoot = ref<HTMLElement | null>(null)
 const canvasHost = ref<HTMLElement | null>(null)
 const session = shallowRef<MindmapSession | null>(null)
 const renderVersion = ref(0)
+const isFullscreen = ref(false)
+const isCanvasActive = ref(false)
 let viewer: CanvasViewer | null = null
 let mounted = false
 
+const viewOptions = [
+  { value: 'mindmap', label: '脑图' },
+  { value: 'outline', label: '大纲' },
+  { value: 'source', label: '源码' },
+] as const
+
 function decodeContent(value: string): string {
   try {
     return decodeURIComponent(value)
@@ -61,6 +73,7 @@ function rebuildSession(): void {
 
 function setView(view: PreviewView): void {
   activeView.value = view
+  if (view !== 'mindmap') isCanvasActive.value = false
   if (view === 'mindmap') void nextTick(() => viewer?.zoomToFit())
 }
 
@@ -72,11 +85,51 @@ function exitFocusTo(index: number): void {
   session.value?.exitFocusTo(index)
 }
 
+async function toggleFullscreen(): Promise<void> {
+  const root = previewRoot.value
+  if (!root) return
+
+  try {
+    if (document.fullscreenElement === root) await document.exitFullscreen()
+    else await root.requestFullscreen()
+  } catch {
+    // Fullscreen can be rejected by the browser or an embedded document policy.
+  }
+}
+
+function handleFullscreenChange(): void {
+  isFullscreen.value = document.fullscreenElement === previewRoot.value
+  if (activeView.value === 'mindmap') void nextTick(() => viewer?.zoomToFit())
+}
+
+function activateCanvas(): void {
+  isCanvasActive.value = true
+}
+
+function handleCanvasWheelCapture(event: WheelEvent): void {
+  gateMindmapWheel(event, isCanvasActive.value)
+}
+
+function handleDocumentPointerDown(event: PointerEvent): void {
+  if (event.target instanceof Node && !previewRoot.value?.contains(event.target)) {
+    isCanvasActive.value = false
+  }
+}
+
+function handleDocumentKeydown(event: KeyboardEvent): void {
+  if (event.key !== 'Escape' || !isCanvasActive.value) return
+  isCanvasActive.value = false
+  canvasHost.value?.blur()
+}
+
 watch([normalizedContent, () => props.initialExpandLevel], rebuildSession, { immediate: true })
 watch(isDark, (dark) => viewer?.setTheme(dark ? 'dark' : 'light'))
 
 onMounted(() => {
   mounted = true
+  document.addEventListener('fullscreenchange', handleFullscreenChange)
+  document.addEventListener('pointerdown', handleDocumentPointerDown, true)
+  document.addEventListener('keydown', handleDocumentKeydown, true)
   createViewer()
 })
 
@@ -86,29 +139,58 @@ onContentUpdated(() => {
 
 onBeforeUnmount(() => {
   mounted = false
+  document.removeEventListener('fullscreenchange', handleFullscreenChange)
+  document.removeEventListener('pointerdown', handleDocumentPointerDown, true)
+  document.removeEventListener('keydown', handleDocumentKeydown, true)
   viewer?.destroy()
   viewer = null
 })
 </script>
 
 <template>
-  <section class="mindmap-preview" :class="{ 'is-dark': isDark }">
-    <header class="mindmap-preview-header">
+  <section
+    ref="previewRoot"
+    class="mindmap-preview"
+    :class="{ 'is-dark': isDark, 'is-fullscreen': isFullscreen }"
+    :data-version="renderVersion"
+  >
+    <div class="mindmap-preview-actions">
       <nav class="mindmap-preview-tabs" aria-label="脑图预览视图">
         <button
-          v-for="item in ([['mindmap', '脑图'], ['outline', '大纲'], ['source', '源码']] as const)"
-          :key="item[0]"
+          v-for="item in viewOptions"
+          :key="item.value"
           type="button"
-          :class="{ 'is-active': activeView === item[0] }"
-          @click="setView(item[0])"
+          class="mindmap-preview-action"
+          :class="{ 'is-active': activeView === item.value }"
+          :aria-label="item.label"
+          :aria-pressed="activeView === item.value"
+          :title="item.label"
+          @click="setView(item.value)"
         >
-          {{ item[1] }}
+          <MindmapViewIcon :view="item.value" />
         </button>
       </nav>
-      <button v-if="activeView === 'mindmap'" type="button" class="mindmap-fit" @click="viewer?.zoomToFit()">
-        适应视口
+      <span class="mindmap-preview-action-divider" aria-hidden="true" />
+      <button
+        v-if="activeView === 'mindmap'"
+        type="button"
+        class="mindmap-preview-action"
+        aria-label="适应视口"
+        title="适应视口"
+        @click="viewer?.zoomToFit()"
+      >
+        <img :src="icon__zoom_fit" alt="" />
       </button>
-    </header>
+      <button
+        type="button"
+        class="mindmap-preview-action"
+        :aria-label="isFullscreen ? '退出全屏' : '全屏查看'"
+        :title="isFullscreen ? '退出全屏' : '全屏查看'"
+        @click="toggleFullscreen"
+      >
+        <img :src="isFullscreen ? icon__fullscreen_exit : icon__fullscreen" alt="" />
+      </button>
+    </div>
 
     <nav v-if="session && session.focusPath.length > 0" class="mindmap-focus-path" aria-label="当前主题路径">
       <button type="button" @click="exitFocusTo(0)">全部</button>
@@ -118,7 +200,14 @@ onBeforeUnmount(() => {
       </template>
     </nav>
 
-    <div v-show="activeView === 'mindmap'" ref="canvasHost" class="mindmap-canvas-host" />
+    <div
+      v-show="activeView === 'mindmap'"
+      ref="canvasHost"
+      class="mindmap-canvas-host"
+      :class="{ 'is-interaction-active': isCanvasActive }"
+      @pointerdown.capture="activateCanvas"
+      @wheel.capture="handleCanvasWheelCapture"
+    />
 
     <div v-if="activeView === 'outline' && session" class="mindmap-outline" :data-version="renderVersion">
       <ul class="mindmap-outline-root">
@@ -139,6 +228,7 @@ onBeforeUnmount(() => {
 .mindmap-preview {
   --mindmap-panel: var(--vp-c-bg-soft);
   --mindmap-border: var(--vp-c-divider);
+  position: relative;
   margin: 1.5rem 0;
   overflow: hidden;
   border: 1px solid var(--mindmap-border);
@@ -146,36 +236,75 @@ onBeforeUnmount(() => {
   background: var(--vp-c-bg);
 }
 
-.mindmap-preview-header {
+.mindmap-preview-actions {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  z-index: 20;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  min-height: 42px;
-  padding: 5px 8px;
-  border-bottom: 1px solid var(--mindmap-border);
-  background: var(--mindmap-panel);
+  gap: 4px;
+  padding: 2px;
+  border: .1px solid var(--vp-c-divider);
+  border-radius: 7px;
+  background-color: color-mix(in srgb, var(--vp-code-block-bg) 92%, transparent);
+  box-shadow: var(--vp-shadow-1);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .2s;
 }
 
 .mindmap-preview-tabs {
   display: flex;
-  gap: 3px;
-
-  button {
-    padding: 5px 12px;
-    border-radius: 6px;
-    color: var(--vp-c-text-2);
-    font-size: 13px;
-    font-weight: 600;
-
-    &:hover,
-    &.is-active {
-      color: var(--vp-c-text-1);
-      background: var(--vp-c-bg);
-    }
+  gap: 4px;
+}
+
+.mindmap-preview:hover > .mindmap-preview-actions,
+.mindmap-preview-actions:focus-within {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.mindmap-preview-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--vp-c-brand-1);
+  cursor: pointer;
+  transition: background-color .2s, transform .2s;
+
+  svg,
+  img {
+    width: 18px;
+    height: 18px;
+  }
+
+  &:hover,
+  &.is-active {
+    background-color: var(--vp-c-default-soft);
+  }
+
+  &.is-active {
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vp-c-brand-1) 35%, transparent);
   }
+
+  &:hover { transform: scale(1.05); }
+  &:active { transform: scale(.95); }
+}
+
+.mindmap-preview-action-divider {
+  width: 1px;
+  height: 20px;
+  margin: 0 1px;
+  background: var(--vp-c-divider);
 }
 
-.mindmap-fit,
 .mindmap-focus-path button {
   color: var(--vp-c-text-2);
   font-size: 12px;
@@ -202,6 +331,10 @@ onBeforeUnmount(() => {
   background: var(--vp-c-bg);
   touch-action: none;
   user-select: none;
+
+  &.is-interaction-active {
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vp-c-brand-1) 38%, transparent);
+  }
 }
 
 .mindmap-canvas-host:deep(.mm-canvas),
@@ -279,9 +412,31 @@ onBeforeUnmount(() => {
   white-space: pre;
 }
 
+.mindmap-preview:fullscreen {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: var(--vp-c-bg);
+  flex-direction: column;
+
+  .mindmap-canvas-host,
+  .mindmap-outline,
+  .mindmap-source {
+    flex: 1 1 auto;
+    max-height: none;
+    min-height: 0;
+  }
+
+  .mindmap-canvas-host { height: auto; }
+}
+
 @media (max-width: 768px) {
   .mindmap-canvas-host { height: 360px; }
-  .mindmap-preview-tabs button { padding-inline: 9px; }
+  .mindmap-preview-actions { top: 6px; right: 6px; }
+  .mindmap-preview-action { width: 28px; height: 28px; }
   .mindmap-outline { padding-inline: 12px; }
 }
 </style>

package/vitepress/components/MindmapPreview/MindmapViewIcon.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+defineProps<{
+  view: 'mindmap' | 'outline' | 'source'
+}>()
+</script>
+
+<template>
+  <svg v-if="view === 'mindmap'" aria-hidden="true" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none" />
+    <path
+      d="M26 24h16M26 38h16M26 10h16M18 24H6h4m8 14c-6-2-2-14-8-14m8-14c-6 2-2 14-8 14"
+      fill="none"
+      stroke="#636cff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="4"
+    />
+  </svg>
+  <svg v-else-if="view === 'outline'" aria-hidden="true" viewBox="0 0 48 48">
+    <path d="M0 0h48v48H0z" fill="none" />
+    <path
+      d="M26 24h18m-30 0h4m0 14h26M6 38h4m8-28h26M6 10h4"
+      fill="none"
+      stroke="#636cff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="4"
+    />
+  </svg>
+  <svg v-else aria-hidden="true" viewBox="0 0 24 24">
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="m17 8 1.84 1.85c.773.778 1.16 1.167 1.16 1.65s-.387.872-1.16 1.65L17 15M7 8 5.16 9.85C4.387 10.628 4 11.017 4 11.5s.387.872 1.16 1.65L7 15m7.5-11-5 16"
+      fill="none"
+      stroke="#636cff"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+    />
+  </svg>
+</template>