slidev-theme-neversink 0.2.0 → 0.3.0

package/assets/arrow.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 196 73">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: lime;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M171.2,37.2c-12.8,0-25.6-.9-38.3.2-38.7,3.1-77.3,5.6-116.1,4.8-2.5,0-5.1.4-7.5,0-1.7-.4-3.2-1.9-4.8-2.9,1.6-1.3,3.1-3.6,4.8-3.7,7-.4,14-.2,21-.2,14.6,0,29.2.4,43.9,0,13.1-.4,26.2-1.5,39.3-2.4,18.2-1.3,36.4-2.7,54.6-4,.4,0,.8-.3,1.8-.6-5.6-5.8-12.3-8-19.5-9.4-1.3-.3-2.6-.5-3.8-.9-3.5-1.1-5.7-3.4-4.5-7.1,1.2-3.7,4.6-3.7,7.5-2.5,7.4,2.9,14.8,5.9,22,9.2,4.4,2,8.6,4.4,12.7,6.9,4.6,2.8,5.1,6.7.9,10.1-7.1,5.6-14.5,10.8-21.6,16.4-5.2,4.1-9.9,8.7-15,12.8-1.6,1.3-3.8,1.7-5.7,2.5,0-2.4-1-5.7.2-7,4.3-4.6,9.1-8.7,14-12.6,4.6-3.5,9.6-6.5,14-9.4Z"/>
+</svg>

package/assets/arrowheads.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 356 204">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: lime;
+        stroke-width: 0px;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M179.2,133.5c0-8.9.6-17.7-.1-26.5-2.1-26.8-3.9-53.5-3.3-80.4,0-1.7-.3-3.5,0-5.2.3-1.2,1.3-2.2,2-3.3.9,1.1,2.5,2.1,2.6,3.3.3,4.8.1,9.7.1,14.5,0,10.1-.3,20.2,0,30.4.3,9.1,1,18.1,1.7,27.2.9,12.6,1.9,25.2,2.8,37.8,0,.3.2.6.4,1.2,4-3.9,5.5-8.5,6.5-13.5.2-.9.3-1.8.6-2.6.8-2.4,2.4-3.9,4.9-3.1,2.6.8,2.6,3.2,1.7,5.2-2,5.1-4.1,10.3-6.4,15.2-1.4,3-3,6-4.8,8.8-1.9,3.2-4.6,3.5-7,.6-3.9-4.9-7.5-10-11.4-15-2.8-3.6-6-6.9-8.9-10.4-.9-1.1-1.2-2.6-1.7-3.9,1.7,0,3.9-.7,4.8.1,3.2,3,6,6.3,8.7,9.7,2.4,3.2,4.5,6.7,6.5,9.7h.1Z"/>
+  <path class="cls-1" d="M262.3,172c5.5-7,11.5-13.5,16.3-20.9,14.9-22.4,30.1-44.5,47.2-65.2,1.1-1.4,2-2.9,3.2-4.1.9-.8,2.4-.9,3.6-1.4,0,1.4.6,3.2,0,4.2-2.8,4-5.9,7.7-8.9,11.5-6.3,7.9-12.7,15.7-18.8,23.9-5.4,7.3-10.4,14.9-15.5,22.4-7.1,10.5-14.1,21-21.2,31.4-.2.2-.2.6-.4,1.2,5.6-.6,9.6-3.3,13.5-6.6.7-.6,1.4-1.2,2.1-1.7,2.1-1.4,4.3-1.6,5.8.6,1.5,2.2,0,4.1-1.9,5.2-4.8,2.8-9.6,5.5-14.4,8-3,1.5-6.1,2.8-9.2,4-3.5,1.3-5.8,0-5.9-3.8,0-6.3.3-12.5.3-18.8,0-4.6-.5-9.1-.5-13.6,0-1.4.7-2.8,1.1-4.2,1.3,1,3.5,1.9,3.7,3.1.7,4.3.8,8.7.9,13,0,4-.6,8-.9,11.6h0Z"/>
+  <path class="cls-1" d="M90.2,180.2c-.3-3.6-.8-7.6-.9-11.6,0-4.3.2-8.7.9-13,.2-1.2,2.4-2.1,3.7-3.1.4,1.4,1.1,2.7,1.1,4.2,0,4.5-.5,9.1-.5,13.6,0,6.3.3,12.5.3,18.8,0,3.7-2.4,5.1-5.9,3.8-3.1-1.2-6.2-2.4-9.2-4-4.9-2.5-9.7-5.2-14.4-8-1.9-1.1-3.4-2.9-1.9-5.2,1.5-2.2,3.7-2,5.8-.6.7.5,1.4,1.1,2.1,1.7,3.8,3.3,7.9,6,13.5,6.6-.3-.7-.3-1-.4-1.2-7.1-10.5-14.1-21-21.2-31.4-5.1-7.5-10.1-15.1-15.5-22.4-6.1-8.2-12.6-15.9-18.8-23.9-3-3.8-6.1-7.5-8.9-11.5-.7-1,0-2.8,0-4.2,1.2.4,2.7.6,3.6,1.4,1.2,1.1,2.1,2.7,3.2,4.1,17.1,20.8,32.3,42.8,47.2,65.2,4.8,7.4,10.8,14,16.3,20.9h0Z"/>
+  <path class="cls-1" d="M117.5,116.8c0-2.5-.1-5.3,0-8,.3-3,.6-6,1.3-8.9.2-.8,1.8-1.3,2.7-1.9.2,1,.6,1.9.5,2.9-.3,3.1-.9,6.2-1.1,9.3-.3,4.3-.5,8.6-.8,12.9-.2,2.6-1.9,3.4-4.2,2.3-2.1-1-4.1-2-6.1-3.2-3.2-2-6.4-4.1-9.5-6.3-1.2-.8-2.1-2.2-1-3.6,1.2-1.5,2.6-1.2,4,0,.5.4.9.8,1.4,1.3,2.5,2.5,5.1,4.6,8.9,5.3-.1-.5-.1-.7-.2-.9-4.3-7.6-8.5-15.2-12.8-22.7-3.1-5.4-6.1-10.9-9.4-16.2-3.7-5.9-7.7-11.6-11.6-17.4s-3.8-5.5-5.5-8.4c-.4-.7.1-1.9.2-2.9.8.4,1.8.6,2.4,1.1.8.8,1.3,2,2,3,10.6,15.2,19.7,31.2,28.7,47.3,2.9,5.3,6.6,10.2,10,15.3h0Z"/>
+  <path class="cls-1" d="M241.2,105.2c2.3-1.1,4.7-2.4,7.2-3.5,2.8-1.1,5.6-2.1,8.6-2.7.8-.2,1.9,1,2.9,1.6-.8.6-1.5,1.4-2.4,1.7-2.9,1.1-5.9,1.9-8.9,3.1-4,1.6-7.9,3.4-12,4.9-2.4.9-3.9-.2-3.9-2.8,0-2.3,0-4.6.2-6.9.4-3.8.9-7.5,1.5-11.3.2-1.5,1-2.9,2.8-2.5,1.8.4,2.2,1.9,1.8,3.6-.1.6-.4,1.2-.5,1.8-1.2,3.3-1.9,6.6-.8,10.3.4-.3.6-.4.7-.6,4.9-7.2,9.9-14.3,14.8-21.5,3.5-5.2,7.1-10.3,10.5-15.6,3.7-5.9,7.1-12,10.6-18,1.7-2.9,3.3-5.8,5.1-8.6.5-.7,1.8-.7,2.7-1.1,0,.9.3,1.9,0,2.7-.4,1.1-1.2,2.1-1.8,3.1-9,16.1-19.4,31.4-30,46.5-3.5,5-6.2,10.4-9.3,15.7h.1Z"/>
+  <path class="cls-1" d="M285.6,100.8c1.5-.7,3.1-1.6,4.8-2.3,1.8-.7,3.7-1.3,5.6-1.8.5-.1,1.3.7,1.9,1.1-.5.4-1,.9-1.6,1.1-1.9.7-3.9,1.3-5.8,2-2.6,1-5.2,2.2-7.8,3.2-1.6.6-2.6-.2-2.6-1.8,0-1.5,0-3,.2-4.5.3-2.5.6-4.9,1-7.4.1-1,.7-1.9,1.9-1.6,1.2.3,1.5,1.2,1.2,2.3,0,.4-.2.8-.4,1.2-.8,2.2-1.2,4.3-.6,6.7.2-.2.4-.3.4-.4,3.2-4.7,6.5-9.4,9.7-14.1,2.3-3.4,4.7-6.7,6.9-10.2,2.4-3.9,4.6-7.9,7-11.8s2.2-3.8,3.4-5.6c.3-.4,1.2-.5,1.8-.7,0,.6.2,1.2,0,1.8-.3.7-.8,1.3-1.2,2-5.9,10.6-12.7,20.6-19.7,30.5-2.3,3.3-4.1,6.8-6.1,10.3h0Z"/>
+  <path class="cls-1" d="M213.9,67.7c1.3-1.1,2.6-2.3,4.1-3.4,1.6-1.1,3.3-2.2,5-3.1.5-.2,1.4.4,2.1.6-.4.5-.7,1.1-1.3,1.5-1.7,1.2-3.5,2.2-5.2,3.3-2.3,1.6-4.5,3.4-6.8,5-1.4,1-2.5.5-2.9-1.2-.4-1.5-.7-2.9-.9-4.4-.3-2.5-.6-4.9-.8-7.4-.1-1,.2-2,1.4-2,1.2,0,1.7.8,1.7,2,0,.4,0,.8,0,1.2-.2,2.3-.2,4.5,1.1,6.7.2-.3.3-.4.3-.5,2-5.3,4.1-10.7,6.1-16,1.4-3.8,2.9-7.7,4.2-11.6,1.4-4.4,2.6-8.8,3.9-13.2s1.2-4.2,1.9-6.3c.2-.5,1-.7,1.5-1.1.2.6.5,1.2.4,1.7,0,.8-.4,1.5-.7,2.2-3.2,11.7-7.4,23-11.8,34.4-1.5,3.7-2.3,7.6-3.5,11.5h0Z"/>
+  <path class="cls-1" d="M135.3,64.1c.4-1.6.7-3.4,1.3-5.1.6-1.9,1.3-3.7,2.2-5.5.3-.5,1.3-.6,2-.8,0,.6,0,1.3-.1,1.9-.7,1.9-1.5,3.8-2.1,5.8-.9,2.7-1.6,5.4-2.5,8.1-.5,1.6-1.7,1.9-3.1.8-1.2-.9-2.3-1.9-3.4-3-1.7-1.8-3.4-3.6-5.1-5.5-.7-.7-1-1.7,0-2.5,1-.7,1.9-.4,2.6.6.2.3.4.7.7,1,1.2,2,2.6,3.7,4.9,4.7,0-.3,0-.5,0-.6-1.6-5.5-3.1-11-4.7-16.5-1.1-3.9-2.2-7.9-3.5-11.8-1.5-4.4-3.1-8.6-4.7-12.9-.8-2.1-1.6-4.1-2.2-6.2-.2-.5.4-1.2.6-1.8.5.4,1.1.6,1.4,1.1.4.7.5,1.5.8,2.2,4.4,11.3,7.8,22.9,11.1,34.6,1,3.8,2.7,7.5,4.1,11.3h0Z"/>
+  <path class="cls-1" d="M63.5,97.6c-.1-1.6-.3-3.5-.3-5.3,0-2,.2-3.9.5-5.9,0-.5,1.1-.9,1.7-1.4.2.6.5,1.2.4,1.9,0,2-.3,4.1-.4,6.2,0,2.8,0,5.7,0,8.5,0,1.7-1.1,2.3-2.7,1.7-1.4-.6-2.8-1.2-4.1-1.9-2.2-1.2-4.3-2.5-6.4-3.8-.8-.5-1.5-1.3-.8-2.3.7-1,1.7-.9,2.6-.2.3.2.6.5.9.8,1.7,1.5,3.5,2.8,6,3.1-.1-.3-.1-.5-.2-.6-3.1-4.8-6.2-9.6-9.3-14.4-2.2-3.4-4.4-6.9-6.8-10.3-2.7-3.7-5.5-7.3-8.3-11-1.3-1.7-2.7-3.5-3.9-5.3-.3-.4,0-1.3,0-1.9.6.2,1.2.3,1.6.7.6.5.9,1.2,1.4,1.9,7.5,9.5,14.1,19.7,20.7,29.9,2.1,3.4,4.8,6.4,7.2,9.6h0Z"/>
+</svg>

package/components/ArrowDraw.vue

@@ -0,0 +1,49 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'black',
+  },
+  width: {
+    type: String,
+    default: '140px', // Default width in pixels
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+</script>
+
+<template>
+  <svg
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 196 73"
+    style="enable-background: new 0 0 196 73"
+    xml:space="preserve"
+    :width="width"
+  >
+    <path
+      class="st0"
+      :class="colorscheme"
+      d="M171.2,37.2c-12.8,0-25.6-0.9-38.3,0.2c-38.7,3.1-77.3,5.6-116.1,4.8c-2.5,0-5.1,0.4-7.5-0.1
+	c-1.7-0.4-3.2-1.9-4.8-2.9c1.6-1.3,3.1-3.6,4.8-3.7c7-0.4,14-0.2,21-0.2c14.6,0,29.2,0.4,43.9,0c13.1-0.4,26.2-1.5,39.3-2.4
+	c18.2-1.3,36.4-2.7,54.6-4c0.4,0,0.8-0.3,1.8-0.6c-5.6-5.8-12.3-8-19.5-9.4c-1.3-0.3-2.6-0.5-3.8-0.9c-3.5-1.1-5.7-3.4-4.5-7.1
+	c1.2-3.7,4.6-3.7,7.5-2.5c7.4,2.9,14.8,5.9,22,9.2c4.4,2,8.6,4.4,12.7,6.9c4.6,2.8,5.1,6.7,0.9,10.1c-7.1,5.6-14.5,10.8-21.6,16.4
+	c-5.2,4.1-9.9,8.7-15,12.8c-1.6,1.3-3.8,1.7-5.7,2.5c0-2.4-1-5.7,0.2-7c4.3-4.6,9.1-8.7,14-12.6C161.8,43.1,166.8,40.1,171.2,37.2z"
+    />
+  </svg>
+</template>
+
+<style scoped>
+.st0 {
+  fill: var(--neversink-bg-color);
+}
+</style>

package/components/ArrowHeads.vue

@@ -1,6 +1,80 @@
 <script setup>
-import imgUrl from '../assets/arrowheads.png'
+import { computed } from 'vue'
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'black',
+  },
+  width: {
+    type: String,
+    default: '140px', // Default width in pixels
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
 </script>
 <template>
-  <img :src="imgUrl" alt="Arrowhead" class="w-30" />
+  <svg
+    id="Layer_1"
+    data-name="Layer 1"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 356 204"
+    :width="width"
+  >
+    <path
+      class="cls-1"
+      :class="colorscheme"
+      d="M179.2,133.5c0-8.9.6-17.7-.1-26.5-2.1-26.8-3.9-53.5-3.3-80.4,0-1.7-.3-3.5,0-5.2.3-1.2,1.3-2.2,2-3.3.9,1.1,2.5,2.1,2.6,3.3.3,4.8.1,9.7.1,14.5,0,10.1-.3,20.2,0,30.4.3,9.1,1,18.1,1.7,27.2.9,12.6,1.9,25.2,2.8,37.8,0,.3.2.6.4,1.2,4-3.9,5.5-8.5,6.5-13.5.2-.9.3-1.8.6-2.6.8-2.4,2.4-3.9,4.9-3.1,2.6.8,2.6,3.2,1.7,5.2-2,5.1-4.1,10.3-6.4,15.2-1.4,3-3,6-4.8,8.8-1.9,3.2-4.6,3.5-7,.6-3.9-4.9-7.5-10-11.4-15-2.8-3.6-6-6.9-8.9-10.4-.9-1.1-1.2-2.6-1.7-3.9,1.7,0,3.9-.7,4.8.1,3.2,3,6,6.3,8.7,9.7,2.4,3.2,4.5,6.7,6.5,9.7h.1Z"
+    />
+    <path
+      class="cls-1"
+      :class="colorscheme"
+      d="M262.3,172c5.5-7,11.5-13.5,16.3-20.9,14.9-22.4,30.1-44.5,47.2-65.2,1.1-1.4,2-2.9,3.2-4.1.9-.8,2.4-.9,3.6-1.4,0,1.4.6,3.2,0,4.2-2.8,4-5.9,7.7-8.9,11.5-6.3,7.9-12.7,15.7-18.8,23.9-5.4,7.3-10.4,14.9-15.5,22.4-7.1,10.5-14.1,21-21.2,31.4-.2.2-.2.6-.4,1.2,5.6-.6,9.6-3.3,13.5-6.6.7-.6,1.4-1.2,2.1-1.7,2.1-1.4,4.3-1.6,5.8.6,1.5,2.2,0,4.1-1.9,5.2-4.8,2.8-9.6,5.5-14.4,8-3,1.5-6.1,2.8-9.2,4-3.5,1.3-5.8,0-5.9-3.8,0-6.3.3-12.5.3-18.8,0-4.6-.5-9.1-.5-13.6,0-1.4.7-2.8,1.1-4.2,1.3,1,3.5,1.9,3.7,3.1.7,4.3.8,8.7.9,13,0,4-.6,8-.9,11.6h0Z"
+    />
+    <path
+      class="cls-1"
+      :class="colorscheme"
+      d="M90.2,180.2c-.3-3.6-.8-7.6-.9-11.6,0-4.3.2-8.7.9-13,.2-1.2,2.4-2.1,3.7-3.1.4,1.4,1.1,2.7,1.1,4.2,0,4.5-.5,9.1-.5,13.6,0,6.3.3,12.5.3,18.8,0,3.7-2.4,5.1-5.9,3.8-3.1-1.2-6.2-2.4-9.2-4-4.9-2.5-9.7-5.2-14.4-8-1.9-1.1-3.4-2.9-1.9-5.2,1.5-2.2,3.7-2,5.8-.6.7.5,1.4,1.1,2.1,1.7,3.8,3.3,7.9,6,13.5,6.6-.3-.7-.3-1-.4-1.2-7.1-10.5-14.1-21-21.2-31.4-5.1-7.5-10.1-15.1-15.5-22.4-6.1-8.2-12.6-15.9-18.8-23.9-3-3.8-6.1-7.5-8.9-11.5-.7-1,0-2.8,0-4.2,1.2.4,2.7.6,3.6,1.4,1.2,1.1,2.1,2.7,3.2,4.1,17.1,20.8,32.3,42.8,47.2,65.2,4.8,7.4,10.8,14,16.3,20.9h0Z"
+    />
+    <path
+      class="cls-1"
+      :class="colorscheme"
+      d="M117.5,116.8c0-2.5-.1-5.3,0-8,.3-3,.6-6,1.3-8.9.2-.8,1.8-1.3,2.7-1.9.2,1,.6,1.9.5,2.9-.3,3.1-.9,6.2-1.1,9.3-.3,4.3-.5,8.6-.8,12.9-.2,2.6-1.9,3.4-4.2,2.3-2.1-1-4.1-2-6.1-3.2-3.2-2-6.4-4.1-9.5-6.3-1.2-.8-2.1-2.2-1-3.6,1.2-1.5,2.6-1.2,4,0,.5.4.9.8,1.4,1.3,2.5,2.5,5.1,4.6,8.9,5.3-.1-.5-.1-.7-.2-.9-4.3-7.6-8.5-15.2-12.8-22.7-3.1-5.4-6.1-10.9-9.4-16.2-3.7-5.9-7.7-11.6-11.6-17.4s-3.8-5.5-5.5-8.4c-.4-.7.1-1.9.2-2.9.8.4,1.8.6,2.4,1.1.8.8,1.3,2,2,3,10.6,15.2,19.7,31.2,28.7,47.3,2.9,5.3,6.6,10.2,10,15.3h0Z"
+    />
+    <path
+      class="cls-1"
+      :class="colorscheme"
+      d="M241.2,105.2c2.3-1.1,4.7-2.4,7.2-3.5,2.8-1.1,5.6-2.1,8.6-2.7.8-.2,1.9,1,2.9,1.6-.8.6-1.5,1.4-2.4,1.7-2.9,1.1-5.9,1.9-8.9,3.1-4,1.6-7.9,3.4-12,4.9-2.4.9-3.9-.2-3.9-2.8,0-2.3,0-4.6.2-6.9.4-3.8.9-7.5,1.5-11.3.2-1.5,1-2.9,2.8-2.5,1.8.4,2.2,1.9,1.8,3.6-.1.6-.4,1.2-.5,1.8-1.2,3.3-1.9,6.6-.8,10.3.4-.3.6-.4.7-.6,4.9-7.2,9.9-14.3,14.8-21.5,3.5-5.2,7.1-10.3,10.5-15.6,3.7-5.9,7.1-12,10.6-18,1.7-2.9,3.3-5.8,5.1-8.6.5-.7,1.8-.7,2.7-1.1,0,.9.3,1.9,0,2.7-.4,1.1-1.2,2.1-1.8,3.1-9,16.1-19.4,31.4-30,46.5-3.5,5-6.2,10.4-9.3,15.7h.1Z"
+    />
+    <path
+      class="cls-1"
+      :class="colorscheme"
+      d="M285.6,100.8c1.5-.7,3.1-1.6,4.8-2.3,1.8-.7,3.7-1.3,5.6-1.8.5-.1,1.3.7,1.9,1.1-.5.4-1,.9-1.6,1.1-1.9.7-3.9,1.3-5.8,2-2.6,1-5.2,2.2-7.8,3.2-1.6.6-2.6-.2-2.6-1.8,0-1.5,0-3,.2-4.5.3-2.5.6-4.9,1-7.4.1-1,.7-1.9,1.9-1.6,1.2.3,1.5,1.2,1.2,2.3,0,.4-.2.8-.4,1.2-.8,2.2-1.2,4.3-.6,6.7.2-.2.4-.3.4-.4,3.2-4.7,6.5-9.4,9.7-14.1,2.3-3.4,4.7-6.7,6.9-10.2,2.4-3.9,4.6-7.9,7-11.8s2.2-3.8,3.4-5.6c.3-.4,1.2-.5,1.8-.7,0,.6.2,1.2,0,1.8-.3.7-.8,1.3-1.2,2-5.9,10.6-12.7,20.6-19.7,30.5-2.3,3.3-4.1,6.8-6.1,10.3h0Z"
+    />
+    <path
+      class="cls-1"
+      :class="colorscheme"
+      d="M213.9,67.7c1.3-1.1,2.6-2.3,4.1-3.4,1.6-1.1,3.3-2.2,5-3.1.5-.2,1.4.4,2.1.6-.4.5-.7,1.1-1.3,1.5-1.7,1.2-3.5,2.2-5.2,3.3-2.3,1.6-4.5,3.4-6.8,5-1.4,1-2.5.5-2.9-1.2-.4-1.5-.7-2.9-.9-4.4-.3-2.5-.6-4.9-.8-7.4-.1-1,.2-2,1.4-2,1.2,0,1.7.8,1.7,2,0,.4,0,.8,0,1.2-.2,2.3-.2,4.5,1.1,6.7.2-.3.3-.4.3-.5,2-5.3,4.1-10.7,6.1-16,1.4-3.8,2.9-7.7,4.2-11.6,1.4-4.4,2.6-8.8,3.9-13.2s1.2-4.2,1.9-6.3c.2-.5,1-.7,1.5-1.1.2.6.5,1.2.4,1.7,0,.8-.4,1.5-.7,2.2-3.2,11.7-7.4,23-11.8,34.4-1.5,3.7-2.3,7.6-3.5,11.5h0Z"
+    />
+    <path
+      class="cls-1"
+      :class="colorscheme"
+      d="M135.3,64.1c.4-1.6.7-3.4,1.3-5.1.6-1.9,1.3-3.7,2.2-5.5.3-.5,1.3-.6,2-.8,0,.6,0,1.3-.1,1.9-.7,1.9-1.5,3.8-2.1,5.8-.9,2.7-1.6,5.4-2.5,8.1-.5,1.6-1.7,1.9-3.1.8-1.2-.9-2.3-1.9-3.4-3-1.7-1.8-3.4-3.6-5.1-5.5-.7-.7-1-1.7,0-2.5,1-.7,1.9-.4,2.6.6.2.3.4.7.7,1,1.2,2,2.6,3.7,4.9,4.7,0-.3,0-.5,0-.6-1.6-5.5-3.1-11-4.7-16.5-1.1-3.9-2.2-7.9-3.5-11.8-1.5-4.4-3.1-8.6-4.7-12.9-.8-2.1-1.6-4.1-2.2-6.2-.2-.5.4-1.2.6-1.8.5.4,1.1.6,1.4,1.1.4.7.5,1.5.8,2.2,4.4,11.3,7.8,22.9,11.1,34.6,1,3.8,2.7,7.5,4.1,11.3h0Z"
+    />
+    <path
+      class="cls-1"
+      :class="colorscheme"
+      d="M63.5,97.6c-.1-1.6-.3-3.5-.3-5.3,0-2,.2-3.9.5-5.9,0-.5,1.1-.9,1.7-1.4.2.6.5,1.2.4,1.9,0,2-.3,4.1-.4,6.2,0,2.8,0,5.7,0,8.5,0,1.7-1.1,2.3-2.7,1.7-1.4-.6-2.8-1.2-4.1-1.9-2.2-1.2-4.3-2.5-6.4-3.8-.8-.5-1.5-1.3-.8-2.3.7-1,1.7-.9,2.6-.2.3.2.6.5.9.8,1.7,1.5,3.5,2.8,6,3.1-.1-.3-.1-.5-.2-.6-3.1-4.8-6.2-9.6-9.3-14.4-2.2-3.4-4.4-6.9-6.8-10.3-2.7-3.7-5.5-7.3-8.3-11-1.3-1.7-2.7-3.5-3.9-5.3-.3-.4,0-1.3,0-1.9.6.2,1.2.3,1.6.7.6.5.9,1.2,1.4,1.9,7.5,9.5,14.1,19.7,20.7,29.9,2.1,3.4,4.8,6.4,7.2,9.6h0Z"
+    />
+  </svg>
 </template>
+
+<style scoped>
+.cls-1 {
+  fill: var(--neversink-bg-color);
+  stroke-width: 0px;
+}
+</style>

package/components/Box.vue

@@ -0,0 +1,101 @@
+<script setup>
+import { computed } from 'vue'
+import { resolveColor } from '../layoutHelper'
+const props = defineProps({
+  shape: {
+    type: String,
+    default: 's-s-2-100',
+  },
+  color: {
+    type: String,
+    default: 'white',
+  },
+  size: {
+    type: String,
+    default: '150px', // Default width in pixels
+  },
+  custom: {
+    // add a custom class if you want
+    type: String,
+    default: '',
+  },
+})
+
+// -
+// - s-d-3-10
+// color: scheme
+// width:
+
+// - square vs rounded vs full
+// - dashed, solid, no border
+// - border width
+// - fill opacity
+
+// - fill color
+// - border color
+// - size
+
+const size = computed(() => {
+  return props.size
+})
+const borderwidth = computed(() => {
+  return props.shape.split('-')[2] + 'px'
+})
+const borderstyle = computed(() => {
+  let parts = props.shape.split('-')
+  if (parts[1] == 'd') {
+    return 'dashed'
+  } else if (parts[1] == 'o') {
+    return 'dotted'
+  } else if (parts[1] == 's') {
+    return 'solid'
+  } else {
+    return 'none'
+  }
+})
+
+const style = computed(() => {
+  let s = ''
+  let parts = props.shape.split('-')
+  console.log(parts)
+  console.log(parts[0])
+  // no validation currently!
+
+  // square versus rounded vs full
+  if (parts[0] == 'r') {
+    s += 'rounded-lg '
+  } else if (parts[0] == 'f') {
+    s += 'rounded-full '
+  } else {
+    s += 'rounded-none '
+  }
+
+  // color scheme
+  s += `neversink-${props.color}-scheme binder `
+
+  // add custom class
+  s += props.custom
+
+  return s
+})
+
+const trans = computed(() => {
+  const val = parseInt(props.shape.split('-')[3])
+  return `${val}%`
+})
+</script>
+<template>
+  <div :class="style"><slot></slot></div>
+</template>
+<style scoped>
+.binder {
+  --new-color: color-mix(in srgb, var(--neversink-bg-color), v-bind(trans) transparent);
+  border-color: var(--neversink-border-color);
+  background-color: var(--new-color);
+  color: var(--neversink-text-color);
+  width: v-bind(size);
+  height: v-bind(size);
+  border-width: v-bind(borderwidth);
+  border-style: v-bind(borderstyle);
+}
+</style>

package/components/Line.vue

@@ -0,0 +1,71 @@
+<!--
+
+Simple line
+
+<Line x1="10" y1="20" x2="100" y2="200" color="green" width="3" />
+
+<Line v-bind="{ x1:10, y1:10, x2:200, y2:200 }"/>
+
+-->
+
+<script setup>
+import { ref, computed } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+
+const props = defineProps({
+  x1: {
+    type: [Number, String],
+    default: 100,
+  },
+  y1: {
+    type: [Number, String],
+    default: 100,
+  },
+  x2: {
+    type: [Number, String],
+    default: 100,
+  },
+  y2: {
+    type: [Number, String],
+    default: 100,
+  },
+  width: {
+    type: [Number, String],
+    default: 2, // Default width in pixels
+  },
+  color: {
+    type: String,
+    default: 'black', // actually it is black
+  },
+})
+
+const emit = defineEmits(['dblclick', 'clickOutside'])
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+
+const clickArea = ref()
+onClickOutside(clickArea, () => emit('clickOutside'))
+</script>
+
+<template>
+  <svg class="absolute left-0 top-0 z-100" :width="Math.max(+x1, +x2) + 50" :height="Math.max(+y1, +y2) + 50">
+    <line :x1 :y1 :x2 :y2 class="cls-1" :class="colorscheme" :stroke-width="width || 2" @dblclick="emit('dblclick')" />
+    <line
+      ref="clickArea"
+      :x1
+      :y1
+      :x2
+      :y2
+      stroke="transparent"
+      stroke-linecap="round"
+      :stroke-width="20"
+      @dblclick="emit('dblclick')"
+    />
+  </svg>
+</template>
+<style scoped>
+.cls-1 {
+  stroke: var(--neversink-bg-color);
+}
+</style>

package/components/SpeechBubble.vue

@@ -1,8 +1,5 @@
 <script setup>
 import { computed } from 'vue'
-// import { colors } from '@unocss/preset-mini'
-
-// console.log(colors)
 
 const props = defineProps({
   position: {

package/components/Thumb.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { computed } from 'vue'
+//import { resolveColor } from '../layoutHelper'
+const props = defineProps({
+  color: {
+    type: String,
+    default: 'white',
+  },
+  dir: {
+    type: String,
+    default: 'up',
+  },
+  width: {
+    type: String,
+    default: '70px', // Default width in pixels
+  },
+})
+
+const colorscheme = computed(() => {
+  return `neversink-${props.color}-scheme`
+})
+
+const thumbRotation = computed(() => {
+  return props.dir === 'down' ? 'rotate(180deg)' : 'rotate(0deg)'
+})
+
+// const colorFill = computed(() => resolveColor(props.color))
+// const colorEdge = computed(() => resolveColor(props.edge))
+</script>
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 800 800"
+    :width="width"
+    :style="{ transform: thumbRotation }"
+  >
+    <defs></defs>
+    <g id="bg">
+      <polygon
+        class="cls-1"
+        :class="colorscheme"
+        points="170 433 258 381 374 280 439 200 492 88 530 37 586 69 596 142 584 203 559 256 536 305 546 346 608 363 693 367 745 374 765 409 750 453 775 504 769 549 738 578 743 621 715 664 698 691 681 746 502 766 391 747 280 727 231 713 167 708 140 638 140 471 170 433"
+      />
+    </g>
+    <g id="outline">
+      <path
+        class="cls-2"
+        :class="colorscheme"
+        d="M800,517.4c0-17.4-6-33.6-15.9-46.3-3.9-4.9-8.5-9.2-13.4-13.1,7.8-11.9,12.5-26.1,12.5-41.4,0-42-34-76-76-76h-105.3c-10.4-.5-20.9-1.6-29.3-3.9-8.6-2.2-14.4-5.5-16.9-8.3-4.3-4.9-5.2-8-5.4-13.2,0-4.4,1.3-10.3,4.2-17.1,4.2-10.2,11.6-21.8,19.1-33.1,3.7-5.6,7.5-11.2,10.8-16.8s6.4-11.1,8.7-17.3c7.1-19.8,22.5-55.9,22.5-100,0-18.5-2.7-38.6-10-59.1-6.2-17.6-15.7-31.8-27.8-41.6-12-9.8-26.6-15-41-15-17.2,0-33.9,7.3-46.7,19.9-12.8,12.6-21.8,30.4-25.3,51.7-1.1,7-4.6,19.5-10.3,34.2-8.5,22.2-21.7,50-38.6,77.2-16.8,27.2-37.5,53.8-60.1,73.8-28.7,25.4-56,46.8-79.3,65.6-23.3,19-42.6,34.9-55.9,51.3-2.8,3.6-7.9,7.5-14.2,10.9-9.4,5.1-21.3,8.9-30.6,11.1-4.6,1.1-8.6,1.9-11.4,2.4-.7.1-1.1.2-1.7.3v-8.1H57c-31.5,0-57,25.5-57,57v254.6c0,31.5,25.5,57,57,57h68c21,0,38-17,38-38v-1.9h60.8c8.4,0,25.1,2.5,44.9,6.9,29.9,6.4,67.7,16.3,104.5,25,36.9,8.6,72.4,16,100.4,17,29.8,1.1,51.7,1.6,69.1,1.6,37,0,54-2.3,79.3-5.1h.6c0,0,35.5-5.2,35.5-5.2h.3c36.1-5.9,63.7-37,63.7-74.9s-.6-9.6-1.6-14.2c9.7-4.2,18.6-10.2,25.6-17.8,12.5-13.4,20.2-31.6,20.2-51.4,0-11.4-2.6-22.2-7.1-31.9,24.1-12.6,40.8-37.6,40.8-66.8ZM80.1,713.4c-14.5,0-26.2-11.7-26.2-26.2s11.7-26.2,26.2-26.2,26.2,11.7,26.2,26.2-11.7,26.2-26.2,26.2ZM726.1,554.1c-7.9.5-14.8,5.6-17.3,13.2-2.5,7.5-.3,15.8,5.7,21,8.1,7.1,13,16.7,13,27.8,0,9.7-3.7,18.3-9.8,24.9-6.1,6.6-14.6,10.9-24.1,11.8-6.5.6-12.5,4.5-15.5,10.3-3.1,5.8-3,12.8.2,18.6,3.2,5.7,4.9,11.6,4.9,17.9,0,18.4-13.4,33.4-31,36.4l-34.9,5c-25.9,2.9-39.3,4.8-74.7,4.9-16.7,0-38.2-.5-67.7-1.6-14.8-.5-35.3-3.7-57.9-8.3-33.8-6.9-72.5-16.9-107.1-25.2-17.4-4.2-33.7-7.9-48.2-10.7-14.6-2.8-27.1-4.6-38-4.6h-41.3v-245.8c4.5-1,9.5-2.3,15-4,8.7-2.7,18.3-6.3,27.6-11.3,9.3-5,18.6-11.5,26-20.7,9.2-11.5,27.2-27,50.1-45.5,23-18.6,50.9-40.5,80.5-66.7,35.5-31.4,63.7-73.1,84.3-111.8,10.3-19.4,18.7-38,25-54.4,6.3-16.5,10.4-30.4,12.4-41.7,2.4-14.4,8-24.3,14.2-30.4,6.2-6.1,13-8.6,19.3-8.6,5.4,0,10.8,1.7,16.5,6.2,5.6,4.5,11.3,12.2,15.6,24.2,5.6,16.1,7.8,31.5,7.8,46.2,0,35.1-12.5,65.7-20.2,86.6-1,3-4.2,8.7-8.4,15.3-6.4,10.1-15.2,22.4-22.6,36-7.4,13.6-14.1,28.8-14.2,46.4-.1,13.5,5,28.4,15.9,39.8,10.1,10.7,22.9,16,35.4,19.4,12.7,3.3,25.8,4.6,38,5.1h.8s40.8,0,40.8,0h64.9c20.4,0,37,16.6,37,37.1,0,12.7-6.4,23.8-16.1,30.5-6.2,4.3-9.4,11.8-8.2,19.3,1.3,7.5,6.7,13.5,14,15.6,7.8,2.2,14.7,6.9,19.5,13.1,4.8,6.2,7.6,13.8,7.6,22.4,0,19.6-15.4,35.6-34.9,36.7Z"
+      />
+    </g>
+  </svg>
+</template>
+
+<style scoped>
+.cls-1 {
+  fill: var(--neversink-bg-color);
+  stroke-miterlimit: 10;
+}
+
+.cls-2 {
+  fill: var(--neversink-border-color);
+  stroke-width: 0px;
+}
+</style>

package/components/VDragLine.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted } from 'vue'
+import type { DragElementMarkdownSource } from '@slidev/client/composables/useDragElements.ts'
+import { useDragElement } from '@slidev/client/composables/useDragElements.ts'
+import Line from './Line.vue'
+
+const props = defineProps<{
+  pos?: string
+  markdownSource?: DragElementMarkdownSource
+  width?: number | string
+  color?: string
+}>()
+
+const { dragId, mounted, unmounted, startDragging, stopDragging, x0, y0, width, height } = useDragElement(
+  null,
+  props.pos ?? '100,100,300,300',
+  props.markdownSource,
+  true
+)
+
+onMounted(mounted)
+onUnmounted(unmounted)
+
+const x1 = computed(() => x0.value - width.value / 2)
+const y1 = computed(() => y0.value - height.value / 2)
+const x2 = computed(() => x0.value + width.value / 2)
+const y2 = computed(() => y0.value + height.value / 2)
+</script>
+
+<template>
+  <Line
+    :x1
+    :y1
+    :x2
+    :y2
+    :data-drag-id="dragId"
+    :width="props.width"
+    :color="props.color"
+    @dblclick="startDragging"
+    @click-outside="stopDragging"
+  />
+</template>

package/docs/.vitepress/config.js

@@ -57,10 +57,15 @@ export default defineConfig({
               { text: 'Email', link: '/components/email' },
               { text: 'SpeechBubble', link: '/components/speechbubble' },
               { text: 'StickyNote', link: '/components/stickynote' },
-              { text: 'CreditScroll', link: '/components/creditscroll' },
+              // { text: 'CreditScroll', link: '/components/creditscroll' },
               { text: 'QRCode', link: '/components/qrcode' },
               { text: 'Kawaii', link: '/components/kawaii' },
+              { text: 'ArrowDraw', link: '/components/arrowdraw' },
               { text: 'ArrowHeads', link: '/components/arrowheads' },
+              { text: 'Thumb', link: '/components/thumb' },
+              { text: 'Line', link: '/components/line' },
+              { text: 'VDragLine', link: '/components/vdragline' },
+              { text: 'Box', link: '/components/box' },
             ],
           },
           { text: 'Customizing', link: '/customizing' },

package/docs/.vitepress/theme/index.js

@@ -12,6 +12,11 @@ import StickyNote from '../../../components/StickyNote.vue'
 import QrcodeVue from 'qrcode.vue'
 import SpeechBubble from '../../../components/SpeechBubble.vue'
 
+import ArrowDraw from '../../../components/ArrowDraw.vue'
+import ArrowHeads from '../../../components/ArrowHeads.vue'
+import Thumb from '../../../components/Thumb.vue'
+import Line from '../../../components/Line.vue'
+import Box from '../../../components/Box.vue'
 import BackPack from '../../../components/vue3-kawaii/components/backpack/BackPack.vue'
 import Browser from '../../../components/vue3-kawaii/components/browser/Browser.vue'
 import Cat from '../../../components/vue3-kawaii/components/cat/Cat.vue'
@@ -37,6 +42,11 @@ export default {
     app.component('StickyNote', StickyNote)
     app.component('QRCode', QrcodeVue)
     app.component('SpeechBubble', SpeechBubble)
+    app.component('ArrowDraw', ArrowDraw)
+    app.component('ArrowHeads', ArrowHeads)
+    app.component('Thumb', Thumb)
+    app.component('Line', Line)
+    app.component('Box', Box)
     app.component('BackPack', BackPack)
     app.component('Browser', Browser)
     app.component('Cat', Cat)

package/docs/colors.md

@@ -2,7 +2,7 @@
 
 The project uses tailwind-like color schemes arranged in ==monochromatic pairs==.
 Color schemes can be applied to several elements, perhaps most importantly to
-slide [layouts](/layouts).
+slide [layouts](/layouts) and some [components](/components).
 
 These boxes show the options and names:
 

package/docs/components/arrowdraw.md

@@ -0,0 +1,21 @@
+# ArrowDraw
+
+## Description
+
+Draws a handdrawn arrow in a customizable color. Can be v-drag to size and position.
+
+## `ArrowDraw` component
+
+The `ArrowDraw` component is used to just draw a hand-drawn arrow. It can have the color
+changed according to the [color schemes](/colors) in the theme. The ArrowDraw component has the following props:
+
+- `color` (optional) the color of the arrow stroke. Colors are from the themes. The background color is applied as the stroke so `red` is red, `black` is black. Default is 'black'.
+- width (optional) the initial width of the image. Default is 140px
+
+```md
+<ArrowDraw color='red' v-drag/>
+```
+
+Renders as:
+
+<ArrowDraw color='red' />

package/docs/components/arrowheads.md

@@ -6,10 +6,23 @@ Draws a set of hand drawn arrows that point to a central location. Useful to cal
 
 ## `ArrowHeads` component
 
+The ArrowHeads component has the following props:
+
+- `color` (optional) the color of the arrow stroke. Colors are from the themes. The background color is applied as the stroke so `red` is red, `black` is black. Default is 'black'.
+- width (optional) the initial width of the image. Default is 140px
+
+```md
+<ArrowHeads color='pink' width="300px" v-drag />
+```
+
+Renders as:
+
+<ArrowHeads color='pink' width="300px"/>
+
 ```md
-<ArrowHeads v-drag />
+<ArrowHeads  v-drag />
 ```
 
 Renders as:
 
-<img src="/screenshots/arrowheads.png" alt="ArrowHeads component" width="200px" />
+<ArrowHeads />

package/docs/components/box.md

@@ -0,0 +1,64 @@
+# Box
+
+## Description
+
+Draws an empty or filled box. Useful for highlighting and grouping things.
+
+## `Box` component
+
+The `Box` component is used to just draw a rectangle. It has the following props:
+
+- `shape` (optional) the shape of the box. There are four values connected with a kebob style notation. The first element is the shape which can be `s` (square), `r` (rounded) or `f` (full) which is practically a circle. The second element is the border type which can be `s` (solid), `d` (dashed) or `o` (dotted). The third element is the border radius in pixels. The fourth element is the opacity of the fill (0 = opaque, 100=transparent). For example, the default is 's-s-2-100' which is a square rectangle with a 2px solid border and transparent fill. A few examples appear below.
+- `size` (optional) the size of the square. The default is '150px'.
+- `color` (optional) the color of the shape. It uses the color schemes in the theme. The default is 'white' (which means a black border and white fill).
+- `custom` (optional) any custom classes you want to add to the box. The default is none. For example, opacity only applies to the fill not the border but you can change that using `custom` classes.
+
+```md
+<Box v-drag />
+```
+
+Renders as:
+
+<Box  />
+
+well a box, what did you expect.
+
+But of course you can customise it:
+
+```md
+<Box shape='r-d-8-0' width='200px' custom='m-10 ' />
+```
+
+<Box shape='r-d-8-0' width='200px' custom='m-10 ' />
+
+```md
+<Box shape='f-o-5-0' color='sky-light' custom='m-10' />
+```
+
+<Box shape='f-o-5-0' color='sky-light' custom='m-10' />
+
+more transparent:
+
+```md
+<Box shape='f-o-5-75' color='sky-light' custom='m-10' />
+```
+
+<Box shape='f-o-5-75' color='sky-light' custom='m-10' />
+
+If can include text as well using a slot
+
+```md
+<Box>Hi there</Box>
+```
+
+renders as:
+
+<Box>Hi there</Box>
+
+You might like to syle it a bit
+
+```md
+<Box custom='pt-10'>Hi there</Box>
+```
+
+<Box custom='p-10'>Hi there</Box>

package/docs/components/line.md

@@ -0,0 +1,26 @@
+# Line
+
+## Description
+
+Draws a line
+
+## `Line` component
+
+The `Line` component is used to just draw a straight line. It has the following props:
+
+- `x1` (required) starting x position
+- `y1` (required) starting y postiion
+- `x2` (required) the end x position
+- `y2` (required) the end y position
+- `width` (optional) the width of the line (default '2')
+- `color` (optional) the color of the line. Colors can be any of the color schemes. the default is 'black'. The background color of the theme is applied to the stroke of the line so `black` is black line, `red` is red line, `red-light` is a light red line, etc.
+
+```md
+<Line :x1=0 :y1=0 :x2=200 :y2=200 :width=2 color='red' v-drag />
+```
+
+Renders as:
+
+well, a red svg line, what did you want to see?
+
+<img src="/screenshots/line.png" />