refactor: extract various constants

frontend/src/desktop/DesktopWorkspace.tsx

@@ -25,6 +25,7 @@ import useDeskPointer from './pointer/useDeskPointer';
 import useDeskTagInteractions from './tags/useDeskTagInteractions';
 import DesktopDocumentCard from './DesktopDocumentCard';
 import usePreviewMetadata from './hooks/usePreviewMetadata';
+import { DEBUG_DRAG, DEBUG_FOCUS } from '../constants/desktop';
 import '../styles/workspace/workspace-layout.css';
 import '../styles/workspace/workspace-items.css';
 import '../styles/workspace/workspace-cards.css';
@@ -186,8 +187,6 @@ interface DesktopWorkspaceViewProps {
   markLayoutDirty: () => void;
 }
 
-const DEBUG_DRAG = false;
-const DEBUG_FOCUS = false;
 const defaultGetDocumentAsset: GetAsset = () => null;
 
 const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({

frontend/src/desktop/db.ts

@@ -1,10 +1,7 @@
 import type { DocumentId } from '../types/identifiers';
+import { DB_NAME, DB_VERSION, LAYOUT_STORE } from '../constants/desktop';
 type TenantId = import('../types/identifiers').TenantId;
 
-const DB_NAME = 'papercrate_desk';
-const DB_VERSION = 1;
-const LAYOUT_STORE = 'layouts';
-
 const currentDbPromise: { value: Promise<IDBDatabase | null> | null } = { value: null };
 
 const openDatabase = (): Promise<IDBDatabase> => {

frontend/src/desktop/pointer/pointerUtils.ts

@@ -1,28 +1,18 @@
 import { safeInvoke } from '../events';
 import type { DocumentId } from '../../types/identifiers';
+import {
+  CLICK_ACTIONS,
+  DRAG_ACTIONS,
+  LONG_PRESS_DURATION_MS,
+  POINTER_DRAG_THRESHOLD_SQUARED,
+  STACK_HIT_EPSILON,
+} from '../../constants/desktop';
 
-export const CLICK_ACTIONS = {
-  selectSingle: 'selectSingle',
-  openDetail: 'openDetail',
-  addCard: 'addCard',
-  addStack: 'addStack',
-  none: 'none',
-} as const;
-
-export const DRAG_ACTIONS = {
-  dragSelectSingle: 'dragSelectSingle',
-  dragSelection: 'dragSelection',
-  dragSelectStack: 'dragSelectStack',
-  none: 'none',
-} as const;
+export { CLICK_ACTIONS, DRAG_ACTIONS, STACK_HIT_EPSILON, POINTER_DRAG_THRESHOLD_SQUARED, LONG_PRESS_DURATION_MS };
 
 export type ClickAction = (typeof CLICK_ACTIONS)[keyof typeof CLICK_ACTIONS];
 export type DragAction = (typeof DRAG_ACTIONS)[keyof typeof DRAG_ACTIONS];
 
-export const STACK_HIT_EPSILON = 4;
-export const POINTER_DRAG_THRESHOLD_SQUARED = 16;
-export const LONG_PRESS_DURATION_MS = 450;
-
 export const withinThreshold = (dx: number, dy: number, thresholdSquared: number): boolean => (dx * dx + dy * dy) <= thresholdSquared;
 
 interface PointerIntentArgs {

frontend/src/desktop/tags/useDeskTagInteractions.js

@@ -9,8 +9,7 @@ import {
   parseTagTransferPayload,
   writeTagTransferData,
 } from '../../documents/tagTransfer';
-
-const TAG_REMOVE_DISTANCE = 160;
+import { TAG_REMOVE_DISTANCE } from '../../constants/desktop';
 
 const createDragPreview = (node, clientX, clientY) => {
   if (!(node instanceof HTMLElement)) {

frontend/src/desktop/useDocumentDrag.ts

@@ -19,6 +19,7 @@ import {
   applyDomTransform,
   type WorkspaceEngine,
 } from './workspaceEngine';
+import { DRAG_HYSTERESIS_SQUARED, EDGE_COLLISION_THRESHOLD } from '../constants/desktop';
 import type { DocumentId, Identifier } from '../types/identifiers';
 
 interface DocumentLike {
@@ -168,10 +169,6 @@ interface DragTapMetadata {
   docTitle: string;
 }
 
-const DRAG_HYSTERESIS_PX = 4;
-const DRAG_HYSTERESIS_SQUARED = DRAG_HYSTERESIS_PX * DRAG_HYSTERESIS_PX;
-const EDGE_COLLISION_THRESHOLD = 0.5;
-
 const getDocumentPageCount = (doc?: DocumentLike | null): number | null => {
   const raw = doc?.current_version?.metadata?.page_count ?? doc?.metadata?.page_count;
   if (raw == null) {

frontend/src/desktop/workspaceEngine.ts

@@ -1,8 +1,44 @@
 import { clamp, formatTransform } from '../utils/math';
 import { fetchLayoutRecords, upsertLayoutRecords } from './db';
+import {
+  ANGULAR_DAMPING,
+  CARD_BASE_WEIGHT_GRAMS,
+  CARD_PAGE_WEIGHT_GRAMS,
+  DEFAULT_Z_START,
+  DESK_CANVAS_PADDING,
+  DESK_CARD_MAX,
+  DESK_CARD_MIN,
+  DESK_DEFAULT_CANVAS_HEIGHT,
+  DESK_DEFAULT_CANVAS_WIDTH,
+  DESK_ROTATION_RANGE,
+  MAX_ANGULAR_VELOCITY,
+  MAX_DYNAMIC_ROTATION,
+  MAX_TIMESTEP,
+  MIN_TIMESTEP,
+  SETTLE_ANGULAR_VELOCITY,
+  TORQUE_TO_ACCELERATION,
+} from '../constants/desktop';
 import type { DocumentId } from '../types/identifiers';
 type TenantId = import('../types/identifiers').TenantId;
 
+export {
+  ANGULAR_DAMPING,
+  CARD_BASE_WEIGHT_GRAMS,
+  CARD_PAGE_WEIGHT_GRAMS,
+  DESK_CANVAS_PADDING,
+  DESK_CARD_MAX,
+  DESK_CARD_MIN,
+  DESK_DEFAULT_CANVAS_HEIGHT,
+  DESK_DEFAULT_CANVAS_WIDTH,
+  DESK_ROTATION_RANGE,
+  MAX_ANGULAR_VELOCITY,
+  MAX_DYNAMIC_ROTATION,
+  MAX_TIMESTEP,
+  MIN_TIMESTEP,
+  SETTLE_ANGULAR_VELOCITY,
+  TORQUE_TO_ACCELERATION,
+};
+
 interface Point {
   x: number;
   y: number;
@@ -128,24 +164,6 @@ type UseSyncExternalStoreHook = <State>(
   getServerSnapshot: () => State,
 ) => State;
 
-export const DESK_CANVAS_PADDING = 24;
-export const DESK_ROTATION_RANGE = 7;
-export const DESK_DEFAULT_CANVAS_WIDTH = 1024;
-export const DESK_DEFAULT_CANVAS_HEIGHT = 680;
-export const DESK_CARD_MIN = 240;
-export const DESK_CARD_MAX = 340;
-export const CARD_PAGE_WEIGHT_GRAMS = 5;
-export const CARD_BASE_WEIGHT_GRAMS = 30;
-
-const DEFAULT_Z_START = 10;
-export const MIN_TIMESTEP = 1 / 120;
-export const MAX_TIMESTEP = 1 / 20;
-export const MAX_DYNAMIC_ROTATION = 7;
-export const MAX_ANGULAR_VELOCITY = 210;
-export const ANGULAR_DAMPING = 10;
-export const TORQUE_TO_ACCELERATION = 0.007;
-export const SETTLE_ANGULAR_VELOCITY = 0.45;
-
 const getMassScale = (massGrams?: number): number => {
   if (!Number.isFinite(massGrams) || Number(massGrams) <= 0) {
     return 1;