A web-based image mask editor for creating masks from images, designed for 3D card cutting with plotters.

Kirika is a browser-based tool that allows you to create and manage layered masks from images. These masks can be exported as PDFs optimized for plotter cutting, or as SVG paths for further processing. The application includes a real-time 3D preview to visualize how the layered cuts will look.

• Node.js 18 or later
• npm or yarn

git clone https://github.com/your-username/kirika.git
cd kirika
npm install

npm run dev

Open http://localhost:3000 in your browser.

npm run build
npm start

app/                  Next.js pages and API routes
components/
  editor/             Core editor components
    Canvas/           Multi-layer canvas system
    LayerPanel/       Mask hierarchy management
    Toolbar/          Export, import, and tool controls
  preview3d/          Three.js 3D preview
  ui/                 Reusable UI components
lib/
  canvas/             Image editing operations
  commands/           Undo/redo command pattern
  print/              PDF generation and bin packing
  preview3d/          3D geometry generation
  svg/                SVG export utilities
  store/              Zustand state management
hooks/                Custom React hooks
types/                TypeScript type definitions

1. Load an image using the toolbar or by dragging a file onto the canvas
2. Create a new mask using the "New Mask" button in the layer panel
3. Use the brush or flood fill tools to define the mask area
4. Create additional masks as needed, optionally nesting them under parent masks
5. Use the 3D preview to visualize the layered result
6. Export as PDF for cutting or save the project for later

MIT