README.md

@@ -1,86 +1,7 @@
-### **Kslab**
+# Tauri + Vanilla TS
 
-A visual organization tool for notes, text, shapes, and images.
+This template should help get you started developing with [Tauri](https://tauri.app) & [Kaioken](https://kaioken.dev).
 
-### **Table of Contents**
+## Recommended IDE Setup
-
-  * [Technologies]()
-  * [Development Setup]()
-  * [Installation]()
-      * [Desktop Application]() 
-      * [Web Application]() 
-  * [Usage]()
-      * [Desktop Application]() 
-      * [Web Application]() 
-  * [Contributing]()
-  * [License]()
-
-### **Screenshots**
-
-![screenshot](./src/assets/repo/screenshot.png)
-
-### **Technologies**
-
-This project utilizes the following open-source libraries:
-
-  * **Kaioken:** A lightweight UI rendering library ([Kaioken](https://kaioken.dev))
-  * **Tauri:** A framework for building desktop and mobile applications with web technologies ([https://v2.tauri.app/](https://v2.tauri.app/))
-  * **TypeScript:** A typed superset of JavaScript that adds optional static typing
-  * **ESLint:** A linter for enforcing code style and catching potential errors
-
-### **Development Setup**
-
-1. **Clone the repository:**
-   ```bash
-   git clone https://git.klectr.dev/Klectr/kslab.git
-   ```
-2. **Install dependencies:**
-This project uses [Bun](https://bun.sh) as its package manager.
-   ```bash
-   bun install
-   ```
-
-### **Installation**
-
-#### **Desktop Application**
-
-[Instructions on how to download, install, and run the desktop application. Mention any dependencies or prerequisites.]
-
-**Note:** These instructions might involve installing Tauri and any additional dependencies for the desktop application.
-
-#### **Web Application**
-
-[Instructions on how to access and use the web application. Specify if it's a standalone web app or runs within Tauri.]
-
-**Note:** These instructions might involve running the web application directly in a browser if it's standalone.
-
-### **Usage**
-
-#### **Desktop Application**
-
-* **Add notes:** Click the "+" button to create a new note.
-* **Edit notes:** Double-click a note to edit its content.
-* **Move notes:** Drag and drop notes to reposition them on the canvas.
-* **Add shapes and images:** Use the toolbar to add various shapes and images.
-* **Customize appearance:** Change the color, size, and other properties of elements.
-
-#### **Web Application**
-
-[Instructions for using the web application, similar to the desktop application]
-
-### **Contributing**
-
-[Guidelines for contributors, including how to report bugs or submit pull requests. Mention how contributions to both Kaioken and Tauri integrations are handled. Also, emphasize the importance of following TypeScript and ESLint conventions.]
-
-### **License**
-
-[Specify the license under which the project is released (e.g., MIT, Apache License 2.0)]
-
-**Additional sections you might consider:**
-
-  * **Roadmap** - Future plans for Kslab, such as implementing an infinite canvas or adding more features.
-
-**Remember to replace the placeholder text with specific details about your project.**
-
-**Let me know if you'd like help filling in any specific sections or if you have any further questions about Kaioken, Tauri, TypeScript, or ESLint.**
 
+- [VS Code](https://code.visualstudio.com/) + [Tauri](https://marketplace.visualstudio.com/items?itemName=tauri-apps.tauri-vscode) + [rust-analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer)

eslint.config.js

@@ -1,40 +0,0 @@
-import globals from "globals"
-import pluginJs from "@eslint/js"
-import tseslint from "typescript-eslint"
-import pluginReact from "eslint-plugin-react"
-
-export default [
-  { files: ["./src/**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
-  { plugins: { react: pluginReact } },
-  {
-    languageOptions: {
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-      globals: globals.browser,
-    },
-  },
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  pluginReact.configs.flat.recommended,
-  {
-    rules: {
-      "react/react-in-jsx-scope": "off",
-      "react/no-unknown-property": "off",
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        {
-          args: "all",
-          argsIgnorePattern: "^_",
-          caughtErrors: "all",
-          caughtErrorsIgnorePattern: "^_",
-          destructuredArrayIgnorePattern: "^_",
-          varsIgnorePattern: "^_",
-          ignoreRestSiblings: true,
-        },
-      ],
-    },
-  },
-]

package.json

@@ -18,22 +18,14 @@
     "tiny-markdown-editor": "^0.1.26"
   },
   "devDependencies": {
-    "@eslint/js": "^9.13.0",
     "@tauri-apps/cli": "^1",
     "autoprefixer": "^10.4.18",
     "commitizen": "^4.3.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^9.13.0",
-    "eslint-plugin-react": "^7.37.2",
-    "globals": "^15.11.0",
     "postcss": "^8.4.35",
-    "prettier": "^3.3.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.0.2",
-    "typescript-eslint": "^8.11.0",
     "vite": "^5.0.0",
-    "vite-plugin-checker": "^0.8.0",
-    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-kaioken": "^0.13.1"
   },
   "config": {

src/components/ContextMenuPortal.tsx

@@ -1,12 +1,14 @@
-import { useClickOutside, useMouse } from "@kaioken-core/hooks";
+import { useClickOutside, useKeyStroke, useMouse } from "@kaioken-core/hooks";
 import { Portal, signal, useEffect, useRef } from "kaioken";
 
-interface ContextMenuPortalProps {
+namespace ContextMenuPortal {
+  export interface Props {
     children: JSX.Children
     open: boolean
     closeAction: (() => void) | null | undefined
+  }
 }
-export function ContextMenuPortal({ children, open, closeAction }: ContextMenuPortalProps) {
+export function ContextMenuPortal({ children, open, closeAction }: ContextMenuPortal.Props) {
   const { mouse } = useMouse()
   const pos = signal({ x: 0, y: 0 })
   const ref = useRef<HTMLDivElement>(null)

src/components/ImageCard.tsx

@@ -6,14 +6,15 @@ import images, { ImageCardType } from "../signals/images"
 import { updateLocalStorage } from "../utils/localStorage"
 import { useThemeDetector } from "../utils/useThemeDetector"
 import { ContextMenuPortal } from "./ContextMenuPortal"
-import { CardTypes } from "../types"
 
-interface ImageCardProps {
+namespace ImageCard {
+  export interface ImageCardProps {
     key: ImageCardType['id']
     data: ImageCardType
+  }
 }
 
-export function ImageCard({ key: itemKey, data: item }: ImageCardProps) {
+export function ImageCard({ key: itemKey, data: item }: ImageCard.ImageCardProps) {
   const { debounce } = useDebounce()
   const pressed = signal(false)
   const newX = useRef(0)
@@ -26,7 +27,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCardProps) {
 
   function debounceLSUpdate(time?: number) {
     debounce(() => {
-      updateLocalStorage(CardTypes.IMAGES, images.images).notify()
+      updateLocalStorage("images", images.images.value)
     }, time)
   }
 
@@ -89,7 +90,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCardProps) {
     window.removeEventListener('mouseup', _handleResizeMouseUp)
   }
 
-  function _handleClose() {
+  function _handleClose(_e: Event) {
     ImagesSignal.default.removeImage(item.id)
     ImagesSignal.default.images.notify()
     debounceLSUpdate()
@@ -160,7 +161,7 @@ export function ImageCard({ key: itemKey, data: item }: ImageCardProps) {
 
 
 function ExpandIcon({ cb }: {
-  cb: ((this: GlobalEventHandlers, ev: MouseEvent) => void) | null | undefined
+  cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
 }) {
   const isDarkTheme = useThemeDetector()
   return (

src/components/InfinateCanvas.tsx

@@ -10,12 +10,10 @@ import { Logo } from "./Logo"
 import { useThemeDetector } from "../utils/useThemeDetector"
 import { TextItem } from "./TextItem"
 import texts from "../signals/texts"
-import { useDebounce } from "../utils/useDebounce"
 
 export default function InfiniteCanvas() {
   const containerRef = useRef<HTMLDivElement>(null)
   const isDarkTheme = useThemeDetector()
-  const { debounce } = useDebounce()
 
   useEffect(() => {
     const initPos = getInitialPosition(canvasDimentsion)
@@ -29,24 +27,22 @@ export default function InfiniteCanvas() {
     }
 
     function _updatePosition() {
-      debounce(() => {
       localStorage.setItem("pos", JSON.stringify({
         left: window.scrollX,
         top: window.scrollY
       }))
-      })
     }
 
     _updateDimensions()
     window.addEventListener("resize", _updateDimensions)
-    window.addEventListener("scroll", _updatePosition)
+    window.addEventListener("scrollend", _updatePosition)
     notes.loadLocalStorage()
     images.loadLocalStorage()
     texts.loadLocalStorage()
 
     return () => {
       window.removeEventListener("resize", _updateDimensions)
-      window.removeEventListener("scroll", _updatePosition)
+      window.removeEventListener("scrollend", _updatePosition)
     }
   }, [])
 
@@ -110,7 +106,7 @@ function getInitialPosition(canvasDimensions: typeof canvasDimentsion): ScrollTo
   try {
     initPosition = JSON.parse(localStorage.getItem("pos") ?? "")
   } catch (e) {
-    console.error("no local storage for pos " + e)
+    console.error("no local storage for pos")
   }
 
   if (!initPosition) return defaultScroll

src/components/MarkDownEditor/MarkDownEditor.tsx

@@ -2,12 +2,14 @@ import { Editor, Listener } from 'tiny-markdown-editor'
 import './md.css'
 import { useEffect, useRef } from "kaioken"
 
-interface MarkDownEditorProps {
+namespace MarkDownEditor {
+  export interface Props {
     initial: string
     onChange: Listener<'change'>
+  }
 }
 
-export function MarkDownEditor({ initial, onChange }: MarkDownEditorProps) {
+export function MarkDownEditor({ initial, onChange }: MarkDownEditor.Props) {
   const elRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {

src/components/MiniMap.tsx

@@ -24,7 +24,7 @@ export function MiniMap() {
 
 
   useEffect(() => {
-    function _handleScroll() {
+    function _handleScroll(_e: Event) {
       scrollX.value = window.scrollX
       scrollY.value = window.scrollY
     }
@@ -47,7 +47,7 @@ export function MiniMap() {
         const image = images.images.value[imageKey]
         const el = useRef(null)
 
-        function _handleItemClick() {
+        function _handleItemClick(_e: MouseEvent) {
           const newLeft = image.position.x - ((viewportWidth / 2) - (image.dimensions.w / 2))
           const newTop = image.position.y - ((viewportHeight / 2) - (image.dimensions.h / 2))
 
@@ -65,7 +65,7 @@ export function MiniMap() {
         const newZIndex = LayerEnum.MINIMAP + 1
 
         return (
-          <div key={imageKey} ref={el} className={"absolute dark:bg-green-500 bg-green-300 dark:hover:bg-blue-500 hover:bg-blue-300 cursor-pointer border dark:border-[#222] border-green-500 rounded"}
+          <div ref={el} className={"absolute dark:bg-green-500 bg-green-300 dark:hover:bg-blue-500 hover:bg-blue-300 cursor-pointer border dark:border-[#222] border-green-500 rounded"}
             onclick={_handleItemClick}
             style={{
               width: `${newWidth}px`,
@@ -82,7 +82,7 @@ export function MiniMap() {
       {Object.keys(notes.notes.value).map((noteKey: NoteCardType['id']) => {
         const note = notes.notes.value[noteKey]
 
-        function _handleItemClick() {
+        function _handleItemClick(_e: MouseEvent) {
           const newLeft = note.position.x - ((viewportWidth / 2) - (note.dimensions.w / 2))
           const newTop = note.position.y - ((viewportHeight / 2) - (note.dimensions.h / 2))
           window.scrollTo({
@@ -99,7 +99,7 @@ export function MiniMap() {
         const newZIndex = LayerEnum.MINIMAP + 1
 
         return (
-          <div key={noteKey} className={"absolute dark:bg-gray-500 bg-gray-300 hover:bg-blue-500 cursor-pointer border dark:border-[#222] border-gray-400 rounded"}
+          <div className={"absolute dark:bg-gray-500 bg-gray-300 hover:bg-blue-500 cursor-pointer border dark:border-[#222] border-gray-400 rounded"}
             onclick={_handleItemClick}
             style={{
               width: `${newWidth}px`,
@@ -116,7 +116,7 @@ export function MiniMap() {
         const text = texts.texts.value[textKey]
         const el = useRef(null)
 
-        function _handleItemClick() {
+        function _handleItemClick(_e: MouseEvent) {
           window.scrollTo({
             left: text.position.x - ((viewportWidth / 2) - (text.dimensions.w / 2)),
             top: text.position.y - ((viewportHeight / 2) - (text.dimensions.h / 2)),
@@ -125,7 +125,7 @@ export function MiniMap() {
         }
 
         return (
-          <div key={textKey} ref={el} className={"bg-indigo-500 hover:bg-blue-500 cursor-pointer rounded"}
+          <div ref={el} className={"bg-indigo-500 hover:bg-blue-500 cursor-pointer rounded"}
             onclick={_handleItemClick}
             style={{
               position: 'absolute',

src/components/NoteCard.tsx

@@ -12,12 +12,14 @@ import { createFileAndExport } from "../utils/createFileAndExport"
 import { ContextMenuPortal } from "./ContextMenuPortal"
 import { HelpIcon } from "./icons/HelpIcon"
 
-interface NoteCardProps {
+namespace NoteCard {
+  export interface NoteCardProps {
     key: NoteCardType['id']
     data: NoteCardType
+  }
 }
 
-export function NoteCard({ key: itemKey, data: item }: NoteCardProps) {
+export function NoteCard({ key: itemKey, data: item }: NoteCard.NoteCardProps) {
   const saved = signal(true)
   const pressed = signal(false)
   const newX = useRef(0)
@@ -101,7 +103,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCardProps) {
     saved.value = false
   }
 
-  function _handleClose() {
+  function _handleClose(_e: Event) {
     NotesSigal.default.removeNote(item.id)
     NotesSigal.default.notes.notify()
     updateLocalStorage()
@@ -115,7 +117,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCardProps) {
     createFileAndExport("Note", item.contents, "text/markdown")
   }
 
-  function _handleExportClick() {
+  function _handleExportClick(_e: MouseEvent) {
     _exportFile()
   }
 
@@ -147,11 +149,11 @@ export function NoteCard({ key: itemKey, data: item }: NoteCardProps) {
     switch (e.key) {
       case 'Delete':
         e.preventDefault()
-        _handleClose()
+        _handleClose(e)
         break
       case 'Backspace':
         e.preventDefault()
-        _handleClose()
+        _handleClose(e)
         break
       case 'e':
         e.preventDefault()
@@ -253,7 +255,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCardProps) {
       {/* HOTKEY PAPER */}
       {showHelp.value &&
         <div
-          className={"dark:text-white absolute dark:bg-[#1c1c1c] bg-[#fff] rounded-md p-1 z-[1000] border border-blue-500"}
+          className={"text-white absolute bg-[#1c1c1c] rounded-md p-1 z-[1000] border border-blue-500"}
           style={{
             top: `${item.position.y}px`,
             left: `${item.position.x - 120}px`
@@ -271,7 +273,7 @@ export function NoteCard({ key: itemKey, data: item }: NoteCardProps) {
 }
 
 function ExpandIcon({ cb }: {
-  cb: ((this: GlobalEventHandlers, ev: MouseEvent) => void) | null | undefined
+  cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined
 }) {
   const isDarkTheme = useThemeDetector()
 

src/components/TextItem.tsx

@@ -3,15 +3,17 @@ import { TextSignal, focusedItem } from "../signals"
 import { useDebounce } from "../utils/useDebounce"
 import texts, { TextCardType } from "../signals/texts"
 import { LayerEnum } from "../utils/enums"
-import { Card, CardTypes } from "../types"
+import { Card } from "../types"
 import { useThemeDetector } from "../utils/useThemeDetector"
 
-interface TextCardProps {
+namespace TextItem {
+  export interface TextCardProps {
     key: TextCardType['id']
     data: TextCardType
+  }
 }
 
-export function TextItem({ key: itemKey, data: item }: TextCardProps) {
+export function TextItem({ key: itemKey, data: item }: TextItem.TextCardProps) {
   const { debounce } = useDebounce()
   const pressed = signal(false)
   const newX = useRef(0)
@@ -26,7 +28,7 @@ export function TextItem({ key: itemKey, data: item }: TextCardProps) {
     const elDems = elRef.current?.getBoundingClientRect()
     const elW = elDems?.width ?? 100
     const elH = elDems?.height ?? 100
-    const newDems: Card<CardTypes.TEXTS>['dimensions'] = { w: elW, h: elH }
+    const newDems: Card<'texts'>['dimensions'] = { w: elW, h: elH }
     TextSignal.default.updateTextProperty(itemKey, 'dimensions', newDems)
     TextSignal.default.texts.notify()
   }, [elRef.current, item.fontSize])
@@ -35,7 +37,7 @@ export function TextItem({ key: itemKey, data: item }: TextCardProps) {
 
   function updateLocalStorage(time?: number) {
     debounce(() => {
-      localStorage.setItem(CardTypes.TEXTS, JSON.stringify(texts.texts.value))
+      localStorage.setItem("texts", JSON.stringify(texts.texts.value))
     }, time)
   }
 
@@ -85,7 +87,7 @@ export function TextItem({ key: itemKey, data: item }: TextCardProps) {
     window.addEventListener('mouseup', _handleResizeMouseUp)
   }
 
-  function _handleResizeMouseUp() {
+  function _handleResizeMouseUp(_e: MouseEvent) {
     pressed.value = false
     window.removeEventListener('mousemove', _handleResizeMove)
     window.removeEventListener('mouseup', _handleResizeMouseUp)
@@ -155,7 +157,7 @@ export function TextItem({ key: itemKey, data: item }: TextCardProps) {
       >
         <p
           ref={pRef}
-          //@ts-expect-error oninput doesnt exist on the props type
+          //@ts-expect-error
           oninput={_handleContentInput}
           contentEditable
           className={'text-p inline-block px-2 w-full select-none drop-shadow relative'}>
@@ -169,12 +171,13 @@ export function TextItem({ key: itemKey, data: item }: TextCardProps) {
   )
 }
 
-interface CloseIconProps {
+namespace CloseIcon {
-  cb: ((this: GlobalEventHandlers, ev: MouseEvent) => void) | null | undefined,
+  export interface Props {
+    cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined,
     item: TextSignal.TextCardType
+  }
 }
-
+function CloseIcon({ item, cb }: CloseIcon.Props) {
-function CloseIcon({ item, cb }: CloseIconProps) {
   const isDark = useThemeDetector()
   return (
     <svg
@@ -201,12 +204,13 @@ function CloseIcon({ item, cb }: CloseIconProps) {
   )
 }
 
-interface ExpandIconProps {
+namespace ExpandIcon {
-  cb: ((this: GlobalEventHandlers, ev: MouseEvent) => void) | null | undefined,
+  export interface Props {
+    cb: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined,
     item: TextSignal.TextCardType
+  }
 }
-
+function ExpandIcon({ cb, item }: ExpandIcon.Props) {
-function ExpandIcon({ cb, item }: ExpandIconProps) {
   const isDark = useThemeDetector()
   return (
     <svg

src/components/Toast.tsx

@@ -8,7 +8,6 @@ import {
   useEffect,
   useState,
 } from "kaioken"
-import { noop } from "kaioken/utils"
 
 type Toast = {
   ts: number
@@ -22,15 +21,11 @@ const defaultDuration = 3000
 
 const ToastContext = createContext<{
   showToast: (type: Toast["type"], message: string) => void
-}>({ showToast: noop })
+}>(null as any)
 
 export const useToast = () => useContext(ToastContext)
 
-interface ToastProviderProps {
+export const ToastContextProvider: Kaioken.FC = ({ children }) => {
-  children: JSX.Children
-}
-
-export function ToastContextProvider({ children }: ToastProviderProps) {
   const [toasts, setToasts] = useState<Toast[]>([])
 
   useEffect(() => {

src/components/cardSelector/ImageCardButton.tsx

@@ -1,6 +1,5 @@
 import { ImagesSignal } from "../../signals"
 import images from "../../signals/images"
-import { CardTypes } from "../../types"
 import { updateLocalStorage } from "../../utils/localStorage"
 import { useToast } from "../Toast"
 import { Tooltip } from "./Tooltip"
@@ -14,16 +13,12 @@ export function ImageCardButton() {
     input.accept = "image/*"
     input.multiple = false
 
-    input.onchange = (e: Event) => {
+    input.onchange = (e: any) => {
-      const el = e.target as HTMLInputElement
+      const file = e.target.files[0]
-      if (!el.files?.length) return
-      if (!el.files.length) return
-      const file = el.files[0]
-
       const reader = new FileReader()
       reader.readAsDataURL(file)
       reader.onload = function(readerEvent) {
-        const image = document.createElement('img')
+        let image = document.createElement('img')
         image.onload = function() {
           const { width, height } = image
 
@@ -38,7 +33,7 @@ export function ImageCardButton() {
           if (!img) return
 
           const imgId = ImagesSignal.default.addImage({
-            type: CardTypes.IMAGES,
+            type: "image",
             title: "New Image",
             contents: content as string,
             position: {
@@ -52,7 +47,7 @@ export function ImageCardButton() {
           })
 
           try {
-            updateLocalStorage(CardTypes.IMAGES, images.images).notify()
+            updateLocalStorage("images", images.images.value)
           } catch (e: unknown) {
             if (e instanceof DOMException) {
               if (e.name !== 'QuotaExceededError') return

src/components/cardSelector/ImportButton.tsx

@@ -1,58 +1,44 @@
-import images, { ImageCardType } from "../../signals/images"
+import images from "../../signals/images"
-import notes, { NoteCardType } from "../../signals/notes"
+import notes from "../../signals/notes"
-import texts, { TextCardType } from "../../signals/texts"
+import { Card } from "../../types"
-import { Card, CardTypes } from "../../types"
 import { convertBase64ToJson } from "../../utils/convertBase64ToJson"
 import { updateLocalStorage } from "../../utils/localStorage"
 import { Tooltip } from "./Tooltip"
 import { defaultClassName } from "./utils"
 
-type legacySupportTypes = { type: CardTypes | string }
-
 export function ImportButton() {
 
   function _handleImport() {
-    // guard clause to prevent overwriting existing cards
-    if (Object.keys(images.images.value).length || Object.keys(notes.notes.value).length) {
-      const isConfirmed = confirm("Are you sure you want to overwrite your existing cards?")
-      if (!isConfirmed) return
-    }
-
     const input = document.createElement('input')
     input.type = 'file'
     input.accept = ".json"
     input.multiple = false
-    input.onchange = (e: Event) => {
+    input.onchange = (e: any) => {
-      if (e.target === null) return
+      const file = e.target.files[0]
-      const el = e.target as HTMLInputElement
-      if (!el.files?.length) return
-      const file = el.files[0]
-
       const reader = new FileReader()
       reader.readAsDataURL(file)
       reader.onload = function(readerEvent) {
         let content = readerEvent.target?.result;
         // get only the base64 parts and not any identifiers
         content = (content as string).split(',')[1]
-        const data: Record<string, Omit<Card<CardTypes>, 'type'> & legacySupportTypes> = convertBase64ToJson(content)
+        const data: Record<string, Card<'notes'> | Card<'images'>> = convertBase64ToJson(content)
-        for (const key in data) {
+        for (let key in data) {
           const item = data[key]
-          const { id: _, ...rest } = item
+          if (item.type == 'images') {
-          if (item.type === CardTypes.IMAGES || item.type == 'image') {
+            const { id, ...rest } = item
-            images.addImage(rest as ImageCardType)
+            images.addImage(rest)
-            continue
+          }
-          } else if (item.type === CardTypes.NOTES || item.type === 'note') {
+
-            notes.addNote(rest as NoteCardType)
+          if (item.type == 'notes') {
-            continue
+            const { id, ...rest } = item
-          } else if (item.type === CardTypes.TEXTS || item.type === 'text') {
+            notes.addNote(rest)
-            texts.addText(rest as TextCardType)
-            continue
           }
         }
 
-        updateLocalStorage(CardTypes.NOTES, notes.notes).notify()
+        updateLocalStorage('notes', notes.notes.value)
-        updateLocalStorage(CardTypes.IMAGES, images.images).notify()
+        updateLocalStorage('images', images.images.value)
-        updateLocalStorage(CardTypes.TEXTS, texts.texts).notify()
+        notes.notes.notify()
+        images.images.notify()
       }
     }
     input.click()

src/components/cardSelector/StickyNoteButton.tsx

@@ -1,6 +1,5 @@
 import { NotesSigal } from "../../signals"
 import notes from "../../signals/notes"
-import { CardTypes } from "../../types"
 import { updateLocalStorage } from "../../utils/localStorage"
 import { Tooltip } from "./Tooltip"
 import { defaultClassName } from "./utils"
@@ -8,7 +7,7 @@ import { defaultClassName } from "./utils"
 export function StickyNoteButton() {
   function _handleClick(e: MouseEvent) {
     NotesSigal.default.addNote({
-      type: CardTypes.NOTES,
+      type: "note",
       title: "New Note",
       contents: "",
       position: {
@@ -20,7 +19,7 @@ export function StickyNoteButton() {
         h: 200
       }
     })
-    updateLocalStorage(CardTypes.NOTES, notes.notes)
+    updateLocalStorage("notes", notes.notes.value)
   }
 
   return (

src/components/cardSelector/TextButton.tsx

@@ -3,14 +3,13 @@ import { TextSignal } from "../../signals";
 import texts from "../../signals/texts";
 import { updateLocalStorage } from "../../utils/localStorage";
 import { defaultClassName } from "./utils";
-import { CardTypes } from "../../types";
 
 export function TextButton() {
 
   function _handleClick(e: MouseEvent) {
     TextSignal.default.addText({
       fontSize: 84,
-      type: CardTypes.TEXTS,
+      type: "texts",
       title: "New Note",
       contents: "todo: fill me",
       position: {
@@ -22,7 +21,7 @@ export function TextButton() {
         h: 100
       }
     })
-    updateLocalStorage(CardTypes.TEXTS, texts.texts).notify()
+    updateLocalStorage("texts", texts.texts.value)
   }
 
   return (

src/components/icons/ExportIcon.tsx

@@ -1,8 +1,9 @@
-interface ExportIconProps {
+namespace ExportIcon {
+  export interface Props {
     className?: string
+  }
 }
-
+export function ExportIcon({ className }: ExportIcon.Props) {
-export function ExportIcon({ className }: ExportIconProps) {
 
   return (
     <svg

src/components/icons/HelpIcon.tsx

@@ -1,9 +1,10 @@
-interface HelpIconProps {
+namespace HelpIcon {
+  export interface Props {
     onMouseOver?: () => void
     onMouseOut?: () => void
+  }
 }
-
+export function HelpIcon({ onMouseOver, onMouseOut }: HelpIcon.Props) {
-export function HelpIcon({ onMouseOver, onMouseOut }: HelpIconProps) {
 
   return (
     <svg
@@ -18,7 +19,7 @@ export function HelpIcon({ onMouseOver, onMouseOut }: HelpIconProps) {
       stroke-width="2"
       stroke-linecap="round"
       stroke-linejoin="round"
-      className="dark:text-[#5c5c5c] cursor-pointer w-4 h-4 text-[#9c9c9c] hover:text-blue-500 transition-color duration-300"
+      className="w-4 h-4 hover:text-blue-500 cursor-pointer"
     >
       <circle
         cx="12"

src/components/index.ts

@@ -1 +1,4 @@
+export * from "./CanvasItem"
+export * from "./CanvasControls"
 export * from "./InfinateCanvas"
+export * from "./CardSelector"

src/signals/images.ts

@@ -1,8 +1,8 @@
 import { signal } from "kaioken"
-import { Card, CardTypes } from "../types"
+import { Card } from "../types"
 import { focusedItem } from "."
 
-export type ImageCardType = Card<CardTypes.IMAGES>
+export type ImageCardType = Card<"images">
 
 const images = signal<Record<ImageCardType["id"], ImageCardType>>({})
 
@@ -15,7 +15,6 @@ function addImage(data: Omit<ImageCardType, "id">) {
     ...data,
     id: crypto.randomUUID(),
   }
-  console.log("adding image: ", newCard)
   images.value[newCard.id] = newCard
   images.notify()
   focusedItem.value = newCard.id

src/signals/notes.ts

@@ -1,8 +1,8 @@
 import { signal } from "kaioken"
-import { Card, CardTypes } from "../types"
+import { Card } from "../types"
 import { focusedItem } from "."
 
-export type NoteCardType = Card<CardTypes.NOTES>
+export type NoteCardType = Card<"notes">
 
 const notes = signal<Record<NoteCardType["id"], NoteCardType>>({})
 

src/signals/texts.ts

@@ -1,8 +1,8 @@
 import { signal } from "kaioken"
-import { Card, CardTypes } from "../types"
+import { Card } from "../types"
 import { focusedItem } from "."
 
-export type TextCardType = Card<CardTypes.TEXTS> & {
+export type TextCardType = Card<"texts"> & {
   fontSize: number
 }
 

src/types/Card.ts

@@ -1,19 +1,14 @@
+export type CardTypes = "notes" | "images" | "texts"
 export type positionCoords = { x: number; y: number }
 export type dimensionCoords = { w: number; h: number }
 
-export enum CardTypes {
-  NOTES = "notes",
-  IMAGES = "images",
-  TEXTS = "texts",
-}
-
 type Base64 = string
 
-export interface Card<TCard extends CardTypes> {
+export interface Card<Ttype extends CardTypes> {
   id: string
-  type: TCard
+  type: Ttype
   title: string
-  contents: TCard extends "image" ? Base64 : string
+  contents: Ttype extends "image" ? Base64 : string
   position: positionCoords
   dimensions: dimensionCoords
 }

src/utils/localStorage.ts

@@ -1,17 +1,8 @@
-import { Signal } from "kaioken"
+import { CardTypes } from "../types"
-import { Card, CardTypes } from "../types"
 
 export function updateLocalStorage(
   location: CardTypes,
-  collection: Signal<Record<string, Card<CardTypes>>>
+  collection: unknown[] | Record<string, unknown>
 ) {
-  try {
+  localStorage.setItem(location, JSON.stringify(collection))
-    localStorage.setItem(location, JSON.stringify(collection.value))
-  } catch (e) {
-    throw new DOMException(
-      "Could not update local storage " + e,
-      "LocalStorageError"
-    )
-  }
-  return collection
 }

src/utils/useDebounce.ts

@@ -2,12 +2,12 @@ import { sideEffectsEnabled, useHook } from "kaioken"
 import { noop } from "kaioken/utils"
 
 type UseDebounceState = {
-  timer: NodeJS.Timeout | undefined
+  timer: number
-  debounce: (func: (...args: unknown[]) => void, timeout?: number) => void
+  debounce: (this: any, func: Function, timeout?: number) => void
 }
 
 function createState(): UseDebounceState {
-  return { timer: undefined, debounce: noop }
+  return { timer: 0, debounce: noop }
 }
 
 export function useDebounce() {
@@ -17,7 +17,8 @@ export function useDebounce() {
     if (!isInit) return { timer: hook.timer, debounce: hook.debounce }
 
     hook.debounce = function debounce(
-      func: (...args: unknown[]) => void,
+      this: any,
+      func: Function,
       timeout = 300
     ) {
       clearTimeout(hook.timer)

tsconfig.json

@@ -1,7 +1,5 @@
 {
   "compilerOptions": {
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
     "target": "ES2020",
     "useDefineForClassFields": true,
     "module": "ESNext",
@@ -17,6 +15,8 @@
 
     /* Linting */
     "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "jsx": "preserve"
   },

vite.config.ts

@@ -1,25 +1,9 @@
 import { defineConfig } from "vite"
 import kaioken from "vite-plugin-kaioken"
-import eslint from "vite-plugin-eslint"
-import checker from "vite-plugin-checker"
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
+  plugins: [kaioken()],
-    kaioken(),
-    eslint({
-      cache: true,
-      ignorePatterns: ["src-tauri"],
-      emitError: true,
-      emitWarning: true,
-      failOnError: false,
-      failOnWarning: false,
-      lintOnStart: true,
-    }),
-    checker({
-      typescript: true,
-    }),
-  ],
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //
   // 1. prevent vite from obscuring rust errors