npm - floatnote - Versions diffs - 1.0.0 - Mend

floatnote 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/.beads/config.json +6 -0
package/.beads/issues/floatnote-1.md +21 -0
package/.beads/issues/floatnote-10.md +28 -0
package/.beads/issues/floatnote-11.md +36 -0
package/.beads/issues/floatnote-12.md +25 -0
package/.beads/issues/floatnote-13.md +37 -0
package/.beads/issues/floatnote-14.md +22 -0
package/.beads/issues/floatnote-15.md +22 -0
package/.beads/issues/floatnote-16.md +20 -0
package/.beads/issues/floatnote-17.md +20 -0
package/.beads/issues/floatnote-18.md +21 -0
package/.beads/issues/floatnote-19.md +19 -0
package/.beads/issues/floatnote-2.md +32 -0
package/.beads/issues/floatnote-20.md +22 -0
package/.beads/issues/floatnote-3.md +50 -0
package/.beads/issues/floatnote-4.md +31 -0
package/.beads/issues/floatnote-5.md +28 -0
package/.beads/issues/floatnote-6.md +30 -0
package/.beads/issues/floatnote-7.md +38 -0
package/.beads/issues/floatnote-8.md +29 -0
package/.beads/issues/floatnote-9.md +32 -0
package/CLAUDE.md +61 -0
package/README.md +95 -0
package/bin/floatnote.js +218 -0
package/coverage/base.css +224 -0
package/coverage/bin/floatnote.js.html +739 -0
package/coverage/bin/index.html +116 -0
package/coverage/block-navigation.js +87 -0
package/coverage/favicon.png +0 -0
package/coverage/index.html +131 -0
package/coverage/lcov-report/base.css +224 -0
package/coverage/lcov-report/bin/floatnote.js.html +739 -0
package/coverage/lcov-report/bin/index.html +116 -0
package/coverage/lcov-report/block-navigation.js +87 -0
package/coverage/lcov-report/favicon.png +0 -0
package/coverage/lcov-report/index.html +131 -0
package/coverage/lcov-report/prettify.css +1 -0
package/coverage/lcov-report/prettify.js +2 -0
package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
package/coverage/lcov-report/sorter.js +210 -0
package/coverage/lcov-report/src/index.html +146 -0
package/coverage/lcov-report/src/main.js.html +1483 -0
package/coverage/lcov-report/src/preload.js.html +361 -0
package/coverage/lcov-report/src/renderer.js.html +8767 -0
package/coverage/lcov.info +3273 -0
package/coverage/prettify.css +1 -0
package/coverage/prettify.js +2 -0
package/coverage/sort-arrow-sprite.png +0 -0
package/coverage/sorter.js +210 -0
package/coverage/src/index.html +146 -0
package/coverage/src/main.js.html +1483 -0
package/coverage/src/preload.js.html +361 -0
package/coverage/src/renderer.js.html +8767 -0
package/jest.config.js +48 -0
package/package.json +59 -0
package/src/icon-template.png +0 -0
package/src/index.html +296 -0
package/src/main.js +494 -0
package/src/preload.js +96 -0
package/src/renderer.js +3203 -0
package/src/styles.css +1448 -0
package/tests/cli/floatnote.test.js +167 -0
package/tests/main/main.test.js +287 -0
package/tests/mocks/electron.js +126 -0
package/tests/mocks/fs.js +17 -0
package/tests/preload/preload.test.js +218 -0
package/tests/renderer/history.test.js +234 -0
package/tests/renderer/notes.test.js +262 -0
package/tests/renderer/settings.test.js +178 -0

package/jest.config.js ADDED Viewed

@@ -0,0 +1,48 @@
+module.exports = {
+  testEnvironment: 'node',
+  roots: ['<rootDir>/tests'],
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  coverageReporters: ['text', 'lcov', 'html'],
+  collectCoverageFrom: [
+    'src/**/*.js',
+    'bin/**/*.js',
+    '!**/node_modules/**'
+  ],
+  coverageThreshold: {
+    global: {
+      statements: 0,
+      branches: 0,
+      functions: 0,
+      lines: 0
+    }
+  },
+  projects: [
+    {
+      displayName: 'main',
+      testEnvironment: 'node',
+      testMatch: ['<rootDir>/tests/main/**/*.test.js'],
+      moduleNameMapper: {
+        '^electron$': '<rootDir>/tests/mocks/electron.js'
+      }
+    },
+    {
+      displayName: 'renderer',
+      testEnvironment: 'jsdom',
+      testMatch: ['<rootDir>/tests/renderer/**/*.test.js']
+    },
+    {
+      displayName: 'cli',
+      testEnvironment: 'node',
+      testMatch: ['<rootDir>/tests/cli/**/*.test.js']
+    },
+    {
+      displayName: 'preload',
+      testEnvironment: 'node',
+      testMatch: ['<rootDir>/tests/preload/**/*.test.js'],
+      moduleNameMapper: {
+        '^electron$': '<rootDir>/tests/mocks/electron.js'
+      }
+    }
+  ]
+};

package/package.json ADDED Viewed

@@ -0,0 +1,59 @@
+{
+  "name": "floatnote",
+  "version": "1.0.0",
+  "description": "Transparent always-on-top drawing and note-taking overlay for macOS",
+  "main": "src/main.js",
+  "bin": {
+    "floatnote": "bin/floatnote.js"
+  },
+  "scripts": {
+    "start": "electron .",
+    "dev": "electron . --enable-logging",
+    "build": "electron-builder --mac --publish never",
+    "release": "electron-builder --mac --publish always",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/josmanvis/floatnote.git"
+  },
+  "homepage": "https://github.com/josmanvis/floatnote",
+  "keywords": [
+    "electron",
+    "drawing",
+    "overlay",
+    "notes",
+    "macos",
+    "transparent",
+    "annotation"
+  ],
+  "author": "Jose",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "devDependencies": {
+    "electron": "^33.0.0",
+    "electron-builder": "^25.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0"
+  },
+  "build": {
+    "appId": "com.floatnote.app",
+    "productName": "Floatnote",
+    "mac": {
+      "category": "public.app-category.productivity",
+      "target": [
+        "dmg",
+        "zip"
+      ]
+    },
+    "publish": {
+      "provider": "github",
+      "owner": "josmanvis",
+      "repo": "floatnote"
+    }
+  }
+}

package/src/icon-template.png ADDED Viewed

Binary file

package/src/index.html ADDED Viewed

@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'">
+    <title>Floatnote</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="app">
+        <!-- Focus border overlay -->
+        <div id="focus-border"></div>
+        <!-- Size toolbar (left) -->
+        <div id="size-toolbar">
+            <div class="dropdown-container">
+                <button id="size-toggle" class="tool-btn" title="Window size">
+                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+                        <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14z"/>
+                    </svg>
+                </button>
+                <div class="dropdown-menu">
+                    <button class="dropdown-item" data-size="sm">
+                        <span class="size-label">SM</span>
+                        <span class="size-desc">33% × 50%</span>
+                    </button>
+                    <button class="dropdown-item active" data-size="md">
+                        <span class="size-label">MD</span>
+                        <span class="size-desc">33% × 100%</span>
+                    </button>
+                    <button class="dropdown-item" data-size="lg">
+                        <span class="size-label">LG</span>
+                        <span class="size-desc">100% × 100%</span>
+                    </button>
+                </div>
+            </div>
+            <label class="pin-toggle" title="Keep window on top">
+                <input type="checkbox" id="pin-checkbox" checked>
+                <svg class="pin-icon" viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                    <path d="M16 12V4h1V2H7v2h1v8l-2 2v2h5.2v6h1.6v-6H18v-2l-2-2z"/>
+                </svg>
+            </label>
+        </div>
+        <!-- Main toolbar (right) -->
+        <div id="toolbar">
+            <div class="toolbar-group">
+                <button id="select-mode" class="tool-btn" title="Select mode (V)">
+                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+                        <path d="M4 2l14 11-6 .5 3.5 7.5-2.5 1-3.5-7.5L4 19V2z"/>
+                    </svg>
+                </button>
+                <button id="draw-mode" class="tool-btn active" title="Draw mode (B)">
+                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+                        <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+                    </svg>
+                </button>
+                <button id="text-mode" class="tool-btn" title="Text mode (T)">
+                    <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+                        <path d="M5 4v3h5.5v12h3V7H19V4z"/>
+                    </svg>
+                </button>
+            </div>
+            <div class="toolbar-divider"></div>
+            <div class="dropdown-container">
+                <button id="color-toggle" class="tool-btn color-swatch-btn" title="Color">
+                    <span class="current-color" style="background: #ffffff"></span>
+                </button>
+                <div class="dropdown-menu color-dropdown">
+                    <div class="color-grid">
+                        <button class="color-btn active" data-color="#ffffff" style="background: #ffffff"></button>
+                        <button class="color-btn" data-color="#1a1a1a" style="background: #1a1a1a"></button>
+                        <button class="color-btn" data-color="#ef4444" style="background: #ef4444"></button>
+                        <button class="color-btn" data-color="#f97316" style="background: #f97316"></button>
+                        <button class="color-btn" data-color="#eab308" style="background: #eab308"></button>
+                        <button class="color-btn" data-color="#22c55e" style="background: #22c55e"></button>
+                        <button class="color-btn" data-color="#3b82f6" style="background: #3b82f6"></button>
+                        <button class="color-btn" data-color="#a855f7" style="background: #a855f7"></button>
+                        <button class="color-btn" data-color="#ec4899" style="background: #ec4899"></button>
+                        <button class="color-btn" data-color="#06b6d4" style="background: #06b6d4"></button>
+                        <button class="color-btn" data-color="#84cc16" style="background: #84cc16"></button>
+                        <button class="color-btn" data-color="#f43f5e" style="background: #f43f5e"></button>
+                    </div>
+                </div>
+            </div>
+            <div class="dropdown-container">
+                <button id="stroke-toggle" class="tool-btn" title="Stroke size">
+                    <span class="current-stroke"></span>
+                </button>
+                <div class="dropdown-menu stroke-dropdown">
+                    <button class="stroke-option" data-width="2">
+                        <span class="stroke-dot" style="width: 4px; height: 4px"></span>
+                        <span>Fine</span>
+                    </button>
+                    <button class="stroke-option active" data-width="4">
+                        <span class="stroke-dot" style="width: 8px; height: 8px"></span>
+                        <span>Medium</span>
+                    </button>
+                    <button class="stroke-option" data-width="8">
+                        <span class="stroke-dot" style="width: 12px; height: 12px"></span>
+                        <span>Thick</span>
+                    </button>
+                    <button class="stroke-option" data-width="12">
+                        <span class="stroke-dot" style="width: 16px; height: 16px"></span>
+                        <span>Heavy</span>
+                    </button>
+                </div>
+            </div>
+            <div class="toolbar-divider"></div>
+            <button id="clear-btn" class="tool-btn danger" title="Clear all">
+                <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+                    <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+                </svg>
+            </button>
+        </div>
+        <!-- Drag handle -->
+        <div id="drag-handle" title="Drag to move"></div>
+        <!-- Left edge resize handle -->
+        <div id="left-resize-handle" title="Drag to resize"></div>
+        <!-- Canvas for drawing -->
+        <canvas id="draw-canvas"></canvas>
+        <!-- Container for text items -->
+        <div id="text-container"></div>
+        <!-- Selection rectangle overlay -->
+        <div id="selection-rect"></div>
+        <!-- Pagination island (right side) -->
+        <div id="pagination-island">
+            <button id="prev-note" class="pagination-btn" title="Previous note ([)">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                    <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
+                </svg>
+            </button>
+            <span id="note-counter">1/1</span>
+            <button id="next-note" class="pagination-btn" title="Next note (])">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                    <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
+                </svg>
+            </button>
+            <div class="toolbar-divider"></div>
+            <button id="new-note" class="pagination-btn" title="New note (N)">
+                <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor">
+                    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
+                </svg>
+            </button>
+        </div>
+        <!-- Settings panel -->
+        <div id="settings-panel" class="settings-panel">
+            <div class="settings-header">
+                <h2>Settings</h2>
+                <button id="settings-close" class="settings-close-btn">✕</button>
+            </div>
+            <div class="settings-content">
+                <div class="settings-section">
+                    <h3>Gestures</h3>
+                    <label class="settings-toggle">
+                        <span>Pinch to zoom</span>
+                        <input type="checkbox" id="setting-pinch-zoom" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                    <label class="settings-toggle">
+                        <span>Two-finger pan</span>
+                        <input type="checkbox" id="setting-pan" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                    <label class="settings-toggle">
+                        <span>Rotate gesture</span>
+                        <input type="checkbox" id="setting-rotate" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="settings-section">
+                    <h3>Appearance</h3>
+                    <div class="settings-bg-options">
+                        <span class="settings-label">Active Background</span>
+                        <div class="bg-option-group">
+                            <label class="bg-option">
+                                <input type="radio" name="bg-mode" value="transparent" checked>
+                                <span class="bg-option-box transparent"></span>
+                                <span>Clear</span>
+                            </label>
+                            <label class="bg-option">
+                                <input type="radio" name="bg-mode" value="blur">
+                                <span class="bg-option-box blur"></span>
+                                <span>Blur</span>
+                            </label>
+                            <label class="bg-option">
+                                <input type="radio" name="bg-mode" value="dark">
+                                <span class="bg-option-box dark"></span>
+                                <span>Dark</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="settings-slider">
+                        <span class="settings-label">Active Opacity</span>
+                        <input type="range" id="setting-active-opacity" min="0" max="100" value="100">
+                        <span class="slider-value" id="active-opacity-value">100%</span>
+                    </div>
+                    <div class="settings-bg-options">
+                        <span class="settings-label">Inactive Background</span>
+                        <div class="bg-option-group">
+                            <label class="bg-option">
+                                <input type="radio" name="inactive-bg-mode" value="transparent" checked>
+                                <span class="bg-option-box transparent"></span>
+                                <span>Clear</span>
+                            </label>
+                            <label class="bg-option">
+                                <input type="radio" name="inactive-bg-mode" value="blur">
+                                <span class="bg-option-box blur"></span>
+                                <span>Blur</span>
+                            </label>
+                            <label class="bg-option">
+                                <input type="radio" name="inactive-bg-mode" value="dark">
+                                <span class="bg-option-box dark"></span>
+                                <span>Dark</span>
+                            </label>
+                        </div>
+                    </div>
+                    <div class="settings-slider">
+                        <span class="settings-label">Inactive Opacity</span>
+                        <input type="range" id="setting-inactive-opacity" min="0" max="100" value="50">
+                        <span class="slider-value" id="inactive-opacity-value">50%</span>
+                    </div>
+                    <label class="settings-toggle">
+                        <span>Show zoom controls</span>
+                        <input type="checkbox" id="setting-zoom-controls" checked>
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="settings-section">
+                    <h3>Behavior</h3>
+                    <label class="settings-toggle">
+                        <span>Always open with clean slate</span>
+                        <input type="checkbox" id="setting-clean-slate">
+                        <span class="toggle-slider"></span>
+                    </label>
+                </div>
+                <div class="settings-section">
+                    <h3>Storage</h3>
+                    <label class="settings-toggle">
+                        <span>Auto-save notes to ~/.floatnote</span>
+                        <input type="checkbox" id="setting-auto-save-folder">
+                        <span class="toggle-slider"></span>
+                    </label>
+                    <button id="open-folder-btn" class="settings-btn">
+                        Open Notes Folder
+                    </button>
+                </div>
+                <div class="settings-section">
+                    <h3>Keyboard Shortcuts</h3>
+                    <div class="shortcuts-list">
+                        <div class="shortcut-item"><span>Toggle Floatnote</span><kbd>⌘⇧G</kbd></div>
+                        <div class="shortcut-item"><span>Quick Toggle</span><kbd>⌥Space</kbd></div>
+                        <div class="shortcut-item"><span>Settings</span><kbd>⌘,</kbd></div>
+                        <div class="shortcut-item"><span>Toggle pin</span><kbd>⌘P</kbd></div>
+                        <div class="shortcut-item"><span>Undo</span><kbd>⌘Z</kbd></div>
+                        <div class="shortcut-item"><span>Redo</span><kbd>⌘⇧Z</kbd></div>
+                        <div class="shortcut-item"><span>Select all</span><kbd>⌘A</kbd></div>
+                        <div class="shortcut-item"><span>Select mode</span><kbd>V</kbd></div>
+                        <div class="shortcut-item"><span>Draw mode</span><kbd>B</kbd></div>
+                        <div class="shortcut-item"><span>Text mode</span><kbd>T</kbd></div>
+                        <div class="shortcut-item"><span>Copy</span><kbd>⌘C</kbd></div>
+                        <div class="shortcut-item"><span>Paste</span><kbd>⌘V</kbd></div>
+                        <div class="shortcut-item"><span>Delete</span><kbd>D</kbd></div>
+                        <div class="shortcut-item"><span>Export PNG</span><kbd>⌘S</kbd></div>
+                        <div class="shortcut-item"><span>Zoom in</span><kbd>⌘+</kbd></div>
+                        <div class="shortcut-item"><span>Zoom out</span><kbd>⌘-</kbd></div>
+                        <div class="shortcut-item"><span>Reset view</span><kbd>⌘0</kbd></div>
+                        <div class="shortcut-item"><span>Previous note</span><kbd>← or [</kbd></div>
+                        <div class="shortcut-item"><span>Next note</span><kbd>→ or ]</kbd></div>
+                        <div class="shortcut-item"><span>New note</span><kbd>N</kbd></div>
+                        <div class="shortcut-item"><span>Small size</span><kbd>1</kbd></div>
+                        <div class="shortcut-item"><span>Medium size</span><kbd>2</kbd></div>
+                        <div class="shortcut-item"><span>Large size</span><kbd>3</kbd></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="renderer.js"></script>
+</body>
+</html>