import {
  createStateManager,
  createRenderer,
  createToolManager,
  createInputHandler,
  createGridSystem,
} from "@sourcya/paper";

// Initialize with a canvas element
const canvas = document.getElementById("canvas") as HTMLCanvasElement;

const renderer = createRenderer(canvas);
const input = createInputHandler(canvas);
const grid = createGridSystem();
const state = createStateManager(() => renderer.render(state.getPaper()));

const tools = createToolManager(
  (element) => state.addElement(element),
  (preview) => { /* handle preview */ }
);

// Wire up input events
input.on("strokeStart", (point) => tools.handleStrokeStart(point));
input.on("strokeMove", (point) => tools.handleStrokeMove(point));
input.on("strokeEnd", (point) => tools.handleStrokeEnd(point));

input.attach();
renderer.resize();

import { PaperApp, Canvas, Toolbar, usePaperApp } from "@sourcya/paper/preact";

// Option 1: Use the full app component
function App() {
  return <PaperApp />;
}

// Option 2: Compose your own layout
function CustomApp() {
  const { state, initializeApp, callbacks } = usePaperApp();

  return (
    <div class="paper-container">
      <Toolbar
        activeTool={state.activeTool}
        canUndo={state.canUndo}
        canRedo={state.canRedo}
        penActive={state.penActive}
        {...callbacks}
      />
      <Canvas onCanvasReady={initializeApp} />
    </div>
  );
}