fix(venueMapBuilder): update codebase to adapt to new UI SDK

tools/venueMapBuilder/src/components/Sidebar/components/SidebarDrawTypeSelector.tsx

@@ -56,7 +56,7 @@ function SidebarDrawTypeSelector({
         className="my-4"
         icon="tabler:category"
         label="Drawing Mode"
-        setValue={(value: unknown) => {
+        onChange={(value: unknown) => {
           const mode = value as DrawingMode
 
           setDrawingMode(mode)

tools/venueMapBuilder/src/components/Sidebar/components/SidebarHeader.tsx

@@ -57,7 +57,7 @@ function SidebarHeader() {
         className="mb-6"
         icon="uil:layer-group"
         label="Floor Number"
-        setValue={floor => {
+        onChange={floor => {
           const newFloorId = floor as string
 
           if (newFloorId === 'new-floor') {

tools/venueMapBuilder/src/components/modals/SettingsModal.tsx

@@ -48,16 +48,16 @@ function SettingsModal({ onClose }: { onClose: () => void }) {
         icon="tabler:number-123"
         label="Floor Abbreviation"
         placeholder="e.g., G, L1, B"
-        setValue={settings.handleFloorIdChange}
         value={selectedFloorId}
+        onChange={settings.handleFloorIdChange}
       />
       <TextInput
         className="mt-4"
         icon="uil:layers"
         label="Floor Name"
         placeholder="e.g., Ground Floor"
-        setValue={settings.handleFloorNameChange}
         value={floors.find(floor => floor.id === selectedFloorId)?.name || ''}
+        onChange={settings.handleFloorNameChange}
       />
       <div className="mt-6 flex items-center justify-between">
         <div className="text-bg-500 flex items-center gap-2">
@@ -65,11 +65,11 @@ function SettingsModal({ onClose }: { onClose: () => void }) {
           <span className="text-lg">Show floor plan image</span>
         </div>
         <Switch
-          checked={settings.showFloorPlanImage}
+          value={settings.showFloorPlanImage}
           onChange={settings.handleToggleShowFloorPlanImage}
         />
       </div>
-      <div className="mb-6 mt-4">
+      <div className="mt-4 mb-6">
         <FileInput
           acceptedMimeTypes={{
             image: ['png', 'jpeg', 'jpg', 'webp', 'svg+xml']
@@ -93,29 +93,29 @@ function SettingsModal({ onClose }: { onClose: () => void }) {
         label="Unit Name Font Size"
         max={16}
         min={1}
-        setValue={settings.handleUnitLabelFontSizeChange}
         step={1}
         value={settings.unitLabelFontSize}
+        onChange={settings.handleUnitLabelFontSizeChange}
       />
       <SliderInput
         icon="tabler:circle-dashed"
         label="Point Radius"
         max={16}
         min={1}
-        setValue={settings.handlePointRadiusChange}
         step={1}
         value={settings.pointRadius}
         wrapperClassName="mt-10"
+        onChange={settings.handlePointRadiusChange}
       />
       <SliderInput
         icon="tabler:map-pin"
         label="Amenity Chip Size"
         max={64}
         min={8}
-        setValue={settings.handleAmenityChipSizeChange}
         step={2}
         value={settings.amenityChipSize}
         wrapperClassName="mt-10"
+        onChange={settings.handleAmenityChipSizeChange}
       />
       <div className="mt-12 flex items-center justify-between">
         <div className="text-bg-500 flex items-center gap-2">
@@ -123,7 +123,7 @@ function SettingsModal({ onClose }: { onClose: () => void }) {
           <span className="text-lg">Show unit</span>
         </div>
         <Switch
-          checked={settings.showUnit}
+          value={settings.showUnit}
           onChange={settings.handleToggleShowUnit}
         />
       </div>
@@ -133,7 +133,7 @@ function SettingsModal({ onClose }: { onClose: () => void }) {
           <span className="text-lg">Show outline</span>
         </div>
         <Switch
-          checked={settings.showUnitOutline}
+          value={settings.showUnitOutline}
           onChange={settings.handleToggleShowOutline}
         />
       </div>
@@ -143,7 +143,7 @@ function SettingsModal({ onClose }: { onClose: () => void }) {
           <span className="text-lg">Show paths</span>
         </div>
         <Switch
-          checked={settings.showPaths}
+          value={settings.showPaths}
           onChange={settings.handleToggleShowPaths}
         />
       </div>
@@ -153,7 +153,7 @@ function SettingsModal({ onClose }: { onClose: () => void }) {
           <span className="text-lg">Show amenities</span>
         </div>
         <Switch
-          checked={settings.showAmenities}
+          value={settings.showAmenities}
           onChange={settings.handleToggleShowAmenities}
         />
       </div>
@@ -163,12 +163,12 @@ function SettingsModal({ onClose }: { onClose: () => void }) {
           <span className="text-lg">Show entrances</span>
         </div>
         <Switch
-          checked={settings.showEntrances}
+          value={settings.showEntrances}
           onChange={settings.handleToggleShowEntrances}
         />
       </div>
 
-      <div className="mb-2 mt-12 flex items-center gap-2">
+      <div className="mt-12 mb-2 flex items-center gap-2">
         <Button
           className="w-full"
           icon="uil:import"

tools/venueMapBuilder/src/index.css

@@ -6,4 +6,4 @@ layer(base);
 @plugin 'daisyui';
 
 @import 'lifeforge-ui/dist/index.css';
-@source "../../../packages/lifeforge-ui/dist";
+@source '../../../packages/lifeforge-ui/dist';

tools/venueMapBuilder/src/modes/amenities/AmenityEditor.tsx

@@ -44,7 +44,7 @@ export function AmenityEditor({
           className="mt-4"
           icon="tabler:category"
           label="Amenity Type"
-          setValue={value => {
+          onChange={value => {
             amenityState.handleAmenityTypeChange(value as string)
           }}
           value={amenity.amenityTypeId}

tools/venueMapBuilder/src/modes/amenities/AmenityMode.tsx

@@ -81,7 +81,7 @@ function AmenityMode({
             }
             icon="tabler:category"
             label="Amenity Type"
-            setValue={handleAmenityTypeSelect}
+            onChange={handleAmenityTypeSelect}
             value={selectedAmenityTypeId || ''}
           >
             {amenityTypes.map(type => (

tools/venueMapBuilder/src/modes/outline/OutlineEditor.tsx

@@ -56,20 +56,20 @@ export function OutlineEditor({
           icon="tabler:tag"
           label="Outline Name"
           placeholder="Building Outline"
-          setValue={outlineState.handleOutlineNameChange}
+          onChange={outlineState.handleOutlineNameChange}
           value={outline.name}
         />
         <ColorInput
           className="mt-4"
           label="Line Color"
-          setValue={outlineState.handleOutlineColorChange}
+          onChange={outlineState.handleOutlineColorChange}
           value={outline.color || '#374151'}
         />
         <NumberInput
           className="mt-4"
           icon="tabler:line-height"
           label="Stroke Width"
-          setValue={outlineState.handleOutlineStrokeWidthChange}
+          onChange={outlineState.handleOutlineStrokeWidthChange}
           value={outline.strokeWidth || 2}
         />
         {outline.segments.length > 0 && (

tools/venueMapBuilder/src/modes/outlineCircle/OutlineCircleEditor.tsx

@@ -48,20 +48,20 @@ export function OutlineCircleEditor({
           icon="tabler:tag"
           label="Circle Name"
           placeholder="Circle Outline"
-          setValue={circleState.handleCircleNameChange}
+          onChange={circleState.handleCircleNameChange}
           value={circle.name}
         />
         <ColorInput
           className="mt-4"
           label="Line Color"
-          setValue={circleState.handleCircleColorChange}
+          onChange={circleState.handleCircleColorChange}
           value={circle.color || '#374151'}
         />
         <NumberInput
           className="mt-4"
           icon="tabler:line-height"
           label="Stroke Width"
-          setValue={circleState.handleCircleStrokeWidthChange}
+          onChange={circleState.handleCircleStrokeWidthChange}
           value={circle.strokeWidth || 2}
         />
 

tools/venueMapBuilder/src/modes/path/PathFinder.tsx

@@ -75,7 +75,7 @@ export function PathFinder() {
             disabled={calculatedPath !== null}
             icon="tabler:map-pin"
             label="From Unit"
-            setValue={setFromUnitId}
+            onChange={setFromUnitId}
             value={fromUnitId}
           >
             {unitsWithEntrances.map(unit => (
@@ -98,7 +98,7 @@ export function PathFinder() {
             disabled={calculatedPath !== null}
             icon="tabler:flag"
             label="To Unit"
-            setValue={setToUnitId}
+            onChange={setToUnitId}
             value={toUnitId}
           >
             {unitsWithEntrances.map(unit => (

tools/venueMapBuilder/src/modes/path/PathMode.tsx

@@ -24,7 +24,7 @@ export function PathMode({ pathState }: PathModeProps) {
               <span className="text-lg">New node after plotting</span>
             </div>
             <Switch
-              checked={pathState.continuousPlotting}
+              value={pathState.continuousPlotting}
               onChange={() =>
                 pathState.setContinuousPlotting(!pathState.continuousPlotting)
               }

tools/venueMapBuilder/src/modes/unit/UnitEditor.tsx

@@ -154,8 +154,8 @@ export function UnitEditor({
           icon="tabler:123"
           label="Unit Name"
           placeholder="FX.XX"
-          setValue={unitState.handleUnitNameChange}
           value={unit.name}
+          onChange={unitState.handleUnitNameChange}
         />
         <div className="mt-4 flex items-center gap-2">
           <Button
@@ -184,18 +184,18 @@ export function UnitEditor({
               label="Label Offset X"
               max={200}
               min={-200}
-              setValue={unitState.handleLabelOffsetXChange}
               step={1}
               value={unit.labelOffsetX || 0}
+              onChange={unitState.handleLabelOffsetXChange}
             />
             <SliderInput
               icon="tabler:arrows-vertical"
               label="Label Offset Y"
               max={200}
               min={-200}
-              setValue={unitState.handleLabelOffsetYChange}
               step={1}
               value={unit.labelOffsetY || 0}
+              onChange={unitState.handleLabelOffsetYChange}
             />
           </div>
         </div>
@@ -442,7 +442,7 @@ export function UnitEditor({
                 <span className="text-lg">Align after drawing</span>
               </div>
               <Switch
-                checked={alignAfterDrawing}
+                value={alignAfterDrawing}
                 onChange={() => setAlignAfterDrawing(!alignAfterDrawing)}
               />
             </div>

tools/venueMapBuilder/src/modes/unitData/UnitDataMode.tsx

@@ -34,7 +34,7 @@ function UnitDataMode() {
       <SearchInput
         className="component-bg-lighter-with-hover"
         searchTarget="store"
-        setValue={setSearchQuery}
+        onChange={setSearchQuery}
         value={searchQuery}
       />
       {unitData.length > 0 ? (