`;
const helpCopy = {
scale:['Grid cell size','The grid sets real-world lengths, areas, wall thickness and opening sizes. Changing it recalculates dimensions for the whole space without moving points on the plan.'],
floorPlan:['Floor plan','Use an image as a background to draw over. Rooms and devices stay editable on top of it. Switching to drawing by hand keeps the uploaded image available to use again.'],
borders:['Always show room borders','When off, patterned wall outlines and zero-thickness wall lines are hidden. Plain, light wall bands stay visible, so rooms remain separated. Doors, windows, room fills and lighting keep working.'],
walls:['Zero-thickness walls','Dashed zero-thickness walls let lamp glow and sunlight pass through. Solid ones block both, even when their lines are hidden on the plan.'],
fill:['Room fill','Custom uses a fixed color and opacity. Zigbee uses average signal; Lights distinguishes any on, all off and no sources; Temperature uses the comfort range. State colors and opacity come from general settings. Room overrides take priority. If no visible fill is available, enabled light-source glow adds base shading. Sunlight and glow remain separate effects.'],
layers:['Visible layers','Hiding changes only what you see on the plan. Decorative elements remain available in the background editor. Doors and windows stay in the plan editor, while their sensors, sunlight and lamp glow keep working.'],
names:['Show room names','Hiding room names also hides their values without clearing your selections. Room-card positions stay where you placed them.'],
cardSize:['Room-card font size','100% is the default size. This scales every room card in this space while keeping individual card sizes and positions. Changes apply when you save.'],
north:['North on the plan','North is measured clockwise from the top of the plan: 0° is up, 90° is right. Use general settings follows the home-wide value; a custom direction overrides it only for this space. Your plan does not rotate.'],
light:['Light-source glow','Lamp glow and sunlight are independent. Hiding opening symbols does not stop either effect. Window glass still lets sunlight in when the window is closed.'],
};
const help = attachHelp($('#settings-content'), $('#dialog-scroll'), helpCopy);
const helpButton = key => help.button(key);
const fieldHeading = (text,help,forId='') => `
`;
}
/* Compact density: one-line rows for uniform on/off lists. The group heading carries the shared explanation. */
function compactToggle(key, title, name, invert=false, disabled=false) {
const checked = invert ? !draft[key] : draft[key];
return `
${icon(name)}
`;
}
const compactList = rows => `
${rows.join('')}
`;
/* Icon tiles: a multi-select panel for the values shown on a room card. Pressed tiles use the segmented-control tint. */
function valueTiles(items, label, disabled=false) {
return `
${textField('title','Space name',{attributes:'maxlength="80" autocomplete="off"',hint:'Shown in the space tabs.'})}${scale}
`+
`${draft.cellCm!==saved.cellCm?info('The scale has changed. Calculated dimensions for this whole space will change when you save.',true):''}`+
`
${subsectionHeading('Floor plan','floorPlan')}${upload}${draft.source==='draw'&&draft.planData?info('Your uploaded image is kept. Switch back to use it again.'):''}
${hint('Below the minimum: cold. Within the range: comfort. Above the maximum: hot. Without a temperature reading, light-source glow can still add base shading.')}
` : hint(draft.fillMode==='lqi'?'Uses average room LQI: low at 40 or below, high at 180 or above. Colors and opacity follow the general palette.':'Uses separate colors for any light on, all lights off, and no light sources. Colors and opacity follow the general palette.');
return card('appearance','Appearance',
toggle('showBorders','Always show room borders','Show patterned outlines around the walls.','borders',false,false,'borders')+
`
${subsectionHeading('Visible layers','layers')}${compactList([compactToggle('hideDecor','Decorative layer','sofa',true),compactToggle('hideOpenings','Doors, windows & gates','door',true),compactToggle('showLqi','Zigbee signal next to devices','zigbee')])}`+`
`
);
}
function cardsSection() {
return card('cards','Room cards',
toggle('showNames','Show room names','Display room names and their selected values.','type',false,false,'names')+
`
Values on the card${valueTiles([['labelTemp','Temperature','temperature'],['labelHum','Humidity','humidity'],['labelLqi','Zigbee signal','zigbee','Average Zigbee signal'],['labelLight','Lights on / off','bulb']],'Values on the card',!draft.showNames)}${!draft.showNames?`
${icon('eyeOff')}Values are saved but hidden. to display them.
`:''}
`+
`
${helpButton('cardSize')}
50%300%
${errorSlot('cardFontScale')}${hint('Scales every room card in this space.')}`+`
`;
subDialog.showModal();
}
function closeSub() {
subDialog.close();lastSubTrigger?.focus({preventScroll:true});
if(closeDecision){const resolve=closeDecision;closeDecision=undefined;resolve(false);}
}
function requestClose() {
if(!dirty()){closeSettings();return Promise.resolve(true);}
showSub('Discard your changes?',`
Your changes to ${escape(saved.title)} haven’t been saved.
`,``);
$('[data-sub="close"].primary',subDialog).focus();
return new Promise(resolve=>{closeDecision=resolve;});
}
function persist(nextSpaces) {
try {localStorage.setItem(STORAGE_KEY,JSON.stringify(nextSpaces));return true;}
catch {showToast('Could not save locally. Try a smaller image or enable browser storage.');return false;}
}
function saveSettings() {
if(!dirty()||allErrors().length)return;
const normalized={...clone(draft),title:draft.title.trim()};
const next=spaces.map(s=>s.id===activeId?{...s,settings:normalized}:s);
if(!persist(next))return;
spaces=next;saved=clone(normalized);draft=clone(saved);closeSettings();
showToast('Space settings saved in this browser.');
}
function openGallery() {
showSub('Uploaded floor plans','
Choose an image for this space.
','');
}
function readFile(file) {
if(!file)return;
if(!/\.(svg|png|jpe?g|webp)$/i.test(file.name)||!['image/svg+xml','image/png','image/jpeg','image/webp'].includes(file.type)){showToast('Choose an SVG, PNG, JPG or WebP image.');return;}
if(file.size>2*1024*1024){showToast('Choose an image smaller than 2 MB for this preview.');return;}
const reader=new FileReader();
reader.onload=()=>{
const image=new Image();
image.onload=()=>{draft.planData=String(reader.result);draft.planName=file.name;renderMain();updateChrome();};
image.onerror=()=>showToast('This image could not be opened. Choose another file.');
image.src=String(reader.result);
};
reader.onerror=()=>showToast('Could not read the image. Please try again.');reader.readAsDataURL(file);
}
function openCopy() {
let n=2;while(spaces.some(s=>s.settings.title===`${saved.title} (${n})`))n++;
showSub('Copy space',`
Start a new space with the saved layout and display settings. Rooms and device placements are not copied.
This preview creates a local settings copy. The production action also copies the plan geometry.
${dirty()?info('The copy will use saved settings. Your unsaved changes stay in the original draft.'):''}`,``);
$('#copy-name').focus();$('#copy-name').select();
}
function openDelete() {
if(activeSpace().devices>0&&spaces.length>1){
showSub('This space still has devices',`
${activeSpace().devices} devices are placed in ${escape(saved.title)}. Move or remove them before deleting this space.
`,``);return;
}
showSub('Delete this space?',`
Delete ${escape(saved.title)} from this design preview? This removes its locally saved settings.
`,``);
$('[data-sub="close"].button',subDialog).focus();
}
function handleAction(action) {
if(action==='review-errors'){
const first=allErrors()[0];if(!first)return;
const field=$(`[data-field="${first[0]}"]`,content);field?.scrollIntoView({block:'center'});field?.focus({preventScroll:true});return;
}
if(action==='upload'){$('#plan-upload').click();return;}
if(action==='gallery'){openGallery();return;}
if(action==='reset-fill'){draft.fillColor=base.fillColor;draft.fillOpacity=base.fillOpacity;draft.customFillSet=false;}
if(action==='reset-background'){draft.bgColor=base.bgColor;draft.bgColorSet=false;}
if(action==='reset-room'){draft.roomColor=base.roomColor;draft.roomOpacity=base.roomOpacity;}
if(action==='reset-font')draft.cardFontScale=100;
if(action==='show-cards')draft.showNames=true;
if(action==='inherit-north')draft.northDeg=null;
const scroll=currentScroller().scrollTop;renderMain();updateChrome();currentScroller().scrollTop=scroll;
}
document.addEventListener('click',e=>{
const target=e.target.closest('button');
if(target?.dataset.space){activeId=target.dataset.space;renderPicker();}
if(target?.dataset.action)handleAction(target.dataset.action);
});
$('#settings-content').addEventListener('input',e=>{
if(['checkbox','radio','file'].includes(e.target.type)||e.target.tagName==='SELECT')return;
updateField(e.target);
});
$('#settings-content').addEventListener('change',e=>{
if(e.target.id==='plan-upload'){readFile(e.target.files[0]);return;}
if(e.target.id==='north-mode'){draft.northDeg=e.target.value==='inherit'?null:165;renderMain();updateChrome();return;}
if(['checkbox','radio'].includes(e.target.type)||e.target.tagName==='SELECT')updateField(e.target);
if(e.target.dataset.field==='cellCm'){const scroll=currentScroller().scrollTop;renderMain();updateChrome();currentScroller().scrollTop=scroll;}
});
$('#settings-content').addEventListener('dragover',e=>{const zone=e.target.closest('#upload-panel');if(zone){e.preventDefault();zone.classList.add('dragging');}});
$('#settings-content').addEventListener('dragleave',e=>{e.target.closest('#upload-panel')?.classList.remove('dragging');});
$('#settings-content').addEventListener('drop',e=>{const zone=e.target.closest('#upload-panel');if(zone){e.preventDefault();zone.classList.remove('dragging');readFile(e.dataTransfer.files[0]);}});
$('#close-settings').addEventListener('click',requestClose);
$('#cancel-settings').addEventListener('click',requestClose);
$('#save-settings').addEventListener('click',saveSettings);
dialog.addEventListener('cancel',e=>{e.preventDefault();requestClose();});
dialog.addEventListener('keydown',e=>{
if(e.key==='Escape'&&helpOpen()){e.preventDefault();e.stopPropagation();closeHelp();return;}
if(e.key==='Escape'&&!subDialog.open){e.preventDefault();e.stopPropagation();requestClose();}
});
$('#copy-space').addEventListener('click',openCopy);
$('#delete-space').addEventListener('click',openDelete);
subDialog.addEventListener('cancel',e=>{e.preventDefault();closeSub();});
subDialog.addEventListener('input',e=>{if(e.target.id==='copy-name')$('[data-sub="confirm-copy"]').disabled=!e.target.value.trim();});
subDialog.addEventListener('click',e=>{
const button=e.target.closest('button[data-sub]');if(!button)return;
const action=button.dataset.sub;
if(action==='close'){closeSub();return;}
if(action==='discard'){
const resolve=closeDecision;closeDecision=undefined;
draft=clone(saved);closeSub();closeSettings();resolve?.(true);return;
}
if(action==='choose-image'){draft.source='file';draft.planName=button.dataset.name;draft.planData='assets/sample-plan.svg';closeSub();renderMain();updateChrome();return;}
if(action==='confirm-copy'){
const title=$('#copy-name').value.trim();if(!title)return;
const copy={id:crypto.randomUUID(),devices:0,settings:{...clone(saved),title}};
const next=[...spaces,copy];if(!persist(next))return;
spaces=next;closeSub();renderPicker();showToast(`“${title}” created. Open it from the space picker.`);return;
}
if(action==='confirm-delete'){
let next=spaces.filter(s=>s.id!==activeId);
if(!next.length)next=[{id:'new-space',devices:0,settings:{...clone(base),title:'New space'}}];
if(!persist(next))return;
spaces=next;activeId=next[0].id;closeSub();closeSettings();showToast('Space deleted from this preview.');
}
});
window.addEventListener('beforeunload',e=>{if(dialog.open&&dirty()){e.preventDefault();e.returnValue='';}});
hydrateIcons();renderPicker();
registerDemoForm({id:'space-settings',title:'Space settings',description:'Layout, appearance, room cards and lighting for a space.',galleryControls:$('#space-examples'),open:openSettings,requestClose});
openDemoForm('space-settings');