```
import OverlayManager from "./overlay-manager.mjs";
import DrawArea from "./draw-area.mjs";
import {
  VertexPlugin,
  MousePlugin,
  RectFactory,
  RectCursorAction,
} from "./rect-factory.mjs";
import DrawController from "./draw-controller.mjs"; // Renamed from DrawHandler
import Toolbar from "./toolbar.mjs";

export default class DrawApp {
  constructor(options = {}) {
    // Store configuration options
    this.options = options;

    // Initialize properties to null; actual initialization happens in start()
    this.container = null;
    this.overlay = null;
    this.factory = null;
    this.drawArea = null;
    this.drawController = null;
    this.toolbar = null;

    this.initialized = false;
    this.isStarted = false;
  }

  init() {
    if (this.initialized) return;

    this.container = document.createElement("div");
    Object.assign(this.container.style, {
      width: "100%",
      height: "100%",
    });

    this.overlay = new OverlayManager(document.body, {
      content: this.container,
      ...this.options.overlayOptions,
    });
    this.overlay.init();

    const minSize = {
      minWidth: this.options.minWidth || 50,
      minHeight: this.options.minHeight || 50,
    };

    // Initialize RectFactory
    this.factory = new RectFactory(this.container, {
      borderColor: this.options.borderColor || "#3498db",
      borderSize: this.options.borderSize || "2px",
      fill: this.options.fill || "rgba(52, 152, 219, 0.2)",
    });

    this.factory.registerPlugin(VertexPlugin, {
      size: "10px",
      color: "red",
      autohide: true,
    });
    this.factory.registerPlugin(MousePlugin, { ...minSize });

    this.factory.defineProfile("normal", [VertexPlugin, MousePlugin]);

    RectCursorAction.setNullActionCursor("crosshair");

    this.drawArea = new DrawArea(this.container, { ...minSize });

    this.drawController = new DrawController(this.drawArea, this.factory);

    this.toolbar = new Toolbar();
    // this.toolbar.addButton({
    //   label: "📙", // Common label (fallback if state-specific labels aren't provided)
    //   initialState: false,
    //   active: {
    //     label: "😃",
    //   },
    //   attributes: { "data-toggle": "feature" }, // Common attributes
    //   css: { backgroundColor: "transparent" },
    //   onClick(ev, isActive) {
    //     console.log(`Feature is now ${isActive ? "enabled" : "disabled"}.`);
    //   },
    // });
    this.initialized = true;
  }

  /**
   * Initializes and starts the drawing application.
   */
  start() {
    if (!this.initialized) {
      this.init();
    }

    if (this.isStarted) {
      return;
    }

    this.overlay.start();
    this.drawArea.start();
    this.drawController.start();
    this.toolbar.start();

    this.isStarted = true;
  }

  /**
   * Stops the drawing application without destroying it.
   */
  stop() {
    if (!this.isStarted) return;

    // Stop drawing interactions
    this.drawController.stop();
    this.drawArea.stop();
    this.overlay.stop();
    this.toolbar.stop();

    this.isStarted = false;
  }

  /**
   * Destroys the drawing application and cleans up resources.
   */
  destroy() {
    if (!this.initialized) return;

    if (this.isStarted) {
      this.stop();
    }

    this.overlay.destroy();
    this.overlay = null;

    this.drawArea.destroy();
    this.drawArea = null;

    this.drawController.destroy();
    this.drawController = null;

    RectCursorAction.resetNullActionCursor();

    this.factory.destroy();
    this.factory = null;

    this.container?.parentNode?.removeChild(this.container);
    this.container = null;

    this.toolbar.destroy();
    this.toolbar = null;

    this.isStarted = false;
    this.initialized = false;
  }

  getAllRects() {
    return this.factory?.getAll() ?? [];
  }
}

```

what buttons should i add for the toolbar for this app?