radiant-docs 0.1.46 → 0.1.48

package/template/src/components/endpoint/ResponseDisplay.astro

@@ -72,10 +72,10 @@ import { Icon } from "astro-icon/components";
     class="group/prose-code not-prose relative h-full min-h-0 w-full max-w-full min-w-0"
   >
     <div
-      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col rounded-xl"
     >
       <div
-        class="flex items-center justify-between gap-2 border-b border-neutral-200 rounded-t-xl bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80"
+        class="flex items-center justify-between gap-2 bg-(--rd-code-header-surface)"
       >
         <div class="min-w-0 flex-1 overflow-hidden rounded-t-xl">
           <div
@@ -84,7 +84,7 @@ import { Icon } from "astro-icon/components";
           >
             <div
               aria-hidden="true"
-              class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-lg border-[0.5px] border-neutral-200 bg-white shadow-xs transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
+              class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) transition-[left,width,opacity] duration-200 ease-out"
               x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
               x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
             >
@@ -106,9 +106,12 @@ import { Icon } from "astro-icon/components";
         </div>
 
         <div
-          class="relative h-9 w-fit max-w-full shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)"
+          class="relative h-9 w-fit max-w-full shrink-0 rounded-tr-xl bg-(--rd-code-surface) border-t-[0.5px] border-r-[0.5px] border-(--rd-code-tab-edge-border)"
         >
-          <div class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)"></div>
+          <div
+            class="absolute inset-x-0 -bottom-px h-px bg-(--rd-code-surface)"
+          >
+          </div>
           <CodeTabEdge
             className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
           />
@@ -133,33 +136,33 @@ import { Icon } from "astro-icon/components";
         </div>
       </div>
 
-      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl">
+      <div
+        class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl rounded-tl-xl border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)"
+      >
         <div
           class="relative h-full overflow-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90"
         >
-          <div
-            class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent dark:from-(--rd-code-surface)"
-          >
-          </div>
           <div x-show="selected === 'body'" class="h-full">
             <div
               x-show="!response || !response.highlightedData"
               class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full text-foreground"
             >
-              <div class="bg-neutral-50 p-2 rounded-xl mb-1 dark:bg-(--rd-code-surface)">
+              <div class="bg-(--rd-code-header-surface) p-2 rounded-xl mb-1">
                 <Icon
                   class="size-6 text-neutral-300 dark:text-neutral-600"
                   name="lucide:square-arrow-up-right"
                 />
               </div>
               <div class="text-lg font-medium text-center">Send request</div>
-              <p class="text-sm text-neutral-500 text-center dark:text-neutral-400">
+              <p
+                class="text-sm text-neutral-500 text-center dark:text-neutral-400"
+              >
                 Send a request to see the response body.
               </p>
             </div>
             <div x-show="response && response.highlightedData">
               <pre
-                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6 dark:bg-(--rd-code-surface)"><code data-rd-code-theme class="block min-w-full px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedData" /></pre>
+                class="relative m-0 min-w-full p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedData" /></pre>
             </div>
           </div>
 
@@ -168,20 +171,22 @@ import { Icon } from "astro-icon/components";
               x-show="!response || !response.highlightedHeaders"
               class="text-sm px-4 py-4 xs:py-8 flex flex-col items-center justify-center h-full text-foreground"
             >
-              <div class="bg-neutral-50 p-2 rounded-xl mb-1 dark:bg-(--rd-code-surface)">
+              <div class="bg-(--rd-code-header-surface) p-2 rounded-xl mb-1">
                 <Icon
                   class="size-6 text-neutral-300 dark:text-neutral-600"
                   name="lucide:square-arrow-up-right"
                 />
               </div>
               <div class="text-lg font-medium text-center">Send request</div>
-              <p class="text-sm text-neutral-500 text-center dark:text-neutral-400">
+              <p
+                class="text-sm text-neutral-500 text-center dark:text-neutral-400"
+              >
                 Send a request to see the response header.
               </p>
             </div>
             <div x-show="response && response.highlightedHeaders">
               <pre
-                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6 dark:bg-(--rd-code-surface)"><code data-rd-code-theme class="block min-w-full px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedHeaders" /></pre>
+                class="relative m-0 min-w-full bg-(--rd-code-surface) p-0 text-[13px] leading-6"><code data-rd-code-theme class="block min-w-full px-4 py-2.5 font-mono text-neutral-800 dark:text-neutral-200" x-html="response?.highlightedHeaders" /></pre>
             </div>
           </div>
         </div>

package/template/src/components/endpoint/ResponseSnippets.astro

@@ -244,14 +244,37 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
     pillLeft: 0,
     pillWidth: 0,
     pillVisible: false,
+    previousSelected: null,
+    isTransitioning: false,
+    isManagedSlot: false,
+    transitionDirection: 1,
+    transitionDurationMs: 360,
+    transitionEasing: "cubic-bezier(0.22, 1, 0.36, 1)",
     tabSyncHandler: null,
+    transitionTimeoutId: null,
     copyTimeoutId: null,
     init() {
-      if (!this.hasMultiple) return;
-      const sync = () => this.syncPill();
+      this.isManagedSlot = !!this.$root?.closest("[data-snippet-slot]");
+      if (
+        typeof window.matchMedia === "function" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      ) {
+        this.transitionDurationMs = 0;
+      }
+
+      const sync = () => {
+        this.syncPill();
+        this.syncSnippetHeight();
+      };
       this.tabSyncHandler = sync;
       this.$nextTick(() => {
+        if (this.$refs.snippetPanels) {
+          this.$refs.snippetPanels.style.transitionDuration =
+            this.transitionDurationMs + "ms";
+        }
         this.syncPill();
+        this.syncSnippetHeight();
+        if (!this.hasMultiple) return;
         this.$refs.tabList?.addEventListener("scroll", sync, {
           passive: true,
         });
@@ -275,13 +298,96 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
       this.pillWidth = activeRect.width;
       this.pillVisible = true;
     },
+    getPanelHeight(panel) {
+      if (!panel) return 0;
+      const child = panel.firstElementChild;
+      const childHeight =
+        child instanceof HTMLElement ? child.scrollHeight : 0;
+      return Math.ceil(
+        Math.max(panel.scrollHeight, childHeight, panel.getBoundingClientRect().height),
+      );
+    },
+    syncSnippetHeight() {
+      const panels = this.$refs.snippetPanels;
+      if (!panels) return;
+      if (this.isManagedSlot) {
+        panels.style.height = "";
+        return;
+      }
+      const activePanel = panels.querySelector(
+        '[data-snippet-index="' + this.selected + '"]',
+      );
+      const activeHeight = this.getPanelHeight(activePanel);
+      if (activeHeight > 0) {
+        panels.style.height = activeHeight + "px";
+      }
+    },
+    finishTransition() {
+      this.isTransitioning = false;
+      this.previousSelected = null;
+      this.transitionTimeoutId = null;
+      this.$nextTick(() => {
+        this.syncSnippetHeight();
+        window.dispatchEvent(new CustomEvent("rd:snippet-content-change"));
+      });
+    },
     select(index) {
+      if (index === this.selected) return;
+
+      if (this.transitionTimeoutId) {
+        window.clearTimeout(this.transitionTimeoutId);
+        this.transitionTimeoutId = null;
+        this.isTransitioning = false;
+        this.previousSelected = null;
+      }
+
+      const previousIndex = this.selected;
+      this.previousSelected = previousIndex;
+      this.transitionDirection = index > previousIndex ? 1 : -1;
       this.selected = index;
+      this.isTransitioning = true;
       this.$nextTick(() => {
         this.syncPill();
+        this.syncSnippetHeight();
         window.dispatchEvent(new CustomEvent("rd:snippet-content-change"));
+
+        if (this.transitionDurationMs === 0) {
+          this.finishTransition();
+          return;
+        }
+
+        this.transitionTimeoutId = window.setTimeout(() => {
+          this.finishTransition();
+        }, this.transitionDurationMs);
       });
     },
+    getPanelStyle(index) {
+      const base = "position: absolute; top: 0; right: 0; left: 0;";
+      const isActive = index === this.selected;
+      const isPrevious = this.isTransitioning && index === this.previousSelected;
+
+      if (!isActive && !isPrevious) {
+        return "display: none; opacity: 0; pointer-events: none; visibility: hidden; z-index: 0;";
+      }
+
+      if (!this.isTransitioning) {
+        return "position: relative; transform: translateX(0); opacity: 1; pointer-events: auto; visibility: visible; z-index: 1;";
+      }
+
+      if (isActive) {
+        const animationName =
+          this.transitionDirection === 1
+            ? "rd-snippet-slide-in-from-right"
+            : "rd-snippet-slide-in-from-left";
+        return "position: relative; opacity: 1; pointer-events: auto; visibility: visible; z-index: 2; animation: " + animationName + " " + this.transitionDurationMs + "ms " + this.transitionEasing + " both;";
+      }
+
+      const animationName =
+        this.transitionDirection === 1
+          ? "rd-snippet-slide-out-to-left"
+          : "rd-snippet-slide-out-to-right";
+      return base + " opacity: 1; pointer-events: none; visibility: visible; z-index: 1; animation: " + animationName + " " + this.transitionDurationMs + "ms " + this.transitionEasing + " both;";
+    },
     async copySelected() {
       const snippet = this.snippets[this.selected];
       if (!snippet) return;
@@ -306,10 +412,10 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
 >
   <div class="group/prose-code not-prose relative h-full min-h-0 w-full max-w-full min-w-0">
     <div
-      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-white shadow-xs dark:border-neutral-800 dark:bg-(--rd-code-surface)"
+      class="flex h-full min-h-0 w-full max-w-full min-w-0 flex-col rounded-xl"
     >
       <div
-        class="flex items-center justify-between gap-2 border-b border-neutral-200 rounded-t-xl bg-neutral-50 inset-shadow-sm inset-shadow-neutral-100/80 dark:border-neutral-800 dark:bg-neutral-900/60 dark:inset-shadow-neutral-900/80"
+        class="flex items-center justify-between gap-2 bg-(--rd-code-header-surface)"
       >
         {
           hasMultipleResponses ? (
@@ -320,7 +426,7 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
               >
                 <div
                   aria-hidden="true"
-                  class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-lg border-[0.5px] border-neutral-200 bg-white shadow-xs transition-[left,width,opacity] duration-200 ease-out dark:border-neutral-700/70 dark:bg-(--rd-code-surface)"
+                  class="pointer-events-none absolute top-1/2 z-0 h-[28px] -translate-y-1/2 rounded-[9px] border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface) transition-[left,width,opacity] duration-200 ease-out"
                   x-bind:class="pillVisible ? 'opacity-100' : 'opacity-0'"
                   x-bind:style="'left:' + pillLeft + 'px;width:' + pillWidth + 'px;'"
                 />
@@ -346,13 +452,13 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
             </div>
           ) : (
             <div class="min-w-0 flex-1">
-              <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-white dark:bg-(--rd-code-surface)">
-                <div class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)"></div>
+              <div class="relative h-9 w-fit max-w-full rounded-tl-xl bg-(--rd-code-surface)">
+                <div class="absolute inset-x-0 -bottom-px h-px bg-(--rd-code-surface)"></div>
                 <CodeTabEdge
-                  className="pointer-events-none absolute -top-px left-full z-10 h-[calc(100%+2px)]"
+                  className="pointer-events-none absolute -top-[0.5px] left-full z-10 h-[calc(100%+1.5px)]"
                 />
 
-                <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 pl-5 pr-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300">
+                <div class="relative z-20 inline-flex h-9 max-w-full items-center gap-2 rounded-tl-xl border-t-[0.5px] border-l-[0.5px] border-(--rd-code-tab-edge-border) pl-5 pr-3 py-1.5 text-xs font-medium text-neutral-700 dark:text-neutral-300">
                   <span
                     class="size-[7px] shrink-0 rounded-full"
                     class:list={[firstResponse.dotClass]}></span>
@@ -363,8 +469,8 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
           )
         }
 
-        <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-white dark:bg-(--rd-code-surface)">
-          <div class="absolute inset-x-0 -bottom-px h-px bg-white dark:bg-(--rd-code-surface)"></div>
+        <div class="relative h-9 w-5 shrink-0 rounded-tr-xl bg-(--rd-code-surface) border-t-[0.5px] border-r-[0.5px] border-(--rd-code-tab-edge-border)">
+          <div class="absolute inset-x-0 -bottom-px h-px bg-(--rd-code-surface)"></div>
           <CodeTabEdge
             className="pointer-events-none absolute -top-px right-full z-10 h-[calc(100%+2px)] rotate-y-180"
           />
@@ -390,14 +496,21 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
         </div>
       </div>
 
-      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl">
-        <div class="relative h-full overflow-auto [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90">
-          <div class="pointer-events-none sticky top-0 z-10 -mb-4 h-4 w-full bg-linear-to-b from-white to-transparent dark:from-(--rd-code-surface)"></div>
+      <div class="relative min-h-0 min-w-0 flex-1 overflow-hidden rounded-b-xl rounded-tl-xl border-[0.5px] border-(--rd-code-tab-edge-border) bg-(--rd-code-surface)">
+        <div
+          x-ref="snippetPanels"
+          class="relative h-full overflow-auto transition-[height] duration-[360ms] ease-[cubic-bezier(0.22,1,0.36,1)] [scrollbar-width:thin] [scrollbar-color:var(--color-neutral-300)_transparent] [&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-neutral-300/70 hover:[&::-webkit-scrollbar-thumb]:bg-neutral-300/90 dark:[scrollbar-color:var(--color-neutral-700)_transparent] dark:[&::-webkit-scrollbar-thumb]:bg-neutral-700/70 dark:hover:[&::-webkit-scrollbar-thumb]:bg-neutral-700/90"
+        >
           {
             responseSnippetItems.map((snippet, index) => (
               <pre
-                class="relative m-0 min-w-full bg-white p-0 text-[13px] leading-6 dark:bg-(--rd-code-surface)"
-                x-show={`selected === ${index}`}
+                class="relative m-0 min-w-full p-0 text-[13px] leading-6"
+                x-bind:style={`getPanelStyle(${index})`}
+                style={
+                  index === 0
+                    ? "position: relative;"
+                    : "display: none; position: absolute; top: 0; right: 0; left: 0; opacity: 0; visibility: hidden; pointer-events: none;"
+                }
                 {...(index !== 0 ? { "x-cloak": true } : {})}
                 data-snippet-index={index}
               ><code data-rd-code-theme class="block min-w-full py-2.5 font-mono text-neutral-800 dark:text-neutral-200"><Fragment set:html={snippet.renderedCodeLinesHtml} /></code></pre>
@@ -408,3 +521,49 @@ const hasMultipleResponses = responseSnippetItems.length > 1;
     </div>
   </div>
 </div>
+
+<style>
+  @keyframes rd-snippet-slide-in-from-right {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rd-snippet-slide-in-from-left {
+    from {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes rd-snippet-slide-out-to-left {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(-100%);
+      opacity: 0;
+    }
+  }
+
+  @keyframes rd-snippet-slide-out-to-right {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+</style>

package/template/src/components/ui/CodeTabEdge.astro

@@ -5,18 +5,14 @@ interface Props {
 
 const { className = "" } = Astro.props;
 
-const idPrefix = `code_group_tab_edge_${Math.random().toString(36).slice(2, 9)}`;
-const mask0Id = `code_group_tab_edge_mask0_${idPrefix}`;
-const path1OutsideMaskId = `code_group_tab_edge_path_1_outside_1_${idPrefix}`;
-const path3OutsideMaskId = `code_group_tab_edge_path_3_outside_2_${idPrefix}`;
 const edgeBackgroundColor = "var(--rd-code-tab-edge-bg, #ffffff)";
 const edgeBorderColor = "var(--rd-code-tab-edge-border, #e5e5e5)";
 ---
 
 <svg
   width="60"
-  height="42"
-  viewBox="0 0 60 42"
+  height="38"
+  viewBox="0 0 60 38"
   fill="none"
   xmlns="http://www.w3.org/2000/svg"
   class:list={["block", className]}
@@ -24,58 +20,13 @@ const edgeBorderColor = "var(--rd-code-tab-edge-border, #e5e5e5)";
   aria-hidden="true"
   data-pagefind-ignore
 >
-  <mask
-    id={mask0Id}
-    maskUnits="userSpaceOnUse"
-    x="0"
-    y="-1"
-    width="60"
-    height="43"
-    style="mask-type:alpha"
-  >
-    <mask
-      id={path1OutsideMaskId}
-      maskUnits="userSpaceOnUse"
-      x="0"
-      y="-1"
-      width="60"
-      height="43"
-      fill="black"
-    >
-      <rect fill="white" y="-1" width="60" height="43"></rect>
-      <path
-        d="M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z"
-      ></path>
-    </mask>
-    <path
-      d="M1 0L8.0783 0C15.772 0 22.7836 4.41324 26.111 11.3501L34.8889 29.6498C38.2164 36.5868 45.228 41 52.9217 41H60H1L1 0Z"
-      fill={edgeBackgroundColor}></path>
-    <path
-      d="M1 0V-1H0V0L1 0ZM1 41H0V42H1V41ZM34.8889 29.6498L33.9873 30.0823L34.8889 29.6498ZM26.111 11.3501L27.0127 10.9177L26.111 11.3501ZM1 1H8.0783V-1H1V1ZM60 40H1V42H60V40ZM2 41V0L0 0L0 41H2ZM25.2094 11.7826L33.9873 30.0823L35.7906 29.2174L27.0127 10.9177L25.2094 11.7826ZM52.9217 42H60V40H52.9217V42ZM33.9873 30.0823C37.4811 37.3661 44.8433 42 52.9217 42V40C45.6127 40 38.9517 35.8074 35.7906 29.2174L33.9873 30.0823ZM8.0783 1C15.3873 1 22.0483 5.19257 25.2094 11.7826L27.0127 10.9177C23.5188 3.6339 16.1567 -1 8.0783 -1V1Z"
-      fill={edgeBorderColor}
-      mask={`url(#${path1OutsideMaskId})`}></path>
-  </mask>
-  <g mask={`url(#${mask0Id})`}>
-    <mask
-      id={path3OutsideMaskId}
-      maskUnits="userSpaceOnUse"
-      x="-1"
-      y="0.0244141"
-      width="60"
-      height="43"
-      fill="black"
-    >
-      <rect fill="white" x="-1" y="0.0244141" width="60" height="43"></rect>
-      <path
-        d="M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z"
-      ></path>
-    </mask>
-    <path
-      d="M0 1.02441H7.0783C14.772 1.02441 21.7836 5.43765 25.111 12.3746L33.8889 30.6743C37.2164 37.6112 44.228 42.0244 51.9217 42.0244H59H0L0 1.02441Z"
-      fill={edgeBackgroundColor}></path>
-    <path
-      d="M0 1.02441L0 0.0244141H-1V1.02441H0ZM0 42.0244H-1V43.0244H0L0 42.0244ZM33.8889 30.6743L32.9873 31.1068L33.8889 30.6743ZM25.111 12.3746L26.0127 11.9421L25.111 12.3746ZM0 2.02441H7.0783V0.0244141H0L0 2.02441ZM59 41.0244H0L0 43.0244H59V41.0244ZM1 42.0244L1 1.02441H-1L-1 42.0244H1ZM24.2094 12.8071L32.9873 31.1068L34.7906 30.2418L26.0127 11.9421L24.2094 12.8071ZM51.9217 43.0244H59V41.0244H51.9217V43.0244ZM32.9873 31.1068C36.4811 38.3905 43.8433 43.0244 51.9217 43.0244V41.0244C44.6127 41.0244 37.9517 36.8318 34.7906 30.2418L32.9873 31.1068ZM7.0783 2.02441C14.3873 2.02441 21.0483 6.21699 24.2094 12.8071L26.0127 11.9421C22.5188 4.65831 15.1567 0.0244141 7.0783 0.0244141V2.02441Z"
-      fill={edgeBorderColor}
-      mask={`url(#${path3OutsideMaskId})`}></path>
-  </g>
+  <path
+    d="M0 0.75H7.0783C14.772 0.75 21.7836 4.571 25.111 10.578L33.8889 27.422C37.2164 33.429 44.228 37.25 51.9217 37.25H60V38H0V0.75Z"
+    fill={edgeBackgroundColor}></path>
+  <path
+    d="M0 0.75H7.0783C14.772 0.75 21.7836 4.571 25.111 10.578L33.8889 27.422C37.2164 33.429 44.228 37.25 51.9217 37.25H60"
+    fill="none"
+    stroke={edgeBorderColor}
+    stroke-width="0.5"
+    vector-effect="non-scaling-stroke"></path>
 </svg>