fix adding cnc ops

src/kiri-mode/cam/client.js

@@ -274,7 +274,7 @@ CAM.init = function(kiri, api) {
     $('op-add-list').onclick = (ev) => {
         let settings = API.conf.get();
         let { process, device } = settings;
-        switch (ev.target.innerText) {
+        switch (ev.target.innerText.toLowerCase()) {
             case "index": return func.opAddIndex();
             case "laser on": return func.opAddLaserOn();
             case "laser off": return func.opAddLaserOff();

src/kiri/init.js

@@ -39,6 +39,7 @@ gapp.register("kiri.init", [], (root, exports) => {
         LASER = [MODES.LASER],
         proto = location.protocol,
         ver = Date.now().toString(36),
+        separator = true,
         driven = true;
 
     let currentDevice = null,
@@ -1646,7 +1647,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             context:            $('context-menu'),
 
             options: {
-                area:           $('lt-options'),
+                // area:           $('lt-options'),
                 trash:          $('lt-trash'),
                 enable:         $('lt-w-enable'),
                 disable:        $('lt-w-disable'),
@@ -1843,7 +1844,7 @@ gapp.register("kiri.init", [], (root, exports) => {
 
             /** FDM Settings */
 
-            process:             newGroup(LANG.sl_menu, $('fdm-layers'), { modes:FDM, driven }),
+            process:             newGroup(LANG.sl_menu, $('fdm-layers'), { modes:FDM, driven, separator }),
             sliceHeight:         newInput(LANG.sl_lahi_s, { title:LANG.sl_lahi_l, convert:toFloat }),
             sliceMinHeight:      newInput(LANG.ad_minl_s, { title:LANG.ad_minl_l, convert:toFloat, bound:bound(0,3.0), show: () => ui.sliceAdaptive.checked}),
             sliceShells:         newInput(LANG.sl_shel_s, { title:LANG.sl_shel_l, convert:toFloat }),
@@ -1854,8 +1855,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             separator:           newBlank({ class:"set-sep", driven }),
             sliceDetectThin:     newSelect(LANG.ad_thin_s, { title: LANG.ad_thin_l, action: thinWallSave }, "thin"),
             sliceAdaptive:       newBoolean(LANG.ad_adap_s, onBooleanClick, {title: LANG.ad_adap_l, trigger: true}),
-
+            firstLayer:          newGroup(LANG.fl_menu, $('fdm-base'), { modes:FDM, driven, separator }),
-            firstLayer:          newGroup(LANG.fl_menu, $('fdm-base'), { modes:FDM, driven }),
             firstSliceHeight:    newInput(LANG.fl_lahi_s, {title:LANG.fl_lahi_l, convert:toFloat, show:isNotBelt}),
             firstLayerNozzleTemp:newInput(LANG.fl_nozl_s, {title:LANG.fl_nozl_l, convert:toInt,   show:isNotBelt}),
             firstLayerBedTemp:   newInput(LANG.fl_bedd_s, {title:LANG.fl_bedd_l, convert:toInt,   show:isNotBelt}),
@@ -1878,7 +1878,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             separator:           newBlank({ class:"set-sep", driven }),
             outputRaft:          newBoolean(LANG.fr_nabl_s, onBooleanClick, {title:LANG.fr_nabl_l, trigger: true, show:() => isNotBelt()}),
             outputDraftShield:   newBoolean(LANG.fr_draf_s, onBooleanClick, {title:LANG.fr_draf_l, trigger: true, show:() => isNotBelt()}),
-            fdmInfill:           newGroup(LANG.fi_menu, $('fdm-fill'), { modes:FDM, driven }),
+            fdmInfill:           newGroup(LANG.fi_menu, $('fdm-fill'), { modes:FDM, driven, separator }),
             sliceFillType:       newSelect(LANG.fi_type, {trigger:true}, "infill"),
             sliceFillSparse:     newInput(LANG.fi_pcnt_s, {title:LANG.fi_pcnt_l, convert:toFloat, bound:bound(0.0,1.0)}),
             sliceFillRepeat:     newInput(LANG.fi_rept_s, {title:LANG.fi_rept_l, convert:toInt,   bound:bound(1,10), show:fillShow}),
@@ -1887,7 +1887,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             sliceSolidRate:      newInput(LANG.ou_fini_s, {title:LANG.ou_fini_l, convert:toInt,   bound:bound(0,500)}),
             sliceFillGrow:       newInput(LANG.fi_grow_s, {title:LANG.fi_grow_l, convert:toFloat}),
             sliceFillAngle:      newInput(LANG.fi_angl_s, {title:LANG.fi_angl_l, convert:toFloat}),
-            fdmSupport:          newGroup(LANG.sp_menu, $('fdm-support'), { modes:FDM, marker:false, driven }),
+            fdmSupport:          newGroup(LANG.sp_menu, $('fdm-support'), { modes:FDM, marker:false, driven, separator }),
             sliceSupportNozzle:  newSelect(LANG.sp_nozl_s, {title:LANG.sp_nozl_l}, "extruders"),
             sliceSupportDensity: newInput(LANG.sp_dens_s, {title:LANG.sp_dens_l, convert:toFloat, bound:bound(0.0,1.0)}),
             sliceSupportSize:    newInput(LANG.sp_size_s, {title:LANG.sp_size_l, convert:toFloat, bound:bound(1.0,200.0)}),
@@ -1910,7 +1910,7 @@ gapp.register("kiri.init", [], (root, exports) => {
                 (ui.ssmDun = newButton(undefined, onButtonClick, {icon:'<i class="fas fa-check"></i>'})),
                 (ui.ssmClr = newButton(undefined, onButtonClick, {icon:'<i class="fas fa-trash-alt"></i>'}))
             ], {class:"ext-buttons f-row"}),
-            fdmOutput:           newGroup(LANG.ou_menu, $('fdm-output'), { modes:FDM, driven }),
+            fdmOutput:           newGroup(LANG.ou_menu, $('fdm-output'), { modes:FDM, driven, separator }),
             outputTemp:          newInput(LANG.ou_nozl_s, {title:LANG.ou_nozl_l, convert:toInt}),
             outputBedTemp:       newInput(LANG.ou_bedd_s, {title:LANG.ou_bedd_l, convert:toInt}),
             outputFanSpeed:      newInput(LANG.ou_fans_s, {title:LANG.ou_fans_l, convert:toInt, bound:bound(0,255)}),
@@ -1927,7 +1927,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             outputAvoidGaps:     newBoolean(LANG.ad_agap_s, onBooleanClick, {title:LANG.ad_agap_l}),
             outputAlternating:   newBoolean(LANG.ad_altr_s, onBooleanClick, {title:LANG.ad_altr_l}),
             outputBeltFirst:     newBoolean(LANG.ad_lbir_s, onBooleanClick, {title:LANG.ad_lbir_l, show: isBelt}),
-            fdmExpert:           newGroup(LANG.ad_menu, $('fdm-expert'), { modes:FDM, driven }),
+            fdmExpert:           newGroup(LANG.ad_menu, $('fdm-expert'), { modes:FDM, driven, separator }),
             outputRetractDist:   newInput(LANG.ad_rdst_s, {title:LANG.ad_rdst_l, convert:toFloat}),
             outputRetractSpeed:  newInput(LANG.ad_rrat_s, {title:LANG.ad_rrat_l, convert:toInt}),
             outputRetractWipe:   newInput(LANG.ad_wpln_s, {title:LANG.ad_wpln_l, convert:toFloat, bound:bound(0.0,10)}),
@@ -1946,7 +1946,7 @@ gapp.register("kiri.init", [], (root, exports) => {
 
             /** CAM Settings */
 
-            camTabs:             newGroup(LANG.ct_menu, $('cam-tabs'), { modes:CAM, marker:true, driven }),
+            camTabs:             newGroup(LANG.ct_menu, $('cam-tabs'), { modes:CAM, marker:true, driven, separator }),
             camTabsWidth:        newInput(LANG.ct_wdth_s, {title:LANG.ct_wdth_l, convert:toFloat, bound:bound(0.005,100), units:true}),
             camTabsHeight:       newInput(LANG.ct_hght_s, {title:LANG.ct_hght_l, convert:toFloat, bound:bound(0.005,100), units:true}),
             camTabsDepth:        newInput(LANG.ct_dpth_s, {title:LANG.ct_dpth_l, convert:toFloat, bound:bound(0.005,100), units:true}),
@@ -1958,7 +1958,7 @@ gapp.register("kiri.init", [], (root, exports) => {
                 (ui.tabDun = newButton(undefined, onButtonClick, {icon:'<i class="fas fa-check"></i>'})),
                 (ui.tabClr = newButton(undefined, onButtonClick, {icon:'<i class="fas fa-trash-alt"></i>'}))
             ], {class:"ext-buttons f-row"}),
-            camStock:            newGroup(LANG.cs_menu, $('cam-stock'), { modes:CAM, driven }),
+            camStock:            newGroup(LANG.cs_menu, $('cam-stock'), { modes:CAM, driven, separator }),
             camStockX:           newInput(LANG.cs_wdth_s, {title:LANG.cs_wdth_l, convert:toFloat, bound:bound(0,9999), units:true}),
             camStockY:           newInput(LANG.cs_dpth_s, {title:LANG.cs_dpth_l, convert:toFloat, bound:bound(0,9999), units:true}),
             camStockZ:           newInput(LANG.cs_hght_s, {title:LANG.cs_hght_l, convert:toFloat, bound:bound(0,9999), units:true}),
@@ -1967,7 +1967,7 @@ gapp.register("kiri.init", [], (root, exports) => {
             camStockClipTo:      newBoolean(LANG.cs_clip_s, onBooleanClick, {title:LANG.cs_clip_l}),
             camStockIndexed:     newBoolean(LANG.cs_indx_s, onBooleanClick, {title:LANG.cs_indx_l}),
             camStockIndexGrid:   newBoolean(LANG.cs_ishg_s, onBooleanClick, {title:LANG.cs_ishg_l, show:() => ui.camStockIndexed.checked}),
-            camLimits:           newGroup(LANG.cc_menu, $('cam-limits'), { modes:CAM, driven }),
+            camLimits:           newGroup(LANG.cc_menu, $('cam-limits'), { modes:CAM, driven, separator }),
             camZAnchor:          newSelect(LANG.ou_zanc_s, {title: LANG.ou_zanc_l, action:zAnchorSave, trace:true, show:() => !ui.camStockIndexed.checked}, "zanchor"),
             camZOffset:          newInput(LANG.ou_ztof_s, {title:LANG.ou_ztof_l, convert:toFloat, units:true}),
             camZBottom:          newInput(LANG.ou_zbot_s, {title:LANG.ou_zbot_l, convert:toFloat, units:true, trigger: true}),
@@ -1975,43 +1975,43 @@ gapp.register("kiri.init", [], (root, exports) => {
             camZClearance:       newInput(LANG.ou_zclr_s, {title:LANG.ou_zclr_l, convert:toFloat, bound:bound(0.01,100), units:true}),
             camFastFeedZ:        newInput(LANG.cc_rzpd_s, {title:LANG.cc_rzpd_l, convert:toFloat, units:true}),
             camFastFeed:         newInput(LANG.cc_rapd_s, {title:LANG.cc_rapd_l, convert:toFloat, units:true}),
-            camOutput:           newGroup(LANG.ou_menu, $('cam-output'), { modes:CAM, driven }),
+            camOutput:           newGroup(LANG.ou_menu, $('cam-output'), { modes:CAM, driven, separator }),
             camConventional:     newBoolean(LANG.ou_conv_s, onBooleanClick, {title:LANG.ou_conv_l}),
             camEaseDown:         newBoolean(LANG.cr_ease_s, onBooleanClick, {title:LANG.cr_ease_l}),
             camDepthFirst:       newBoolean(LANG.ou_depf_s, onBooleanClick, {title:LANG.ou_depf_l}),
             camToolInit:         newBoolean(LANG.ou_toin_s, onBooleanClick, {title:LANG.ou_toin_l}),
             camFirstZMax:        newBoolean(LANG.ou_z1st_s, onBooleanClick, {title:LANG.ou_z1st_l}),
             camForceZMax:        newBoolean(LANG.ou_forz_s, onBooleanClick, {title:LANG.ou_forz_l}),
-            camOrigin:           newGroup(LANG.co_menu, $('cam-origin'), { modes:CAM, driven }),
+            camOrigin:           newGroup(LANG.co_menu, $('cam-origin'), { modes:CAM, driven, separator }),
             camOriginOffX:       newInput(LANG.co_offx_s, {title:LANG.co_offx_l, convert:toFloat, units:true}),
             camOriginOffY:       newInput(LANG.co_offy_s, {title:LANG.co_offy_l, convert:toFloat, units:true}),
             camOriginOffZ:       newInput(LANG.co_offz_s, {title:LANG.co_offz_l, convert:toFloat, units:true}),
             separator:           newBlank({ class:"set-sep", driven }),
             camOriginTop:        newBoolean(LANG.or_topp_s, onBooleanClick, {title:LANG.or_topp_l}),
             camOriginCenter:     newBoolean(LANG.or_cntr_s, onBooleanClick, {title:LANG.or_cntr_l}),
-            camExpert:           newGroup(LANG.op_xprt_s, $('cam-expert'), { group: "cam_expert", modes:CAM, marker: false, driven }),
+            camExpert:           newGroup(LANG.op_xprt_s, $('cam-expert'), { group: "cam_expert", modes:CAM, marker: false, driven, separator }),
             camExpertFast:       newBoolean(LANG.cx_fast_s, onBooleanClick, {title:LANG.cx_fast_l, show: () => !ui.camTrueShadow.checked }),
             camTrueShadow:       newBoolean(LANG.cx_true_s, onBooleanClick, {title:LANG.cx_true_l, show: () => !ui.camExpertFast.checked }),
 
             /** LASER Settings */
 
-            laserMode:           newGroup(LANG.sl_menu, $('lzr-slice'), { modes:LASER, driven }),
+            laserMode:           newGroup(LANG.sl_menu, $('lzr-slice'), { modes:LASER, driven, separator }),
             laserOffset:         newInput(LANG.ls_offs_s, {title:LANG.ls_offs_l, convert:toFloat}),
             laserSliceHeight:    newInput(LANG.ls_lahi_s, {title:LANG.ls_lahi_l, convert:toFloat, trigger: true}),
             laserSliceHeightMin: newInput(LANG.ls_lahm_s, {title:LANG.ls_lahm_l, convert:toFloat, show:() => { return ui.laserSliceHeight.value == 0 }}),
             separator:           newBlank({ class:"set-sep", driven }),
             laserSliceSingle:    newBoolean(LANG.ls_sngl_s, onBooleanClick, {title:LANG.ls_sngl_l}),
-            laserLayout:         newGroup(LANG.lo_menu, $('lzr-layout'), { modes:LASER, driven }),
+            laserLayout:         newGroup(LANG.lo_menu, $('lzr-layout'), { modes:LASER, driven, separator }),
             outputTileSpacing:   newInput(LANG.ou_spac_s, {title:LANG.ou_spac_l, convert:toInt}),
             outputLaserMerged:   newBoolean(LANG.ou_mrgd_s, onBooleanClick, {title:LANG.ou_mrgd_l}),
             outputLaserGroup:    newBoolean(LANG.ou_grpd_s, onBooleanClick, {title:LANG.ou_grpd_l}),
-            knife:               newGroup(LANG.dk_menu, $('lzr-knife'), { modes:LASER, marker:true, driven }),
+            knife:               newGroup(LANG.dk_menu, $('lzr-knife'), { modes:LASER, marker:true, driven, separator }),
             outputKnifeDepth:    newInput(LANG.dk_dpth_s, {title:LANG.dk_dpth_l, convert:toFloat, bound:bound(0.0,5.0)}),
             outputKnifePasses:   newInput(LANG.dk_pass_s, {title:LANG.dk_pass_l, convert:toInt,   bound:bound(0,5)}),
             outputKnifeTip:      newInput(LANG.dk_offs_s, {title:LANG.dk_offs_l, convert:toFloat, bound:bound(0.0,10.0)}),
             separator:           newBlank({ class:"set-sep", driven }),
             knifeOn:             newBoolean(LANG.enable, onBooleanClick, {title:LANG.ou_drkn_l}),
-            laserOutput:         newGroup(LANG.ou_menu, $('lzr-output'), { modes:LASER, driven }),
+            laserOutput:         newGroup(LANG.ou_menu, $('lzr-output'), { modes:LASER, driven, separator }),
             outputLaserPower:    newInput(LANG.ou_powr_s, {title:LANG.ou_powr_l, convert:toInt, bound:bound(1,100)}),
             outputLaserSpeed:    newInput(LANG.ou_sped_s, {title:LANG.ou_sped_l, convert:toInt}),
             separator:           newBlank({ class:"set-sep", driven }),
@@ -2024,34 +2024,34 @@ gapp.register("kiri.init", [], (root, exports) => {
 
             /** SLA SETTINGS */
 
-            slaProc:             newGroup(LANG.sa_menu, $('sla-slice'), { modes:SLA, group:"sla-slice", driven }),
+            slaProc:             newGroup(LANG.sa_menu, $('sla-slice'), { modes:SLA, group:"sla-slice", driven, separator }),
             slaSlice:            newInput(LANG.sa_lahe_s, {title:LANG.sa_lahe_l, convert:toFloat}),
             slaShell:            newInput(LANG.sa_shel_s, {title:LANG.sa_shel_l, convert:toFloat}),
             slaOpenTop:          newBoolean(LANG.sa_otop_s, onBooleanClick, {title:LANG.sa_otop_l}),
             slaOpenBase:         newBoolean(LANG.sa_obas_s, onBooleanClick, {title:LANG.sa_obas_l}),
-            slaLayers:           newGroup(LANG.sa_layr_m, $('sla-layers'), { modes:SLA, group:"sla-layers", driven }),
+            slaLayers:           newGroup(LANG.sa_layr_m, $('sla-layers'), { modes:SLA, group:"sla-layers", driven, separator }),
             slaLayerOn:          newInput(LANG.sa_lton_s, {title:LANG.sa_lton_l, convert:toFloat}),
             slaLayerOff:         newInput(LANG.sa_ltof_s, {title:LANG.sa_ltof_l, convert:toFloat}),
             slaPeelDist:         newInput(LANG.sa_pldi_s, {title:LANG.sa_pldi_l, convert:toFloat}),
             slaPeelLiftRate:     newInput(LANG.sa_pllr_s, {title:LANG.sa_pllr_l, convert:toFloat}),
             slaPeelDropRate:     newInput(LANG.sa_pldr_s, {title:LANG.sa_pldr_l, convert:toFloat}),
-            slaBase:             newGroup(LANG.sa_base_m, $('sla-base'), { modes:SLA, group:"sla-base", driven }),
+            slaBase:             newGroup(LANG.sa_base_m, $('sla-base'), { modes:SLA, group:"sla-base", driven, separator }),
             slaBaseLayers:       newInput(LANG.sa_balc_s, {title:LANG.sa_balc_l, convert:toInt}),
             slaBaseOn:           newInput(LANG.sa_lton_s, {title:LANG.sa_bltn_l, convert:toFloat}),
             slaBaseOff:          newInput(LANG.sa_ltof_s, {title:LANG.sa_bltf_l, convert:toFloat}),
             slaBasePeelDist:     newInput(LANG.sa_pldi_s, {title:LANG.sa_pldi_l, convert:toFloat}),
             slaBasePeelLiftRate: newInput(LANG.sa_pllr_s, {title:LANG.sa_pllr_l, convert:toFloat}),
-            slaFill:             newGroup(LANG.sa_infl_m, $('sla-fill'), { modes:SLA, group:"sla-infill", driven }),
+            slaFill:             newGroup(LANG.sa_infl_m, $('sla-fill'), { modes:SLA, group:"sla-infill", driven, separator }),
             slaFillDensity:      newInput(LANG.sa_ifdn_s, {title:LANG.sa_ifdn_l, convert:toFloat, bound:bound(0,1)}),
             slaFillLine:         newInput(LANG.sa_iflw_s, {title:LANG.sa_iflw_l, convert:toFloat, bound:bound(0,5)}),
-            slaSupport:          newGroup(LANG.sa_supp_m, $('sla-support'), { modes:SLA, group:"sla-support", driven }),
+            slaSupport:          newGroup(LANG.sa_supp_m, $('sla-support'), { modes:SLA, group:"sla-support", driven, separator }),
             slaSupportLayers:    newInput(LANG.sa_slyr_s, {title:LANG.sa_slyr_l, convert:toInt,   bound:bound(5,100)}),
             slaSupportGap:       newInput(LANG.sa_slgp_s, {title:LANG.sa_slgp_l, convert:toInt,   bound:bound(3,30)}),
             slaSupportDensity:   newInput(LANG.sa_sldn_s, {title:LANG.sa_sldn_l, convert:toFloat, bound:bound(0.01,0.9)}),
             slaSupportSize:      newInput(LANG.sa_slsz_s, {title:LANG.sa_slsz_l, convert:toFloat, bound:bound(0.1,1)}),
             slaSupportPoints:    newInput(LANG.sa_slpt_s, {title:LANG.sa_slpt_l, convert:toInt,   bound:bound(3,10)}),
             slaSupportEnable:    newBoolean(LANG.enable, onBooleanClick, {title:LANG.sl_slen_l}),
-            slaOutput:           newGroup(LANG.sa_outp_m, $('sla-output'), { modes:SLA, group:"sla-first", driven }),
+            slaOutput:           newGroup(LANG.sa_outp_m, $('sla-output'), { modes:SLA, group:"sla-first", driven, separator }),
             slaFirstOffset:      newInput(LANG.sa_opzo_s, {title:LANG.sa_opzo_l, convert:toFloat, bound:bound(0,1)}),
             slaAntiAlias:        newSelect(LANG.sa_opaa_s, {title:LANG.sa_opaa_l}, "antialias"),
 

src/kiri/main.js

@@ -962,8 +962,9 @@ gapp.register("kiri.main", [], (root, exports) => {
     }
 
     function setControlsVisible(show) {
-        $('mid-left').style.display = show ? 'flex' : 'none';
+        // TODO fix
-        $('mid-right').style.display = show ? 'flex' : 'none';
+        // $('mid-left').style.display = show ? 'flex' : 'none';
+        // $('mid-right').style.display = show ? 'flex' : 'none';
     }
 
     function downloadBlob(data, filename) {

src/kiri/platform.js

@@ -234,14 +234,12 @@ function platformUpdateSelected() {
     const { device } = settings;
     const { extruders } = device;
     const { selection, ui } = api;
-    const { area, enable, disable } = ui.options;
+    const { enable, disable } = ui.options;
 
     const selreal = selection.widgets();
     const selwid = selection.widgets(true);
     const selcount = selwid.length;
 
-    area.style.display = selreal.length ? 'flex' : '';
-
     if (selcount) {
         let enaC = selwid.filter(w => w.meta.disabled !== true).length;
         let disC = selwid.filter(w => w.meta.disabled === true).length;

src/kiri/ui.js

@@ -251,6 +251,17 @@ gapp.register("kiri.ui", [], (root, exports) => {
             dbkey = `beta-${prefix}-show-${group}`,
             link;
 
+        // if (opt.separator) {
+        //     const sep = DOC.createElement('div');
+        //     sep.classList.add('set2-sep');
+        //     sep.innerHTML = [
+        //         '<div class="line-sep2"></div>',
+        //         '<div class="chonk"></div>',
+        //         '<div class="line-sep2"></div>',
+        //     ].join('');
+        //     lastDiv.appendChild(sep);
+        // }
+
         if (opt.class) {
             opt.class.split(' ').forEach(ce => {
                 row.classList.add(ce);
@@ -272,6 +283,17 @@ gapp.register("kiri.ui", [], (root, exports) => {
             row.appendChild(link);
         }
 
+        if (opt.separator) {
+            const sep = DOC.createElement('div');
+            sep.classList.add('set2-sep');
+            sep.innerHTML = [
+                '<div class="line-sep2"></div>',
+                '<div class="chonk2"></div>',
+                '<div class="line-sep2"></div>',
+            ].join('');
+            lastDiv.appendChild(sep);
+        }
+
         addModeControls(row, opt);
         lastGroup = groups[group] = [];
         lastGroup.key = dbkey;

web/kiri/index.css

@@ -3,6 +3,7 @@
     --bg-gray: rgba(0,0,0,0.25);
     --bg-gray-lt: rgba(0,0,0,0.15);
     --gradbar: linear-gradient(to right, #ddd, #666, #ddd);
+    --gradbar2: linear-gradient(to right, #ddd, #999, #ddd);
     --gradbar-vert: linear-gradient(to bottom, #ddd, #666, #ddd);
     --holdbar: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,1), rgba(100,100,100,0.1));
     --holdbar-dk: linear-gradient(to top, rgba(100,100,100,0.1), rgba(255,255,255,0.25), rgba(100,100,100,0.1));
@@ -179,6 +180,10 @@ th, tr, td, label {
     bottom: 0;
 }
 
+#app-name .km-font {
+    font-size: larger;
+}
+
 /* top menu bar, drop menus */
 #top, #app-name {
     background-color: var(--work-area);
@@ -514,6 +519,15 @@ th, tr, td, label {
     /* border-top: 3px dashed black; */
     background-color: var(--bg-gray-lt);
 }
+.chonk2 {
+    /* margin: 10px 0 10px 0; */
+    /* height: 0px; */
+    min-height: 3px;
+    max-height: 3px;
+    min-width: 100px;
+    /* border-top: 3px dashed black; */
+    background-color: var(--bg-gray-lt);
+}
 #mode-info {
     white-space: nowrap;
     font-size: smaller;
@@ -641,20 +655,17 @@ th, tr, td, label {
     text-transform: none !important;
 }
 
-#mid-left, #right-work {
+#panel-left, #panel-right {
     max-height: 100%;
     background-color: var(--work-area);
 }
-#mid-left, #mid-right, #modal {
+#panel-left, #panel-right, #modal {
     pointer-events: visible;
     text-transform: capitalize;
 }
-#mid-left label, #mid-left svg {
+#panel-left label, #panel-left svg {
     pointer-events: none;
 }
-#right-work > div {
-    padding: 0 5px 0 5px;
-}
 
 .slim-hide {
     width: 0;
@@ -671,6 +682,13 @@ th, tr, td, label {
     max-height: 1px;
     background-image: var(--gradbar);
 }
+.line-sep2 {
+    z-index: 14;
+    height: 1px;
+    min-height: 1px;
+    max-height: 1px;
+    background-image: var(--gradbar2);
+}
 .mid-sep {
     z-index: 14;
     width: 1px;
@@ -938,18 +956,9 @@ th, tr, td, label {
     display: flex;
     padding: 5px 0 0 0;
 }
-.work-header {
-    background-color: var(--work-area);
-    font-size: smaller;
-    flex-direction: column;
-    justify-content: stretch;
-    text-align: center;
-    padding: 10px;
-    gap: 5px;
-}
 .cam-pop-op {
     top: 0;
-    right: 100%;
+    right: calc(100% + 4px);
     text-align: left;
     position: absolute;
     white-space: nowrap;
@@ -1055,8 +1064,8 @@ th, tr, td, label {
 #op-add-pop {
     position: absolute;
     display: none;
-    right: 100%;
     top: 0;
+    right: 100%;
     transform: translateY(-50%);
 }
 #op-add:hover #op-add-pop {
@@ -1070,10 +1079,12 @@ th, tr, td, label {
     gap: 5px;
 }
 #op-add-list {
+    margin-right: 10px;
     padding: 4px;
     display: flex;
     align-items: stretch;
     flex-direction: column;
+    text-transform: none !important;
 }
 #op-add-list > div {
     padding: 3px 5px 3px 5px;
@@ -1081,6 +1092,7 @@ th, tr, td, label {
     flex-direction: column;
     border: 1px dashed gray;
     border-radius: 3px;
+    text-align: center;
 }
 #op-add-list > div:hover {
     background-color: rgba(0,0,0,0.2);
@@ -1840,7 +1852,10 @@ th, tr, td, label {
     border-radius: 3px;
 }
 
-#settings {
+#panel-right{
+    overflow: unset;
+}
+.settings {
     max-height: 100%;
     overflow-y: auto;
     overflow-x: hidden;
@@ -1848,46 +1863,38 @@ th, tr, td, label {
     text-transform: capitalize;
     background-color: rgba(255,255,255,0.5);
 }
-#settings .set-group {
+.settings .set-group {
     cursor: pointer;
 }
-#settings .pop-sep {
+.settings .pop-sep {
     display: none !important;
 }
+.settings .set-header a {
+    font-size: smaller;
+}
 .set2-group {
-    background-color: #f8f8f8;
-    border: 1px solid #ccc;
-    border-radius: 10px;
     padding-bottom: 2px;
     margin: 3px;
     gap: 1.5px;
 }
 .set2-group .var-row {
-    margin: 0 7px 0 7px !important;
+    padding: 0 7px 0 7px !important;
+    margin: 0 !important;
+    border-left: 3px solid transparent;
+    border-right: 3px solid transparent;
+}
+.set2-group .var-row:hover {
+    border-left: 3px solid #ddd;
+    border-right: 3px solid #ddd;
+    background-color: #f8f8f8 !important;
 }
 .set2-group .var-row label {
     margin-right: 25px;
 }
-.set2-group .set-header {
+.set2-sep {
-    background-color: #ddd !important;
+    flex-shrink: 0;
-    padding: 5px !important;
+    flex-direction: column;
-    margin: 0 0 3px 0 !important;
+    margin: 0 0 3px 0;
-    border-top-left-radius: 10px !important;
-    border-top-right-radius: 10px !important;
-
-}
-.set2-group .set-header a {
-    text-transform: uppercase;
-    text-align: center;
-    font-weight: bold;
-    font-size: smaller;
-    flex-grow: 1;
-}
-.set2-group .set-header hr {
-    border: 0 !important;
-    flex-grow: 0 !important;
-    max-width: 0 !important;
-    max-height: 0 o !important;
 }
 .pop-sep, .set-sep {
     border: 0 !important;
@@ -1899,26 +1906,18 @@ th, tr, td, label {
     background-color: #bbb;
 }
 .set-header {
-    padding: 3px 5px 3px 5px;
-    margin: 7px 3px 3px 3px;
     white-space: nowrap;
     border-radius: 2px;
     justify-content: center;
     background-color: var(--menu);
+    border-left: 3px solid #ddd;
+    border-right: 3px solid #ddd;
+    padding: 4px;
+    margin: 0 0 4px 0;
 }
-.set-header hr {
+.settings .set-header {
-    display: none;
-}
-#settings .set-header {
-    justify-content: left !important;
-    background-color: transparent;
     border-radius: 2px;
-}
+    margin: 0 !important;
-#settings .set-header hr {
-    display: flex !important;
-}
-#settings .set-header:hover {
-    background-color: rgba(0,0,0,0.1) !important;
 }
 .set-header-line {
     margin-left: 5px;
@@ -1951,13 +1950,13 @@ th, tr, td, label {
     margin-right: 5px;
     padding: 5px;
 }
-#settings .var-row {
+.settings .var-row {
     margin: 0 10px 0 15px;
 }
-#settings .var-row:hover {
+/* .settings .var-row:hover {
     color: blue;
-}
+} */
-#settings .ext-buttons {
+.settings .ext-buttons {
     margin: 0 9px 0 14px;
     gap: 3px;
 }

web/kiri/index.html

@@ -246,7 +246,7 @@
     <div id="mid" class="grow f-row">
 
         <!-- left settings menu -->
-        <div id="mid-left" class="f-col j-left">
+        <div id="panel-left" class="f-col j-left">
             <!-- ephemeral -->
             <div id="lt-back" class="lt-menu lt-enabled">
                 <i class="fas fa-arrow-circle-left"></i>
@@ -267,10 +267,10 @@
                 <div><label>Device</label><span id="mode-device"></span></div>
                 <div><label>Profile</label><span id="mode-profile"></span></div>
             </div>
-            <div class="line-sep"></div>
+            <div class="line-sep2"></div>
-            <div class="chonk"></div>
+            <!-- <div class="chonk"></div>
-            <div class="line-sep"></div>
+            <div class="line-sep"></div> -->
-            <div id="settings" class="f-col grow">
+            <div class="f-col grow settings">
                 <!-- FDM -->
                 <div id="fdm-layers" class="f-col set2-group mode-fdm"></div>
                 <div id="fdm-base" class="f-col set2-group mode-fdm"></div>
@@ -308,166 +308,6 @@
 
         <!-- main workspace -->
         <div id="mid-mid" class="grow">
-            <div id="modal">
-                <div id="modal-box" class="f-col">
-
-                <div class="mod-top f-row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
-                <div id="mod-help" class="mdialog f-col">
-                    <div class="f-row j-center title">
-                        <label>Kiri:Moto Help</label>
-                    </div>
-                    <div class="f-col">
-                        <a target="_rsc" href="https://docs.grid.space/projects/kiri-moto"><i class="fas fa-question-circle"></i>Kiri:Moto Full Documentation</a>
-                        <a href="https://youtu.be/08795Sj22QE" target="youtube"><i class="fab fa-youtube"></i>Video Guide to Kiri:Moto 2.5</a>
-                        <a target="_rsc" href="https://www.youtube.com/c/GridSpace/videos"><i class="fab fa-youtube"></i>YouTube Channel</a>
-                        <a target="_rsc" href="https://discord.gg/suyCCgr"><i class="fab fa-discord"></i> Discord Live Chat</a>
-                        <a target="_rsc" href="https://forum.grid.space"><i class="fab fa-discourse"></i> Discourse Forums</a>
-                        <a target="_rsc" href="https://twitter.com/grid_space_3d"><i class="fab fa-twitter"></i> Follow on Twitter</a>
-                        <a target="_rsc" href="https://paypal.me/gridspace3d?locale.x=en_US"><i class="fab fa-paypal"></i> Donations are welcome!</a>
-                    </div>
-                    <div class="f-row j-center">
-                        <label id="kiri-version"></label>
-                    </div>
-                </div>
-                <div id="mod-setup" class="mdialog f-row">
-                    <div class="f-col left a-stretch">
-                        <label class="header" lk="dm_sldt">select a device type</label>
-                        <div class="f-col">
-                            <table><tr>
-                                <th><button id="mode-fdm" class="dev-type"><label>FDM</label></button></th>
-                                <th><button id="mode-sla" class="dev-type"><label>SLA</label></button></th>
-                            </tr><tr>
-                                <th><button id="mode-cam" class="dev-type"><label>CNC</label></button></th>
-                                <th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th>
-                            </tr></table>
-                        </div>
-                        <div id="dev-header" class="header sub f-col j-center">
-                            <label lk="dm_stdd">standard devices</label>
-                            <div id="dev-search">
-                                <i class="fas fa-search"></i>
-                                <input id="dev-filter">
-                            </div>
-                        </div>
-                        <div class="f-col mh0 mh35 j-center a-stretch">
-                            <div id="device-list" class="devlist f-col overy"></div>
-                        </div>
-                        <label class="header sub" lk="dm_mydd">my devices</label>
-                        <div class="f-col grow">
-                            <div id="device-my" class="devlist f-col grow overy"></div>
-                            <div class="f-row footer">
-                                <div class="grow"></div>
-                                <button id="device-add" lk="copy">copy</button>
-                                <button id="device-del" lk="delete">delete</button>
-                                <button id="device-exp" lk="export">export</button>
-                                <div class="grow"></div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="f-col grow a-stretch">
-                        <label class="header" lk="dm_seld">selected device</label>
-                        <div class="f-row">
-                            <div id="device1" class="f-col t-body t-inset overy grow"></div>
-                            <div class="t-pad"></div>
-                            <div id="device2" class="f-col t-body t-inset overy grow"></div>
-                            <div id="palette3" class="f-col t-body t-inset overy grow"></div>
-                        </div>
-                        <div class="t-pad"></div>
-                        <div id="gcode-edit" class="f-col grow">
-                            <div id="dg" class="f-col t-body t-inset"></div>
-                            <div class="t-pad"></div>
-                            <div id="dev-gcode" class="grow"></div>
-                        </div>
-                        <div id="device-action" class="f-row footer">
-                            <div class="grow"></div>
-                            <button id="device-save" lk="save">save</button>
-                            <div class="grow"></div>
-                        </div>
-                    </div>
-                </div>
-                <div id="mod-files" class="mdialog f-col">
-                    <label class="set-header menu-title" lk="dm_rcnt">recent files</label>
-                    <div id="catalogList" class="f-col"></div>
-                </div>
-                <div id="mod-saves" class="mdialog f-col">
-                    <label class="set-header menu-title" lk="dm_savs">saved settings</label>
-                    <div id="settingsList" class="f-col"></div>
-                    <div id="settingsNew">
-                        <input id="settingsName" class="grow"></input>
-                        <button id="settingsSave" lk="save">Save</button>
-                    </div>
-                </div>
-                <div id="mod-tools" class="mdialog">
-                    <div class="f-col">
-                        <div class="f-row t-head">
-                            <label class="t-33" lk="tool">tool</label>
-                            <div class="t-pad"></div>
-                            <label class="t-33" lk="detail">detail</label>
-                            <div class="t-pad"></div>
-                            <label class="t-33" lk="view">view</label>
-                        </div>
-                        <div id="tool-cols" class="f-row">
-                            <div class="f-col t-33">
-                                <select id="tool-select" size="10" class="grow"></select>
-                            </div>
-                            <div class="t-pad"></div>
-                            <div class="f-col t-33 t-body t-inset">
-                                <div class="f-row var-row"><label lk="name">name</label><input id="tool-name" size="15"></input></div>
-                                <div class="f-row var-row"><label lk="type">type</label>
-                                    <select id="tool-type">
-                                        <option value="endmill" lk="td_tyem" selected>end</option>
-                                        <option value="ballmill" lk="td_tybm">ball</option>
-                                        <option value="tapermill" lk="td_tytm">taper</option>
-                                    </select>
-                                </div>
-                                <div class="f-row var-row" title="tool number to use&#010;in gcode commands"><label lk="td_tonm">tool #</label><input id="tool-num" size="7"></input></div>
-                                <div class="f-row var-row"><label lk="metric">metric</label><input id="tool-metric" type="checkbox"></input></div>
-                                <div class="set-header f-col" lk="td_shft">shaft</div>
-                                <div class="f-row var-row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
-                                <div class="f-row var-row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
-                                <div class="set-header f-col" lk="td_flut">flute</div>
-                                <div class="f-row var-row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
-                                <div class="f-row var-row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
-                                <div class="set-header f-col" ln="td_tapr">taper</div>
-                                <div class="f-row var-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=7></input></div>
-                                <div class="f-row var-row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
-                            </div>
-                            <div class="t-pad"></div>
-                            <div id="tool-view" class="f-col t-33 t-body"></div>
-                        </div>
-                        <div id="tool-action" class="f-row j-center">
-                            <button id="tool-add"><i class="fas fa-plus"></i></button>
-                            <button id="tool-del"><i class="fas fa-minus"></i></button>
-                            <div class="t-pad2"></div>
-                            <button id="tools-save" lk="save">save</button>
-                            <button id="tools-close" lk="done">done</button>
-                            <div class="t-pad2"></div>
-                            <button id="tools-export" lk="export">export</button>
-                        </div>
-                    </div>
-                </div>
-                <div id="mod-prefs" class="mdialog f-col a-center">
-                    <label lk="dm_appp" class="menu-title">Application Preferences</label>
-                    <hr width="80%">
-                    <div class="f-row">
-                        <div id="prefs-gen1" class="f-col"></div>
-                        <div class="t-pad2"></div>
-                        <div id="prefs-gen2" class="f-col"></div>
-                        <div class="t-pad2"></div>
-                        <div id="prefs-lay" class="f-col"></div>
-                        <div class="t-pad2"></div>
-                        <div id="prefs-xpo" class="f-col"></div>
-                        <div class="t-pad2"></div>
-                        <div id="prefs-prt" class="f-col"></div>
-                        <div class="t-pad2"></div>
-                        <div id="prefs-add" class="f-col"></div>
-                        <div class="t-pad2"></div>
-                    </div>
-                </div>
-                <div id="mod-local" class="mdialog f-col"></div>
-                <div id="mod-print" class="mdialog f-col"></div>
-                <div id="mod-any" class="mdialog f-col"></div>
-                <div class="mod-end"></div></div>
-            </div>
             <div id="layer-slider" class="f-col a-stretch">
                 <div id="layers" class="f-row j-center"></div>
                 <div id="slider" class="f-row russo">
@@ -485,33 +325,47 @@
         </div>
 
         <!-- allows right tray to slide/hide but still show speeds menu -->
-        <div id="mid-right" class="f-row j-center">
+        <div class="f-row j-center">
             <div id="set-menu" class="f-col">
                 <div id="speeds"><div id="speedbar" class="f-col a-stretch j-center" lkt="sb_info"></div></div>
             </div>
             <!-- vertical separation between workspace and right tray -->
             <div class="mid-sep"></div>
-            <div id="right-work" class="f-col j-start">
+            <div id="panel-right" class="f-col j-start settings">
-                <div class="set-header f-col">
+                <div class="set2-group f-col">
-                    <a class="work-header"><span>workspace</span></a>
+                    <div class="set-header">
+                        <a>workspace</a>
+                    </div>
+                    <div class="set2-set f-col">
+                        <div class="line-sep2"></div>
+                        <div class="chonk2"></div>
+                        <div class="line-sep2"></div>
+                    </div>
                     <div id="ws-widgets" class="f-col"></div>
                 </div>
-                <div class="line-sep"></div>
+                <div class="set2-group f-col mode-fdm">
-                <div class="chonk"></div>
+                    <div class="set-header">
-                <div class="line-sep"></div>
+                        <a>ranges</a>
-                <div class="set-header f-col mode-fdm">
+                    </div>
-                    <a class="work-header"><span>ranges</span></a>
+                    <div class="set2-set f-col">
+                        <div class="line-sep2"></div>
+                        <div class="chonk2"></div>
+                        <div class="line-sep2"></div>
+                    </div>
                     <div id="fdm-ranges" class="f-col"></div>
                 </div>
-                <div id="workspace-tool"></div>
+                <div class="set2-group f-col">
-                <div class="contents mode-cam">
+                    <div id="workspace-tool"></div>
-                    <div class="work-header">
+                </div>
-                        <span>CNC</span>
+                <div class="set2-group f-col mode-cam">
-                        <span>operations</span>
+                    <div class="set-header mode-cam">
+                        <a>operation list</a>
+                    </div>
+                    <div class="set2-set f-col">
+                        <div class="line-sep2"></div>
+                        <div class="chonk2"></div>
+                        <div class="line-sep2"></div>
                     </div>
-                    <div class="line-sep"></div>
-                    <div class="chonk"></div>
-                    <div class="line-sep"></div>
                     <div id="camops" class="f-col a-stretch grow">
                         <div id="oplist" class="f-col j-center"></div>
                         <div id="op-add" class="opdiv">
@@ -537,9 +391,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="line-sep"></div>
+                <div class="grow"></div>
+                <div class="line-sep2"></div>
                 <div class="chonk"></div>
-                <div class="line-sep"></div>
+                <div class="line-sep2"></div>
             </div>
         </div>
     </div>
@@ -552,6 +407,168 @@
     <!-- ThreeJS container -->
     <div id="container"></div>
 
+    <!-- modal dialogs-->
+    <div id="modal">
+        <div id="modal-box" class="f-col">
+
+        <div class="mod-top f-row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
+        <div id="mod-help" class="mdialog f-col">
+            <div class="f-row j-center title">
+                <label>Kiri:Moto Help</label>
+            </div>
+            <div class="f-col">
+                <a target="_rsc" href="https://docs.grid.space/projects/kiri-moto"><i class="fas fa-question-circle"></i>Kiri:Moto Full Documentation</a>
+                <a href="https://youtu.be/08795Sj22QE" target="youtube"><i class="fab fa-youtube"></i>Video Guide to Kiri:Moto 2.5</a>
+                <a target="_rsc" href="https://www.youtube.com/c/GridSpace/videos"><i class="fab fa-youtube"></i>YouTube Channel</a>
+                <a target="_rsc" href="https://discord.gg/suyCCgr"><i class="fab fa-discord"></i> Discord Live Chat</a>
+                <a target="_rsc" href="https://forum.grid.space"><i class="fab fa-discourse"></i> Discourse Forums</a>
+                <a target="_rsc" href="https://twitter.com/grid_space_3d"><i class="fab fa-twitter"></i> Follow on Twitter</a>
+                <a target="_rsc" href="https://paypal.me/gridspace3d?locale.x=en_US"><i class="fab fa-paypal"></i> Donations are welcome!</a>
+            </div>
+            <div class="f-row j-center">
+                <label id="kiri-version"></label>
+            </div>
+        </div>
+        <div id="mod-setup" class="mdialog f-row">
+            <div class="f-col left a-stretch">
+                <label class="header" lk="dm_sldt">select a device type</label>
+                <div class="f-col">
+                    <table><tr>
+                        <th><button id="mode-fdm" class="dev-type"><label>FDM</label></button></th>
+                        <th><button id="mode-sla" class="dev-type"><label>SLA</label></button></th>
+                    </tr><tr>
+                        <th><button id="mode-cam" class="dev-type"><label>CNC</label></button></th>
+                        <th><button id="mode-laser" class="dev-type"><label>LASER</label></button></th>
+                    </tr></table>
+                </div>
+                <div id="dev-header" class="header sub f-col j-center">
+                    <label lk="dm_stdd">standard devices</label>
+                    <div id="dev-search">
+                        <i class="fas fa-search"></i>
+                        <input id="dev-filter">
+                    </div>
+                </div>
+                <div class="f-col mh0 mh35 j-center a-stretch">
+                    <div id="device-list" class="devlist f-col overy"></div>
+                </div>
+                <label class="header sub" lk="dm_mydd">my devices</label>
+                <div class="f-col grow">
+                    <div id="device-my" class="devlist f-col grow overy"></div>
+                    <div class="f-row footer">
+                        <div class="grow"></div>
+                        <button id="device-add" lk="copy">copy</button>
+                        <button id="device-del" lk="delete">delete</button>
+                        <button id="device-exp" lk="export">export</button>
+                        <div class="grow"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="f-col grow a-stretch">
+                <label class="header" lk="dm_seld">selected device</label>
+                <div class="f-row">
+                    <div id="device1" class="f-col t-body t-inset overy grow"></div>
+                    <div class="t-pad"></div>
+                    <div id="device2" class="f-col t-body t-inset overy grow"></div>
+                    <div id="palette3" class="f-col t-body t-inset overy grow"></div>
+                </div>
+                <div class="t-pad"></div>
+                <div id="gcode-edit" class="f-col grow">
+                    <div id="dg" class="f-col t-body t-inset"></div>
+                    <div class="t-pad"></div>
+                    <div id="dev-gcode" class="grow"></div>
+                </div>
+                <div id="device-action" class="f-row footer">
+                    <div class="grow"></div>
+                    <button id="device-save" lk="save">save</button>
+                    <div class="grow"></div>
+                </div>
+            </div>
+        </div>
+        <div id="mod-files" class="mdialog f-col">
+            <label class="set-header menu-title" lk="dm_rcnt">recent files</label>
+            <div id="catalogList" class="f-col"></div>
+        </div>
+        <div id="mod-saves" class="mdialog f-col">
+            <label class="set-header menu-title" lk="dm_savs">saved settings</label>
+            <div id="settingsList" class="f-col"></div>
+            <div id="settingsNew">
+                <input id="settingsName" class="grow"></input>
+                <button id="settingsSave" lk="save">Save</button>
+            </div>
+        </div>
+        <div id="mod-tools" class="mdialog">
+            <div class="f-col">
+                <div class="f-row t-head">
+                    <label class="t-33" lk="tool">tool</label>
+                    <div class="t-pad"></div>
+                    <label class="t-33" lk="detail">detail</label>
+                    <div class="t-pad"></div>
+                    <label class="t-33" lk="view">view</label>
+                </div>
+                <div id="tool-cols" class="f-row">
+                    <div class="f-col t-33">
+                        <select id="tool-select" size="10" class="grow"></select>
+                    </div>
+                    <div class="t-pad"></div>
+                    <div class="f-col t-33 t-body t-inset">
+                        <div class="f-row var-row"><label lk="name">name</label><input id="tool-name" size="15"></input></div>
+                        <div class="f-row var-row"><label lk="type">type</label>
+                            <select id="tool-type">
+                                <option value="endmill" lk="td_tyem" selected>end</option>
+                                <option value="ballmill" lk="td_tybm">ball</option>
+                                <option value="tapermill" lk="td_tytm">taper</option>
+                            </select>
+                        </div>
+                        <div class="f-row var-row" title="tool number to use&#010;in gcode commands"><label lk="td_tonm">tool #</label><input id="tool-num" size="7"></input></div>
+                        <div class="f-row var-row"><label lk="metric">metric</label><input id="tool-metric" type="checkbox"></input></div>
+                        <div class="set-header f-col" lk="td_shft">shaft</div>
+                        <div class="f-row var-row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
+                        <div class="f-row var-row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
+                        <div class="set-header f-col" lk="td_flut">flute</div>
+                        <div class="f-row var-row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
+                        <div class="f-row var-row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
+                        <div class="set-header f-col" ln="td_tapr">taper</div>
+                        <div class="f-row var-row" title="taper angle"><label>angle</label><input id="tool-tangle" size=7></input></div>
+                        <div class="f-row var-row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
+                    </div>
+                    <div class="t-pad"></div>
+                    <div id="tool-view" class="f-col t-33 t-body"></div>
+                </div>
+                <div id="tool-action" class="f-row j-center">
+                    <button id="tool-add"><i class="fas fa-plus"></i></button>
+                    <button id="tool-del"><i class="fas fa-minus"></i></button>
+                    <div class="t-pad2"></div>
+                    <button id="tools-save" lk="save">save</button>
+                    <button id="tools-close" lk="done">done</button>
+                    <div class="t-pad2"></div>
+                    <button id="tools-export" lk="export">export</button>
+                </div>
+            </div>
+        </div>
+        <div id="mod-prefs" class="mdialog f-col a-center">
+            <label lk="dm_appp" class="menu-title">Application Preferences</label>
+            <hr width="80%">
+            <div class="f-row">
+                <div id="prefs-gen1" class="f-col"></div>
+                <div class="t-pad2"></div>
+                <div id="prefs-gen2" class="f-col"></div>
+                <div class="t-pad2"></div>
+                <div id="prefs-lay" class="f-col"></div>
+                <div class="t-pad2"></div>
+                <div id="prefs-xpo" class="f-col"></div>
+                <div class="t-pad2"></div>
+                <div id="prefs-prt" class="f-col"></div>
+                <div class="t-pad2"></div>
+                <div id="prefs-add" class="f-col"></div>
+                <div class="t-pad2"></div>
+            </div>
+        </div>
+        <div id="mod-local" class="mdialog f-col"></div>
+        <div id="mod-print" class="mdialog f-col"></div>
+        <div id="mod-any" class="mdialog f-col"></div>
+        <div class="mod-end"></div></div>
+    </div>
+
     <!-- click + drag mouse tracking  -->
     <div id="tracker"></div>