$ show F-star/suika
This is a monorepo for a web-based vector graphics editor (similar to Figma) built with React, Canvas2D, and TypeScript. It features a core editor with drawing tools, layers, path editing, undo/redo, SVG import/export, and real-time multiplayer collaboration (via Yjs/Hocuspocus). The architecture includes a standalone editor app, a deprecated multiplayer variant, a backend (NestJS + Prisma + PostgreSQL) for authentication and file storage, and a workbench for team management. Shared packages provide geometry utilities, UI components, icons, and Skia PathKit WASM bindings. The codebase demonstrates strong engineering patterns (command pattern, event emitter, strategy pattern) and provides several reusable components, especially the geometry library and UI components. However, there is significant code duplication between the standalone and multiplayer apps, and the multiplayer app is deprecated, indicating some drift risks. The backend is functional but has minimal stubs and a hardcoded JWT secret.
The LLM identified 4 files worth highlighting for reuse:
A self-contained geometry library providing robust operations: matrix transformations, bounding box calculations, point-in-polygon tests, bezier curve splitting, and path operations. It is well-typed, has unit tests, and has no dependencies on the editor's internals, making it reusable in any graphics or computational geometry project.
A generic EventEmitter implementation with typed events, on/off/emit methods. Used throughout the editor for decoupled communication (e.g., locale changes, tool changes). Self-contained and easily extractable for any event-driven JavaScript/TypeScript project.
Implements undo/redo functionality using a command pattern with macro commands and transaction batching. The CommandManager maintains a history stack and supports composite commands. While it depends on core type definitions, the pattern is cleanly designed and can be extracted for any application needing state reversal.
A set of reusable UI components (Button, Popover, Select, Dropdown, IconButton) built on Radix UI primitives with Tailwind styling. Designed as a standalone package with Storybook integration, these components are independent of the editor and can be reused in any React project requiring consistent design.