diff --git a/README.md b/README.md index cf56a37..f69db08 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,10 @@ -# INKFINITE +# Inkfinite -An infinite canvas whiteboard application for creative visual thinking and collaboration. - -## Overview - -Inkfinite is a web-based infinite canvas application. +A web-based infinite canvas application for creative visual thinking. ## Architecture -Inkfinite is built with a reactive architecture and optimized canvas rendering. -There are pan, zoom, and shape manipulation tools. +Inkfinite is built with reactivity, vector math, and optimized canvas rendering. The project is organized as a pnpm monorepo with the following structure: @@ -119,23 +114,7 @@ Tauri desktop wrapper that loads the web app with native file system access. ### Development -```bash -cd apps/desktop - -# Development mode (with hot reload) -pnpm tauri dev - -# Build production app -pnpm tauri build -``` - -**Note:** The web app automatically detects when running in Tauri and switches from IndexedDB to file-based persistence. - - - -## Development - -### Prerequisites +#### Prerequisites **Standard Setup:** @@ -147,119 +126,16 @@ pnpm tauri build - Nix with flakes enabled - For desktop app: Rust via [rustup](https://rustup.rs) (not Nix) -### Setup - -
- -Standard - - ```bash -# Install dependencies -pnpm install - -# Run tests -pnpm test - -# Build all packages -pnpm build - -# Start web app in development -cd apps/web -pnpm dev -``` - -
- -
- -Nix Shell - - -```bash -# Enter Nix development shell (provides Node.js & pnpm) -nix-shell - -# Install dependencies -pnpm install - -# For desktop app development, ensure Rust is installed via rustup: -# curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh --no-modify-path -y - -# Run web app -cd apps/web -pnpm dev - -# Run desktop app (Tauri) cd apps/desktop -pnpm tauri dev -``` - -- Node.js and pnpm are provided by Nix for consistency -- Rust must be installed via rustup to avoid macOS framework linking issues -- The shell automatically configures paths and SDK for Tauri development - -
-### Project - -
- -Structure - +# Development mode (with hot reload) +pnpm tauri dev -```sh -. -├── packages/ -│ ├── core/ -│ │ ├── src/ -│ │ │ ├── math.ts # Vector and matrix math -│ │ │ ├── camera.ts # Camera transforms -│ │ │ ├── geom.ts # Geometry utilities -│ │ │ ├── model.ts # Data structures -│ │ │ ├── reactivity.ts # State management -│ │ │ └── actions.ts # Input system -│ │ └── package.json -│ └── renderer/ -│ ├── src/ -│ │ └── index.ts # Canvas renderer -│ └── package.json -└── apps/ - └── web/ - ├── src/ - │ ├── routes/ # SvelteKit routes - │ └── lib/ # Svelte components - └── package.json +# Build production app +pnpm tauri build ``` -
- -
- -Design Principles - - -### Code Organization - -- **Namespace pattern** - Types and operations co-located (e.g., `Vec2` type + `Vec2.add()` function) -- **Pure functions** - Immutable operations, no side effects -- **Type safety** - Full TypeScript coverage with strict mode - -### Coordinate Systems - -- **World space** - Infinite 2D plane for shape coordinates -- **Screen space** - Viewport pixels, origin at top-left -- **Camera** - Mediates between world and screen coordinates - -
- -
- -Theme - - -- **Light:** Nord color palette -- **Dark:** Iceberg.vim color palette -- **Font:** Open Sans +**Note:** The web app automatically detects when running in Tauri and switches from IndexedDB to file-based persistence.
diff --git a/apps/web/src/app.css b/apps/web/src/app.css index 5a9aec2..a7756e4 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300..700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@300..700&display=swap'); :root { --bg-primary: #eceff4; @@ -143,10 +143,14 @@ } body { - font-family: 'Open Sans', sans-serif; + font-family: 'Work Sans', sans-serif; background-color: var(--surface); color: var(--text); - line-height: 1.6; + line-height: 1.25; +} + +button { + font-family: 'Work Sans', sans-serif; } ::selection { diff --git a/apps/web/src/lib/canvas/Canvas.svelte b/apps/web/src/lib/canvas/Canvas.svelte index ea0044c..a3ff238 100644 --- a/apps/web/src/lib/canvas/Canvas.svelte +++ b/apps/web/src/lib/canvas/Canvas.svelte @@ -1,7 +1,6 @@
- c.desktop.handleSaveAs(null), onSelectBoard: c.desktop.handleRecentSelect }} - onOpenBrowser={c.fileBrowser.handleOpen} /> - {formatSelection()}
-
- Snap +
@@ -177,36 +176,33 @@ .status-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 12px; - padding: 8px 16px; + gap: 1rem; + padding: 0.5rem 1rem; background: var(--surface-elevated); border-top: 1px solid var(--border); - font-size: 13px; + font-size: 0.75rem; align-items: center; - min-height: 48px; + min-height: 40px; } .status-bar__section { display: flex; - flex-direction: column; - gap: 2px; + flex-direction: row; + align-items: center; + gap: 0.5rem; position: relative; } - .status-bar__section--snap { - align-items: flex-start; - } - .status-bar__toggle-row { display: flex; - gap: 8px; + gap: 1rem; } .status-bar__toggle { display: flex; align-items: center; - gap: 4px; - font-size: 12px; + gap: 0.25rem; + font-size: 0.75rem; color: var(--text); } @@ -221,7 +217,7 @@ } .status-bar__label { - font-size: 11px; + font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; @@ -237,7 +233,7 @@ } .status-bar__mode { - font-size: 12px; + font-size: 0.75rem; color: var(--text-muted); } diff --git a/apps/web/src/lib/components/TitleBar.svelte b/apps/web/src/lib/components/TitleBar.svelte deleted file mode 100644 index b4678db..0000000 --- a/apps/web/src/lib/components/TitleBar.svelte +++ /dev/null @@ -1,318 +0,0 @@ - - -
-
- -
-
Inkfinite
-
Infinite canvas playground
-
-
- {#if platform === 'desktop' && desktop} -
-
{desktopFileLabel()}
-
- - - - {#if desktop.recentBoards.length > 0} - - {/if} -
-
- {/if} -
- {#if platform === 'web' && onOpenBrowser} - - {/if} - -
- - -
-

About Inkfinite

-

- Inkfinite is a Svelte-native infinite canvas prototype. The goal is to build a cross-platform - editor with a framework-agnostic core so the same engine powers both the web and desktop - apps. -

- -
-

Quick Tips

-
    - {#each keyboardTips as tip (tip)} -
  • {tip}
    • - {/each} -
-
- -
-

Need help?

- -
-
- - - diff --git a/apps/web/src/lib/components/Toolbar.svelte b/apps/web/src/lib/components/Toolbar.svelte index 750f952..1cfe283 100644 --- a/apps/web/src/lib/components/Toolbar.svelte +++ b/apps/web/src/lib/components/Toolbar.svelte @@ -1,7 +1,18 @@ - -
+ {/if} + +
+ {#if onHistoryClick}