Store (Zustand State)

import { useStore, type Bin, type ViewMode, type RenderMode } from '@/store/useStore';

interface Bin {
  id: string;              // Unique identifier (UUID)
  x: number;               // Grid position X (0-based column)
  y: number;               // Grid position Y (0-based row)
  w: number;               // Width in grid units
  d: number;               // Depth in grid units
  h: number;               // Height in grid units
  cornerRadius: number;    // Corner radius in mm
  wallThickness: number;   // Wall thickness in mm
  bottomThickness: number; // Bottom thickness in mm
  stackingLip: boolean;    // Enable stacking lip feature
  labelShelf: boolean;     // Enable 45° label shelf
  labelWidth: number;      // Label shelf width in mm
  magnets: boolean;        // Enable magnet holes
  screws: boolean;         // Enable screw holes
  dividersX: number;       // Number of X-axis dividers
  dividersY: number;       // Number of Y-axis dividers
  color: string;           // Hex color code
  label: string;           // User-defined label
  group: string;           // Bin group/category ID
}

type ViewMode = '2d' | '3d' | 'split';

type RenderMode = 'standard' | 'technical' | 'blueprint';

interface DragState {
  mode: 'idle' | 'placing' | 'dragging';
  binId: string | null;                      // ID of bin being dragged
  origin: { col: number; row: number } | null; // Drag start position
  ghost: { col: number; row: number } | null;  // Ghost preview position
  ghostValid: boolean;                         // Whether ghost position is valid
  placingConfig: Omit<Bin, 'id' | 'x' | 'y'> | null; // Config for new bin placement
}

addBin(bin: Omit<Bin, 'id'>): void

const { addBin } = useStore();

addBin({
  x: 0,
  y: 0,
  w: 2,
  d: 2,
  h: 3,
  cornerRadius: 3.75,
  wallThickness: 1.2,
  bottomThickness: 0.8,
  stackingLip: true,
  labelShelf: false,
  labelWidth: 12,
  magnets: false,
  screws: false,
  dividersX: 0,
  dividersY: 0,
  color: '#00d4aa',
  label: 'Small Parts',
  group: 'parts',
});

removeBin(id: string): void

updateBin(id: string, updates: Partial<Bin>): void

const { updateBin } = useStore();

updateBin('bin-id', {
  h: 6,
  labelShelf: true,
  dividersX: 2,
});

moveBin(id: string, x: number, y: number): void

selectBin(id: string | null, multi?: boolean): void

setGridSize(cols: number, rows: number): void

setViewMode(mode: ViewMode): void

setRenderMode(mode: RenderMode): void

setShowDimensions(on: boolean): void

setSectionView(on: boolean): void

clearAll(): void

setDragState(state: Partial<DragState>): void

startPlacing(config: Omit<Bin, 'id' | 'x' | 'y'>): void

cancelPlacing(): void

undo(): void

redo(): void

import { useStore } from '@/store/useStore';

function BinEditor() {
  const bins = useStore((state) => state.bins);
  const addBin = useStore((state) => state.addBin);
  const updateBin = useStore((state) => state.updateBin);
  const selectedBinId = useStore((state) => state.selectedBinId);

  const handleAddBin = () => {
    addBin({
      x: 0, y: 0, w: 1, d: 1, h: 3,
      cornerRadius: 3.75,
      wallThickness: 1.2,
      bottomThickness: 0.8,
      stackingLip: true,
      labelShelf: false,
      labelWidth: 12,
      magnets: false,
      screws: false,
      dividersX: 0,
      dividersY: 0,
      color: '#00d4aa',
      label: 'New Bin',
      group: '',
    });
  };

  const handleUpdateHeight = (id: string, newHeight: number) => {
    updateBin(id, { h: newHeight });
  };

  return (
    <div>
      <button onClick={handleAddBin}>Add Bin</button>
      {bins.map(bin => (
        <div key={bin.id}>
          {bin.label} - {bin.w}x{bin.d}x{bin.h}
        </div>
      ))}
    </div>
  );
}