Replace relative imports with @/ alias

Add @/ → src/ alias in vite.config.ts and tsconfig.json.
Rewrite all ../ imports across 32 files to use @/ paths.
Same-directory ./ imports kept as-is.

src/components/CanvasContextMenu.vue

@@ -12,7 +12,7 @@ import {
   ContextMenuPortal
 } from 'reka-ui'
 
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
 const store = useEditorStore()
 

src/components/ColorPicker.vue

@@ -2,9 +2,9 @@
 import { ref, computed, watch } from 'vue'
 import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'reka-ui'
 
-import { colorToHexRaw, parseColor } from '../engine/color'
+import { colorToHexRaw, parseColor } from '@/engine/color'
 
-import type { Color } from '../types'
+import type { Color } from '@/types'
 
 const props = defineProps<{
   color: Color

src/components/EditorCanvas.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 
-import { useCanvas } from '../composables/use-canvas'
-import { useCanvasInput } from '../composables/use-canvas-input'
-import { useEditorStore } from '../stores/editor'
+import { useCanvas } from '@/composables/use-canvas'
+import { useCanvasInput } from '@/composables/use-canvas-input'
+import { useEditorStore } from '@/stores/editor'
 import CanvasContextMenu from './CanvasContextMenu.vue'
 
 const store = useEditorStore()

src/components/FillPicker.vue

@@ -17,10 +17,10 @@ import {
 } from 'reka-ui'
 
 import ScrubInput from './ScrubInput.vue'
-import { colorToHexRaw, colorToRgba255, parseColor } from '../engine/color'
+import { colorToHexRaw, colorToRgba255, parseColor } from '@/engine/color'
 
-import type { Color } from '../types'
-import type { Fill, FillType, GradientStop, GradientTransform } from '../engine/scene-graph'
+import type { Color } from '@/types'
+import type { Fill, FillType, GradientStop, GradientTransform } from '@/engine/scene-graph'
 
 type FillCategory = 'SOLID' | 'GRADIENT' | 'IMAGE'
 type GradientSubtype =

src/components/LayersPanel.vue

@@ -16,7 +16,7 @@ import IconSquare from '~icons/lucide/square'
 import IconType from '~icons/lucide/type'
 
 import PagesPanel from './PagesPanel.vue'
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
 const store = useEditorStore()
 

src/components/PagesPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, nextTick } from 'vue'
 
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
 const store = useEditorStore()
 

src/components/PropertiesPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
 import AppearanceSection from './properties/AppearanceSection.vue'
 import FillSection from './properties/FillSection.vue'

src/components/Toolbar.vue

@@ -20,9 +20,9 @@ import IconType from '~icons/lucide/type'
 import IconHand from '~icons/lucide/hand'
 import IconChevronDown from '~icons/lucide/chevron-down'
 
-import { TOOLS, useEditorStore } from '../stores/editor'
+import { TOOLS, useEditorStore } from '@/stores/editor'
 
-import type { Tool } from '../stores/editor'
+import type { Tool } from '@/stores/editor'
 
 const store = useEditorStore()
 

src/components/properties/AppearanceSection.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
 
-import type { SceneNode } from '../../engine/scene-graph'
+import type { SceneNode } from '@/engine/scene-graph'
 
 const { store, node, updateProp, commitProp } = useNodeProps()
 

src/components/properties/EffectsSection.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import ColorPicker from '../ColorPicker.vue'
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
-import { colorToHexRaw, parseColor } from '../../engine/color'
+import ColorPicker from '@/components/ColorPicker.vue'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
+import { colorToHexRaw, parseColor } from '@/engine/color'
 
-import type { Color, Effect } from '../../engine/scene-graph'
+import type { Color, Effect } from '@/engine/scene-graph'
 
 const { store, node } = useNodeProps()
 

src/components/properties/FillSection.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import FillPicker from '../FillPicker.vue'
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
-import { DEFAULT_SHAPE_FILL } from '../../constants'
-import { colorToHexRaw } from '../../engine/color'
+import FillPicker from '@/components/FillPicker.vue'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
+import { DEFAULT_SHAPE_FILL } from '@/constants'
+import { colorToHexRaw } from '@/engine/color'
 
-import type { Fill } from '../../engine/scene-graph'
+import type { Fill } from '@/engine/scene-graph'
 
 const { store, node } = useNodeProps()
 

src/components/properties/LayoutSection.vue

@@ -2,15 +2,10 @@
 import { computed, ref } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
 
-import type {
-  SceneNode,
-  LayoutSizing,
-  LayoutAlign,
-  LayoutCounterAlign
-} from '../../engine/scene-graph'
+import type { SceneNode, LayoutSizing, LayoutAlign, LayoutCounterAlign } from '@/engine/scene-graph'
 
 const { store, node, updateProp, commitProp } = useNodeProps()
 

src/components/properties/PageSection.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import ColorPicker from '../ColorPicker.vue'
-import { useEditorStore } from '../../stores/editor'
-import { colorToHexRaw, parseColor } from '../../engine/color'
+import ColorPicker from '@/components/ColorPicker.vue'
+import { useEditorStore } from '@/stores/editor'
+import { colorToHexRaw, parseColor } from '@/engine/color'
 
-import type { Color } from '../../types'
+import type { Color } from '@/types'
 
 const store = useEditorStore()
 

src/components/properties/PositionSection.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
 
 const { store, node, nodes, updateProp, commitProp } = useNodeProps()
 

src/components/properties/StrokeSection.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import ColorPicker from '../ColorPicker.vue'
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
-import { colorToHexRaw, parseColor } from '../../engine/color'
+import ColorPicker from '@/components/ColorPicker.vue'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
+import { colorToHexRaw, parseColor } from '@/engine/color'
 
-import type { Color, Stroke } from '../../engine/scene-graph'
+import type { Color, Stroke } from '@/engine/scene-graph'
 
 const { store, node } = useNodeProps()
 

src/components/properties/TypographySection.vue

@@ -2,9 +2,9 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 
-import ScrubInput from '../ScrubInput.vue'
-import { useNodeProps } from '../../composables/use-node-props'
-import { listFamilies, loadFont } from '../../engine/fonts'
+import ScrubInput from '@/components/ScrubInput.vue'
+import { useNodeProps } from '@/composables/use-node-props'
+import { listFamilies, loadFont } from '@/engine/fonts'
 
 const { store, node, updateProp, commitProp } = useNodeProps()
 

src/composables/use-canvas-input.ts

@@ -10,12 +10,12 @@ import {
   ROTATION_HIT_OFFSET,
   DEFAULT_TEXT_WIDTH,
   DEFAULT_TEXT_HEIGHT
-} from '../constants'
-import { computeSelectionBounds, computeSnap } from '../engine/snap'
+} from '@/constants'
+import { computeSelectionBounds, computeSnap } from '@/engine/snap'
 
-import type { NodeType, SceneNode } from '../engine/scene-graph'
-import type { EditorStore, Tool } from '../stores/editor'
-import type { Rect } from '../types'
+import type { NodeType, SceneNode } from '@/engine/scene-graph'
+import type { EditorStore, Tool } from '@/stores/editor'
+import type { Rect } from '@/types'
 
 type HandlePosition = 'nw' | 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w'
 
@@ -210,11 +210,8 @@ function hitTestRotationHandle(
 export function useCanvasInput(
   canvasRef: Ref<HTMLCanvasElement | null>,
   store: EditorStore,
-  hitTestSectionTitle: (cx: number, cy: number) => import('../engine/scene-graph').SceneNode | null,
-  hitTestComponentLabel: (
-    cx: number,
-    cy: number
-  ) => import('../engine/scene-graph').SceneNode | null
+  hitTestSectionTitle: (cx: number, cy: number) => import('@/engine/scene-graph').SceneNode | null,
+  hitTestComponentLabel: (cx: number, cy: number) => import('@/engine/scene-graph').SceneNode | null
 ) {
   const drag = ref<DragState | null>(null)
   const cursorOverride = ref<string | null>(null)

src/composables/use-canvas.ts

@@ -1,10 +1,10 @@
 import { useResizeObserver } from '@vueuse/core'
 import { onMounted, onUnmounted, watch, type Ref } from 'vue'
 
-import { getCanvasKit } from '../engine/canvaskit'
-import { SkiaRenderer } from '../engine/renderer'
+import { getCanvasKit } from '@/engine/canvaskit'
+import { SkiaRenderer } from '@/engine/renderer'
 
-import type { EditorStore } from '../stores/editor'
+import type { EditorStore } from '@/stores/editor'
 import type { CanvasKit } from 'canvaskit-wasm'
 
 export function useCanvas(canvasRef: Ref<HTMLCanvasElement | null>, store: EditorStore) {

src/composables/use-keyboard.ts

@@ -1,9 +1,10 @@
 import { useEventListener } from '@vueuse/core'
 
-import { TOOL_SHORTCUTS } from '../stores/editor'
+import { TOOL_SHORTCUTS } from '@/stores/editor'
+
 import { openFileDialog } from './use-menu'
 
-import type { EditorStore } from '../stores/editor'
+import type { EditorStore } from '@/stores/editor'
 
 function isEditing(e: Event) {
   return e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement

src/composables/use-menu.ts

@@ -1,8 +1,8 @@
 import { onUnmounted } from 'vue'
 
-import { IS_TAURI } from '../constants'
+import { IS_TAURI } from '@/constants'
 
-import type { EditorStore } from '../stores/editor'
+import type { EditorStore } from '@/stores/editor'
 
 export async function openFileDialog(store: EditorStore) {
   if (IS_TAURI) {

src/composables/use-node-props.ts

@@ -1,8 +1,8 @@
 import { computed } from 'vue'
 
-import { useEditorStore } from '../stores/editor'
+import { useEditorStore } from '@/stores/editor'
 
-import type { SceneNode } from '../engine/scene-graph'
+import type { SceneNode } from '@/engine/scene-graph'
 
 export function useNodeProps() {
   const store = useEditorStore()

src/engine/clipboard.ts

@@ -1,10 +1,10 @@
 import { inflateSync, deflateSync } from 'fflate'
 
-import { initCodec, getCompiledSchema, getSchemaBytes } from '../kiwi/codec'
-import { decodeBinarySchema, compileSchema, ByteBuffer } from '../kiwi/kiwi-schema'
+import { initCodec, getCompiledSchema, getSchemaBytes } from '@/kiwi/codec'
+import { decodeBinarySchema, compileSchema, ByteBuffer } from '@/kiwi/kiwi-schema'
+
 import { decodeVectorNetworkBlob, encodeVectorNetworkBlob } from './vector'
 
-import type { NodeChange as KiwiNodeChange } from '../kiwi/codec'
 import type {
   SceneGraph,
   SceneNode,
@@ -16,6 +16,7 @@ import type {
   LayoutCounterAlign,
   VectorNetwork
 } from './scene-graph'
+import type { NodeChange as KiwiNodeChange } from '@/kiwi/codec'
 
 interface FigmaClipboardMeta {
   fileKey: string

src/engine/color.ts

@@ -1,6 +1,6 @@
 import { parse, formatHex, converter } from 'culori'
 
-import type { Color } from '../types'
+import type { Color } from '@/types'
 
 const toRgb = converter('rgb')
 

src/engine/fig-export.ts

@@ -1,12 +1,13 @@
 import { zipSync, deflateSync } from 'fflate'
 
-import { IS_TAURI } from '../constants'
-import { initCodec, getCompiledSchema, getSchemaBytes } from '../kiwi/codec'
+import { IS_TAURI } from '@/constants'
+import { initCodec, getCompiledSchema, getSchemaBytes } from '@/kiwi/codec'
+
 import { encodeVectorNetworkBlob } from './vector'
 
-import type { NodeChange, Paint } from '../kiwi/codec'
 import type { SkiaRenderer } from './renderer'
 import type { SceneGraph, SceneNode } from './scene-graph'
+import type { NodeChange, Paint } from '@/kiwi/codec'
 import type { CanvasKit } from 'canvaskit-wasm'
 
 const THUMBNAIL_1X1 = Uint8Array.from(

src/engine/renderer.ts

@@ -53,12 +53,13 @@ import {
   COMPONENT_LABEL_ICON_GAP,
   RULER_TARGET_PIXEL_SPACING,
   RULER_MAJOR_TOLERANCE
-} from '../constants'
+} from '@/constants'
+
 import { vectorNetworkToPath } from './vector'
 
-import type { Rect } from '../types'
 import type { SceneNode, SceneGraph, Fill } from './scene-graph'
 import type { SnapGuide } from './snap'
+import type { Rect } from '@/types'
 import type { EmbindEnumEntity, Image as CKImage, Path } from 'canvaskit-wasm'
 import type {
   CanvasKit,

src/engine/scene-graph.ts

@@ -1,4 +1,4 @@
-export type { GUID, Color } from '../types'
+export type { GUID, Color } from '@/types'
 
 export type HandleMirroring = 'NONE' | 'ANGLE' | 'ANGLE_AND_LENGTH'
 export type WindingRule = 'NONZERO' | 'EVENODD'
@@ -49,7 +49,7 @@ export type NodeType =
   | 'CONNECTOR'
   | 'SHAPE_WITH_TEXT'
 
-import type { Color, Matrix, Rect } from '../types'
+import type { Color, Matrix, Rect } from '@/types'
 
 export type FillType =
   | 'SOLID'

src/engine/snap.ts

@@ -1,5 +1,5 @@
-import type { Rect } from '../types'
 import type { SceneNode } from './scene-graph'
+import type { Rect } from '@/types'
 
 const SNAP_THRESHOLD = 5
 

src/kiwi/client.ts

@@ -26,7 +26,7 @@ import {
   getKiwiMessageType
 } from './protocol.ts'
 
-import type { ChromeDevToolsTarget } from '../types.ts'
+import type { ChromeDevToolsTarget } from '@/types.ts'
 
 export interface SessionInfo {
   sessionID: number

src/kiwi/codec.ts

@@ -8,7 +8,8 @@
 
 import { decompress as zstdDecompress } from 'fzstd'
 
-import { parseColor } from '../engine/color'
+import { parseColor } from '@/engine/color'
+
 import { compileSchema, encodeBinarySchema } from './kiwi-schema'
 import { isZstdCompressed, getKiwiMessageType } from './protocol.ts'
 import figmaSchema from './schema.ts'
@@ -165,9 +166,9 @@ export function peekMessageType(data: Uint8Array): number | null {
 
 // Type definitions
 
-export type { GUID, Color } from '../types'
+export type { GUID, Color } from '@/types'
 
-import type { Color, GUID, Matrix, Vector } from '../types'
+import type { Color, GUID, Matrix, Vector } from '@/types'
 
 export type { Matrix, Vector }
 

src/kiwi/fig-file.ts

@@ -5,8 +5,8 @@ import { importNodeChanges } from './fig-import'
 import { decodeBinarySchema, compileSchema, ByteBuffer } from './kiwi-schema'
 import { isZstdCompressed } from './protocol'
 
-import type { SceneGraph } from '../engine/scene-graph'
 import type { FigmaMessage } from './codec'
+import type { SceneGraph } from '@/engine/scene-graph'
 
 interface FigKiwiPayload {
   schemaDeflated: Uint8Array

src/kiwi/fig-import.ts

@@ -1,6 +1,7 @@
-import { SceneGraph } from '../engine/scene-graph'
-import { decodeVectorNetworkBlob } from '../engine/vector'
+import { SceneGraph } from '@/engine/scene-graph'
+import { decodeVectorNetworkBlob } from '@/engine/vector'
 
+import type { NodeChange, Paint, Effect as KiwiEffect, GUID } from './codec'
 import type {
   NodeType,
   Fill,
@@ -24,8 +25,7 @@ import type {
   TextDecoration,
   ArcData,
   VectorNetwork
-} from '../engine/scene-graph'
-import type { NodeChange, Paint, Effect as KiwiEffect, GUID } from './codec'
+} from '@/engine/scene-graph'
 
 function ext(nc: NodeChange): Record<string, unknown> {
   return nc as unknown as Record<string, unknown>

src/stores/editor.ts

@@ -8,7 +8,7 @@ import {
   SECTION_DEFAULT_STROKE,
   CANVAS_BG_COLOR,
   ZOOM_SENSITIVITY
-} from '../constants'
+} from '@/constants'
 import {
   parseFigmaClipboard,
   importClipboardNodes,
@@ -16,13 +16,13 @@ import {
   buildFigmaClipboardHTML,
   buildOpenPencilClipboardHTML,
   prefetchFigmaSchema
-} from '../engine/clipboard'
-import { exportFigFile } from '../engine/fig-export'
-import { computeLayout, computeAllLayouts } from '../engine/layout'
-import { SceneGraph } from '../engine/scene-graph'
-import { UndoManager } from '../engine/undo'
-import { computeVectorBounds } from '../engine/vector'
-import { readFigFile } from '../kiwi/fig-file'
+} from '@/engine/clipboard'
+import { exportFigFile } from '@/engine/fig-export'
+import { computeLayout, computeAllLayouts } from '@/engine/layout'
+import { SceneGraph } from '@/engine/scene-graph'
+import { UndoManager } from '@/engine/undo'
+import { computeVectorBounds } from '@/engine/vector'
+import { readFigFile } from '@/kiwi/fig-file'
 
 import type {
   SceneNode,
@@ -33,9 +33,9 @@ import type {
   VectorSegment,
   VectorRegion,
   VectorNetwork
-} from '../engine/scene-graph'
-import type { SnapGuide } from '../engine/snap'
-import type { Color, Rect } from '../types'
+} from '@/engine/scene-graph'
+import type { SnapGuide } from '@/engine/snap'
+import type { Color, Rect } from '@/types'
 
 export type Tool =
   | 'SELECT'
@@ -115,7 +115,7 @@ export function createEditorStore() {
   let fileHandle: FileSystemFileHandle | null = null
   let filePath: string | null = null
   let _ck: import('canvaskit-wasm').CanvasKit | null = null
-  let _renderer: import('../engine/renderer').SkiaRenderer | null = null
+  let _renderer: import('@/engine/renderer').SkiaRenderer | null = null
 
   prefetchFigmaSchema()
 
@@ -505,7 +505,7 @@ export function createEditorStore() {
 
   function setCanvasKit(
     ck: import('canvaskit-wasm').CanvasKit,
-    renderer: import('../engine/renderer').SkiaRenderer
+    renderer: import('@/engine/renderer').SkiaRenderer
   ) {
     _ck = ck
     _renderer = renderer

tsconfig.json

@@ -14,7 +14,10 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.vue"],
   "exclude": ["src/kiwi/index.ts", "src/kiwi/client.ts"],

vite.config.ts

@@ -1,3 +1,5 @@
+import { resolve } from 'path'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import tailwindcss from '@tailwindcss/vite'
@@ -10,6 +12,11 @@ import { copyFileSync, existsSync } from 'fs'
 const host = process.env.TAURI_DEV_HOST
 
 export default defineConfig(async () => ({
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src')
+    }
+  },
   plugins: [
     {
       name: 'copy-canvaskit-wasm',