Initial commit: Skwik image deskew tool

Vue 3 + Vite + TypeScript (strict) app with shadcn-vue, Konva.js canvas, and Pinia. 4-step wizard: upload JPG/HEIC, view EXIF, place datum measurements (rectangles/lines with presets), run deskew (placeholder). Dark mode, mobile-responsive with bottom sheet for datum panel. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-14 20:53:00 +02:00 · 2026-04-14 20:53:00 +02:00 · 2d56c5dada
commit 2d56c5dada
91 changed files with 8146 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.prettierrc
+++ b/.prettierrc
@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "always",
+  "endOfLine": "lf"
+}
--- a/.serena/project.yml
+++ b/.serena/project.yml
@ -0,0 +1,155 @@
+# the name by which the project can be referenced within Serena
+project_name: "skwik"
+
+
+# list of languages for which language servers are started; choose from:
+#   al                  bash                clojure             cpp                 csharp
+#   csharp_omnisharp    dart                elixir              elm                 erlang
+#   fortran             fsharp              go                  groovy              haskell
+#   haxe                java                julia               kotlin              lua
+#   markdown
+#   matlab              nix                 pascal              perl                php
+#   php_phpactor        powershell          python              python_jedi         r
+#   rego                ruby                ruby_solargraph     rust                scala
+#   swift               terraform           toml                typescript          typescript_vts
+#   vue                 yaml                zig
+#   (This list may be outdated. For the current list, see values of Language enum here:
+#   https://github.com/oraios/serena/blob/main/src/solidlsp/ls_config.py
+#   For some languages, there are alternative language servers, e.g. csharp_omnisharp, ruby_solargraph.)
+# Note:
+#   - For C, use cpp
+#   - For JavaScript, use typescript
+#   - For Free Pascal/Lazarus, use pascal
+# Special requirements:
+#   Some languages require additional setup/installations.
+#   See here for details: https://oraios.github.io/serena/01-about/020_programming-languages.html#language-servers
+# When using multiple languages, the first language server that supports a given file will be used for that file.
+# The first language is the default language and the respective language server will be used as a fallback.
+# Note that when using the JetBrains backend, language servers are not used and this list is correspondingly ignored.
+languages:
+- typescript
+- vue
+
+# the encoding used by text files in the project
+# For a list of possible encodings, see https://docs.python.org/3.11/library/codecs.html#standard-encodings
+encoding: "utf-8"
+
+# line ending convention to use when writing source files.
+# Possible values: unset (use global setting), "lf", "crlf", or "native" (platform default)
+# This does not affect Serena's own files (e.g. memories and configuration files), which always use native line endings.
+line_ending:
+
+# The language backend to use for this project.
+# If not set, the global setting from serena_config.yml is used.
+# Valid values: LSP, JetBrains
+# Note: the backend is fixed at startup. If a project with a different backend
+# is activated post-init, an error will be returned.
+language_backend:
+
+# whether to use project's .gitignore files to ignore files
+ignore_all_files_in_gitignore: true
+
+# advanced configuration option allowing to configure language server-specific options.
+# Maps the language key to the options.
+# Have a look at the docstring of the constructors of the LS implementations within solidlsp (e.g., for C# or PHP) to see which options are available.
+# No documentation on options means no options are available.
+ls_specific_settings: {}
+
+# list of additional paths to ignore in this project.
+# Same syntax as gitignore, so you can use * and **.
+# Note: global ignored_paths from serena_config.yml are also applied additively.
+ignored_paths: []
+
+# whether the project is in read-only mode
+# If set to true, all editing tools will be disabled and attempts to use them will result in an error
+# Added on 2025-04-18
+read_only: false
+
+# list of tool names to exclude.
+# This extends the existing exclusions (e.g. from the global configuration)
+#
+# Below is the complete list of tools for convenience.
+# To make sure you have the latest list of tools, and to view their descriptions, 
+# execute `uv run scripts/print_tool_overview.py`.
+#
+#  * `activate_project`: Activates a project based on the project name or path.
+#  * `check_onboarding_performed`: Checks whether project onboarding was already performed.
+#  * `create_text_file`: Creates/overwrites a file in the project directory.
+#  * `delete_memory`: Delete a memory file. Should only happen if a user asks for it explicitly,
+#       for example by saying that the information retrieved from a memory file is no longer correct
+#       or no longer relevant for the project.
+#  * `edit_memory`: Replaces content matching a regular expression in a memory.
+#  * `execute_shell_command`: Executes a shell command.
+#  * `find_file`: Finds files in the given relative paths
+#  * `find_referencing_symbols`: Finds symbols that reference the given symbol using the language server backend
+#  * `find_symbol`: Performs a global (or local) search using the language server backend.
+#  * `get_current_config`: Prints the current configuration of the agent, including the active and available projects, tools, contexts, and modes.
+#  * `get_symbols_overview`: Gets an overview of the top-level symbols defined in a given file.
+#  * `initial_instructions`: Provides instructions Serena usage (i.e. the 'Serena Instructions Manual')
+#       for clients that do not read the initial instructions when the MCP server is connected.
+#  * `insert_after_symbol`: Inserts content after the end of the definition of a given symbol.
+#  * `insert_before_symbol`: Inserts content before the beginning of the definition of a given symbol.
+#  * `list_dir`: Lists files and directories in the given directory (optionally with recursion).
+#  * `list_memories`: List available memories. Any memory can be read using the `read_memory` tool.
+#  * `onboarding`: Performs onboarding (identifying the project structure and essential tasks, e.g. for testing or building).
+#  * `read_file`: Reads a file within the project directory.
+#  * `read_memory`: Read the content of a memory file. This tool should only be used if the information
+#       is relevant to the current task. You can infer whether the information
+#       is relevant from the memory file name.
+#       You should not read the same memory file multiple times in the same conversation.
+#  * `rename_memory`: Renames or moves a memory. Moving between project and global scope is supported
+#       (e.g., renaming "global/foo" to "bar" moves it from global to project scope).
+#  * `rename_symbol`: Renames a symbol throughout the codebase using language server refactoring capabilities.
+#       For JB, we use a separate tool.
+#  * `replace_content`: Replaces content in a file (optionally using regular expressions).
+#  * `replace_symbol_body`: Replaces the full definition of a symbol using the language server backend.
+#  * `safe_delete_symbol`:
+#  * `search_for_pattern`: Performs a search for a pattern in the project.
+#  * `write_memory`: Write some information (utf-8-encoded) about this project that can be useful for future tasks to a memory in md format.
+#       The memory name should be meaningful.
+excluded_tools: []
+
+# list of tools to include that would otherwise be disabled (particularly optional tools that are disabled by default).
+# This extends the existing inclusions (e.g. from the global configuration).
+included_optional_tools: []
+
+# fixed set of tools to use as the base tool set (if non-empty), replacing Serena's default set of tools.
+# This cannot be combined with non-empty excluded_tools or included_optional_tools.
+fixed_tools: []
+
+# list of mode names to that are always to be included in the set of active modes
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the base_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this setting overrides the global configuration.
+# Set this to [] to disable base modes for this project.
+# Set this to a list of mode names to always include the respective modes for this project.
+base_modes:
+
+# list of mode names that are to be activated by default.
+# The full set of modes to be activated is base_modes + default_modes.
+# If the setting is undefined, the default_modes from the global configuration (serena_config.yml) apply.
+# Otherwise, this overrides the setting from the global configuration (serena_config.yml).
+# This setting can, in turn, be overridden by CLI parameters (--mode).
+default_modes:
+
+# initial prompt for the project. It will always be given to the LLM upon activating the project
+# (contrary to the memories, which are loaded on demand).
+initial_prompt: ""
+
+# time budget (seconds) per tool call for the retrieval of additional symbol information
+# such as docstrings or parameter information.
+# This overrides the corresponding setting in the global configuration; see the documentation there.
+# If null or missing, use the setting from the global configuration.
+symbol_info_budget:
+
+# list of regex patterns which, when matched, mark a memory entry as read‑only.
+# Extends the list from the global configuration, merging the two lists.
+read_only_memory_patterns: []
+
+# list of regex patterns for memories to completely ignore.
+# Matching memories will not appear in list_memories or activate_project output
+# and cannot be accessed via read_memory or write_memory.
+# To access ignored memory files, use the read_file tool on the raw file path.
+# Extends the list from the global configuration, merging the two lists.
+# Example: ["_archive/.*", "_episodes/.*"]
+ignored_memory_patterns: []
--- a/components.json
+++ b/components.json
@ -0,0 +1,25 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "reka-nova",
+  "font": "geist-sans",
+  "typescript": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/assets/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "composables": "@/composables"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
--- a/env.d.ts
+++ b/env.d.ts
@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<
+    Record<string, unknown>,
+    Record<string, unknown>,
+    unknown
+  >;
+  export default component;
+}
--- a/eslint.config.ts
+++ b/eslint.config.ts
@ -0,0 +1,62 @@
+import pluginVue from "eslint-plugin-vue";
+import tsPlugin from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import vueParser from "vue-eslint-parser";
+import prettierConfig from "eslint-config-prettier";
+import type { Linter } from "eslint";
+
+const config: Linter.Config[] = [
+  {
+    ignores: ["dist/**", "node_modules/**"],
+  },
+  {
+    files: ["**/*.ts"],
+    languageOptions: {
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": tsPlugin as Record<string, unknown>,
+    },
+    rules: {
+      ...tsPlugin.configs?.["recommended"]?.rules,
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_" },
+      ],
+      "@typescript-eslint/explicit-function-return-type": "off",
+    },
+  },
+  {
+    files: ["**/*.vue"],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: tsParser,
+        ecmaVersion: "latest",
+        sourceType: "module",
+        extraFileExtensions: [".vue"],
+      },
+    },
+    plugins: {
+      vue: pluginVue as unknown as Record<string, unknown>,
+      "@typescript-eslint": tsPlugin as Record<string, unknown>,
+    },
+    rules: {
+      ...pluginVue.configs?.["flat/recommended"]?.reduce(
+        (acc: Record<string, unknown>, cfg: Linter.Config) => ({
+          ...acc,
+          ...cfg.rules,
+        }),
+        {},
+      ),
+      "vue/multi-word-component-names": "off",
+    },
+  },
+  prettierConfig as Linter.Config,
+];
+
+export default config;
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Skwik - Image Deskew</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,48 @@
+{
+  "name": "skwik",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .ts,.vue",
+    "lint:fix": "eslint . --ext .ts,.vue --fix",
+    "format": "prettier --write \"src/**/*.{ts,vue,css}\""
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/node": "^25.6.0",
+    "@typescript-eslint/eslint-plugin": "^8.58.2",
+    "@typescript-eslint/parser": "^8.58.2",
+    "@vitejs/plugin-vue": "^6.0.6",
+    "eslint": "^10.2.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-vue": "^10.8.0",
+    "prettier": "^3.8.2",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.0.4",
+    "vue-tsc": "^3.2.6"
+  },
+  "dependencies": {
+    "@tanstack/vue-table": "^8.21.3",
+    "@vueuse/core": "^14.2.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "exifr": "^7.1.3",
+    "heic-to": "^1.4.2",
+    "konva": "^10.2.5",
+    "lucide-vue-next": "^1.0.0",
+    "nanoid": "^5.1.7",
+    "pinia": "^3.0.4",
+    "reka-ui": "^2.9.6",
+    "shadcn-vue": "^2.6.2",
+    "tailwind-merge": "^3.5.0",
+    "vue": "^3.5.32",
+    "vue-konva": "^3.4.0"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/icons.svg
+++ b/public/icons.svg
@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <symbol id="bluesky-icon" viewBox="0 0 16 17">
+    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
+    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
+  </symbol>
+  <symbol id="discord-icon" viewBox="0 0 20 19">
+    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
+  </symbol>
+  <symbol id="documentation-icon" viewBox="0 0 21 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
+  </symbol>
+  <symbol id="github-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
+  </symbol>
+  <symbol id="social-icon" viewBox="0 0 20 20">
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
+    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
+  </symbol>
+  <symbol id="x-icon" viewBox="0 0 19 19">
+    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
+  </symbol>
+</svg>
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { useAppStore } from "@/stores/app";
+import StepIndicator from "@/components/StepIndicator.vue";
+import ImageUpload from "@/components/ImageUpload.vue";
+import ExifViewer from "@/components/ExifViewer.vue";
+import DatumEditor from "@/components/DatumEditor.vue";
+import ResultViewer from "@/components/ResultViewer.vue";
+import ThemeToggle from "@/components/ThemeToggle.vue";
+
+const store = useAppStore();
+</script>
+
+<template>
+  <div class="min-h-screen bg-background text-foreground">
+    <header
+      class="sticky top-0 z-50 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60"
+    >
+      <div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
+        <h1 class="text-lg font-semibold tracking-tight">Skwik</h1>
+        <div class="flex items-center gap-4">
+          <StepIndicator />
+          <ThemeToggle />
+        </div>
+      </div>
+    </header>
+
+    <main class="mx-auto max-w-7xl px-4 py-6">
+      <ImageUpload v-if="store.currentStep === 1" />
+      <ExifViewer v-else-if="store.currentStep === 2" />
+      <DatumEditor v-else-if="store.currentStep === 3" />
+      <ResultViewer v-else-if="store.currentStep === 4" />
+    </main>
+  </div>
+</template>
--- a/src/assets/index.css
+++ b/src/assets/index.css
@ -0,0 +1,129 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');
+
+@import "tailwindcss";
+
+@import "tw-animate-css";
+
+@import "shadcn-vue/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-sans: 'Geist Variable', sans-serif;
+    --font-heading: var(--font-sans);
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) - 4px);
+    --radius-md: calc(var(--radius) - 2px);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    @apply font-sans;
+    }
+}
--- a/src/components/DatumCanvas.vue
+++ b/src/components/DatumCanvas.vue
@ -0,0 +1,321 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, watch } from "vue";
+import { useAppStore } from "@/stores/app";
+import { getDatumColor } from "@/lib/datums";
+import type { Datum, Point } from "@/types";
+
+const store = useAppStore();
+
+const containerRef = ref<HTMLDivElement | null>(null);
+const stageWidth = ref(800);
+const stageHeight = ref(600);
+
+const scale = ref(1);
+const offsetX = ref(0);
+const offsetY = ref(0);
+
+// Touch state for pinch-to-zoom
+let lastPinchDist = 0;
+let isPanning = false;
+let panStart = { x: 0, y: 0 };
+
+const imageConfig = computed(() => {
+  const img = store.loadedImage;
+  if (!img) return null;
+  return {
+    image: img,
+    x: 0,
+    y: 0,
+    width: img.naturalWidth,
+    height: img.naturalHeight,
+  };
+});
+
+const stageConfig = computed(() => ({
+  width: stageWidth.value,
+  height: stageHeight.value,
+  scaleX: scale.value,
+  scaleY: scale.value,
+  x: offsetX.value,
+  y: offsetY.value,
+  draggable: false,
+}));
+
+function datumIndex(datum: Datum): number {
+  return store.datums.findIndex((d) => d.id === datum.id);
+}
+
+function getPointConfigs(datum: Datum, dIdx: number) {
+  const color = getDatumColor(dIdx);
+  const isSelected = store.selectedDatumId === datum.id;
+  const points = datum.type === "rectangle" ? datum.corners : datum.endpoints;
+  const radius = isSelected ? 10 : 7;
+
+  return points.map((pt, pIdx) => ({
+    x: pt.x,
+    y: pt.y,
+    radius: radius / scale.value,
+    fill: color,
+    stroke: isSelected ? "#fff" : color,
+    strokeWidth: 2 / scale.value,
+    draggable: true,
+    _datumId: datum.id,
+    _pointIndex: pIdx,
+    hitStrokeWidth: 20 / scale.value,
+  }));
+}
+
+function getLineConfigs(datum: Datum, dIdx: number) {
+  const color = getDatumColor(dIdx);
+  const isSelected = store.selectedDatumId === datum.id;
+
+  if (datum.type === "line") {
+    return [
+      {
+        points: [
+          datum.endpoints[0].x,
+          datum.endpoints[0].y,
+          datum.endpoints[1].x,
+          datum.endpoints[1].y,
+        ],
+        stroke: color,
+        strokeWidth: (isSelected ? 3 : 2) / scale.value,
+        dash: isSelected ? [] : [8 / scale.value, 4 / scale.value],
+      },
+    ];
+  }
+
+  // Rectangle: draw 4 edges
+  const c = datum.corners;
+  const pts = [c[0], c[1], c[2], c[3], c[0]].flatMap((p) => [p.x, p.y]);
+  return [
+    {
+      points: pts,
+      stroke: color,
+      strokeWidth: (isSelected ? 3 : 2) / scale.value,
+      closed: true,
+      dash: isSelected ? [] : [8 / scale.value, 4 / scale.value],
+    },
+  ];
+}
+
+function getLabelConfig(datum: Datum, dIdx: number) {
+  const color = getDatumColor(dIdx);
+  let pos: Point;
+
+  if (datum.type === "rectangle") {
+    pos = {
+      x: (datum.corners[0].x + datum.corners[2].x) / 2,
+      y: (datum.corners[0].y + datum.corners[2].y) / 2,
+    };
+  } else {
+    pos = {
+      x: (datum.endpoints[0].x + datum.endpoints[1].x) / 2,
+      y: (datum.endpoints[0].y + datum.endpoints[1].y) / 2 - 20 / scale.value,
+    };
+  }
+
+  return {
+    x: pos.x,
+    y: pos.y,
+    text: datum.label,
+    fontSize: 14 / scale.value,
+    fill: color,
+    fontStyle: "bold",
+    align: "center" as const,
+    offsetX: (datum.label.length * 7) / 2 / scale.value,
+  };
+}
+
+function onPointDragMove(e: { target: { x: () => number; y: () => number; attrs: { _datumId: string; _pointIndex: number } } }) {
+  const { _datumId, _pointIndex } = e.target.attrs;
+  const datum = store.datums.find((d) => d.id === _datumId);
+  if (!datum) return;
+
+  const newPos: Point = { x: e.target.x(), y: e.target.y() };
+
+  if (datum.type === "rectangle") {
+    const newCorners = [...datum.corners] as [Point, Point, Point, Point];
+    newCorners[_pointIndex] = newPos;
+    store.updateDatum(_datumId, { corners: newCorners });
+  } else {
+    const newEndpoints = [...datum.endpoints] as [Point, Point];
+    newEndpoints[_pointIndex] = newPos;
+    store.updateDatum(_datumId, { endpoints: newEndpoints });
+  }
+}
+
+function onPointClick(datumId: string) {
+  store.selectedDatumId = datumId;
+}
+
+// Zoom with mouse wheel
+function onWheel(e: WheelEvent) {
+  e.preventDefault();
+  const scaleBy = 1.08;
+  const oldScale = scale.value;
+  const newScale =
+    e.deltaY < 0 ? oldScale * scaleBy : oldScale / scaleBy;
+
+  const clampedScale = Math.max(0.05, Math.min(10, newScale));
+
+  const rect = containerRef.value?.getBoundingClientRect();
+  if (!rect) return;
+
+  const pointerX = e.clientX - rect.left;
+  const pointerY = e.clientY - rect.top;
+
+  const mousePointTo = {
+    x: (pointerX - offsetX.value) / oldScale,
+    y: (pointerY - offsetY.value) / oldScale,
+  };
+
+  scale.value = clampedScale;
+  offsetX.value = pointerX - mousePointTo.x * clampedScale;
+  offsetY.value = pointerY - mousePointTo.y * clampedScale;
+}
+
+// Touch handlers for pinch-to-zoom and pan
+function getTouchDistance(t1: Touch, t2: Touch): number {
+  return Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
+}
+
+function getTouchCenter(t1: Touch, t2: Touch): { x: number; y: number } {
+  return {
+    x: (t1.clientX + t2.clientX) / 2,
+    y: (t1.clientY + t2.clientY) / 2,
+  };
+}
+
+function onTouchStart(e: TouchEvent) {
+  if (e.touches.length === 2) {
+    e.preventDefault();
+    lastPinchDist = getTouchDistance(e.touches[0]!, e.touches[1]!);
+  } else if (e.touches.length === 1) {
+    // Single-finger pan (only if not on a point)
+    const target = e.target as HTMLElement;
+    if (!target.closest(".konvajs-content")) return;
+    isPanning = true;
+    panStart = { x: e.touches[0]!.clientX - offsetX.value, y: e.touches[0]!.clientY - offsetY.value };
+  }
+}
+
+function onTouchMove(e: TouchEvent) {
+  if (e.touches.length === 2) {
+    e.preventDefault();
+    const dist = getTouchDistance(e.touches[0]!, e.touches[1]!);
+    const center = getTouchCenter(e.touches[0]!, e.touches[1]!);
+
+    const rect = containerRef.value?.getBoundingClientRect();
+    if (!rect) return;
+
+    const scaleFactor = dist / lastPinchDist;
+    const oldScale = scale.value;
+    const newScale = Math.max(0.05, Math.min(10, oldScale * scaleFactor));
+
+    const cx = center.x - rect.left;
+    const cy = center.y - rect.top;
+
+    const mousePointTo = {
+      x: (cx - offsetX.value) / oldScale,
+      y: (cy - offsetY.value) / oldScale,
+    };
+
+    scale.value = newScale;
+    offsetX.value = cx - mousePointTo.x * newScale;
+    offsetY.value = cy - mousePointTo.y * newScale;
+
+    lastPinchDist = dist;
+  } else if (e.touches.length === 1 && isPanning) {
+    offsetX.value = e.touches[0]!.clientX - panStart.x;
+    offsetY.value = e.touches[0]!.clientY - panStart.y;
+  }
+}
+
+function onTouchEnd() {
+  lastPinchDist = 0;
+  isPanning = false;
+}
+
+// Fit image to canvas on mount
+function fitToCanvas() {
+  const img = store.loadedImage;
+  const container = containerRef.value;
+  if (!img || !container) return;
+
+  const cw = container.clientWidth;
+  const ch = container.clientHeight;
+  stageWidth.value = cw;
+  stageHeight.value = ch;
+
+  const fitScale = Math.min(cw / img.naturalWidth, ch / img.naturalHeight) * 0.9;
+  scale.value = fitScale;
+  offsetX.value = (cw - img.naturalWidth * fitScale) / 2;
+  offsetY.value = (ch - img.naturalHeight * fitScale) / 2;
+}
+
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+  fitToCanvas();
+  if (containerRef.value) {
+    resizeObserver = new ResizeObserver(() => {
+      if (!containerRef.value) return;
+      const cw = containerRef.value.clientWidth;
+      const ch = containerRef.value.clientHeight;
+      // Skip if the container is hidden (0-sized)
+      if (cw === 0 || ch === 0) return;
+      // Re-fit whenever the container size actually changes
+      fitToCanvas();
+    });
+    resizeObserver.observe(containerRef.value);
+  }
+});
+
+onUnmounted(() => {
+  resizeObserver?.disconnect();
+});
+
+watch(() => store.loadedImage, fitToCanvas);
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="h-full w-full touch-none overflow-hidden rounded-lg border border-border bg-muted"
+    @wheel.prevent="onWheel"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+  >
+    <v-stage :config="stageConfig">
+      <v-layer>
+        <!-- Background image -->
+        <v-image v-if="imageConfig" :config="imageConfig" />
+
+        <!-- Datum shapes -->
+        <template v-for="datum in store.datums" :key="datum.id">
+          <!-- Lines/edges -->
+          <v-line
+            v-for="(lineCfg, li) in getLineConfigs(datum, datumIndex(datum))"
+            :key="`${datum.id}-line-${li}`"
+            :config="lineCfg"
+          />
+
+          <!-- Center label -->
+          <v-text :config="getLabelConfig(datum, datumIndex(datum))" />
+
+          <!-- Draggable points -->
+          <v-circle
+            v-for="ptCfg in getPointConfigs(datum, datumIndex(datum))"
+            :key="`${datum.id}-pt-${ptCfg._pointIndex}`"
+            :config="ptCfg"
+            @dragmove="onPointDragMove"
+            @click="onPointClick(datum.id)"
+            @tap="onPointClick(datum.id)"
+          />
+        </template>
+      </v-layer>
+    </v-stage>
+  </div>
+</template>
--- a/src/components/DatumEditor.vue
+++ b/src/components/DatumEditor.vue
@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useMediaQuery } from "@vueuse/core";
+import { useAppStore } from "@/stores/app";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import DatumCanvas from "@/components/DatumCanvas.vue";
+import DatumPanel from "@/components/DatumPanel.vue";
+
+const store = useAppStore();
+const sheetOpen = ref(false);
+const isMobile = useMediaQuery("(max-width: 767px)");
+
+const canvasHeight = computed(() =>
+  isMobile.value ? "h-[calc(100vh-14rem)]" : "h-[calc(100vh-12rem)]",
+);
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center justify-between gap-2">
+      <div class="min-w-0">
+        <h2 class="text-xl font-semibold">Place Datums</h2>
+        <p class="hidden text-sm text-muted-foreground sm:block">
+          Add reference shapes on the image and enter their real-world dimensions.
+        </p>
+      </div>
+      <div class="flex shrink-0 gap-2">
+        <Button variant="outline" size="sm" @click="store.goToStep(2)">Back</Button>
+        <Button size="sm" :disabled="!store.canProceedToStep4" @click="store.goToStep(4)">
+          Next
+        </Button>
+      </div>
+    </div>
+
+    <!-- Single layout: canvas always present, sidebar conditionally placed -->
+    <div
+      class="grid gap-4"
+      :class="isMobile ? 'grid-cols-1' : 'grid-cols-[1fr_360px]'"
+      :style="{ height: isMobile ? undefined : 'calc(100vh - 12rem)' }"
+    >
+      <div :class="canvasHeight">
+        <DatumCanvas />
+      </div>
+
+      <!-- Desktop: inline sidebar -->
+      <DatumPanel v-if="!isMobile" />
+    </div>
+
+    <!-- Mobile: bottom sheet for datums -->
+    <Sheet v-if="isMobile" v-model:open="sheetOpen">
+      <SheetTrigger as-child>
+        <Button variant="outline" class="w-full">
+          Datums ({{ store.datums.length }})
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="ml-2"
+          >
+            <path d="m18 15-6-6-6 6" />
+          </svg>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="bottom" class="h-[75vh] overflow-hidden rounded-t-xl">
+        <SheetHeader>
+          <SheetTitle>Datums</SheetTitle>
+        </SheetHeader>
+        <div class="h-[calc(75vh-4rem)] overflow-y-auto">
+          <DatumPanel />
+        </div>
+      </SheetContent>
+    </Sheet>
+  </div>
+</template>
--- a/src/components/DatumPanel.vue
+++ b/src/components/DatumPanel.vue
@ -0,0 +1,227 @@
+<script setup lang="ts">
+import { useAppStore } from "@/stores/app";
+import { RECT_PRESETS, createRectDatum, createLineDatum, getDatumColor } from "@/lib/datums";
+import type { ConfidenceScore, Datum, RectDatum } from "@/types";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Slider } from "@/components/ui/slider";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+const store = useAppStore();
+
+function imageCenter() {
+  const img = store.loadedImage;
+  if (!img) return { x: 400, y: 300 };
+  return { x: img.naturalWidth / 2, y: img.naturalHeight / 2 };
+}
+
+function addRect(presetLabel?: string) {
+  const preset = presetLabel
+    ? RECT_PRESETS.find((p) => p.label === presetLabel)
+    : undefined;
+  store.addDatum(createRectDatum(imageCenter(), preset));
+}
+
+function addLine() {
+  store.addDatum(createLineDatum(imageCenter()));
+}
+
+function updateField(datum: Datum, field: string, value: string | number) {
+  store.updateDatum(datum.id, { [field]: value });
+}
+
+function updateConfidence(datum: Datum, val: number[] | undefined) {
+  if (!val) return;
+  const v = val[0];
+  if (v !== undefined && v >= 1 && v <= 5) {
+    store.updateDatum(datum.id, { confidence: v as ConfidenceScore });
+  }
+}
+
+function formatDimensions(datum: Datum): string {
+  if (datum.type === "rectangle") {
+    return `${datum.widthMm} \u00D7 ${datum.heightMm} mm`;
+  }
+  return `${datum.lengthMm} mm`;
+}
+
+function onPresetSelect(value: unknown) {
+  const v = String(value);
+  addRect(v === "custom" ? undefined : v);
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col gap-4 overflow-y-auto p-4">
+    <!-- Add datum controls -->
+    <Card class="shrink-0">
+      <CardHeader class="pb-3">
+        <CardTitle class="text-sm">Add Datum</CardTitle>
+      </CardHeader>
+      <CardContent class="space-y-3 overflow-visible">
+        <div>
+          <Label class="mb-1.5 text-xs text-muted-foreground">Rectangle (preset)</Label>
+          <Select @update:model-value="onPresetSelect">
+            <SelectTrigger>
+              <SelectValue placeholder="Choose a preset..." />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem v-for="preset in RECT_PRESETS" :key="preset.label" :value="preset.label">
+                {{ preset.label }} ({{ preset.widthMm }}&times;{{ preset.heightMm }} mm)
+              </SelectItem>
+              <SelectItem value="custom">Custom rectangle</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <Button variant="outline" class="w-full" size="sm" @click="addLine">
+          + Add Line
+        </Button>
+      </CardContent>
+    </Card>
+
+    <Separator />
+
+    <!-- Datum list -->
+    <div class="space-y-3">
+      <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+        Datums ({{ store.datums.length }})
+      </p>
+
+      <p v-if="store.datums.length === 0" class="text-sm text-muted-foreground">
+        No datums added yet. Use the controls above.
+      </p>
+
+      <Card
+        v-for="(datum, idx) in store.datums"
+        :key="datum.id"
+        class="cursor-pointer transition-colors"
+        :class="
+          store.selectedDatumId === datum.id
+            ? 'ring-2 ring-primary'
+            : 'hover:bg-accent/50'
+        "
+        @click="store.selectedDatumId = datum.id"
+      >
+        <CardContent class="space-y-3 pt-4">
+          <!-- Header -->
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <div
+                class="h-3 w-3 rounded-full"
+                :style="{ backgroundColor: getDatumColor(idx) }"
+              />
+              <Badge variant="outline" class="text-xs">
+                {{ datum.type === "rectangle" ? "Rect" : "Line" }}
+              </Badge>
+              <span class="text-xs text-muted-foreground">{{ formatDimensions(datum) }}</span>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="h-6 w-6 text-destructive"
+              @click.stop="store.removeDatum(datum.id)"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="14"
+                height="14"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M3 6h18" />
+                <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
+                <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
+              </svg>
+            </Button>
+          </div>
+
+          <!-- Label -->
+          <div>
+            <Label class="text-xs">Label</Label>
+            <Input
+              :model-value="datum.label"
+              class="mt-1 h-8 text-sm"
+              @update:model-value="(v: string | number) => updateField(datum, 'label', String(v))"
+              @click.stop
+            />
+          </div>
+
+          <!-- Dimensions -->
+          <div v-if="datum.type === 'rectangle'" class="grid grid-cols-2 gap-2">
+            <div>
+              <Label class="text-xs">Width (mm)</Label>
+              <Input
+                :model-value="String((datum as RectDatum).widthMm)"
+                type="number"
+                min="1"
+                class="mt-1 h-8 text-sm"
+                @update:model-value="(v: string | number) => updateField(datum, 'widthMm', Number(v))"
+                @click.stop
+              />
+            </div>
+            <div>
+              <Label class="text-xs">Height (mm)</Label>
+              <Input
+                :model-value="String((datum as RectDatum).heightMm)"
+                type="number"
+                min="1"
+                class="mt-1 h-8 text-sm"
+                @update:model-value="(v: string | number) => updateField(datum, 'heightMm', Number(v))"
+                @click.stop
+              />
+            </div>
+          </div>
+          <div v-else>
+            <Label class="text-xs">Length (mm)</Label>
+            <Input
+              :model-value="String(datum.lengthMm)"
+              type="number"
+              min="1"
+              class="mt-1 h-8 text-sm"
+              @update:model-value="(v: string | number) => updateField(datum, 'lengthMm', Number(v))"
+              @click.stop
+            />
+          </div>
+
+          <!-- Confidence -->
+          <div>
+            <div class="flex items-center justify-between">
+              <Label class="text-xs">Confidence</Label>
+              <span class="text-xs font-medium text-muted-foreground">
+                {{ datum.confidence }} / 5
+              </span>
+            </div>
+            <Slider
+              :model-value="[datum.confidence]"
+              :min="1"
+              :max="5"
+              :step="1"
+              class="mt-2"
+              @update:model-value="(v: number[] | undefined) => updateConfidence(datum, v)"
+              @click.stop
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  </div>
+</template>
--- a/src/components/ExifViewer.vue
+++ b/src/components/ExifViewer.vue
@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { useAppStore } from "@/stores/app";
+import { orientationLabel } from "@/lib/exif";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+const store = useAppStore();
+
+interface ExifRow {
+  label: string;
+  value: string | undefined;
+}
+
+function getExifRows(): ExifRow[] {
+  const e = store.exifData;
+  return [
+    { label: "Camera Make", value: e.make },
+    { label: "Camera Model", value: e.model },
+    { label: "Lens", value: e.lensModel },
+    {
+      label: "Focal Length",
+      value: e.focalLength ? `${e.focalLength}mm` : undefined,
+    },
+    {
+      label: "Focal Length (35mm eq.)",
+      value: e.focalLengthIn35mm ? `${e.focalLengthIn35mm}mm` : undefined,
+    },
+    {
+      label: "Orientation",
+      value: e.orientation ? orientationLabel(e.orientation) : undefined,
+    },
+    {
+      label: "Image Size",
+      value:
+        e.imageWidth && e.imageHeight
+          ? `${e.imageWidth} \u00D7 ${e.imageHeight}`
+          : undefined,
+    },
+    {
+      label: "Aperture",
+      value: e.fNumber ? `f/${e.fNumber}` : undefined,
+    },
+    {
+      label: "ISO",
+      value: e.iso ? String(e.iso) : undefined,
+    },
+    {
+      label: "Exposure",
+      value: e.exposureTime
+        ? e.exposureTime < 1
+          ? `1/${Math.round(1 / e.exposureTime)}s`
+          : `${e.exposureTime}s`
+        : undefined,
+    },
+    { label: "Date Taken", value: e.dateTimeOriginal },
+    {
+      label: "GPS",
+      value:
+        e.gpsLatitude != null && e.gpsLongitude != null
+          ? `${e.gpsLatitude.toFixed(5)}, ${e.gpsLongitude.toFixed(5)}`
+          : undefined,
+    },
+  ].filter((r) => r.value != null);
+}
+</script>
+
+<template>
+  <div class="mx-auto max-w-3xl space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-xl font-semibold">Image &amp; EXIF Data</h2>
+        <p class="text-sm text-muted-foreground">
+          Review camera and lens information extracted from the image.
+        </p>
+      </div>
+      <div class="flex gap-2">
+        <Button variant="outline" @click="store.goToStep(1)">Back</Button>
+        <Button @click="store.goToStep(3)">Next: Add Datums</Button>
+      </div>
+    </div>
+
+    <div class="grid gap-6 md:grid-cols-2">
+      <!-- Image preview -->
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-base">Preview</CardTitle>
+          <CardDescription>{{ store.originalFile?.name }}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div class="flex items-center justify-center overflow-hidden rounded-md bg-muted">
+            <img
+              v-if="store.loadedImage"
+              :src="store.loadedImage.src"
+              alt="Uploaded image preview"
+              class="max-h-[400px] w-full object-contain"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <!-- EXIF table -->
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-base">EXIF Metadata</CardTitle>
+          <CardDescription>
+            <template v-if="getExifRows().length > 0">
+              Extracted from the image file
+            </template>
+            <template v-else> No EXIF data found in this image. </template>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table v-if="getExifRows().length > 0">
+            <TableHeader>
+              <TableRow>
+                <TableHead>Property</TableHead>
+                <TableHead>Value</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow v-for="row in getExifRows()" :key="row.label">
+                <TableCell class="font-medium">{{ row.label }}</TableCell>
+                <TableCell>{{ row.value }}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Info card about lens correction -->
+    <Card>
+      <CardContent class="pt-6">
+        <div class="flex gap-3">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="mt-0.5 shrink-0 text-primary"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4" />
+            <path d="M12 8h.01" />
+          </svg>
+          <div class="text-sm text-muted-foreground">
+            <p class="font-medium text-foreground">Lens Correction Info</p>
+            <p class="mt-1">
+              <template v-if="store.exifData.focalLength">
+                This image was shot at <strong>{{ store.exifData.focalLength }}mm</strong>
+                <template v-if="store.exifData.lensModel">
+                  with a <strong>{{ store.exifData.lensModel }}</strong> </template
+                >. The deskew algorithm can use this to correct barrel/pincushion distortion.
+              </template>
+              <template v-else>
+                No focal length data found. The algorithm will rely solely on datum
+                measurements for perspective correction.
+              </template>
+            </p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>
--- a/src/components/ImageUpload.vue
+++ b/src/components/ImageUpload.vue
@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useAppStore } from "@/stores/app";
+import { loadImage } from "@/lib/image-loader";
+import { extractExif } from "@/lib/exif";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+
+const store = useAppStore();
+const isDragging = ref(false);
+const error = ref("");
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const ACCEPTED = ".jpg,.jpeg,.heic,.heif";
+
+async function handleFile(file: File) {
+  error.value = "";
+  store.isProcessing = true;
+  store.processingStatus = "Reading file...";
+
+  try {
+    const { image, convertedFile } = await loadImage(file, (status) => {
+      store.processingStatus = status;
+    });
+
+    store.processingStatus = "Extracting EXIF data...";
+    const exif = await extractExif(file);
+
+    store.setImage(convertedFile, image);
+    store.setExif(exif);
+    store.goToStep(2);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Failed to load image";
+  } finally {
+    store.isProcessing = false;
+    store.processingStatus = "";
+  }
+}
+
+function onDrop(e: DragEvent) {
+  isDragging.value = false;
+  const file = e.dataTransfer?.files[0];
+  if (file) handleFile(file);
+}
+
+function onFileSelect(e: Event) {
+  const input = e.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (file) handleFile(file);
+}
+</script>
+
+<template>
+  <div class="flex min-h-[60vh] items-center justify-center">
+    <Card class="w-full max-w-lg">
+      <CardHeader class="text-center">
+        <CardTitle class="text-2xl">Upload an Image</CardTitle>
+        <CardDescription>
+          Drop a JPG or HEIC image, or click to browse. HEIC files will be converted
+          automatically.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div
+          class="relative flex min-h-[200px] cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed transition-colors"
+          :class="
+            isDragging
+              ? 'border-primary bg-primary/5'
+              : 'border-muted-foreground/25 hover:border-primary/50'
+          "
+          @dragover.prevent="isDragging = true"
+          @dragleave.prevent="isDragging = false"
+          @drop.prevent="onDrop"
+          @click="fileInput?.click()"
+        >
+          <template v-if="store.isProcessing">
+            <div class="flex flex-col items-center gap-3 p-6">
+              <Progress :model-value="50" class="w-48" />
+              <p class="text-sm text-muted-foreground">{{ store.processingStatus }}</p>
+            </div>
+          </template>
+          <template v-else>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="48"
+              height="48"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="mb-3 text-muted-foreground"
+            >
+              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+              <polyline points="17 8 12 3 7 8" />
+              <line x1="12" x2="12" y1="3" y2="15" />
+            </svg>
+            <p class="text-sm text-muted-foreground">
+              Drag &amp; drop or
+              <span class="font-medium text-primary underline">browse</span>
+            </p>
+            <p class="mt-1 text-xs text-muted-foreground/70">JPG, JPEG, HEIC, HEIF</p>
+          </template>
+
+          <input
+            ref="fileInput"
+            type="file"
+            :accept="ACCEPTED"
+            class="hidden"
+            @change="onFileSelect"
+          />
+        </div>
+
+        <p v-if="error" class="mt-3 text-center text-sm text-destructive">
+          {{ error }}
+        </p>
+      </CardContent>
+    </Card>
+  </div>
+</template>
--- a/src/components/ResultViewer.vue
+++ b/src/components/ResultViewer.vue
@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useAppStore } from "@/stores/app";
+import { deskewImage } from "@/lib/deskew";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+const store = useAppStore();
+const resultUrl = ref<string | null>(null);
+const error = ref("");
+const hasRun = ref(false);
+
+async function runDeskew() {
+  if (!store.loadedImage) return;
+
+  error.value = "";
+  store.isProcessing = true;
+  store.processingStatus = "Running deskew algorithm...";
+  hasRun.value = true;
+
+  try {
+    // Draw the loaded image onto a canvas to pass to the algorithm
+    const canvas = document.createElement("canvas");
+    canvas.width = store.loadedImage.naturalWidth;
+    canvas.height = store.loadedImage.naturalHeight;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("Cannot get 2D context");
+    ctx.drawImage(store.loadedImage, 0, 0);
+
+    const result = await deskewImage({
+      imageData: canvas,
+      datums: store.datums,
+      exif: store.exifData,
+    });
+
+    store.setResult(result);
+    resultUrl.value = URL.createObjectURL(result.correctedImageBlob);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "Deskew failed";
+  } finally {
+    store.isProcessing = false;
+    store.processingStatus = "";
+  }
+}
+
+function download() {
+  if (!resultUrl.value) return;
+  const a = document.createElement("a");
+  a.href = resultUrl.value;
+  a.download = `skwik-${store.originalFile?.name ?? "output"}.jpg`;
+  a.click();
+}
+
+onMounted(() => {
+  // Don't auto-run: let user set scale first
+});
+</script>
+
+<template>
+  <div class="mx-auto max-w-4xl space-y-6">
+    <div class="flex items-center justify-between">
+      <div>
+        <h2 class="text-xl font-semibold">Process &amp; Download</h2>
+        <p class="text-sm text-muted-foreground">
+          Set the scale, run the deskew algorithm, and download the corrected image.
+        </p>
+      </div>
+      <Button variant="outline" @click="store.goToStep(3)">Back</Button>
+    </div>
+
+    <!-- Scale setting (between step 3 and running the algo) -->
+    <Card>
+      <CardHeader>
+        <CardTitle class="text-base">Image Scale</CardTitle>
+        <CardDescription>
+          How many pixels represent 1 cm in the original image. This helps the algorithm
+          interpret your datum measurements.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div class="flex items-center gap-3">
+          <Label>Scale</Label>
+          <Input
+            :model-value="String(store.scalePxPerCm)"
+            type="number"
+            min="1"
+            class="w-28"
+            @update:model-value="(v: string | number) => (store.scalePxPerCm = Number(v) || 50)"
+          />
+          <span class="text-sm text-muted-foreground">px / cm</span>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- Summary of datums -->
+    <Card>
+      <CardHeader>
+        <CardTitle class="text-base">Datum Summary</CardTitle>
+        <CardDescription>
+          {{ store.datums.length }} datum(s) will be used for calibration.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div class="flex flex-wrap gap-2">
+          <Badge v-for="datum in store.datums" :key="datum.id" variant="outline">
+            {{ datum.label }}
+            ({{ datum.type === "rectangle" ? `${datum.widthMm}\u00D7${datum.heightMm}mm` : `${datum.lengthMm}mm` }})
+            &mdash; confidence {{ datum.confidence }}/5
+          </Badge>
+        </div>
+      </CardContent>
+    </Card>
+
+    <!-- Run button -->
+    <div class="flex justify-center">
+      <Button size="lg" :disabled="store.isProcessing" @click="runDeskew">
+        <template v-if="store.isProcessing">
+          Processing...
+        </template>
+        <template v-else>
+          {{ hasRun ? "Re-run Deskew" : "Run Deskew Algorithm" }}
+        </template>
+      </Button>
+    </div>
+
+    <p v-if="error" class="text-center text-sm text-destructive">{{ error }}</p>
+
+    <!-- Result -->
+    <template v-if="store.deskewResult">
+      <Card>
+        <CardHeader>
+          <CardTitle class="text-base">Corrected Image</CardTitle>
+          <CardDescription>
+            <span
+              v-for="(correction, i) in store.deskewResult.appliedCorrections"
+              :key="i"
+            >
+              {{ correction }}<template v-if="i < store.deskewResult.appliedCorrections.length - 1">
+                &ensp;&bull;&ensp;
+              </template>
+            </span>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div class="flex items-center justify-center overflow-hidden rounded-md bg-muted">
+            <img
+              v-if="resultUrl"
+              :src="resultUrl"
+              alt="Corrected image"
+              class="max-h-[500px] w-full object-contain"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <div class="flex justify-center">
+        <Button size="lg" @click="download">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="18"
+            height="18"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            class="mr-2"
+          >
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+            <polyline points="7 10 12 15 17 10" />
+            <line x1="12" x2="12" y1="15" y2="3" />
+          </svg>
+          Download Image
+        </Button>
+      </div>
+    </template>
+  </div>
+</template>
--- a/src/components/StepIndicator.vue
+++ b/src/components/StepIndicator.vue
@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useAppStore } from "@/stores/app";
+import { Badge } from "@/components/ui/badge";
+
+const store = useAppStore();
+
+const steps = [
+  { num: 1 as const, label: "Upload" },
+  { num: 2 as const, label: "EXIF" },
+  { num: 3 as const, label: "Datums" },
+  { num: 4 as const, label: "Result" },
+];
+</script>
+
+<template>
+  <nav class="flex items-center gap-1" aria-label="Steps">
+    <template v-for="(step, i) in steps" :key="step.num">
+      <Badge
+        :variant="store.currentStep === step.num ? 'default' : 'outline'"
+        class="cursor-default select-none text-xs"
+        :class="{
+          'opacity-40': store.currentStep < step.num,
+        }"
+      >
+        {{ step.num }}. {{ step.label }}
+      </Badge>
+      <span v-if="i < steps.length - 1" class="text-muted-foreground">&middot;</span>
+    </template>
+  </nav>
+</template>
--- a/src/components/ThemeToggle.vue
+++ b/src/components/ThemeToggle.vue
@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { Button } from "@/components/ui/button";
+
+const isDark = ref(false);
+
+onMounted(() => {
+  isDark.value =
+    document.documentElement.classList.contains("dark") ||
+    (!document.documentElement.classList.contains("light") &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches);
+  applyTheme();
+});
+
+function toggle() {
+  isDark.value = !isDark.value;
+  applyTheme();
+}
+
+function applyTheme() {
+  document.documentElement.classList.toggle("dark", isDark.value);
+}
+</script>
+
+<template>
+  <Button variant="ghost" size="icon" @click="toggle" aria-label="Toggle theme">
+    <svg
+      v-if="isDark"
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="12" cy="12" r="4" />
+      <path d="M12 2v2" />
+      <path d="M12 20v2" />
+      <path d="m4.93 4.93 1.41 1.41" />
+      <path d="m17.66 17.66 1.41 1.41" />
+      <path d="M2 12h2" />
+      <path d="M20 12h2" />
+      <path d="m6.34 17.66-1.41 1.41" />
+      <path d="m19.07 4.93-1.41 1.41" />
+    </svg>
+    <svg
+      v-else
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+    </svg>
+  </Button>
+</template>
--- a/src/components/ui/badge/Badge.vue
+++ b/src/components/ui/badge/Badge.vue
@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { BadgeVariants } from '.'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { badgeVariants } from '.'
+
+const props = defineProps<PrimitiveProps & {
+  variant?: BadgeVariants['variant']
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :data-variant="variant"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/src/components/ui/badge/index.ts
+++ b/src/components/ui/badge/index.ts
@ -0,0 +1,24 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Badge } from './Badge.vue'
+
+export const badgeVariants = cva(
+  'h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive: 'bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20',
+        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+)
+export type BadgeVariants = VariantProps<typeof badgeVariants>
--- a/src/components/ui/button/Button.vue
+++ b/src/components/ui/button/Button.vue
@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '.'
+import { Primitive } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '.'
+
+interface Props extends PrimitiveProps {
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <Primitive
+    data-slot="button"
+    :data-variant="variant"
+    :data-size="size"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
--- a/src/components/ui/button/index.ts
+++ b/src/components/ui/button/index.ts
@ -0,0 +1,35 @@
+import type { VariantProps } from 'class-variance-authority'
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*=size-])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline: 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive: 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        'default': 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        'xs': 'h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=size-])]:size-3',
+        'sm': 'h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*=size-])]:size-3.5',
+        'lg': 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        'icon': 'size-8',
+        'icon-xs': 'size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*=size-])]:size-3',
+        'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)
+export type ButtonVariants = VariantProps<typeof buttonVariants>
--- a/src/components/ui/card/Card.vue
+++ b/src/components/ui/card/Card.vue
@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: 'default' | 'sm'
+}>(), {
+  size: 'default',
+})
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :data-size="size"
+    :class="cn('ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/card/CardAction.vue
+++ b/src/components/ui/card/CardAction.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-action"
+    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/card/CardContent.vue
+++ b/src/components/ui/card/CardContent.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-4 group-data-[size=sm]/card:px-3', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/card/CardDescription.vue
+++ b/src/components/ui/card/CardDescription.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/card/CardFooter.vue
+++ b/src/components/ui/card/CardFooter.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/card/CardHeader.vue
+++ b/src/components/ui/card/CardHeader.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="cn('gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/card/CardTitle.vue
+++ b/src/components/ui/card/CardTitle.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="card-title"
+    :class="cn('text-base leading-snug font-medium group-data-[size=sm]/card:text-sm cn-font-heading', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/card/index.ts
+++ b/src/components/ui/card/index.ts
@ -0,0 +1,7 @@
+export { default as Card } from './Card.vue'
+export { default as CardAction } from './CardAction.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
--- a/src/components/ui/input/Input.vue
+++ b/src/components/ui/input/Input.vue
@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  defaultValue?: string | number
+  modelValue?: string | number
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    data-slot="input"
+    :class="cn(
+      'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+      props.class,
+    )"
+  >
+</template>
--- a/src/components/ui/input/index.ts
+++ b/src/components/ui/input/index.ts
@ -0,0 +1 @@
+export { default as Input } from './Input.vue'
--- a/src/components/ui/label/Label.vue
+++ b/src/components/ui/label/Label.vue
@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { LabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Label } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>
--- a/src/components/ui/label/index.ts
+++ b/src/components/ui/label/index.ts
@ -0,0 +1 @@
+export { default as Label } from './Label.vue'
--- a/src/components/ui/progress/Progress.vue
+++ b/src/components/ui/progress/Progress.vue
@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary size-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>
--- a/src/components/ui/progress/index.ts
+++ b/src/components/ui/progress/index.ts
@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'
--- a/src/components/ui/select/Select.vue
+++ b/src/components/ui/select/Select.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'reka-ui'
+import { SelectRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot
+    v-slot="slotProps"
+    data-slot="select"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </SelectRoot>
+</template>
--- a/src/components/ui/select/SelectContent.vue
+++ b/src/components/ui/select/SelectContent.vue
@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'item-aligned',
+    align: 'center',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      :data-align-trigger="position === 'item-aligned'"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :class="cn(
+        'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-translucent relative z-50 max-h-(--reka-select-content-available-height) origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :data-position="position"
+        :class="cn(
+          'data-[position=popper]:h-[var(--reka-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--reka-select-trigger-width)]',
+        )"
+      >
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
--- a/src/components/ui/select/SelectGroup.vue
+++ b/src/components/ui/select/SelectGroup.vue
@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectGroup } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <SelectGroup
+    data-slot="select-group"
+    v-bind="delegatedProps"
+    :class="cn('scroll-my-1 p-1', props.class)"
+  >
+    <slot />
+  </SelectGroup>
+</template>
--- a/src/components/ui/select/SelectItem.vue
+++ b/src/components/ui/select/SelectItem.vue
@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { SelectItemProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { CheckIcon } from 'lucide-vue-next'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        props.class,
+      )
+    "
+  >
+    <span class="pointer-events-none absolute right-2 flex size-4 items-center justify-center">
+      <SelectItemIndicator>
+        <slot name="indicator-icon">
+          <CheckIcon class="pointer-events-none" />
+        </slot>
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
--- a/src/components/ui/select/SelectItemText.vue
+++ b/src/components/ui/select/SelectItemText.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from 'reka-ui'
+import { SelectItemText } from 'reka-ui'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText
+    data-slot="select-item-text"
+    v-bind="props"
+  >
+    <slot />
+  </SelectItemText>
+</template>
--- a/src/components/ui/select/SelectLabel.vue
+++ b/src/components/ui/select/SelectLabel.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    :class="cn('text-muted-foreground px-1.5 py-1 text-xs', props.class)"
+  >
+    <slot />
+  </SelectLabel>
+</template>
--- a/src/components/ui/select/SelectScrollDownButton.vue
+++ b/src/components/ui/select/SelectScrollDownButton.vue
@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDownIcon } from 'lucide-vue-next'
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="forwardedProps"
+    :class="cn('bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=size-])]:size-4', props.class)"
+  >
+    <slot>
+      <ChevronDownIcon />
+    </slot>
+  </SelectScrollDownButton>
+</template>
--- a/src/components/ui/select/SelectScrollUpButton.vue
+++ b/src/components/ui/select/SelectScrollUpButton.vue
@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronUpIcon } from 'lucide-vue-next'
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="forwardedProps"
+    :class="cn('bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*=size-])]:size-4', props.class)"
+  >
+    <slot>
+      <ChevronUpIcon />
+    </slot>
+  </SelectScrollUpButton>
+</template>
--- a/src/components/ui/select/SelectSeparator.vue
+++ b/src/components/ui/select/SelectSeparator.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SelectSeparator } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 my-1 h-px pointer-events-none', props.class)"
+  />
+</template>
--- a/src/components/ui/select/SelectTrigger.vue
+++ b/src/components/ui/select/SelectTrigger.vue
@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDownIcon } from 'lucide-vue-next'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'], size?: 'sm' | 'default' }>(),
+  { size: 'default' },
+)
+
+const delegatedProps = reactiveOmit(props, 'class', 'size')
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="cn(
+      'border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*=size-])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
--- a/src/components/ui/select/SelectValue.vue
+++ b/src/components/ui/select/SelectValue.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'reka-ui'
+import { SelectValue } from 'reka-ui'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue
+    data-slot="select-value"
+    v-bind="props"
+  >
+    <slot />
+  </SelectValue>
+</template>
--- a/src/components/ui/select/index.ts
+++ b/src/components/ui/select/index.ts
@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
--- a/src/components/ui/separator/Separator.vue
+++ b/src/components/ui/separator/Separator.vue
@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'] }
+>(), {
+  orientation: 'horizontal',
+  decorative: true,
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch',
+        props.class,
+      )
+    "
+  />
+</template>
--- a/src/components/ui/separator/index.ts
+++ b/src/components/ui/separator/index.ts
@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'
--- a/src/components/ui/sheet/Sheet.vue
+++ b/src/components/ui/sheet/Sheet.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    v-slot="slotProps"
+    data-slot="sheet"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>
--- a/src/components/ui/sheet/SheetClose.vue
+++ b/src/components/ui/sheet/SheetClose.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="sheet-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>
--- a/src/components/ui/sheet/SheetContent.vue
+++ b/src/components/ui/sheet/SheetContent.vue
@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { XIcon } from 'lucide-vue-next'
+import {
+  DialogClose,
+  DialogContent,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import SheetOverlay from './SheetOverlay.vue'
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  showCloseButton?: boolean
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+  side: 'right',
+  showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class', 'side', 'showCloseButton')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <SheetOverlay />
+    <DialogContent
+      data-slot="sheet-content"
+      :data-side="side"
+      :class="cn('bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10', props.class)"
+      v-bind="{ ...$attrs, ...forwarded }"
+    >
+      <slot />
+
+      <DialogClose
+        v-if="showCloseButton"
+        data-slot="sheet-close"
+        as-child
+      >
+        <Button variant="ghost" class="absolute top-3 right-3" size="icon-sm">
+          <XIcon />
+          <span class="sr-only">Close</span>
+        </Button>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
--- a/src/components/ui/sheet/SheetDescription.vue
+++ b/src/components/ui/sheet/SheetDescription.vue
@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="sheet-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
--- a/src/components/ui/sheet/SheetFooter.vue
+++ b/src/components/ui/sheet/SheetFooter.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-footer"
+    :class="cn('gap-2 p-4 mt-auto flex flex-col', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/sheet/SheetHeader.vue
+++ b/src/components/ui/sheet/SheetHeader.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    data-slot="sheet-header"
+    :class="cn('gap-0.5 p-4 flex flex-col', props.class)"
+  >
+    <slot />
+  </div>
+</template>
--- a/src/components/ui/sheet/SheetOverlay.vue
+++ b/src/components/ui/sheet/SheetOverlay.vue
@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogOverlay } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="sheet-overlay"
+    :class="cn('bg-black/10 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50 duration-100 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogOverlay>
+</template>
--- a/src/components/ui/sheet/SheetTitle.vue
+++ b/src/components/ui/sheet/SheetTitle.vue
@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="sheet-title"
+    :class="cn('text-foreground text-base font-medium cn-font-heading', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
--- a/src/components/ui/sheet/SheetTrigger.vue
+++ b/src/components/ui/sheet/SheetTrigger.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="sheet-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>
--- a/src/components/ui/sheet/index.ts
+++ b/src/components/ui/sheet/index.ts
@ -0,0 +1,8 @@
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
--- a/src/components/ui/slider/Slider.vue
+++ b/src/components/ui/slider/Slider.vue
@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SliderRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SliderRoot
+    v-slot="{ modelValue }"
+    data-slot="slider"
+    :data-vertical="props.orientation === 'vertical' ? '' : undefined"
+    :class="cn(
+      'data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col',
+      props.class,
+    )"
+    v-bind="forwarded"
+  >
+    <SliderTrack
+      data-slot="slider-track"
+      :data-horizontal="props.orientation !== 'vertical' ? '' : undefined"
+      :data-vertical="props.orientation === 'vertical' ? '' : undefined"
+      class="bg-muted rounded-full data-horizontal:h-1 data-vertical:w-1 relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full"
+    >
+      <SliderRange
+        data-slot="slider-range"
+        :data-horizontal="props.orientation !== 'vertical' ? '' : undefined"
+        :data-vertical="props.orientation === 'vertical' ? '' : undefined"
+        class="bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
+      />
+    </SliderTrack>
+
+    <SliderThumb
+      v-for="(_, key) in modelValue"
+      :key="key"
+      data-slot="slider-thumb"
+      :data-vertical="props.orientation === 'vertical' ? '' : undefined"
+      class="border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+    />
+  </SliderRoot>
+</template>
--- a/src/components/ui/slider/index.ts
+++ b/src/components/ui/slider/index.ts
@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue'
--- a/src/components/ui/table/Table.vue
+++ b/src/components/ui/table/Table.vue
@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div data-slot="table-container" class="relative w-full overflow-x-auto">
+    <table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
--- a/src/components/ui/table/TableBody.vue
+++ b/src/components/ui/table/TableBody.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tbody
+    data-slot="table-body"
+    :class="cn('[&_tr:last-child]:border-0', props.class)"
+  >
+    <slot />
+  </tbody>
+</template>
--- a/src/components/ui/table/TableCaption.vue
+++ b/src/components/ui/table/TableCaption.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
+  >
+    <slot />
+  </caption>
+</template>
--- a/src/components/ui/table/TableCell.vue
+++ b/src/components/ui/table/TableCell.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    data-slot="table-cell"
+    :class="cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', props.class)"
+  >
+    <slot />
+  </td>
+</template>
--- a/src/components/ui/table/TableEmpty.vue
+++ b/src/components/ui/table/TableEmpty.vue
@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { cn } from '@/lib/utils'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
--- a/src/components/ui/table/TableFooter.vue
+++ b/src/components/ui/table/TableFooter.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tfoot
+    data-slot="table-footer"
+    :class="cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)"
+  >
+    <slot />
+  </tfoot>
+</template>
--- a/src/components/ui/table/TableHead.vue
+++ b/src/components/ui/table/TableHead.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <th
+    data-slot="table-head"
+    :class="cn('text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0', props.class)"
+  >
+    <slot />
+  </th>
+</template>
--- a/src/components/ui/table/TableHeader.vue
+++ b/src/components/ui/table/TableHeader.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <thead
+    data-slot="table-header"
+    :class="cn('[&_tr]:border-b', props.class)"
+  >
+    <slot />
+  </thead>
+</template>
--- a/src/components/ui/table/TableRow.vue
+++ b/src/components/ui/table/TableRow.vue
@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <tr
+    data-slot="table-row"
+    :class="cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50', props.class)"
+  >
+    <slot />
+  </tr>
+</template>
--- a/src/components/ui/table/index.ts
+++ b/src/components/ui/table/index.ts
@ -0,0 +1,9 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableRow } from './TableRow.vue'
--- a/src/components/ui/table/utils.ts
+++ b/src/components/ui/table/utils.ts
@ -0,0 +1,10 @@
+import type { Updater } from '@tanstack/vue-table'
+
+import type { Ref } from 'vue'
+import { isFunction } from '@tanstack/vue-table'
+
+export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
+  ref.value = isFunction(updaterOrValue)
+    ? updaterOrValue(ref.value)
+    : updaterOrValue
+}
--- a/src/components/ui/tooltip/Tooltip.vue
+++ b/src/components/ui/tooltip/Tooltip.vue
@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { TooltipRootEmits, TooltipRootProps } from 'reka-ui'
+import { TooltipRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot
+    v-slot="slotProps"
+    data-slot="tooltip"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps" />
+  </TooltipRoot>
+</template>
--- a/src/components/ui/tooltip/TooltipContent.vue
+++ b/src/components/ui/tooltip/TooltipContent.vue
@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TooltipContentEmits, TooltipContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TooltipArrow, TooltipContent, TooltipPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 0,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent
+      data-slot="tooltip-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="cn('data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--reka-tooltip-content-transform-origin)', props.class)"
+    >
+      <slot />
+
+      <TooltipArrow class="size-2.5 rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]" />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
--- a/src/components/ui/tooltip/TooltipProvider.vue
+++ b/src/components/ui/tooltip/TooltipProvider.vue
@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { TooltipProviderProps } from 'reka-ui'
+import { TooltipProvider } from 'reka-ui'
+
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  delayDuration: 0,
+})
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
--- a/src/components/ui/tooltip/TooltipTrigger.vue
+++ b/src/components/ui/tooltip/TooltipTrigger.vue
@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { TooltipTriggerProps } from 'reka-ui'
+import { TooltipTrigger } from 'reka-ui'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger
+    data-slot="tooltip-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </TooltipTrigger>
+</template>
--- a/src/components/ui/tooltip/index.ts
+++ b/src/components/ui/tooltip/index.ts
@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
--- a/src/lib/datums.ts
+++ b/src/lib/datums.ts
@ -0,0 +1,61 @@
+import { nanoid } from "nanoid";
+import type { LineDatum, Point, RectDatum, RectPreset } from "@/types";
+
+export const RECT_PRESETS: RectPreset[] = [
+  { label: "A3", widthMm: 297, heightMm: 420 },
+  { label: "A4", widthMm: 210, heightMm: 297 },
+  { label: "A5", widthMm: 148, heightMm: 210 },
+  { label: "A6", widthMm: 105, heightMm: 148 },
+  { label: "10\u00D715 cm", widthMm: 100, heightMm: 150 },
+];
+
+const DATUM_COLORS = [
+  "#3b82f6", // blue
+  "#ef4444", // red
+  "#22c55e", // green
+  "#f59e0b", // amber
+  "#8b5cf6", // violet
+  "#ec4899", // pink
+  "#06b6d4", // cyan
+  "#f97316", // orange
+];
+
+export function getDatumColor(index: number): string {
+  return DATUM_COLORS[index % DATUM_COLORS.length]!;
+}
+
+export function createRectDatum(
+  center: Point,
+  preset?: RectPreset,
+): RectDatum {
+  const spread = 80;
+  return {
+    id: nanoid(),
+    type: "rectangle",
+    corners: [
+      { x: center.x - spread, y: center.y - spread },
+      { x: center.x + spread, y: center.y - spread },
+      { x: center.x + spread, y: center.y + spread },
+      { x: center.x - spread, y: center.y + spread },
+    ],
+    widthMm: preset?.widthMm ?? 210,
+    heightMm: preset?.heightMm ?? 297,
+    confidence: 3,
+    label: preset?.label ?? "Rectangle",
+  };
+}
+
+export function createLineDatum(center: Point): LineDatum {
+  const spread = 100;
+  return {
+    id: nanoid(),
+    type: "line",
+    endpoints: [
+      { x: center.x - spread, y: center.y },
+      { x: center.x + spread, y: center.y },
+    ],
+    lengthMm: 100,
+    confidence: 3,
+    label: "Line",
+  };
+}
--- a/src/lib/deskew.ts
+++ b/src/lib/deskew.ts
@ -0,0 +1,45 @@
+import type { DeskewInput, DeskewResult } from "@/types";
+
+/**
+ * Placeholder deskew algorithm.
+ *
+ * TODO: Replace with actual perspective-correction implementation.
+ * The algorithm should:
+ * 1. Use datum measurements to compute a homography matrix
+ * 2. Apply lens distortion correction using EXIF focal length data
+ * 3. Warp the image to produce a corrected output
+ */
+export async function deskewImage(input: DeskewInput): Promise<DeskewResult> {
+  const canvas = document.createElement("canvas");
+  canvas.width = input.imageData.width;
+  canvas.height = input.imageData.height;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Cannot get 2D context");
+
+  ctx.drawImage(input.imageData, 0, 0);
+
+  const blob = await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (b) => (b ? resolve(b) : reject(new Error("Canvas toBlob failed"))),
+      "image/jpeg",
+      0.95,
+    );
+  });
+
+  const corrections: string[] = [];
+
+  if (input.exif.focalLength) {
+    corrections.push(
+      `Lens: ${input.exif.lensModel ?? "unknown"} @ ${input.exif.focalLength}mm`,
+    );
+  }
+
+  corrections.push(`${input.datums.length} datum(s) used for calibration`);
+  corrections.push("Placeholder: no actual correction applied yet");
+
+  return {
+    correctedImageBlob: blob,
+    appliedCorrections: corrections,
+  };
+}
--- a/src/lib/exif.ts
+++ b/src/lib/exif.ts
@ -0,0 +1,62 @@
+import exifr from "exifr";
+import type { ExifData } from "@/types";
+
+export async function extractExif(file: File): Promise<ExifData> {
+  try {
+    const raw = await exifr.parse(file, {
+      tiff: true,
+      exif: true,
+      gps: true,
+      ifd0: { pick: ["Make", "Model", "Orientation", "ImageWidth", "ImageHeight"] },
+    });
+
+    if (!raw) return {};
+
+    return {
+      make: raw.Make as string | undefined,
+      model: raw.Model as string | undefined,
+      lensModel: raw.LensModel as string | undefined,
+      focalLength: raw.FocalLength as number | undefined,
+      focalLengthIn35mm: raw.FocalLengthIn35mmFormat as number | undefined,
+      orientation: raw.Orientation as number | undefined,
+      imageWidth: (raw.ImageWidth ?? raw.ExifImageWidth) as number | undefined,
+      imageHeight: (raw.ImageHeight ?? raw.ExifImageHeight) as
+        | number
+        | undefined,
+      exposureTime: raw.ExposureTime as number | undefined,
+      fNumber: raw.FNumber as number | undefined,
+      iso: raw.ISO as number | undefined,
+      dateTimeOriginal: raw.DateTimeOriginal
+        ? String(raw.DateTimeOriginal)
+        : undefined,
+      gpsLatitude: raw.latitude as number | undefined,
+      gpsLongitude: raw.longitude as number | undefined,
+    };
+  } catch {
+    console.warn("EXIF extraction failed");
+    return {};
+  }
+}
+
+export function orientationLabel(orientation: number | undefined): string {
+  switch (orientation) {
+    case 1:
+      return "Normal";
+    case 2:
+      return "Mirrored horizontal";
+    case 3:
+      return "Rotated 180\u00B0";
+    case 4:
+      return "Mirrored vertical";
+    case 5:
+      return "Mirrored horizontal + rotated 270\u00B0";
+    case 6:
+      return "Rotated 90\u00B0 CW";
+    case 7:
+      return "Mirrored horizontal + rotated 90\u00B0";
+    case 8:
+      return "Rotated 270\u00B0 CW";
+    default:
+      return "Unknown";
+  }
+}
--- a/src/lib/image-loader.ts
+++ b/src/lib/image-loader.ts
@ -0,0 +1,53 @@
+import { isHeic, heicTo } from "heic-to";
+
+function isHeicFile(file: File): boolean {
+  const ext = file.name.toLowerCase();
+  if (ext.endsWith(".heic") || ext.endsWith(".heif")) return true;
+  return file.type === "image/heic" || file.type === "image/heif";
+}
+
+export async function loadImage(
+  file: File,
+  onProgress?: (status: string) => void,
+): Promise<{ image: HTMLImageElement; convertedFile: File }> {
+  let processedFile = file;
+
+  if (isHeicFile(file)) {
+    onProgress?.("Checking HEIC format...");
+
+    if (await isHeic(file)) {
+      onProgress?.("Converting HEIC to JPEG...");
+      const jpegBlob = await heicTo({
+        blob: file,
+        type: "image/jpeg",
+        quality: 0.92,
+      });
+
+      processedFile = new File(
+        [jpegBlob],
+        file.name.replace(/\.hei[cf]$/i, ".jpg"),
+        { type: "image/jpeg" },
+      );
+    }
+  }
+
+  onProgress?.("Loading image...");
+  const image = await createImageElement(processedFile);
+  return { image, convertedFile: processedFile };
+}
+
+function createImageElement(file: File): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    // Keep the object URL alive — the img.src must remain valid for later
+    // rendering in <img> tags and on the Konva canvas.
+    const url = URL.createObjectURL(file);
+
+    img.onload = () => resolve(img);
+    img.onerror = () => {
+      URL.revokeObjectURL(url);
+      reject(new Error("Failed to load image"));
+    };
+    img.src = url;
+  });
+}
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx"
+import { clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,10 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import VueKonva from "vue-konva";
+import App from "./App.vue";
+import "./assets/index.css";
+
+const app = createApp(App);
+app.use(createPinia());
+app.use(VueKonva);
+app.mount("#app");
--- a/src/stores/app.ts
+++ b/src/stores/app.ts
@ -0,0 +1,96 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import type { AppStep, Datum, DeskewResult, ExifData } from "@/types";
+import { DEFAULT_SCALE_PX_PER_CM } from "@/types";
+
+export const useAppStore = defineStore("app", () => {
+  const currentStep = ref<AppStep>(1);
+  const originalFile = ref<File | null>(null);
+  const loadedImage = ref<HTMLImageElement | null>(null);
+  const exifData = ref<ExifData>({});
+  const datums = ref<Datum[]>([]);
+  const deskewResult = ref<DeskewResult | null>(null);
+  const isProcessing = ref(false);
+  const processingStatus = ref("");
+  const selectedDatumId = ref<string | null>(null);
+  const scalePxPerCm = ref(DEFAULT_SCALE_PX_PER_CM);
+
+  const canProceedToStep2 = computed(() => loadedImage.value !== null);
+  const canProceedToStep3 = computed(() => canProceedToStep2.value);
+  const canProceedToStep4 = computed(
+    () => canProceedToStep3.value && datums.value.length > 0,
+  );
+
+  function setImage(file: File, image: HTMLImageElement) {
+    originalFile.value = file;
+    loadedImage.value = image;
+  }
+
+  function setExif(data: ExifData) {
+    exifData.value = data;
+  }
+
+  function goToStep(step: AppStep) {
+    currentStep.value = step;
+  }
+
+  function addDatum(datum: Datum) {
+    datums.value.push(datum);
+    selectedDatumId.value = datum.id;
+  }
+
+  function updateDatum(id: string, updates: Partial<Datum>) {
+    const index = datums.value.findIndex((d) => d.id === id);
+    if (index !== -1) {
+      datums.value[index] = { ...datums.value[index]!, ...updates } as Datum;
+    }
+  }
+
+  function removeDatum(id: string) {
+    datums.value = datums.value.filter((d) => d.id !== id);
+    if (selectedDatumId.value === id) {
+      selectedDatumId.value = datums.value[0]?.id ?? null;
+    }
+  }
+
+  function setResult(result: DeskewResult) {
+    deskewResult.value = result;
+  }
+
+  function reset() {
+    currentStep.value = 1;
+    originalFile.value = null;
+    loadedImage.value = null;
+    exifData.value = {};
+    datums.value = [];
+    deskewResult.value = null;
+    isProcessing.value = false;
+    processingStatus.value = "";
+    selectedDatumId.value = null;
+    scalePxPerCm.value = DEFAULT_SCALE_PX_PER_CM;
+  }
+
+  return {
+    currentStep,
+    originalFile,
+    loadedImage,
+    exifData,
+    datums,
+    deskewResult,
+    isProcessing,
+    processingStatus,
+    selectedDatumId,
+    scalePxPerCm,
+    canProceedToStep2,
+    canProceedToStep3,
+    canProceedToStep4,
+    setImage,
+    setExif,
+    goToStep,
+    addDatum,
+    updateDatum,
+    removeDatum,
+    setResult,
+    reset,
+  };
+});
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -0,0 +1,66 @@
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface RectDatum {
+  id: string;
+  type: "rectangle";
+  corners: [Point, Point, Point, Point]; // TL, TR, BR, BL
+  widthMm: number;
+  heightMm: number;
+  confidence: 1 | 2 | 3 | 4 | 5;
+  label: string;
+}
+
+export interface LineDatum {
+  id: string;
+  type: "line";
+  endpoints: [Point, Point];
+  lengthMm: number;
+  confidence: 1 | 2 | 3 | 4 | 5;
+  label: string;
+}
+
+export type Datum = RectDatum | LineDatum;
+
+export type ConfidenceScore = 1 | 2 | 3 | 4 | 5;
+
+export interface ExifData {
+  make?: string;
+  model?: string;
+  lensModel?: string;
+  focalLength?: number;
+  focalLengthIn35mm?: number;
+  orientation?: number;
+  imageWidth?: number;
+  imageHeight?: number;
+  exposureTime?: number;
+  fNumber?: number;
+  iso?: number;
+  dateTimeOriginal?: string;
+  gpsLatitude?: number;
+  gpsLongitude?: number;
+}
+
+export interface DeskewInput {
+  imageData: HTMLCanvasElement;
+  datums: Datum[];
+  exif: ExifData;
+}
+
+export interface DeskewResult {
+  correctedImageBlob: Blob;
+  appliedCorrections: string[];
+}
+
+export type AppStep = 1 | 2 | 3 | 4;
+
+/** Pixels per centimeter in the image. Used for initial datum placement scaling. */
+export const DEFAULT_SCALE_PX_PER_CM = 50;
+
+export interface RectPreset {
+  label: string;
+  widthMm: number;
+  heightMm: number;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "module": "ESNext",
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Strict */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "forceConsistentCasingInFileNames": true,
+
+    /* Paths */
+    "ignoreDeprecations": "6.0",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "vite.config.ts", "env.d.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -0,0 +1,13 @@
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import tailwindcss from "@tailwindcss/vite";
+import { resolve } from "node:path";
+
+export default defineConfig({
+  plugins: [vue(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": resolve(__dirname, "./src"),
+    },
+  },
+});
				`@ -0,0 +1 @@`
				`export { default as Input } from './Input.vue'`
				`@ -0,0 +1 @@`
				`export { default as Label } from './Label.vue'`
				`@ -0,0 +1 @@`
				`export { default as Progress } from './Progress.vue'`
				`@ -0,0 +1 @@`
				`export { default as Separator } from './Separator.vue'`
				`@ -0,0 +1 @@`
				`export { default as Slider } from './Slider.vue'`