Store API

import { useEditorStore } from '@design-on-web/ui';

function StatusBar() {
  const zoom = useEditorStore((s) => s.zoom);
  const canvasSize = useEditorStore((s) => s.canvasSize);
  const selectedIds = useEditorStore((s) => s.selectedObjectIds);
  const isDirty = useEditorStore((s) => s.isDirty);

  return (
    <div>
      <span>Zoom: {Math.round(zoom * 100)}%</span>
      <span>Canvas: {canvasSize.width} x {canvasSize.height}</span>
      <span>Selected: {selectedIds.length}</span>
      {isDirty && <span>Unsaved changes</span>}
    </div>
  );
}

// Good: subscribe to minimal state slices for performance
const zoom = useEditorStore((s) => s.zoom);
const tool = useEditorStore((s) => s.activeTool);

// Avoid: selecting the entire state causes re-renders on every change
// const state = useEditorStore((s) => s); // Don't do this

// Access state outside React components
const state = engine.getStore().getState();
console.log('Current zoom:', state.zoom);
console.log('Active tool:', state.activeTool);
console.log('Layers:', state.layers);

// Subscribe to all state changes
const unsubscribe = engine.getStore().subscribe((state) => {
  console.log('State changed:', state);
});

// Subscribe to specific state slice (with selector)
const unsubscribeZoom = engine.getStore().subscribe(
  (state) => state.zoom,
  (zoom, prevZoom) => {
    console.log('Zoom changed from', prevZoom, 'to', zoom);
  }
);

// Unsubscribe when done
unsubscribe();
unsubscribeZoom();