{this.nativeReferenceRequest={epoch:this.epoch,resolve,reject};});\n }\n _captureNativeReference(frame){\n const request=this.nativeReferenceRequest;\n if(!request||request.encoding||!frame.submitted||this.referenceEncoding)return;\n request.encoding=true;this.referenceEncoding=true;\n try{\n const source=this.scene._renderer.domElement,size=hdFrameSize(source.clientWidth||source.width,source.clientHeight||source.height);\n // Preserve the entire photographic appearance separately from the cheap\n // structural controls. No crop, UI, invented details or second GL pass.\n const scale=Math.min(1,Math.sqrt(1_000_000/(size.outputWidth*size.outputHeight)));\n const width=Math.max(1,Math.round(size.outputWidth*scale)),height=Math.max(1,Math.round(size.outputHeight*scale));\n const reference=document.createElement('canvas');reference.width=width;reference.height=height;\n reference.getContext('2d',{alpha:false}).drawImage(source,0,0,width,height);\n const pose=this.pose(),capturedAt=performance.now();\n if(this.media?.proxy&&!this.media.video.firstFrame){\n this.canvas.width=width;this.canvas.height=height;this.output.drawImage(reference,0,0);this.canvas.hidden=false;this.heldPose=pose;\n }\n reference.toBlob(async blob=>{\n try{\n if(!blob||blob.size>1024*1024)throw Error('HD appearance capture exceeded its byte bound.');\n const bytes=await blob.arrayBuffer();\n if(request.epoch===this.epoch&&this.nativeReferenceRequest===request){this.nativeReferenceRequest=null;request.resolve({bytes,size,pose,capturedAt});}\n }catch(error){if(this.nativeReferenceRequest===request){this.nativeReferenceRequest=null;request.reject(error);}}\n finally{this.referenceEncoding=false;}\n },'image/jpeg',.9);\n }catch(error){this.referenceEncoding=false;this.nativeReferenceRequest=null;request.reject(error);}\n }\n frameCompleted(frame){\n if(this.destroyed)return;this.updateAvailability();\n if(this.nativeRevealPending&&frame.submitted&&this.scene._sceneInitializer?._lastRenderOwner!=='hd-proxy'){\n this.nativeRevealPending=false;this.canvas.hidden=true;\n }\n // Recover cold-start/network failures on the existing foreground clock.\n // One coalesced request; no interval, second RAF or per-frame acquisition.\n if(this.identity&&!document.hidden&&frame.now>=this.nextCapabilityCheck)void this.refresh();\n this.referenceGate.poll(frame.now,frame.submitted);\n this._captureNativeReference(frame);\n if(this.restorePending&&this.identity&&this.eligible&&!document.hidden&&!this.starting&&!this.enabled&&!this.button.hidden&&this.viewSupported())void this.start();\n if(!this.enabled)return;\n if(this.media){this.media.frameCompleted(frame);return;}\n if(!frame.submitted)return;\n const now=frame.now,pose=this.pose();\n const displayed=this.display.present(now);\n if(displayed){\n const {bitmap,index,height}=displayed;\n if(this.canvas.width!==bitmap.width||this.canvas.height!==height){this.canvas.width=bitmap.width;this.canvas.height=height;}\n this.canvas.hidden=false;this.renderPose=displayed.pose;\n this.output.drawImage(bitmap,0,index*height,bitmap.width,height,0,0,this.canvas.width,this.canvas.height);\n }\n // A previous generation's non-cancellable bitmap decode can settle after\n // a replacement fills its lookahead. Reclaim the freed upload slot from\n // the live frame clock; the old generation cannot flush this new queue.\n if(!this.uploading&&this.frames.length===(this.needsReference?1:4)){void this.send(this.epoch);return;}\n if(this.encoding||this.frames.length>=(this.needsReference?1:4)||now-(this.lastCapture||0)<50)return;\n // One chunk of lookahead continues capture during inference. Slow frames\n // retain their history; only actual cuts or viewport changes reseed it.\n // Adaptive render pixel ratios cannot change the camera's display aspect.\n const source=this.scene._renderer.domElement;\n const frameSize=this.contextVersion===1?hdFrameSize(source.clientWidth||source.width,source.clientHeight||source.height):{width:864,height:480,outputWidth:864,outputHeight:480};\n if(this.contextVersion===1&&hdViewDiscontinuous(this.lastPose,pose)){\n // Continue rendering the new control frames while their detailed tiles\n // arrive. Replace the appearance sink only once they are ready; waiting\n // here would freeze display and let the native session expire.\n this.frames=[];this.lastPose=pose;this.nextContext=0;this.referenceGate.requestRefresh();\n }\n const resized=this.contextVersion===1&&this.batchSize&&JSON.stringify(frameSize)!==JSON.stringify(this.batchSize);\n if(resized||this.referenceGate.consumeRefresh(now)){this.frames=[];this.needsReference=true;this.batchSize=frameSize;}\n if(this.referenceGate.refresh)this.message('HD refining scene detail…');\n if(!this.frames.length){\n if(now>=this.nextContext||this.needsReference){this.segmentContext=this.contextProvider.capture();this.nextContext=now+4000;}\n if(this.contextVersion===1&&!this.segmentContext)return;\n this.batchContext=this.segmentContext?{...this.segmentContext,reset:this.needsReference,frameSize}:null;\n this.batchSize=frameSize;\n }\n this.lastCapture=now;this.lastPose=pose;this.encoding=true;const epoch=this.epoch;\n try{const size=this.batchSize;\n if(this.capture.width!==size.width||this.capture.height!==size.height){this.capture.width=size.width;this.capture.height=size.height;}\n this.input.drawImage(this.scene._renderer.domElement,0,0,size.width,size.height);\n this.capture.toBlob(async blob=>{\n try{if(!blob||epoch!==this.epoch)return;\n const bytes=await blob.arrayBuffer();if(epoch!==this.epoch)return;\n this.frames.push({bytes,pose});\n if(this.frames.length===(this.needsReference?1:4)&&!this.uploading)void this.send(epoch);\n }catch{if(epoch===this.epoch){this.stop();this.message('HD capture paused. The original scene remains available.');}}\n finally{this.encoding=false;}\n },'image/jpeg',.92);\n }catch{this.encoding=false;this.stop();this.message('HD capture is unavailable. The original scene remains available.');}\n }\n async send(epoch){\n if(this.uploading||epoch!==this.epoch)return;\n const request={epoch};this.uploading=request;const frames=this.frames;this.frames=[];\n const poses=frames.map(f=>f.pose),size=this.batchSize,context=this.batchContext,session=this.session,sequence=this.sequence;\n this.needsReference=false;\n try{\n const r=await this.auth.authenticatedFetch(this.base+`/v1/hd/sessions/${session}/frames`,{method:'POST',headers:{'content-type':'application/octet-stream','x-sequence':String(sequence)},body:packHdFrames(frames.map(f=>f.bytes),this.contextVersion===1?context:null),signal:this.controller.signal});\n if(!r.ok){const value=await r.json();throw Error(value.message||'HD rendering paused.');}\n const blob=await r.blob();if(epoch!==this.epoch)return;\n const bitmap=await createImageBitmap(blob);if(epoch!==this.epoch){bitmap.close();return;}\n const count=Number(r.headers.get('x-frame-count'));\n const width=this.contextVersion===1?size.outputWidth:864,height=this.contextVersion===1?size.outputHeight:480;\n if(![1,4].includes(count)||bitmap.width!==width||bitmap.height!==height*count){bitmap.close();throw Error('HD renderer returned an invalid frame.');}\n if(this.sequence===0){this.button.classList.add('is-active');this.button.setAttribute('aria-pressed','true');this.button.removeAttribute('aria-busy');this.message(this.sessionDisclosure);}\n else if(context?.reset)this.message(this.sessionDisclosure);\n if(count!==poses.length){bitmap.close();throw Error('HD frame count changed.');}\n this.display.enqueue({bitmap,poses,height},performance.now());this.count=count;this.receivedAt=performance.now();this.sequence++;\n }catch(error){if(epoch===this.epoch){this.stop();this.message(error.message||'HD rendering paused. The original scene remains available.');}}\n finally{if(this.uploading===request){this.uploading=null;if(epoch===this.epoch&&this.enabled&&this.frames.length===(this.needsReference?1:4))void this.send(epoch);}}\n }\n destroy(){if(this.destroyed)return;this.stop({preservePreference:true});this.destroyed=true;this.capabilityEpoch++;this.capabilityRequest?.controller.abort();this.capabilityRequest=null;this.unsubscribe?.();\n this.eventBus?.off?.('noclip:tier:update',this.onTier);window.removeEventListener('noclip:map-mode-change',this.onMode);document.removeEventListener('visibilitychange',this.onVisibility);window.removeEventListener('pagehide',this.onPageHide);window.removeEventListener('pageshow',this.onPageShow);\n this.registration.release();this.canvas.remove();this.notice.remove();if(this.scene._hdControl===this)this.scene._hdControl=null;\n }\n}\n","/**\n * Long-press tuning menu for a lens shortcut (chromatic aberration, depth of\n * field). Hold the button for 500 ms (or press Shift+Enter / ArrowDown) to\n * open it. Every change writes the persisted scene.lens setting, so tuning\n * survives reloads. \"Default\" restores only this effect's tuneables, not its\n * on/off state. Behaviour follows the night-vision tuning menu.\n */\nimport { LENS_DEFAULTS, LENS_LIMITS } from '../render/LensContract.js';\n\nconst HOLD_MS = 500;\nconst HOLD_SLOP_PX = 8;\nconst STYLE_ID = 'nca-lens-tuning-styles';\n\n/** Tuneables per shortcut. `key` is relative to scene.lens. */\nexport const LENS_TUNING_FIELDS = Object.freeze({\n 'lens-aberration': Object.freeze([\n { key: 'chromaticAberration.strength', label: 'Fringe strength', unit: 'px', step: 0.1 },\n ]),\n 'lens-dof': Object.freeze([\n { key: 'depthOfField.autofocus', label: 'Autofocus on view centre', type: 'toggle' },\n { key: 'depthOfField.focusDistance', label: 'Manual focus', unit: 'm', step: 0.5, log: true, disabledWhen: 'depthOfField.autofocus' },\n { key: 'depthOfField.focalLength', label: 'Focal length', unit: 'mm', step: 1 },\n { key: 'depthOfField.fStop', label: 'Aperture', prefix: 'ƒ/', step: 0.05 },\n { key: 'depthOfField.maxBlur', label: 'Bokeh limit', unit: 'px', step: 1 },\n { key: 'depthOfField.samples', label: 'Bokeh samples', step: 1 },\n { key: 'depthOfField.focusResponse', label: 'Focus speed', step: 0.5 },\n ]),\n 'lens-grain': Object.freeze([\n { key: 'filmGrain.strength', label: 'Sensor grain', unit: '×', step: 0.05 },\n { key: 'filmGrain.chroma', label: 'Low-light chroma mottling', unit: '×', step: 0.05 },\n ]),\n});\n\nconst defaultFor = (key) => key.split('.').reduce((cursor, part) => cursor?.[part], LENS_DEFAULTS);\n\nconst format = (field, value) => {\n const number = Number(value);\n const digits = field.step < 0.1 ? 2 : field.step < 1 ? 1 : 0;\n const text = field.log && number >= 1000 ? `${(number / 1000).toFixed(2)} k` : number.toFixed(digits);\n return `${field.prefix || ''}${text}${field.unit ? ` ${field.unit}` : ''}`;\n};\n\n// Manual focus spans 0.5 m to 100 km: a log slider keeps near focus usable.\nconst toSlider = (field, value) => (field.log ? Math.log(value) : value);\nconst fromSlider = (field, value) => {\n const raw = field.log ? Math.exp(Number(value)) : Number(value);\n return Math.round(raw / field.step) * field.step;\n};\n\nfunction injectStyles() {\n if (document.getElementById(STYLE_ID)) return;\n const style = document.createElement('style');\n style.id = STYLE_ID;\n style.textContent = `\n .nca-lens-tuning { position: fixed; z-index: 2200; box-sizing: border-box; width: 280px; padding: 12px;\n border: 1px solid #ffffff28; border-radius: 12px; background: #101715dd; backdrop-filter: blur(18px);\n -webkit-backdrop-filter: blur(18px); color: #e4e9e6; font: 12px/1.4 var(--font-mono, monospace); overflow: auto; }\n .nca-lens-tuning[hidden] { display: none !important; }\n .nca-lens-tuning header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }\n .nca-lens-tuning header strong { flex: 1; }\n .nca-lens-tuning label { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; margin: 10px 0; align-items: center; }\n .nca-lens-tuning label input[type=range] { grid-column: 1 / -1; width: 100%; accent-color: var(--nclp-yellow, #facc15); }\n .nca-lens-tuning label.is-toggle { grid-template-columns: 1fr auto; }\n .nca-lens-tuning label.is-disabled { opacity: 0.45; }\n .nca-lens-tuning output { color: #fff; font-variant-numeric: tabular-nums; }\n .nca-lens-tuning button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 4px; font: inherit; }\n .nca-lens-tuning .nca-lens-tuning__default { border: 1px solid #ffffff30; border-radius: 4px; padding: 2px 8px;\n font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #cfd8d3; }\n .nca-lens-tuning .nca-lens-tuning__default:hover { border-color: var(--nclp-yellow, #facc15); color: var(--nclp-yellow, #facc15); }\n body.is-mobile .nca-lens-tuning { width: min(320px, calc(100vw - 16px)); }\n body.is-mobile .nca-lens-tuning label input[type=range] { min-height: 28px; }\n `;\n document.head.appendChild(style);\n}\n\nexport class LensTuningMenu {\n /** @param {{button: HTMLElement, settings: object, id: string, title: string}} options */\n constructor({ button, settings, id, title }) {\n this.button = button;\n this.settings = settings;\n this.id = id;\n this.title = title;\n this.fields = LENS_TUNING_FIELDS[id] || [];\n this.menu = null;\n this.suppressClick = false;\n this._holdTimer = 0;\n this._holdPoint = null;\n injectStyles();\n button.setAttribute('aria-haspopup', 'dialog');\n button.setAttribute('aria-expanded', 'false');\n\n this._cancelHold = () => { clearTimeout(this._holdTimer); this._holdTimer = 0; };\n this._onDown = (event) => {\n if (event.button !== 0) return;\n this._cancelHold();\n this.suppressClick = false;\n this._holdPoint = { x: event.clientX, y: event.clientY };\n this._holdTimer = setTimeout(() => { this._holdTimer = 0; this.suppressClick = true; this.open(); }, HOLD_MS);\n };\n this._onMove = (event) => {\n if (this._holdPoint && Math.hypot(event.clientX - this._holdPoint.x, event.clientY - this._holdPoint.y) > HOLD_SLOP_PX) this._cancelHold();\n };\n this._onKeyOpen = (event) => {\n if ((event.shiftKey && event.key === 'Enter') || event.key === 'ArrowDown') { event.preventDefault(); this.open(); }\n };\n this._onContext = (event) => event.preventDefault();\n this._onOutside = (event) => {\n if (this.menu && !this.menu.hidden && !this.menu.contains(event.target) && !this.button.contains(event.target)) this.close();\n };\n this._onEscape = (event) => {\n if (event.key === 'Escape' && this.menu && !this.menu.hidden) { event.stopPropagation(); this.close(true); }\n };\n this._onResize = () => this.position();\n button.addEventListener('pointerdown', this._onDown);\n button.addEventListener('pointermove', this._onMove);\n for (const name of ['pointerup', 'pointercancel', 'pointerleave', 'lostpointercapture']) button.addEventListener(name, this._cancelHold);\n button.addEventListener('contextmenu', this._onContext);\n button.addEventListener('keydown', this._onKeyOpen);\n document.addEventListener('pointerdown', this._onOutside);\n document.addEventListener('keydown', this._onEscape, true);\n window.addEventListener('resize', this._onResize);\n window.visualViewport?.addEventListener('resize', this._onResize);\n this._unsubscribe = settings?.subscribe?.(() => this.sync()) || null;\n }\n\n /** True once if a long press just opened the menu (the click must not toggle). */\n consumeClick() {\n if (!this.suppressClick) return false;\n this.suppressClick = false;\n return true;\n }\n\n _value(key) {\n const value = this.settings?.getSection?.(`scene.lens.${key}`);\n return value === null || value === undefined ? defaultFor(key) : value;\n }\n\n _build() {\n const menu = document.createElement('section');\n menu.className = 'nca-lens-tuning';\n menu.id = `nca-${this.id}-tuning`;\n menu.setAttribute('role', 'dialog');\n menu.setAttribute('aria-label', `${this.title} settings`);\n const header = document.createElement('header');\n const title = document.createElement('strong');\n title.textContent = this.title;\n const reset = document.createElement('button');\n reset.type = 'button';\n reset.className = 'nca-lens-tuning__default';\n reset.textContent = 'Default';\n reset.title = `Restore default ${this.title.toLowerCase()} settings`;\n reset.addEventListener('click', () => this.resetToDefaults());\n const close = document.createElement('button');\n close.type = 'button';\n close.setAttribute('aria-label', 'Close settings');\n close.textContent = '×';\n close.addEventListener('click', () => this.close(true));\n header.append(title, reset, close);\n menu.append(header);\n\n this._inputs = new Map();\n for (const field of this.fields) {\n const row = document.createElement('label');\n const name = document.createElement('span');\n name.textContent = field.label;\n const input = document.createElement('input');\n input.name = field.key;\n if (field.type === 'toggle') {\n row.classList.add('is-toggle');\n input.type = 'checkbox';\n row.append(name, input);\n } else {\n const [min, max] = LENS_LIMITS[field.key];\n input.type = 'range';\n input.min = String(toSlider(field, min));\n input.max = String(toSlider(field, max));\n input.step = field.log ? 'any' : String(field.step);\n const output = document.createElement('output');\n row.append(name, output, input);\n this._inputs.set(`${field.key}:output`, output);\n }\n this._inputs.set(field.key, { input, row, field });\n menu.append(row);\n }\n menu.addEventListener('input', (event) => this._onInput(event));\n menu.addEventListener('change', (event) => this._onInput(event));\n document.body.append(menu);\n this.button.setAttribute('aria-controls', menu.id);\n return menu;\n }\n\n _onInput(event) {\n const binding = this._inputs?.get(event.target?.name);\n if (!binding) return;\n const { field, input } = binding;\n const value = field.type === 'toggle' ? input.checked : fromSlider(field, input.value);\n const output = this._inputs.get(`${field.key}:output`);\n if (output) output.textContent = format(field, value);\n this.settings?.updatePath?.(`scene.lens.${field.key}`, value);\n }\n\n /** Reflect persisted values (after a change, reset, import or reload). */\n sync() {\n if (!this.menu || this.menu.hidden) return;\n for (const field of this.fields) {\n const { input, row } = this._inputs.get(field.key);\n const value = this._value(field.key);\n if (field.type === 'toggle') input.checked = value === true;\n else if (document.activeElement !== input) input.value = String(toSlider(field, value));\n const output = this._inputs.get(`${field.key}:output`);\n if (output) output.textContent = format(field, value);\n const disabled = field.disabledWhen ? this._value(field.disabledWhen) === true : false;\n input.disabled = disabled;\n row.classList.toggle('is-disabled', disabled);\n }\n }\n\n resetToDefaults() {\n const patch = {};\n for (const field of this.fields) {\n const [group, key] = field.key.split('.');\n (patch[group] ||= {})[key] = defaultFor(field.key);\n }\n this.settings?.update?.({ scene: { lens: patch } });\n this.sync();\n }\n\n open() {\n if (!this.button.getClientRects().length) return;\n this.menu ||= this._build();\n this.menu.hidden = false;\n this.button.setAttribute('aria-expanded', 'true');\n this.sync();\n this.position();\n this.menu.querySelector('input')?.focus({ preventScroll: true });\n }\n\n close(restoreFocus = false) {\n if (!this.menu || this.menu.hidden) return;\n this.menu.hidden = true;\n this.button.setAttribute('aria-expanded', 'false');\n if (restoreFocus) this.button.focus({ preventScroll: true });\n }\n\n position() {\n if (!this.menu || this.menu.hidden) return;\n const rect = this.button.getBoundingClientRect();\n const viewport = window.visualViewport;\n const left = (viewport?.offsetLeft || 0) + 8;\n const top = (viewport?.offsetTop || 0) + 8;\n const width = viewport?.width || window.innerWidth;\n const height = viewport?.height || window.innerHeight;\n this.menu.style.maxWidth = `${Math.max(1, width - 16)}px`;\n this.menu.style.maxHeight = `${Math.max(1, height - 16)}px`;\n this.menu.style.left = `${Math.max(left, Math.min(rect.right - this.menu.offsetWidth, left + width - 16 - this.menu.offsetWidth))}px`;\n this.menu.style.top = `${Math.max(top, Math.min(rect.bottom + 8, top + height - 16 - this.menu.offsetHeight))}px`;\n }\n\n destroy() {\n this._cancelHold();\n this._unsubscribe?.();\n const button = this.button;\n button.removeEventListener('pointerdown', this._onDown);\n button.removeEventListener('pointermove', this._onMove);\n for (const name of ['pointerup', 'pointercancel', 'pointerleave', 'lostpointercapture']) button.removeEventListener(name, this._cancelHold);\n button.removeEventListener('contextmenu', this._onContext);\n button.removeEventListener('keydown', this._onKeyOpen);\n document.removeEventListener('pointerdown', this._onOutside);\n document.removeEventListener('keydown', this._onEscape, true);\n window.removeEventListener('resize', this._onResize);\n window.visualViewport?.removeEventListener('resize', this._onResize);\n this.menu?.remove();\n }\n}\n","/**\n * Scene-modifier shortcuts for the lens effects. Each button flips one\n * user-exposed setting (scene.lens.*.enabled); the renderer and the\n * Preferences panel follow the same setting.\n */\nimport { getHudControlBar } from './HudControlBar.js';\nimport { ensureHudPanelStyles } from './HudSlots.js';\nimport { LensTuningMenu } from './LensTuningMenu.js';\n\nexport const LENS_ICONS = Object.freeze({\n // Offset red/blue rings around a white core: radial colour fringing.\n aberration: '',\n // Speckled frame: sensor grain.\n grain: '',\n // Aperture iris: depth of field.\n dof: '',\n});\n\nexport const LENS_TOGGLES = Object.freeze([\n {\n id: 'lens-aberration',\n path: 'scene.lens.chromaticAberration.enabled',\n icon: LENS_ICONS.aberration,\n name: 'Chromatic aberration',\n order: -22,\n },\n {\n id: 'lens-dof',\n path: 'scene.lens.depthOfField.enabled',\n icon: LENS_ICONS.dof,\n name: 'Depth of field',\n order: -21,\n },\n {\n id: 'lens-grain',\n path: 'scene.lens.filmGrain.enabled',\n icon: LENS_ICONS.grain,\n name: 'Film grain',\n order: -20,\n },\n]);\n\nconst DESKTOP_CLASSES = ['nca-hud-pill', 'nca-hud-pill--square', 'nca-hud-panel--top-right'];\n\n/** One on/off scene modifier bound to a boolean setting. Default: on. */\nexport class LensToggleControl {\n constructor({ settings, definition, controlBar = getHudControlBar() }) {\n this.settings = settings;\n this.definition = definition;\n ensureHudPanelStyles();\n this.button = document.createElement('button');\n this.button.type = 'button';\n this.button.className = `nca-lens-toggle ${DESKTOP_CLASSES.join(' ')}`;\n this.button.dataset.lensToggle = definition.id;\n this.button.innerHTML = definition.icon;\n // Long press opens the tuning menu; that press must not also toggle.\n this.tuning = new LensTuningMenu({ button: this.button, settings, id: definition.id, title: definition.name });\n this.onClick = (event) => {\n if (this.tuning.consumeClick()) { event?.preventDefault?.(); return; }\n this.toggle();\n };\n this.button.addEventListener('click', this.onClick);\n this.unsubscribe = settings?.subscribe?.(() => this.update()) || null;\n this.registration = controlBar.register({ id: definition.id, element: this.button, group: 'scene', order: definition.order });\n this.update();\n }\n\n get enabled() {\n // Unset (older stored settings) follows the definition's default (on).\n const value = this.settings?.getSection?.(this.definition.path);\n return typeof value === 'boolean' ? value : this.definition.defaultEnabled !== false;\n }\n\n toggle() {\n return this.settings?.updatePath?.(this.definition.path, !this.enabled);\n }\n\n update() {\n const enabled = this.enabled;\n const { name } = this.definition;\n this.button.setAttribute('aria-pressed', String(enabled));\n this.button.setAttribute('aria-label', name);\n this.button.classList.toggle('is-active', enabled);\n this.button.title = `${name}: ${enabled ? 'on' : 'off'} (hold to adjust)`;\n }\n\n setMobileHost(host = null) {\n this.button.classList.toggle('nca-mobile-circle', !!host);\n for (const className of DESKTOP_CLASSES) this.button.classList.toggle(className, !host);\n this.registration.mount(host);\n }\n\n destroy() {\n this.tuning?.destroy();\n this.unsubscribe?.();\n this.button.removeEventListener('click', this.onClick);\n this.registration.release();\n }\n}\n\n/** Lens shortcuts in display order: aberration, DOF, film grain. */\nexport function createLensControls({ settings, controlBar = getHudControlBar() } = {}) {\n return LENS_TOGGLES.map((definition) => new LensToggleControl({ settings, definition, controlBar }));\n}\n","import { getHudControlBar } from './HudControlBar.js';\nimport { getHudIcon } from './HudIcons.js';\nimport { ensureHudPanelStyles } from './HudSlots.js';\nimport { areWeatherCloudsEnabled } from '../weather/SceneWeatherState.js';\n\nconst CLOUD_LAYERS = ['clouds', 'orbitClouds', 'simpleClouds'];\nconst previousLayers = new WeakMap();\n\nexport function areSceneCloudsEnabled(settings) {\n return areWeatherCloudsEnabled(settings);\n}\n\n/** One settings patch; preserve authored quality, coverage and lighting. */\nexport function toggleSceneClouds(settings) {\n if (!settings?.updateScene) return;\n const current = Object.fromEntries(CLOUD_LAYERS.map(layer => [layer,\n settings.getSection?.(`scene.atmosphere.${layer}.enabled`) === true]));\n const enabled = areSceneCloudsEnabled(settings);\n if (enabled) previousLayers.set(settings, current);\n const restore = previousLayers.get(settings) || { clouds: true, orbitClouds: false, simpleClouds: true };\n const atmosphere = Object.fromEntries(CLOUD_LAYERS.map(layer => [layer, {\n enabled: !enabled && restore[layer],\n }]));\n return settings.updateScene({ atmosphere });\n}\n\n/** Desktop shortcut; mobile uses the same setting helpers inside Quick Actions. */\nexport class CloudsControl {\n constructor({ settings, controlBar = getHudControlBar() }) {\n this.settings = settings;\n ensureHudPanelStyles();\n this.button = document.createElement('button');\n this.button.type = 'button';\n this.button.className = 'nca-clouds nca-hud-pill nca-hud-pill--square nca-hud-panel--top-right';\n this.button.setAttribute('aria-label', 'Clouds');\n this.button.innerHTML = getHudIcon('cloud');\n this.onClick = () => toggleSceneClouds(this.settings);\n this.button.addEventListener('click', this.onClick);\n this.unsubscribe = settings?.subscribe?.(() => this.update());\n this.registration = controlBar.register({ id: 'clouds', element: this.button, order: 40 });\n this.update();\n }\n\n update() {\n const enabled = areSceneCloudsEnabled(this.settings);\n this.button.setAttribute('aria-pressed', String(enabled));\n this.button.classList.toggle('is-active', enabled);\n this.button.title = enabled ? 'Hide clouds' : 'Show clouds';\n }\n\n destroy() {\n this.unsubscribe?.();\n this.button.removeEventListener('click', this.onClick);\n this.registration.release();\n }\n}\n","import { getHudControlBar } from './HudControlBar.js';\nimport { getHudIcon } from './HudIcons.js';\nimport { ensureHudPanelStyles } from './HudSlots.js';\n\n/** Desktop shortcut for the same saved audio setting used by mobile and sidebar. */\nexport class SceneAudioControl {\n constructor({ settings, controlBar = getHudControlBar() }) {\n this.settings = settings;\n ensureHudPanelStyles();\n this.button = document.createElement('button');\n this.button.type = 'button';\n this.button.className = 'nca-scene-audio nca-hud-pill nca-hud-pill--square nca-hud-panel--top-right';\n this.button.setAttribute('aria-label', 'Scene audio');\n this.button.innerHTML = getHudIcon('speaker');\n this.onClick = () => settings?.updateScene?.({ audio: { enabled: settings.getSection('scene.audio.enabled') === false } });\n this.button.addEventListener('click', this.onClick);\n this.unsubscribe = settings?.subscribe?.(() => this.update());\n this.registration = controlBar.register({ id: 'scene-audio', element: this.button, order: 30 });\n this.update();\n }\n\n update() {\n const enabled = this.settings?.getSection?.('scene.audio.enabled') !== false;\n this.button.setAttribute('aria-pressed', String(enabled));\n this.button.classList.toggle('is-active', enabled);\n this.button.title = enabled ? 'Mute scene audio' : 'Enable scene audio';\n }\n\n destroy() {\n this.unsubscribe?.();\n this.button.removeEventListener('click', this.onClick);\n this.registration.release();\n }\n}\n","import { AUTH_LIFECYCLE_EVENT } from './AuthService.js';\n\nconst TRANSITION_EVENTS = new Set([\n AUTH_LIFECYCLE_EVENT.SESSION_ESTABLISHED,\n AUTH_LIFECYCLE_EVENT.SESSION_RESOLVED,\n AUTH_LIFECYCLE_EVENT.IDENTITY_UPDATED,\n AUTH_LIFECYCLE_EVENT.SNAPSHOT,\n]);\n\nexport function getPreferenceIdentityKey(state) {\n if (!state?.isAuthenticated) return null;\n const userId = state.user?.userId || state.user?.id || null;\n const deviceId = state.device?.deviceId\n || state.device?.device_id\n || state.deviceId\n || state.device_id\n || null;\n if (!deviceId) return null;\n return `${userId || 'account'}:${deviceId}`;\n}\n\nconst transitionIsResolved = (state, event) => {\n if (event?.type === AUTH_LIFECYCLE_EVENT.SESSION_ESTABLISHED) return true;\n return state?.resolved === true;\n};\n\n/**\n * Owns the two independent freshness decisions for cloud preference imports:\n * account/device lifecycle and the local settings revision captured at fetch.\n */\nexport class PreferenceImportGate {\n constructor({ AbortControllerClass = globalThis.AbortController } = {}) {\n this._AbortControllerClass = AbortControllerClass;\n this._identityKey = null;\n this._localRevision = 0;\n this._generation = 0;\n this._active = null;\n }\n\n get identityKey() {\n return this._identityKey;\n }\n\n get localRevision() {\n return this._localRevision;\n }\n\n noteLocalChange() {\n this._localRevision += 1;\n return this._localRevision;\n }\n\n observeAuth(state, event = { type: AUTH_LIFECYCLE_EVENT.SNAPSHOT }) {\n const nextIdentityKey = getPreferenceIdentityKey(state);\n if (!nextIdentityKey) {\n const changed = this._identityKey !== null;\n this._identityKey = null;\n if (changed || this._active) this.invalidate('signed-out');\n return { shouldImport: false, changed, identityKey: null };\n }\n\n const eligible = event?.type !== AUTH_LIFECYCLE_EVENT.CREDENTIAL_REFRESHED\n && TRANSITION_EVENTS.has(event?.type)\n && transitionIsResolved(state, event);\n if (!eligible || nextIdentityKey === this._identityKey) {\n return { shouldImport: false, changed: false, identityKey: this._identityKey };\n }\n\n const previousIdentityKey = this._identityKey;\n this._identityKey = nextIdentityKey;\n this.invalidate('identity-transition');\n return {\n shouldImport: true,\n changed: previousIdentityKey !== nextIdentityKey,\n identityKey: nextIdentityKey,\n previousIdentityKey,\n };\n }\n\n begin(identityKey = this._identityKey) {\n if (!identityKey || identityKey !== this._identityKey) return null;\n this.invalidate('superseded');\n const controller = this._AbortControllerClass\n ? new this._AbortControllerClass()\n : null;\n const ticket = Object.freeze({\n generation: this._generation,\n identityKey,\n localRevision: this._localRevision,\n controller,\n signal: controller?.signal,\n });\n this._active = ticket;\n return ticket;\n }\n\n inspect(ticket) {\n if (!ticket || ticket !== this._active) return { current: false, reason: 'superseded' };\n if (ticket.generation !== this._generation) return { current: false, reason: 'generation' };\n if (ticket.signal?.aborted) return { current: false, reason: 'aborted' };\n if (ticket.identityKey !== this._identityKey) return { current: false, reason: 'identity' };\n if (ticket.localRevision !== this._localRevision) return { current: false, reason: 'local-change' };\n return { current: true, reason: null };\n }\n\n settle(ticket) {\n if (ticket === this._active) this._active = null;\n }\n\n invalidate(reason = 'invalidated') {\n this._generation += 1;\n const active = this._active;\n this._active = null;\n if (active?.controller && !active.signal?.aborted) {\n active.controller.abort(reason);\n }\n }\n\n destroy() {\n this.invalidate('destroyed');\n this._identityKey = null;\n }\n}\n","/**\n * Local preference edits that have not yet reached the account copy.\n *\n * Cloud preferences are imported when an account/device session resolves,\n * which can be seconds after load, or on a later load. The import gate only\n * rejects edits made while that fetch is in flight. An earlier edit (for\n * example turning labels off before the session resolved, or while signed\n * out, when saves are skipped) was otherwise overwritten by the older cloud\n * copy, so the setting appeared to switch itself back on later.\n *\n * Edits are recorded and persisted on this device until a cloud save that\n * included them succeeds. After an import they are reapplied on top: the\n * user's newer local choice wins, and reapplying saves the merged result.\n */\nconst STORAGE_KEY = 'noclip.preferences.pendingLocalEdits';\n\nconst isPlainObject = (value) => value !== null && typeof value === 'object' && !Array.isArray(value);\n\nconst merge = (target, source) => {\n const out = isPlainObject(target) ? { ...target } : {};\n for (const [key, value] of Object.entries(source || {})) {\n out[key] = isPlainObject(value) ? merge(out[key], value) : (Array.isArray(value) ? value.slice() : value);\n }\n return out;\n};\n\nexport class PendingPreferenceEdits {\n constructor({ storage = globalThis.localStorage } = {}) {\n this._storage = storage || null;\n this._revision = 0;\n this._submittedRevision = 0;\n this._patch = this._load();\n }\n\n _load() {\n try {\n const parsed = JSON.parse(this._storage?.getItem?.(STORAGE_KEY) || 'null');\n return isPlainObject(parsed) ? parsed : null;\n } catch {\n return null;\n }\n }\n\n _persist() {\n try {\n if (this._patch) this._storage?.setItem?.(STORAGE_KEY, JSON.stringify(this._patch));\n else this._storage?.removeItem?.(STORAGE_KEY);\n } catch {\n // Storage is best-effort; the in-memory record still protects this session.\n }\n }\n\n /** A user-originated settings patch (never an import or a reset). */\n record(patch) {\n if (!isPlainObject(patch) || !Object.keys(patch).length) return;\n this._patch = merge(this._patch, patch);\n this._revision += 1;\n this._persist();\n }\n\n get() {\n return this._patch ? merge({}, this._patch) : null;\n }\n\n /** A cloud save was requested containing everything recorded so far. */\n markSubmitted() {\n this._submittedRevision = this._revision;\n }\n\n /** The submitted save landed; drop edits it covered, keep any newer ones. */\n confirmSaved() {\n if (!this._patch || this._submittedRevision !== this._revision) return;\n this._patch = null;\n this._persist();\n }\n\n clear() {\n this._patch = null;\n this._revision += 1;\n this._submittedRevision = this._revision;\n this._persist();\n }\n}\n","import { prepareDesktopSidebarPanel } from '../ui/SidebarMenuSystem.js';\nimport { getAuthService } from './AuthService.js';\nimport { AccountPanelScope } from './AccountPanelScope.js';\nimport { patchStableHtml, clearStableHtml, bindStableEvent } from '../ui/StableDom.js';\nconst escape=value=>String(value??'').replace(/[&<>\"']/g,c=>({'&':'&','<':'<','>':'>','\"':'"',\"'\":'''}[c]));\n\nconst formatWhen = (value) => {\n if (!value) return 'Never used';\n try {\n return `Last used ${new Intl.DateTimeFormat(undefined, {\n dateStyle: 'medium',\n timeStyle: 'short',\n }).format(new Date(value))}`;\n } catch {\n return 'Previously used';\n }\n};\n\nexport class AuthMethodsPanel {\n constructor({ authService = getAuthService() } = {}) {\n this.authService = authService;\n this.scope = new AccountPanelScope();\n this.loading = false;\n this.passkeys = [];\n this.canEnroll = false;\n this.element = this._build();\n this._injectStyles();\n this.unsubscribe = this.authService.subscribe((state,event) => this._handleAuthState(state,event));\n this._handleAuthState(this.authService.getState());\n }\n\n _injectStyles() {\n if (document.getElementById('auth-methods-panel-styles')) return;\n const style = document.createElement('style');\n style.id = 'auth-methods-panel-styles';\n style.textContent = `\n .auth-methods-panel { display:flex; flex-direction:column; gap:10px; padding:12px; border:1px solid rgba(255,255,255,.18); border-radius:10px; background:rgba(255,255,255,.035); }\n .auth-methods-panel[hidden] { display:none; }\n .auth-methods-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }\n .auth-methods-title { color:#fff; font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }\n .auth-methods-badge { color:#f5c451; border:1px solid rgba(245,196,81,.35); border-radius:999px; padding:2px 7px; font:10px/1.3 'IBM Plex Mono',monospace; }\n .auth-methods-name { width:100%; box-sizing:border-box; min-height:38px; border:1px solid rgba(255,255,255,.18); border-radius:7px; background:#111; color:#fff; padding:8px 10px; }\n .auth-methods-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }\n .auth-methods-action { min-height:42px; border:1px solid rgba(255,255,255,.2); border-radius:8px; background:rgba(255,255,255,.06); color:#fff; padding:8px; text-align:center; cursor:pointer; }\n .auth-methods-action:hover { border-color:#f5c451; background:rgba(245,196,81,.08); }\n .auth-methods-action:disabled { opacity:.45; cursor:not-allowed; }\n .auth-methods-action strong { display:block; font-size:11px; }\n .auth-methods-status { min-height:16px; color:rgba(255,255,255,.6); font-size:10px; line-height:1.45; }\n .auth-methods-status[data-tone=\"error\"] { color:#f97373; }\n .auth-methods-status[data-tone=\"ok\"] { color:#4ade80; }\n .auth-methods-list { display:flex; flex-direction:column; gap:7px; }\n .auth-method-row { border-top:1px solid rgba(255,255,255,.1); padding-top:9px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:start; }\n .auth-method-name { color:#fff; font-size:11px; overflow-wrap:anywhere; }\n .auth-method-meta { color:rgba(255,255,255,.5); font-size:9px; line-height:1.45; margin-top:3px; }\n .auth-method-remove { border:1px solid rgba(249,115,115,.35); border-radius:6px; background:transparent; color:#f9a3a3; padding:5px 7px; font-size:9px; cursor:pointer; }\n .auth-method-remove-form { grid-column:1/-1; display:flex; gap:6px; }\n .auth-method-remove-form[hidden] { display:none; }\n .auth-method-remove-form input { flex:1; min-width:0; border:1px solid rgba(255,255,255,.2); border-radius:6px; background:#111; color:#fff; padding:7px 8px; font-size:10px; }\n .auth-method-remove-form button { border:1px solid rgba(249,115,115,.5); border-radius:6px; background:rgba(249,115,115,.12); color:#fff; padding:6px 8px; font-size:9px; cursor:pointer; }\n @media (max-width:430px) { .auth-methods-actions { grid-template-columns:1fr; } }\n `;\n document.head.appendChild(style);\n }\n\n _build() {\n const section = document.createElement('section');\n section.className = 'auth-methods-panel';\n section.hidden = true;\n section.innerHTML = `\n \n Sign-in methods\n WebAuthn\n
\n \n \n \n \n
\n \n \n `;\n section.querySelectorAll('[data-enroll]').forEach((button) => {\n button.addEventListener('click', () => this._enroll(button.dataset.enroll));\n });\n return section;\n }\n\n _setStatus(message, tone = '') {\n const status = this.element.querySelector('.auth-methods-status');\n status.textContent = message || '';\n status.dataset.tone = tone;\n }\n\n _setBusy(busy) {\n this.loading = busy;\n this.element.querySelectorAll('button, input').forEach((element) => {\n element.disabled = busy || (element.matches('[data-enroll]') && !this.canEnroll);\n });\n }\n\n async _handleAuthState(state,event) {\n if(!this.scope.observe(state,event))return;\n this.element.hidden=!state?.isAuthenticated;\n this.loading=false;this.passkeys=[];this.canEnroll=false;\n this.element.querySelector('.auth-methods-name').value='My passkey';\n clearStableHtml(this.element.querySelector('.auth-methods-list'));\n this._render();\n if(!state?.isAuthenticated){this._setStatus('');this._setBusy(false);return;}\n await this.refresh();\n }\n\n async refresh() {\n if(this.loading||this.element.hidden)return;\n const owner=this.scope.request(),cold=this.passkeys.length===0;\n if(cold){this._setBusy(true);this._setStatus('Loading sign-in methods…');}else this.loading=true;\n try{\n const data=await this.authService.listPasskeys({signal:owner.signal});\n if(!this.scope.current(owner))return;\n this.passkeys=Array.isArray(data?.passkeys)?data.passkeys:[];this.canEnroll=data?.canEnroll===true;\n this._render();this._setStatus(this.canEnroll?'Ready to add a passkey from this password-authenticated session.':'To add another passkey, sign out and sign back in with your password.');\n }catch(error){if(this.scope.current(owner))this._setStatus(error?.message||'Could not load sign-in methods.','error');}\n finally{if(this.scope.current(owner))this._setBusy(false);}\n }\n\n async _enroll(preference) {\n if (this.loading || !this.canEnroll) return;\n const nameInput = this.element.querySelector('.auth-methods-name');\n const fallback = preference === 'platform' ? 'This device' : 'YubiKey';\n const name = nameInput.value.trim() || fallback;\n const owner=this.scope.request();\n this._setBusy(true);\n this._setStatus(preference === 'platform'\n ? 'Follow your browser’s secure passkey prompt…'\n : 'Touch your YubiKey and complete its secure PIN or biometric prompt…');\n try {\n await this.authService.registerPasskey({ name, preference });\n if(!this.scope.current(owner))return;\n this._setStatus('Passkey added. It can now be used from the sign-in screen.', 'ok');\n const data = await this.authService.listPasskeys({signal:owner.signal});\n if(!this.scope.current(owner))return;\n this.passkeys = Array.isArray(data?.passkeys) ? data.passkeys : [];\n this.canEnroll = data?.canEnroll === true;\n this._render();\n } catch (error) {\n if(this.scope.current(owner))this._setStatus(error?.message || 'Passkey enrollment failed.', 'error');\n } finally {\n if(this.scope.current(owner))this._setBusy(false);\n }\n }\n\n _render() {\n const list=this.element.querySelector('.auth-methods-list');\n if(!this.passkeys.length){patchStableHtml(list,'No passkeys enrolled yet. Password sign-in remains available.
');return;}\n patchStableHtml(list,this.passkeys.map(passkey=>{\n const kind=passkey.attachment==='platform'?'This device':passkey.attachment==='cross-platform'?'Security key':'Passkey';\n return `${escape(passkey.name||'Passkey')}
${kind}${passkey.backedUp?' · synced/backup eligible':''} · ${escape(formatWhen(passkey.lastUsedAt))}
\n
\n \n
\n
Enable Device Sensors
\n
Allow access to orientation and motion sensors for an immersive experience.
\n
\n
\n
GPS follows your location in NOCLIP; sensor access is separate.
\n
\n
\n \n
\n Permission Denied
\n Sensor access was denied. Please enable it in your device settings to use orientation features.
\n \n `;\n\n const closeBtn = panel.querySelector('#device-sensor-close');\n closeBtn?.addEventListener('click', () => this._hideOverlay());\n }\n\n _showCalibrationOverlay() {\n if (this._overlay) this._hideOverlay();\n\n this._overlay = document.createElement('div');\n this._overlay.className = 'device-sensor-overlay calibration';\n this._overlay.innerHTML = `\n \n
\n
\n
\n
Compass Calibration
\n
Hold your device upright and face North to calibrate compass.
\n
\n
\n
\n \n Device upright\n
\n
\n \n Not tilted\n
\n
\n \n Compass ready\n
\n
\n
\n
\n
Calibration Complete!
\n Your compass is now aligned. Enjoy the immersive experience!
\n \n `;\n\n const doneBtn = panel.querySelector('#device-sensor-done');\n doneBtn?.addEventListener('click', () => this._hideOverlay());\n }\n\n _hideOverlay() {\n this._stopCalibrationCheck();\n if (this._overlay && this._overlay.parentNode) {\n this._overlay.parentNode.removeChild(this._overlay);\n }\n this._overlay = null;\n this._calibrationMode = false;\n }\n\n _onSensorsEnabled() {\n // Start HUD updates\n this._startHudUpdates();\n\n if (this.onSensorsEnabled) {\n this.onSensorsEnabled(this.sensors);\n }\n }\n\n _onCalibrationComplete(data) {\n this.hudStore.setValue('device.calibrated', 'Yes');\n\n if (this.onCalibrationComplete) {\n this.onCalibrationComplete(data);\n }\n }\n\n _startHudUpdates() {\n // Update HUD status\n this.hudStore.setValue('device.status', this.sensors.enabled ? 'Active' : 'Inactive');\n this.hudStore.setValue('device.calibrated', this.sensors.ready ? 'Yes' : 'No');\n\n // Periodic updates for metrics\n if (this._hudUpdateInterval) return;\n this._hudUpdateInterval = setInterval(() => {\n if (!this.sensors.enabled) return;\n this._updateHudMetrics();\n this._updateHeadingMetrics();\n }, 100);\n }\n\n _updateHudMetrics(_data) {\n const orient = this.sensors.orient;\n if (orient.ready) {\n this.hudStore.setValue('device.alpha', orient.a.toFixed(1) + '°');\n this.hudStore.setValue('device.beta', orient.b.toFixed(1) + '°');\n this.hudStore.setValue('device.gamma', orient.g.toFixed(1) + '°');\n }\n\n this.hudStore.setValue('device.yaw', (this.sensors.yaw * 180 / Math.PI).toFixed(1) + '°');\n this.hudStore.setValue('device.pitch', (this.sensors.pitch * 180 / Math.PI).toFixed(1) + '°');\n this.hudStore.setValue('device.roll', (this.sensors.roll * 180 / Math.PI).toFixed(1) + '°');\n }\n\n _updateHeadingMetrics(_data) {\n if (Number.isFinite(this.sensors.headingDeg)) {\n this.hudStore.setValue('device.heading', this.sensors.headingDeg.toFixed(1) + '°');\n this.hudStore.setValue('device.headingSrc', this.sensors.headingSource);\n } else {\n this.hudStore.setValue('device.heading', '--');\n this.hudStore.setValue('device.headingSrc', '--');\n }\n }\n\n _injectStyles() {\n if (document.getElementById('device-sensor-panel-styles')) return;\n\n const style = document.createElement('style');\n style.id = 'device-sensor-panel-styles';\n style.textContent = `\n .device-sensor-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 25000;\n padding: 20px;\n }\n\n .device-sensor-panel {\n background: #1a1a1a;\n border: 1px solid #333;\n border-radius: 16px;\n padding: 32px 24px;\n max-width: 320px;\n max-height: calc(100dvh - 40px);\n overflow-y: auto;\n width: 100%;\n text-align: center;\n font-family: 'Chakra Petch', system-ui, sans-serif;\n }\n\n .device-sensor-icon {\n width: 80px;\n height: 80px;\n margin: 0 auto 24px;\n color: var(--accent, #ffffff);\n }\n\n .device-sensor-icon.error {\n color: #e74c3c;\n }\n\n .device-sensor-icon.success {\n color: #50c878;\n }\n\n .device-sensor-icon.calibrating {\n animation: pulse 2s ease-in-out infinite;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n\n .device-sensor-icon svg {\n width: 100%;\n height: 100%;\n }\n\n .device-sensor-panel h2 {\n margin: 0 0 12px;\n font-size: 20px;\n font-weight: 500;\n color: #fff;\n }\n\n .device-sensor-panel p {\n margin: 0 0 24px;\n font-size: 14px;\n color: rgba(255, 255, 255, 0.7);\n line-height: 1.5;\n }\n\n .device-sensor-btn {\n display: block;\n width: 100%;\n padding: 14px 20px;\n border: none;\n border-radius: 8px;\n font-family: inherit;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n margin-bottom: 12px;\n }\n\n .device-sensor-btn:last-child {\n margin-bottom: 0;\n }\n\n .device-sensor-btn.primary {\n background: var(--accent, #ffffff);\n color: #000;\n }\n\n .device-sensor-btn.primary:hover {\n background: #ffbe33;\n }\n\n .device-sensor-btn.primary:disabled {\n background: #666;\n color: #999;\n cursor: not-allowed;\n }\n\n .device-sensor-btn.secondary {\n background: transparent;\n color: rgba(255, 255, 255, 0.6);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n\n .device-sensor-btn.secondary:hover {\n background: rgba(255, 255, 255, 0.05);\n color: #fff;\n }\n\n .calibration-indicator {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n margin-bottom: 20px;\n }\n\n .calibration-ring {\n width: 60px;\n height: 60px;\n border: 2px solid var(--accent, #ffffff);\n border-radius: 50%;\n position: relative;\n }\n\n .calibration-dot {\n position: absolute;\n top: -4px;\n left: 50%;\n transform: translateX(-50%);\n width: 8px;\n height: 8px;\n background: var(--accent, #ffffff);\n border-radius: 50%;\n }\n\n .calibration-heading {\n font-size: 24px;\n font-weight: 600;\n color: var(--accent, #ffffff);\n font-family: 'Chakra Petch', monospace;\n }\n\n .calibration-status {\n font-size: 13px !important;\n min-height: 40px;\n }\n\n .calibration-checks {\n display: flex;\n flex-direction: column;\n gap: 8px;\n margin-bottom: 20px;\n text-align: left;\n }\n\n .check-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 13px;\n color: rgba(255, 255, 255, 0.5);\n transition: color 0.2s ease;\n }\n\n .check-item.passed {\n color: #50c878;\n }\n\n .check-item.failed {\n color: rgba(255, 255, 255, 0.4);\n }\n\n .check-icon {\n width: 16px;\n height: 16px;\n border: 2px solid currentColor;\n border-radius: 50%;\n position: relative;\n }\n\n .check-item.passed .check-icon::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 8px;\n height: 8px;\n background: currentColor;\n border-radius: 50%;\n }\n\n /* Camera Modal Button Styles - matching device-sensor-btn patterns */\n .primary-btn,\n .secondary-btn, \n .da3-btn,\n .cancel-btn {\n display: block;\n width: 100%;\n padding: 14px 20px;\n border: none;\n border-radius: 8px;\n font-family: inherit;\n font-size: 15px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n margin-bottom: 12px;\n box-sizing: border-box;\n }\n\n .primary-btn {\n background: var(--accent, #ffffff);\n color: #000;\n }\n\n .primary-btn:hover {\n background: #ffbe33;\n }\n\n .primary-btn:disabled {\n background: #666;\n color: #999;\n cursor: not-allowed;\n }\n\n .secondary-btn {\n background: transparent;\n color: rgba(255, 255, 255, 0.6);\n border: 1px solid rgba(255, 255, 255, 0.2);\n }\n\n .secondary-btn:hover {\n background: rgba(255, 255, 255, 0.05);\n color: #fff;\n }\n\n .da3-btn {\n background: #28a745;\n color: white;\n border: none;\n }\n\n .da3-btn:hover {\n background: #218838;\n }\n\n .da3-btn:disabled {\n background: #666;\n color: #999;\n cursor: not-allowed;\n }\n\n .cancel-btn {\n background: #dc3545;\n color: white;\n border: none;\n }\n\n .cancel-btn:hover {\n background: #c82333;\n }\n\n .cancel-btn:disabled {\n background: #666;\n color: #999;\n cursor: not-allowed;\n }\n\n .camera-readouts {\n display: grid;\n gap: 8px;\n margin: 12px 0 6px;\n font-size: 12px;\n color: #ccc;\n }\n\n .camera-provider-field {\n display: grid;\n gap: 6px;\n margin: 0 0 8px;\n color: rgba(255, 255, 255, 0.72);\n font-size: 12px;\n text-align: left;\n }\n\n .camera-provider-field select {\n min-height: 42px;\n width: 100%;\n border: 1px solid rgba(255, 255, 255, 0.22);\n border-radius: 8px;\n background: #111;\n color: #fff;\n padding: 8px 10px;\n font: inherit;\n }\n\n .camera-provider-benefit,\n .camera-provider-usage {\n margin: 0 0 8px;\n color: rgba(255, 255, 255, 0.72);\n font-size: 11px;\n line-height: 1.4;\n text-align: left;\n }\n\n .camera-provider-usage {\n color: #8ee6bd;\n margin-bottom: 12px;\n }\n\n .camera-readout {\n display: flex;\n justify-content: space-between;\n gap: 12px;\n }\n\n .camera-readout-label {\n color: rgba(255, 255, 255, 0.7);\n }\n\n .camera-readout-value {\n color: #fff;\n font-variant-numeric: tabular-nums;\n text-align: right;\n }\n\n .camera-actions {\n display: flex;\n gap: 8px;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n /* Special styling for inline camera controls */\n .camera-controls .device-sensor-btn.primary,\n .camera-controls .device-sensor-btn.secondary,\n .camera-controls .device-sensor-btn.da3-btn {\n display: inline-block;\n width: auto;\n margin: 0 4px;\n }\n\n /* Button spinner animation */\n .btn-spinner {\n display: inline-block;\n width: 16px;\n height: 16px;\n border: 2px solid transparent;\n border-top-color: currentColor;\n border-radius: 50%;\n animation: spin 0.8s linear infinite;\n margin-left: 8px;\n vertical-align: middle;\n }\n\n @keyframes spin {\n to { transform: rotate(360deg); }\n }\n `;\n document.head.appendChild(style);\n }\n\n /**\n * Manually show the calibration overlay\n */\n showCalibration() {\n if (!this.sensors.enabled) {\n this._showPermissionOverlay();\n } else {\n this._showCalibrationOverlay();\n }\n }\n\n /**\n * Show GPS location overlay\n */\n showGPSLocation() {\n this._showGPSOverlay();\n }\n\n _showGPSOverlay() {\n if (this._overlay) this._hideOverlay();\n\n this._overlay = document.createElement('div');\n this._overlay.className = 'device-sensor-overlay gps';\n this._overlay.innerHTML = `\n \n
\n
GPS Location
\n
Tap to get your real-world location and teleport to it in the scene.
\n
\n
\n
\n Latitude:\n --\n
\n
\n Longitude:\n --\n
\n
\n Altitude:\n --\n
\n
\n Accuracy:\n --\n
\n
\n
\n
Collecting GPS samples for accuracy...
\n
\n
\n
\n
\n
\n \n
\n
Camera Capture
\n
${providerDescription} Both modes preserve the current GPS and phone orientation anchor.
\n\n
\n
${providerDescription}
\n
${this._formatCaptureUsage(this._cameraOptions?.usage)}
\n\n
\n
\n Sensors\n --\n
\n
\n GPS\n --\n
\n
\n Altitude\n --\n
\n
\n Heading\n --\n
\n
\n Yaw / Pitch / Roll\n --\n
\n
\n Acceleration\n --\n
\n
\n\n
\n \n \n
\n
\n
Enter Mobile VR?
\n
\n \n \n
\n
\n
\n
${this._esc(eyebrow)}
` : ''}\n ${this._esc(title)}
\n ${body ? `${this._esc(body)}
` : ''}\n ${meta ? `${this._esc(String(meta))}
` : ''}\n `;\n return card;\n }\n\n _createDetailCard(data, type) {\n const card = document.createElement('div');\n card.className = 'nca-card';\n card.style.gridColumn = '1 / -1'; // full width\n\n let html = `${this._esc(type || 'detail')}
`;\n html += '';\n\n for (const [key, value] of Object.entries(data)) {\n if (value === null || value === undefined) continue;\n const label = key.replace(/([A-Z])/g, ' $1').replace(/_/g, ' ').trim();\n html += `\n
\n ${this._esc(label)}\n ${this._esc(String(value))}\n
\n `;\n }\n\n html += '
\n \n \n \n \n
\n `;\n document.body.append(this._backdrop, this._panel);\n this._eyebrow = this._panel.querySelector('.field-asset-composer__eyebrow');\n this._title = this._panel.querySelector('.field-asset-composer__title');\n this._preview = this._panel.querySelector('.field-asset-composer__preview');\n this._snapshot = this._panel.querySelector('.field-asset-composer__snapshot');\n this._status = this._panel.querySelector('.field-asset-composer__status');\n this._name = this._panel.querySelector('[name=\"name\"]');\n this._type = this._panel.querySelector('[name=\"type\"]');\n this._areaRow = this._panel.querySelector('[data-field=\"area-radius\"]');\n this._areaRadius = this._panel.querySelector('[name=\"areaRadius\"]');\n this._address = this._panel.querySelector('[name=\"address\"]');\n this._note = this._panel.querySelector('[name=\"note\"]');\n this._photoRequired = this._panel.querySelector('.field-asset-composer__photo-required');\n this._enable = this._panel.querySelector('[data-action=\"enable\"]');\n this._camera = this._panel.querySelector('[data-action=\"camera\"]');\n this._shutter = this._panel.querySelector('[data-action=\"shutter\"]');\n this._publish = this._panel.querySelector('[data-action=\"publish\"]');\n this._backdrop.addEventListener('click', () => this.close());\n this._panel.querySelector('.field-asset-composer__close').addEventListener('click', () => this.close());\n this._panel.querySelector('form').addEventListener('submit', (event) => event.preventDefault());\n this._enable.addEventListener('click', () => this._enableProof());\n this._type.addEventListener('change', () => this._syncAreaFields());\n this._camera.addEventListener('click', () => this._startCamera());\n this._shutter.addEventListener('click', () => this._capturePhoto());\n this._publish.addEventListener('click', () => this._publishContribution());\n this._onKeyDown = (event) => {\n if (event.key === 'Escape' && !this._panel.hidden) this.close();\n };\n document.addEventListener('keydown', this._onKeyDown);\n }\n\n destroy() {\n this._sessionSequence += 1;\n document.removeEventListener('keydown', this._onKeyDown);\n this.cameraSystem?.destroy?.();\n this.cameraSystem = null;\n this._backdrop.remove();\n this._panel.remove();\n if (_instance === this) _instance = null;\n }\n}\n\nlet _instance = null;\n\nexport function getFieldAssetComposer(options) {\n if (!_instance && options) _instance = new FieldAssetComposer(options);\n return _instance;\n}\n","import { getAuthService } from '../auth/AuthService.js';\nimport { getAccountNoteApiService } from '../notes/AccountNoteApiService.js';\nimport {\n ACCOUNT_NOTE_ACTIVATION_RADIUS_DEFAULT_M,\n ACCOUNT_NOTE_ACTIVATION_RADIUS_MAX_M,\n ACCOUNT_NOTE_ACTIVATION_RADIUS_MIN_M,\n formatAccountNoteActivationRadius,\n normalizeAccountNoteActivationRadius,\n} from '../notes/AccountNoteActivation.js';\nimport './styles/account-notes.css';\n\nconst MAX_IMAGES = 8;\nconst MAX_IMAGE_BYTES = 12 * 1024 * 1024;\nconst clean = (value, max = 10_000) => String(value ?? '').trim().slice(0, max);\n\nfunction normalizeTarget(input = {}) {\n const metadata = input.metadata || input.meta || {};\n const lat = Number(input.lat ?? metadata.lat);\n const lon = Number(input.lon ?? metadata.lon);\n if (!Number.isFinite(lat) || !Number.isFinite(lon)) return null;\n return {\n lat,\n lon,\n type: clean(input.type || input.entityType || metadata.entityType || 'place', 80),\n id: clean(input.sourceId || input.id || metadata.id || '', 300),\n name: clean(input.name || input.label || input.address || metadata.name || 'Map location', 200),\n address: clean(input.address || metadata.address || '', 240),\n metadata: {\n category: input.category || metadata.category || null,\n source: metadata.source || null,\n sourceUrl: metadata.sourceUrl || null,\n address: clean(input.address || metadata.address || '', 240),\n },\n };\n}\n\nexport class AccountNoteComposer {\n constructor({\n scene = null,\n api = getAccountNoteApiService(),\n authService = getAuthService(),\n } = {}) {\n this.scene = scene;\n this.api = api;\n this.authService = authService;\n this._target = null;\n this._note = null;\n this._newImages = [];\n this._removedAttachmentIds = new Set();\n this._objectUrls = new Set();\n this._busy = false;\n this._sequence = 0;\n this._build();\n }\n\n async _requireAuth() {\n await this.authService.whenResolved?.();\n if (this.authService.getState().isAuthenticated) return true;\n const { getAuthModal } = await import('../auth/AuthModal.js');\n getAuthModal().show?.({ source: 'account-note' });\n return false;\n }\n\n async openCreate(target) {\n if (!(await this._requireAuth())) return false;\n const normalized = normalizeTarget(target);\n if (!normalized) return false;\n this._open({ target: normalized, note: null });\n return true;\n }\n\n async openEdit(note) {\n if (!(await this._requireAuth()) || !note?.noteId) return false;\n const target = normalizeTarget({\n ...(note.target || {}),\n lat: note.lat,\n lon: note.lon,\n name: note.target?.name || note.title,\n });\n if (!target) return false;\n this._open({ target, note });\n return true;\n }\n\n _open({ target, note }) {\n this._sequence += 1;\n this._target = target;\n this._note = note;\n this._newImages = [];\n this._removedAttachmentIds.clear();\n this._revokeUrls();\n this._title.value = note?.title || (target.name ? `Note: ${target.name}` : 'Location note');\n this._body.value = note?.body || '';\n this._privacy.value = note?.visibility === 'public' ? 'public' : 'private';\n this._activationRadius.value = String(normalizeAccountNoteActivationRadius(\n note?.activationRadiusM,\n ACCOUNT_NOTE_ACTIVATION_RADIUS_DEFAULT_M,\n ));\n this._location.textContent = [target.name, target.address, `${target.lat.toFixed(6)}, ${target.lon.toFixed(6)}`]\n .filter(Boolean).join(' · ');\n this._heading.textContent = note ? 'Edit note' : 'Leave a note';\n this._syncPrivacyPresentation();\n this._save.textContent = note ? 'Save changes' : 'Save note';\n this._delete.hidden = !note;\n this._file.value = '';\n this._setStatus(this._privacyStatusText(), 'idle');\n this._backdrop.hidden = false;\n this._panel.hidden = false;\n document.body.classList.add('account-note-composer-open');\n this._renderImages();\n this._body.focus?.();\n }\n\n close() {\n this._sequence += 1;\n this._backdrop.hidden = true;\n this._panel.hidden = true;\n document.body.classList.remove('account-note-composer-open');\n this._revokeUrls();\n this._newImages = [];\n this._removedAttachmentIds.clear();\n this._target = null;\n this._note = null;\n }\n\n _revokeUrls() {\n for (const url of this._objectUrls) URL.revokeObjectURL(url);\n this._objectUrls.clear();\n }\n\n _remainingExisting() {\n return (this._note?.attachments || []).filter(\n (attachment) => !this._removedAttachmentIds.has(attachment.attachmentId),\n );\n }\n\n _onFiles(files) {\n const remainingSlots = Math.max(0, MAX_IMAGES - this._remainingExisting().length - this._newImages.length);\n const accepted = [];\n for (const file of Array.from(files || []).slice(0, remainingSlots)) {\n if (!['image/png', 'image/jpeg', 'image/webp'].includes(file.type)) continue;\n if (file.size > MAX_IMAGE_BYTES) continue;\n accepted.push(file);\n }\n this._newImages.push(...accepted);\n this._file.value = '';\n this._renderImages();\n if (accepted.length < Math.min(Array.from(files || []).length, remainingSlots)) {\n this._setStatus('Some images were skipped. Use PNG, JPEG, or WebP up to 12 MB each.', 'error');\n }\n }\n\n _imageCard({ name, subtitle, src = '', onRemove }) {\n const card = document.createElement('div');\n card.className = 'account-note-composer__image';\n const preview = document.createElement('div');\n preview.className = 'account-note-composer__image-preview';\n if (src) {\n const img = document.createElement('img');\n img.src = src;\n img.alt = '';\n preview.appendChild(img);\n }\n const copy = document.createElement('span');\n copy.className = 'account-note-composer__image-copy';\n const label = document.createElement('strong');\n label.textContent = name;\n const meta = document.createElement('small');\n meta.textContent = subtitle;\n copy.append(label, meta);\n const remove = document.createElement('button');\n remove.type = 'button';\n remove.textContent = 'Remove';\n remove.addEventListener('click', onRemove);\n card.append(preview, copy, remove);\n return { card, preview };\n }\n\n _renderImages() {\n const sequence = this._sequence;\n this._revokeUrls();\n this._images.replaceChildren();\n for (const attachment of this._remainingExisting()) {\n const { card, preview } = this._imageCard({\n name: attachment.fileName || 'Attached image',\n subtitle: attachment.bytes ? `${(attachment.bytes / 1024 / 1024).toFixed(1)} MB` : 'Saved image',\n onRemove: () => {\n this._removedAttachmentIds.add(attachment.attachmentId);\n this._renderImages();\n },\n });\n this._images.appendChild(card);\n void this.api.getAttachmentBlob(this._note.noteId, attachment.attachmentId).then((blob) => {\n if (sequence !== this._sequence || !card.isConnected) return;\n const url = URL.createObjectURL(blob);\n this._objectUrls.add(url);\n const img = document.createElement('img');\n img.src = url;\n img.alt = '';\n preview.replaceChildren(img);\n }).catch(() => {});\n }\n this._newImages.forEach((file, index) => {\n const url = URL.createObjectURL(file);\n this._objectUrls.add(url);\n const { card } = this._imageCard({\n name: file.name || 'New image',\n subtitle: `${(file.size / 1024 / 1024).toFixed(1)} MB · new`,\n src: url,\n onRemove: () => {\n this._newImages.splice(index, 1);\n this._renderImages();\n },\n });\n this._images.appendChild(card);\n });\n const count = this._remainingExisting().length + this._newImages.length;\n this._addImages.disabled = this._busy || count >= MAX_IMAGES;\n this._imageCount.textContent = `${count}/${MAX_IMAGES}`;\n }\n\n _payload() {\n return {\n title: clean(this._title.value, 120),\n body: clean(this._body.value),\n lat: this._target.lat,\n lon: this._target.lon,\n activationRadiusM: Number(this._activationRadius.value),\n target: {\n type: this._target.type,\n id: this._target.id,\n name: this._target.name,\n metadata: this._target.metadata,\n },\n visibility: this._privacy.value === 'public' ? 'public' : 'private',\n removeAttachmentIds: [...this._removedAttachmentIds],\n };\n }\n\n async _saveNote() {\n if (this._busy || !this._target) return;\n const input = this._payload();\n if (!input.title) {\n this._setStatus('Add a title.', 'error');\n this._title.focus?.();\n return;\n }\n if (!input.body) {\n this._setStatus('Write the note text before saving.', 'error');\n this._body.focus?.();\n return;\n }\n if (!Number.isFinite(input.activationRadiusM)\n || input.activationRadiusM < ACCOUNT_NOTE_ACTIVATION_RADIUS_MIN_M\n || input.activationRadiusM > ACCOUNT_NOTE_ACTIVATION_RADIUS_MAX_M) {\n this._setStatus(\n `Activation distance must be between ${ACCOUNT_NOTE_ACTIVATION_RADIUS_MIN_M} m and ${formatAccountNoteActivationRadius(ACCOUNT_NOTE_ACTIVATION_RADIUS_MAX_M)}.`,\n 'error',\n );\n this._activationRadius.focus?.();\n return;\n }\n const sequence = this._sequence;\n this._busy = true;\n this._syncButtons();\n this._setStatus(this._note ? 'Updating your note…' : 'Creating your My Notes overlay entry…', 'working');\n try {\n const note = this._note\n ? await this.api.update(this._note.noteId, input, this._newImages)\n : await this.api.create(input, this._newImages);\n if (sequence !== this._sequence) return;\n document.dispatchEvent(new CustomEvent('noclip:account-notes:changed', { detail: { note } }));\n this._setStatus(\n note?.visibility === 'public'\n ? 'Saved publicly to My Notes and published through its overlay access policy.'\n : 'Saved privately to your automatically managed My Notes overlay.',\n 'ready',\n );\n globalThis.setTimeout?.(() => {\n if (sequence === this._sequence) this.close();\n }, 450);\n } catch (error) {\n if (sequence === this._sequence) this._setStatus(error?.message || 'The note could not be saved.', 'error');\n } finally {\n if (sequence === this._sequence) {\n this._busy = false;\n this._syncButtons();\n }\n }\n }\n\n async _deleteNote() {\n if (this._busy || !this._note?.noteId) return;\n if (!confirm(`Delete “${this._note.title}” from My Notes?`)) return;\n const sequence = this._sequence;\n this._busy = true;\n this._syncButtons();\n try {\n await this.api.remove(this._note.noteId);\n if (sequence !== this._sequence) return;\n document.dispatchEvent(new CustomEvent('noclip:account-notes:changed', {\n detail: { removedNoteId: this._note.noteId },\n }));\n this.close();\n } catch (error) {\n if (sequence === this._sequence) this._setStatus(error?.message || 'The note could not be deleted.', 'error');\n } finally {\n if (sequence === this._sequence) {\n this._busy = false;\n this._syncButtons();\n }\n }\n }\n\n _setStatus(message, tone) {\n this._status.textContent = message;\n this._status.dataset.tone = tone;\n }\n\n _privacyStatusText() {\n const radius = formatAccountNoteActivationRadius(this._activationRadius?.value);\n return this._privacy?.value === 'public'\n ? `Public: anyone can discover this note; it activates within ${radius} of its location.`\n : `Private: only your account can discover this note; it activates within ${radius} of its location.`;\n }\n\n _syncPrivacyPresentation() {\n const isPublic = this._privacy?.value === 'public';\n this._eyebrow.textContent = isPublic ? 'Public account note' : 'Private account note';\n this._privacyHint.textContent = isPublic\n ? 'Publishes the managed overlay, Notes layer, and this item while keeping private sibling notes private.'\n : 'Only your account can discover this note.';\n this._activationHint.textContent = `Controls when the note appears in the scene and minimap. It does not change who can access it (${ACCOUNT_NOTE_ACTIVATION_RADIUS_MIN_M} m–${formatAccountNoteActivationRadius(ACCOUNT_NOTE_ACTIVATION_RADIUS_MAX_M)}).`;\n }\n\n _syncButtons() {\n this._save.disabled = this._busy;\n this._delete.disabled = this._busy;\n this._privacy.disabled = this._busy;\n this._activationRadius.disabled = this._busy;\n this._addImages.disabled = this._busy\n || this._remainingExisting().length + this._newImages.length >= MAX_IMAGES;\n }\n\n _build() {\n this._backdrop = document.createElement('div');\n this._backdrop.className = 'account-note-composer-backdrop';\n this._backdrop.hidden = true;\n this._panel = document.createElement('section');\n this._panel.className = 'account-note-composer nclp-dynamic-surface';\n this._panel.hidden = true;\n this._panel.setAttribute('role', 'dialog');\n this._panel.setAttribute('aria-modal', 'true');\n this._panel.setAttribute('aria-label', 'Account note');\n this._panel.innerHTML = `\n \n \n \n \n Images 0/8\n \n \n
\n \n \n `;\n document.body.append(this._backdrop, this._panel);\n this._eyebrow = this._panel.querySelector('.account-note-composer__eyebrow');\n this._heading = this._panel.querySelector('h2');\n this._location = this._panel.querySelector('.account-note-composer__location');\n this._title = this._panel.querySelector('[name=\"title\"]');\n this._body = this._panel.querySelector('[name=\"body\"]');\n this._privacy = this._panel.querySelector('[name=\"visibility\"]');\n this._privacyHint = this._panel.querySelector('.account-note-composer__privacy-hint');\n this._activationRadius = this._panel.querySelector('[name=\"activationRadiusM\"]');\n this._activationHint = this._panel.querySelector('.account-note-composer__activation-hint');\n this._file = this._panel.querySelector('[name=\"images\"]');\n this._images = this._panel.querySelector('.account-note-composer__images');\n this._imageCount = this._panel.querySelector('[data-image-count]');\n this._status = this._panel.querySelector('.account-note-composer__status');\n this._addImages = this._panel.querySelector('[data-action=\"images\"]');\n this._save = this._panel.querySelector('[data-action=\"save\"]');\n this._delete = this._panel.querySelector('[data-action=\"delete\"]');\n this._panel.querySelector('form').addEventListener('submit', (event) => event.preventDefault());\n this._backdrop.addEventListener('click', () => this.close());\n this._panel.querySelector('[data-action=\"close\"]').addEventListener('click', () => this.close());\n this._panel.querySelector('[data-action=\"cancel\"]').addEventListener('click', () => this.close());\n this._addImages.addEventListener('click', () => this._file.click());\n this._file.addEventListener('change', () => this._onFiles(this._file.files));\n this._privacy.addEventListener('change', () => {\n this._syncPrivacyPresentation();\n this._setStatus(this._privacyStatusText(), 'idle');\n });\n this._activationRadius.addEventListener('input', () => {\n this._syncPrivacyPresentation();\n this._setStatus(this._privacyStatusText(), 'idle');\n });\n this._save.addEventListener('click', () => void this._saveNote());\n this._delete.addEventListener('click', () => void this._deleteNote());\n this._onKeyDown = (event) => {\n if (event.key === 'Escape' && !this._panel.hidden) this.close();\n };\n document.addEventListener('keydown', this._onKeyDown);\n }\n\n destroy() {\n document.removeEventListener('keydown', this._onKeyDown);\n this.close();\n this._backdrop.remove();\n this._panel.remove();\n if (instance === this) instance = null;\n }\n}\n\nlet instance = null;\n\nexport function getAccountNoteComposer(options) {\n if (!instance && options) instance = new AccountNoteComposer(options);\n return instance;\n}\n","export const SURFACE_LONG_PRESS_MS = 600;\nexport const SURFACE_LONG_PRESS_MOVE_TOLERANCE_PX = 14;\nexport const SURFACE_LONG_PRESS_CLICK_SUPPRESSION_MS = 750;\n\nconst isTouchPointer = (event) => (\n event?.pointerType === 'touch'\n || event?.pointerType === 'pen'\n);\n\nexport class SurfaceLongPressController {\n constructor({\n element,\n enabled = () => true,\n acceptsTarget = () => true,\n pickTarget,\n onLongPress,\n durationMs = SURFACE_LONG_PRESS_MS,\n moveTolerancePx = SURFACE_LONG_PRESS_MOVE_TOLERANCE_PX,\n setTimer = globalThis.setTimeout?.bind(globalThis),\n clearTimer = globalThis.clearTimeout?.bind(globalThis),\n now = () => Date.now(),\n } = {}) {\n this.element = element || null;\n this.enabled = enabled;\n this.acceptsTarget = acceptsTarget;\n this.pickTarget = pickTarget;\n this.onLongPress = onLongPress;\n this.durationMs = durationMs;\n this.moveTolerancePx = moveTolerancePx;\n this.setTimer = setTimer;\n this.clearTimer = clearTimer;\n this.now = now;\n this._gesture = null;\n this._timer = null;\n this._suppressClickUntil = 0;\n\n this._onPointerDown = this._onPointerDown.bind(this);\n this._onPointerMove = this._onPointerMove.bind(this);\n this._onPointerEnd = this._onPointerEnd.bind(this);\n this._onContextMenu = this._onContextMenu.bind(this);\n this._onClickCapture = this._onClickCapture.bind(this);\n this.attach();\n }\n\n attach() {\n if (!this.element || this._attached) return;\n this._attached = true;\n this.element.addEventListener('pointerdown', this._onPointerDown, true);\n this.element.addEventListener('pointermove', this._onPointerMove, true);\n this.element.addEventListener('pointerup', this._onPointerEnd, true);\n this.element.addEventListener('pointercancel', this._onPointerEnd, true);\n this.element.addEventListener('contextmenu', this._onContextMenu, true);\n this.element.addEventListener('click', this._onClickCapture, true);\n }\n\n _cancelTimer() {\n if (this._timer != null) this.clearTimer?.(this._timer);\n this._timer = null;\n }\n\n _resetGesture() {\n this._cancelTimer();\n this._gesture = null;\n }\n\n _onPointerDown(event) {\n if (!isTouchPointer(event)) return;\n // A second contact turns the interaction into a pinch/compound gesture.\n // Cancel the primary hold immediately even when the browser marks the new\n // pointer non-primary.\n if (this._gesture && event.pointerId !== this._gesture.pointerId) {\n this._resetGesture();\n return;\n }\n if (event.isPrimary === false\n || (Number.isFinite(event.button) && event.button !== 0)\n || this.enabled?.(event) !== true\n || this.acceptsTarget?.(event.target, event) !== true) {\n return;\n }\n if (this._gesture) {\n this._resetGesture();\n return;\n }\n const gesture = {\n pointerId: event.pointerId,\n clientX: event.clientX,\n clientY: event.clientY,\n target: event.target,\n triggered: false,\n };\n this._gesture = gesture;\n this._timer = this.setTimer?.(() => {\n if (this._gesture !== gesture || gesture.triggered) return;\n if (this.enabled?.(event) !== true || this.acceptsTarget?.(gesture.target, event) !== true) {\n this._resetGesture();\n return;\n }\n const target = this.pickTarget?.({\n clientX: gesture.clientX,\n clientY: gesture.clientY,\n pointerId: gesture.pointerId,\n eventTarget: gesture.target,\n });\n if (!target) {\n this._resetGesture();\n return;\n }\n gesture.triggered = true;\n this._timer = null;\n this._suppressClickUntil = this.now() + SURFACE_LONG_PRESS_CLICK_SUPPRESSION_MS;\n globalThis.navigator?.vibrate?.(12);\n this.onLongPress?.(target, {\n clientX: gesture.clientX,\n clientY: gesture.clientY,\n pointerId: gesture.pointerId,\n });\n }, this.durationMs);\n }\n\n _onPointerMove(event) {\n const gesture = this._gesture;\n if (!gesture || event.pointerId !== gesture.pointerId || gesture.triggered) return;\n const distance = Math.hypot(\n event.clientX - gesture.clientX,\n event.clientY - gesture.clientY,\n );\n if (distance > this.moveTolerancePx) this._resetGesture();\n }\n\n _onPointerEnd(event) {\n const gesture = this._gesture;\n if (!gesture || event.pointerId !== gesture.pointerId) return;\n if (gesture.triggered) {\n event.preventDefault?.();\n this._suppressClickUntil = this.now() + SURFACE_LONG_PRESS_CLICK_SUPPRESSION_MS;\n }\n this._resetGesture();\n }\n\n shouldSuppressClick(event = null) {\n if (this.now() > this._suppressClickUntil) return false;\n return !event || this.acceptsTarget?.(event.target, event) === true;\n }\n\n _onClickCapture(event) {\n if (!this.shouldSuppressClick(event)) return;\n event.preventDefault?.();\n event.stopImmediatePropagation?.();\n }\n\n _onContextMenu(event) {\n const activeTarget = this._gesture\n && this.acceptsTarget?.(event.target, event) === true;\n if (!activeTarget && !this.shouldSuppressClick(event)) return;\n event.preventDefault?.();\n event.stopImmediatePropagation?.();\n }\n\n destroy() {\n this._resetGesture();\n if (!this.element || !this._attached) return;\n this.element.removeEventListener('pointerdown', this._onPointerDown, true);\n this.element.removeEventListener('pointermove', this._onPointerMove, true);\n this.element.removeEventListener('pointerup', this._onPointerEnd, true);\n this.element.removeEventListener('pointercancel', this._onPointerEnd, true);\n this.element.removeEventListener('contextmenu', this._onContextMenu, true);\n this.element.removeEventListener('click', this._onClickCapture, true);\n this._attached = false;\n this.element = null;\n }\n}\n","const eventNow = () => (\n typeof performance !== 'undefined' && typeof performance.now === 'function'\n ? performance.now()\n : Date.now()\n);\n\n/**\n * Separates a deliberate surface tap/click from a camera-look drag.\n *\n * Browsers can synthesize a click after pointerup even when scene controls\n * consumed the pointer movement. Keep the decision independent of the camera\n * controller and consume only that one post-drag click.\n */\nexport class SurfaceSelectionGestureGate {\n constructor({\n mouseThresholdPx = 6,\n touchThresholdPx = 12,\n suppressionWindowMs = 750,\n } = {}) {\n this.mouseThresholdPx = Math.max(1, Number(mouseThresholdPx) || 6);\n this.touchThresholdPx = Math.max(1, Number(touchThresholdPx) || 12);\n this.suppressionWindowMs = Math.max(100, Number(suppressionWindowMs) || 750);\n this._active = null;\n this._suppressedRelease = null;\n }\n\n pointerDown(event, nowMs = eventNow()) {\n if (!event || event.isPrimary === false || Number(event.button ?? 0) !== 0) {\n return false;\n }\n const x = Number(event.clientX);\n const y = Number(event.clientY);\n if (!Number.isFinite(x) || !Number.isFinite(y)) return false;\n // A real new press supersedes any unconsumed synthetic click from the\n // previous drag. This means the next deliberate click is never eaten if a\n // browser chose not to emit a post-drag click at all.\n this._suppressedRelease = null;\n this._active = {\n pointerId: Number(event.pointerId ?? 1),\n pointerType: String(event.pointerType || 'mouse'),\n startX: x,\n startY: y,\n lastX: x,\n lastY: y,\n startedAt: Number(nowMs) || 0,\n dragged: false,\n };\n return true;\n }\n\n pointerMove(event, { navigationActive = false } = {}) {\n if (!this._matchesActive(event)) return false;\n const x = Number(event.clientX);\n const y = Number(event.clientY);\n if (!Number.isFinite(x) || !Number.isFinite(y)) return false;\n const movedSinceLastEvent = x !== this._active.lastX || y !== this._active.lastY;\n this._active.lastX = x;\n this._active.lastY = y;\n const threshold = this._active.pointerType === 'touch'\n ? this.touchThresholdPx\n : this.mouseThresholdPx;\n const dx = x - this._active.startX;\n const dy = y - this._active.startY;\n // When the camera controller owns this pointer, even sub-threshold motion\n // changes the viewshed. It is therefore a navigation drag, not a surface\n // selection. The pixel threshold remains useful for standalone callers\n // and for harmless input jitter that no camera controller consumed.\n if ((navigationActive && movedSinceLastEvent)\n || dx * dx + dy * dy >= threshold * threshold) {\n this._active.dragged = true;\n }\n return this._active.dragged;\n }\n\n pointerUp(event, nowMs = eventNow(), { navigationActive = false } = {}) {\n if (!this._matchesActive(event)) return false;\n this.pointerMove(event, { navigationActive });\n const dragged = this._active.dragged;\n if (dragged) {\n this._suppressedRelease = {\n x: this._active.lastX,\n y: this._active.lastY,\n expiresAt: (Number(nowMs) || 0) + this.suppressionWindowMs,\n };\n }\n this._active = null;\n return dragged;\n }\n\n pointerCancel(event, nowMs = eventNow()) {\n if (!this._matchesActive(event)) return false;\n this._active.dragged = true;\n return this.pointerUp(event, nowMs);\n }\n\n shouldSuppressClick(event, nowMs = eventNow()) {\n const release = this._suppressedRelease;\n if (!release) return false;\n const now = Number(nowMs) || 0;\n if (now > release.expiresAt) {\n this._suppressedRelease = null;\n return false;\n }\n // Consume the browser's next click for this completed drag regardless of\n // which coordinates it reports. Chromium/WebKit can report the original\n // press target while Firefox commonly reports the release point. Spatial\n // matching allowed one of those variants to escape as a surface pick.\n this._suppressedRelease = null;\n return true;\n }\n\n _matchesActive(event) {\n return !!this._active\n && Number(event?.pointerId ?? 1) === this._active.pointerId;\n }\n}\n\nexport default SurfaceSelectionGestureGate;\n","/**\n * HudBuilder.js\n *\n * Drag-and-drop HUD layout builder. Users compose their HUD from a palette\n * of buttons, instrument dials, and data readouts, place them in screen-edge\n * regions, and save/load named layout configurations.\n *\n * Replaces the old HudDock button bars and Complications positioning system.\n */\n\nimport { getHudIcon } from './HudIcons.js';\n\n// ─── Constants ───────────────────────────────────────────────────────────\n\nconst STORAGE_KEY = 'noclip-hud-layout';\nconst LAYOUTS_KEY = 'noclip-hud-saved-layouts';\n\nconst REGION_DEFS = {\n left: { label: 'Left', css: 'hud-region-left', dir: 'column' },\n right: { label: 'Right', css: 'hud-region-right', dir: 'column' },\n top: { label: 'Top', css: 'hud-region-top', dir: 'row' },\n bottom: { label: 'Bottom', css: 'hud-region-bottom', dir: 'row' },\n};\n\nconst CATEGORY_ORDER = ['Instruments', 'Navigation', 'Actions', 'Readouts', 'Mobile'];\n\n// ─── Widget catalog ──────────────────────────────────────────────────────\n\nconst WIDGET_CATALOG = [\n // Instruments\n { id: 'inst-altimeter', type: 'instrument', label: 'Altimeter', category: 'Instruments', elementId: 'hud-altimeter' },\n { id: 'inst-pitch', type: 'instrument', label: 'Pitch Ladder', category: 'Instruments', elementId: 'hud-pitch-ladder' },\n { id: 'inst-heading', type: 'instrument', label: 'Heading', category: 'Instruments', elementId: 'hud-compass' },\n\n // Navigation buttons\n { id: 'btn-account', type: 'button', label: 'Account', icon: 'user', category: 'Navigation', action: 'navigate:account' },\n { id: 'btn-friends', type: 'button', label: 'Friends', icon: 'friends', category: 'Navigation', action: 'navigate:friends' },\n { id: 'btn-chat', type: 'button', label: 'Chat', icon: 'chat', category: 'Navigation', action: 'navigate:chat' },\n { id: 'btn-overlays', type: 'button', label: 'Overlays', icon: 'overlays', category: 'Navigation', action: 'navigate:overlay-editor' },\n { id: 'btn-config', type: 'button', label: 'Preferences', icon: 'config', category: 'Navigation', action: 'navigate:preferences' },\n { id: 'btn-info', type: 'button', label: 'Info', icon: 'pin', category: 'Navigation', action: 'navigate:info' },\n { id: 'btn-wallet', type: 'button', label: 'Wallet', icon: 'wallet', category: 'Navigation', action: 'navigate:wallet' },\n\n // Action buttons\n { id: 'btn-vr', type: 'button', label: 'VR', icon: 'vr', category: 'Actions', action: 'toggle:vr' },\n\n // Mobile controls\n { id: 'btn-sensors', type: 'button', label: 'Sensors', icon: 'compass', category: 'Mobile', action: 'toggle:sensors' },\n { id: 'btn-gps', type: 'button', label: 'GPS', icon: 'gps', category: 'Mobile', action: 'toggle:gps' },\n { id: 'btn-camera', type: 'button', label: 'Camera', icon: 'camera', category: 'Mobile', action: 'toggle:camera' },\n { id: 'btn-joystick', type: 'button', label: 'Joystick', icon: 'joystick', category: 'Mobile', action: 'toggle:joystick' },\n { id: 'btn-orbit', type: 'button', label: 'Orbit', icon: 'orbit', category: 'Mobile', action: 'toggle:orbit' },\n\n // Readouts\n { id: 'read-coords', type: 'readout', label: 'Position', category: 'Readouts', dataKeys: ['nav.lat', 'nav.lon'] },\n { id: 'read-altitude', type: 'readout', label: 'Altitude', category: 'Readouts', dataKeys: ['terrain.msl', 'terrain.agl'] },\n { id: 'read-speed', type: 'readout', label: 'Speed', category: 'Readouts', dataKeys: ['nav.speed'] },\n { id: 'read-fps', type: 'readout', label: 'FPS', category: 'Readouts', dataKeys: ['system.fps'] },\n { id: 'read-heading', type: 'readout', label: 'Heading', category: 'Readouts', dataKeys: ['nav.heading'] },\n];\n\nconst DEFAULT_LAYOUT = {\n name: 'Default',\n regions: {\n left: [],\n right: [],\n top: [],\n bottom: [],\n },\n};\n\n// ─── HudBuilder ──────────────────────────────────────────────────────────\n\nexport class HudBuilder {\n /**\n * @param {Object} options\n * @param {HTMLElement} [options.container] — viewport container (default: document.body)\n * @param {Object} [options.actions] — action handler map: actionId → function\n * @param {Function} [options.onLayoutChange] — called when layout changes\n */\n constructor({ container, actions, onLayoutChange } = {}) {\n this._container = container || document.body;\n this._actions = actions || {};\n this._onLayoutChange = onLayoutChange || null;\n\n this._catalog = new Map();\n for (const def of WIDGET_CATALOG) this._catalog.set(def.id, { ...def });\n\n this._widgetEls = new Map(); // id → HTMLElement\n this._regionEls = new Map(); // regionId → HTMLElement\n this._widgetState = new Map(); // id → { badge, active, disabled }\n this._editing = false;\n this._editOverlay = null;\n this._builderBody = null; // sidebar panel body (for re-render)\n\n // Hidden container for unplaced instrument elements\n this._hidden = document.createElement('div');\n this._hidden.style.display = 'none';\n this._hidden.className = 'hud-builder-hidden';\n this._container.appendChild(this._hidden);\n\n this._buildRegions();\n\n // Park all instrument elements in hidden container by default\n for (const def of WIDGET_CATALOG) {\n if (def.type === 'instrument' && def.elementId) {\n const el = document.getElementById(def.elementId);\n if (el) this._hidden.appendChild(el);\n }\n }\n\n // Load or default\n this._layout = this._loadCurrentLayout() || structuredClone(DEFAULT_LAYOUT);\n this._applyLayout();\n }\n\n // ─── Region containers ────────────────────────────────────────────\n\n _buildRegions() {\n for (const [id, def] of Object.entries(REGION_DEFS)) {\n const el = document.createElement('div');\n el.className = `hud-region ${def.css}`;\n el.dataset.region = id;\n el.style.flexDirection = def.dir;\n this._container.appendChild(el);\n this._regionEls.set(id, el);\n\n // Drop zone events\n el.addEventListener('dragover', (e) => {\n if (!this._editing) return;\n e.preventDefault();\n e.dataTransfer.dropEffect = 'move';\n el.classList.add('drag-over');\n });\n el.addEventListener('dragleave', () => el.classList.remove('drag-over'));\n el.addEventListener('drop', (e) => {\n e.preventDefault();\n el.classList.remove('drag-over');\n const widgetId = e.dataTransfer?.getData('text/plain');\n if (widgetId && this._editing) {\n this._placeWidget(widgetId, id);\n }\n });\n }\n }\n\n // ─── Widget element creation ──────────────────────────────────────\n\n _createWidgetElement(def) {\n // Instrument — claim existing DOM element\n if (def.type === 'instrument' && def.elementId) {\n const el = document.getElementById(def.elementId);\n if (el) {\n el.classList.add('hud-widget', 'hud-widget-instrument', 'hud-builder-managed');\n el.dataset.widgetId = def.id;\n return el;\n }\n return null;\n }\n\n // Button\n if (def.type === 'button') {\n const btn = document.createElement('button');\n btn.className = 'hud-widget hud-widget-button';\n btn.type = 'button';\n btn.dataset.widgetId = def.id;\n btn.title = def.label;\n btn.setAttribute('aria-label', def.label);\n btn.innerHTML = `${getHudIcon(def.icon) || ''}`;\n btn.addEventListener('click', () => {\n if (this._editing) return;\n this._actions[def.action]?.();\n });\n return btn;\n }\n\n // Readout\n if (def.type === 'readout') {\n const el = document.createElement('div');\n el.className = 'hud-widget hud-widget-readout';\n el.dataset.widgetId = def.id;\n\n const lbl = document.createElement('span');\n lbl.className = 'hud-widget-readout-label';\n lbl.textContent = def.label;\n el.appendChild(lbl);\n\n if (def.dataKeys) {\n for (const key of def.dataKeys) {\n const span = document.createElement('span');\n span.className = 'hud-readout-datum';\n span.setAttribute('data-hud-key', key);\n span.textContent = '--';\n el.appendChild(span);\n }\n }\n return el;\n }\n\n return null;\n }\n\n _getOrCreateWidget(id) {\n let el = this._widgetEls.get(id);\n if (el) return el;\n const def = this._catalog.get(id);\n if (!def) return null;\n el = this._createWidgetElement(def);\n if (el) this._widgetEls.set(id, el);\n return el;\n }\n\n // ─── Layout operations ────────────────────────────────────────────\n\n _placeWidget(widgetId, regionId, index) {\n if (!this._catalog.has(widgetId) || !REGION_DEFS[regionId]) return;\n\n // Remove from current region (if any)\n for (const widgets of Object.values(this._layout.regions)) {\n const idx = widgets.indexOf(widgetId);\n if (idx !== -1) widgets.splice(idx, 1);\n }\n\n // Add to target\n const arr = this._layout.regions[regionId];\n if (typeof index === 'number' && index >= 0 && index <= arr.length) {\n arr.splice(index, 0, widgetId);\n } else {\n arr.push(widgetId);\n }\n\n this._applyLayout();\n this._persistLayout();\n this._refreshPanel();\n }\n\n _removeWidget(widgetId) {\n for (const widgets of Object.values(this._layout.regions)) {\n const idx = widgets.indexOf(widgetId);\n if (idx !== -1) widgets.splice(idx, 1);\n }\n\n const def = this._catalog.get(widgetId);\n const el = this._widgetEls.get(widgetId);\n if (def?.type === 'instrument' && el) {\n // Park instrument in hidden container (don't destroy)\n this._hidden.appendChild(el);\n } else if (el) {\n el.remove();\n this._widgetEls.delete(widgetId);\n }\n\n this._applyLayout();\n this._persistLayout();\n this._refreshPanel();\n }\n\n _applyLayout() {\n // Clear all regions\n for (const regionEl of this._regionEls.values()) {\n while (regionEl.firstChild) regionEl.removeChild(regionEl.firstChild);\n }\n\n // Place widgets\n for (const [regionId, widgetIds] of Object.entries(this._layout.regions)) {\n const regionEl = this._regionEls.get(regionId);\n if (!regionEl) continue;\n\n for (const widgetId of widgetIds) {\n const el = this._getOrCreateWidget(widgetId);\n if (!el) continue;\n\n const wrapper = document.createElement('div');\n wrapper.className = 'hud-widget-wrapper';\n wrapper.dataset.widgetId = widgetId;\n\n if (this._editing) {\n wrapper.draggable = true;\n wrapper.classList.add('editing');\n\n const removeBtn = document.createElement('button');\n removeBtn.className = 'hud-widget-remove';\n removeBtn.type = 'button';\n removeBtn.innerHTML = '×';\n removeBtn.title = 'Remove';\n removeBtn.addEventListener('click', (e) => {\n e.stopPropagation();\n this._removeWidget(widgetId);\n });\n wrapper.appendChild(removeBtn);\n\n wrapper.addEventListener('dragstart', (e) => {\n e.dataTransfer.setData('text/plain', widgetId);\n e.dataTransfer.effectAllowed = 'move';\n requestAnimationFrame(() => wrapper.classList.add('dragging'));\n });\n wrapper.addEventListener('dragend', () => {\n wrapper.classList.remove('dragging');\n });\n }\n\n wrapper.appendChild(el);\n regionEl.appendChild(wrapper);\n this._applyWidgetState(widgetId, el);\n }\n }\n\n // Notify that layout changed — hudStore needs to re-scan DOM\n this._onLayoutChange?.();\n }\n\n // ─── Edit mode ────────────────────────────────────────────────────\n\n enterEditMode() {\n this._editing = true;\n for (const regionEl of this._regionEls.values()) regionEl.classList.add('editing');\n\n if (!this._editOverlay) {\n this._editOverlay = document.createElement('div');\n this._editOverlay.className = 'hud-builder-edit-overlay';\n this._editOverlay.addEventListener('click', (e) => {\n if (e.target === this._editOverlay) this.exitEditMode();\n });\n }\n this._container.appendChild(this._editOverlay);\n this._applyLayout();\n this._refreshPanel();\n }\n\n exitEditMode() {\n this._editing = false;\n for (const regionEl of this._regionEls.values()) regionEl.classList.remove('editing');\n this._editOverlay?.remove();\n this._applyLayout();\n this._refreshPanel();\n }\n\n isEditing() { return this._editing; }\n\n // ─── Persistence ──────────────────────────────────────────────────\n\n _persistLayout() {\n try { localStorage.setItem(STORAGE_KEY, JSON.stringify(this._layout)); } catch {}\n }\n\n _loadCurrentLayout() {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return null;\n const layout = JSON.parse(raw);\n if (layout?.regions && typeof layout.regions === 'object') {\n // Ensure all region keys exist\n for (const key of Object.keys(REGION_DEFS)) {\n if (!Array.isArray(layout.regions[key])) layout.regions[key] = [];\n }\n return layout;\n }\n } catch {}\n return null;\n }\n\n saveLayout(name) {\n if (!name) return;\n const all = this.getSavedLayouts();\n all[name] = structuredClone(this._layout.regions);\n try { localStorage.setItem(LAYOUTS_KEY, JSON.stringify(all)); } catch {}\n this._layout.name = name;\n this._persistLayout();\n }\n\n loadLayout(name) {\n const all = this.getSavedLayouts();\n const regions = all[name];\n if (!regions) return false;\n this._layout = { name, regions: structuredClone(regions) };\n this._applyLayout();\n this._persistLayout();\n this._refreshPanel();\n return true;\n }\n\n deleteLayout(name) {\n const all = this.getSavedLayouts();\n delete all[name];\n try { localStorage.setItem(LAYOUTS_KEY, JSON.stringify(all)); } catch {}\n this._refreshPanel();\n }\n\n getSavedLayouts() {\n try {\n const raw = localStorage.getItem(LAYOUTS_KEY);\n return raw ? JSON.parse(raw) : {};\n } catch { return {}; }\n }\n\n resetToDefault() {\n this._layout = structuredClone(DEFAULT_LAYOUT);\n this._applyLayout();\n this._persistLayout();\n this._refreshPanel();\n }\n\n // ─── Widget state (badges, active, disabled) ──────────────────────\n\n setBadge(widgetId, count) {\n this._setStateProp(widgetId, 'badge', count);\n }\n\n setActive(widgetId, active) {\n this._setStateProp(widgetId, 'active', active);\n }\n\n setDisabled(widgetId, disabled) {\n this._setStateProp(widgetId, 'disabled', disabled);\n }\n\n _setStateProp(widgetId, prop, value) {\n let s = this._widgetState.get(widgetId);\n if (!s) { s = {}; this._widgetState.set(widgetId, s); }\n s[prop] = value;\n const el = this._widgetEls.get(widgetId);\n if (el) this._applyWidgetState(widgetId, el);\n }\n\n _applyWidgetState(widgetId, el) {\n const s = this._widgetState.get(widgetId) || {};\n\n // Badge\n let badge = el.parentElement?.querySelector('.hud-widget-badge');\n if (s.badge > 0) {\n if (!badge) {\n badge = document.createElement('span');\n badge.className = 'hud-widget-badge';\n (el.parentElement || el).appendChild(badge);\n }\n badge.textContent = s.badge > 99 ? '99+' : String(s.badge);\n badge.style.display = '';\n } else if (badge) {\n badge.style.display = 'none';\n }\n\n el.classList.toggle('active', !!s.active);\n el.classList.toggle('disabled', !!s.disabled);\n if ('disabled' in el) el.disabled = !!s.disabled;\n }\n\n // ─── Lookup helpers ───────────────────────────────────────────────\n\n getWidgetRegion(widgetId) {\n for (const [rId, widgets] of Object.entries(this._layout.regions)) {\n if (widgets.includes(widgetId)) return rId;\n }\n return null;\n }\n\n isWidgetPlaced(widgetId) {\n return this.getWidgetRegion(widgetId) !== null;\n }\n\n // ─── Builder panel (rendered inside LeftSidebar) ──────────────────\n\n renderBuilderPanel(bodyEl) {\n this._builderBody = bodyEl;\n bodyEl.innerHTML = '';\n\n // ── Toolbar ──────────────────────────────────────────────────\n const toolbar = document.createElement('div');\n toolbar.className = 'hud-builder-toolbar';\n\n const editBtn = document.createElement('button');\n editBtn.className = `nca-btn ${this._editing ? 'nca-btn-active' : ''}`;\n editBtn.textContent = this._editing ? 'Done Editing' : 'Edit Layout';\n editBtn.addEventListener('click', () => {\n this._editing ? this.exitEditMode() : this.enterEditMode();\n });\n\n const resetBtn = document.createElement('button');\n resetBtn.className = 'nca-btn nca-btn-ghost';\n resetBtn.textContent = 'Reset';\n resetBtn.addEventListener('click', () => this.resetToDefault());\n\n toolbar.appendChild(editBtn);\n toolbar.appendChild(resetBtn);\n bodyEl.appendChild(toolbar);\n\n // ── Saved layouts ────────────────────────────────────────────\n const layoutSec = this._buildSection('Saved Layouts');\n const layoutRow = document.createElement('div');\n layoutRow.className = 'hud-builder-layout-row';\n\n const select = document.createElement('select');\n select.className = 'nca-select';\n const curOpt = document.createElement('option');\n curOpt.value = '';\n curOpt.textContent = this._layout.name ? `Current (${this._layout.name})` : 'Current';\n select.appendChild(curOpt);\n for (const name of Object.keys(this.getSavedLayouts())) {\n const opt = document.createElement('option');\n opt.value = name;\n opt.textContent = name;\n select.appendChild(opt);\n }\n select.addEventListener('change', () => {\n if (select.value) this.loadLayout(select.value);\n });\n\n const saveBtn = document.createElement('button');\n saveBtn.className = 'nca-btn nca-btn-sm';\n saveBtn.textContent = 'Save';\n saveBtn.addEventListener('click', () => {\n const name = prompt('Layout name:');\n if (name?.trim()) {\n this.saveLayout(name.trim());\n this._refreshPanel();\n }\n });\n\n layoutRow.appendChild(select);\n layoutRow.appendChild(saveBtn);\n layoutSec.appendChild(layoutRow);\n bodyEl.appendChild(layoutSec);\n\n // ── Widget palette by category ───────────────────────────────\n const grouped = {};\n for (const [, def] of this._catalog) {\n (grouped[def.category] ??= []).push(def);\n }\n\n for (const category of CATEGORY_ORDER) {\n const widgets = grouped[category];\n if (!widgets?.length) continue;\n\n const sec = this._buildSection(category);\n\n for (const def of widgets) {\n const placed = this.isWidgetPlaced(def.id);\n const region = this.getWidgetRegion(def.id);\n\n const row = document.createElement('div');\n row.className = `hud-builder-widget-row ${placed ? 'placed' : ''}`;\n\n // +/- toggle button\n const tog = document.createElement('button');\n tog.className = `hud-builder-toggle ${placed ? 'remove' : 'add'}`;\n tog.type = 'button';\n tog.textContent = placed ? '\\u2212' : '+';\n tog.title = placed ? 'Remove from layout' : 'Add to layout';\n tog.addEventListener('click', () => {\n if (placed) {\n this._removeWidget(def.id);\n } else {\n const defaultRegion = def.type === 'instrument'\n ? (def.id.includes('heading') ? 'bottom' : 'right')\n : 'left';\n this._placeWidget(def.id, defaultRegion);\n }\n });\n\n // Icon + label\n const info = document.createElement('div');\n info.className = 'hud-builder-widget-info';\n if (def.icon) {\n const ico = document.createElement('span');\n ico.className = 'hud-builder-widget-icon';\n ico.innerHTML = getHudIcon(def.icon);\n info.appendChild(ico);\n }\n const lbl = document.createElement('span');\n lbl.className = 'hud-builder-widget-label';\n lbl.textContent = def.label;\n info.appendChild(lbl);\n\n // Region selector (when placed)\n if (placed && region) {\n const rSel = document.createElement('select');\n rSel.className = 'nca-select nca-select-sm';\n for (const [rId, rDef] of Object.entries(REGION_DEFS)) {\n const opt = document.createElement('option');\n opt.value = rId;\n opt.textContent = rDef.label;\n opt.selected = rId === region;\n rSel.appendChild(opt);\n }\n rSel.addEventListener('change', () => this._placeWidget(def.id, rSel.value));\n info.appendChild(rSel);\n }\n\n row.appendChild(tog);\n row.appendChild(info);\n sec.appendChild(row);\n }\n\n bodyEl.appendChild(sec);\n }\n }\n\n _buildSection(title) {\n const sec = document.createElement('div');\n sec.className = 'hud-builder-section';\n const hdr = document.createElement('div');\n hdr.className = 'hud-builder-section-header';\n hdr.textContent = title;\n sec.appendChild(hdr);\n return sec;\n }\n\n _refreshPanel() {\n if (this._builderBody) this.renderBuilderPanel(this._builderBody);\n }\n\n // ─── Dispose ──────────────────────────────────────────────────────\n\n dispose() {\n for (const el of this._regionEls.values()) el.remove();\n this._regionEls.clear();\n this._widgetEls.clear();\n this._editOverlay?.remove();\n this._hidden?.remove();\n }\n}\n\n// ─── Singleton ──────────────────────────────────────────────────────────\n\nlet _instance = null;\n\nexport function getHudBuilder(options) {\n if (!_instance && options) {\n _instance = new HudBuilder(options);\n }\n return _instance;\n}\n","import {createWeatherVolumeControls} from './WeatherVolumeControls.js';\nimport {\n buildLabelCategoryControlPatch,\n buildLabelCategoryPresetPatch,\n getLabelCategoriesForFilterRail,\n getLabelCategoryControlValue,\n LABEL_CATEGORY_GROUPS,\n} from '../labels/LabelCategoryRegistry.js';\nimport { getLabelTypeIconId, getLabelTypeIconSvg } from '../labels/LabelMarkerIcons.js';\nimport {\n LABEL_TEMPORAL_FILTER_MODES,\n labelTemporalFilterSummary,\n normalizeLabelTemporalFilter,\n} from '../labels/LabelTemporalFilter.js';\nimport {\n buildOpenInfraMapLayerPatch,\n OPEN_INFRA_MAP_UTILITY_FILTERS,\n} from '../overlays/OpenInfraMapContract.js';\nimport {\n applySidebarMenuRole,\n ensureSidebarMenuSystemStyles,\n generateSidebarMenuComponent,\n SIDEBAR_MENU_ROLES,\n} from './SidebarMenuSystem.js';\n\nconst ICONS = Object.freeze({\n master: '',\n geojsonBorders: '',\n overlays: '',\n search: '',\n chevron: '',\n back: '',\n close: '',\n clock: '',\n utility: '',\n});\n\nconst CATEGORY_VIEW_DESCRIPTIONS = Object.freeze({\n utilities: 'Power, communications, water, fuel, and generation infrastructure.',\n display: 'Administrative boundaries and the time window applied to scene data.',\n});\n\nfunction iconSvg(id) {\n const paths = ICONS[id] || ICONS.overlays;\n return ``;\n}\n\nfunction registerControl(map, id, control) {\n if (!map.has(id)) map.set(id, new Set());\n map.get(id).add(control);\n}\n\nfunction injectStyles() {\n if (document.getElementById('nca-label-filter-rail-styles')) return;\n const style = document.createElement('style');\n style.id = 'nca-label-filter-rail-styles';\n style.textContent = `\n .nca-label-filter-rail {\n position: fixed;\n z-index: 1090;\n top: 92px;\n right: 12px;\n color: var(--nclp-text-primary, #fff);\n font-family: var(--nca-font-sans, sans-serif);\n pointer-events: auto;\n }\n body:not(.is-mobile) .nca-label-filter-rail {\n top: max(92px, calc(var(--nca-hud-controls-bottom, 84px) + var(--nc-hud-pill-stack-gap, 8px)));\n }\n .nca-label-filter-rail__trigger {\n min-width: calc(2 * var(--nc-hud-pill-size, 32px) + var(--nc-hud-pill-stack-gap, 8px));\n width: calc(2 * var(--nc-hud-pill-size, 32px) + var(--nc-hud-pill-stack-gap, 8px));\n max-width: calc(2 * var(--nc-hud-pill-size, 32px) + var(--nc-hud-pill-stack-gap, 8px));\n height: 32px;\n box-sizing: border-box;\n padding: 0 7px;\n border: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n border-radius: var(--nc-radius-sm, 3px);\n background: var(--nclp-bg-secondary, #111);\n background: color-mix(in srgb, var(--nclp-bg-secondary, #111) 94%, transparent);\n box-shadow: 0 12px 32px rgba(0,0,0,.34);\n color: var(--nclp-text-primary, #fff);\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n backdrop-filter: blur(12px);\n font: 650 9px/1 var(--nca-font-mono, monospace);\n letter-spacing: .12em;\n text-transform: uppercase;\n user-select: none;\n overflow: hidden;\n white-space: nowrap;\n transition: max-width 160ms ease, width 160ms ease, padding 160ms ease,\n border-color 120ms ease, color 120ms ease, background 120ms ease;\n }\n .nca-label-filter-rail__trigger:hover,\n .nca-label-filter-rail__trigger:focus-visible {\n width: auto;\n max-width: 240px;\n padding: 0 10px;\n }\n .nca-label-filter-rail__trigger:hover,\n .nca-label-filter-rail__trigger:focus-visible {\n color: var(--nclp-yellow, #facc15);\n border-color: var(--nclp-yellow, #facc15);\n background: var(--nclp-bg-secondary, #111);\n }\n .nca-label-filter-rail__trigger:focus-visible,\n .nca-label-filter-rail button:focus-visible,\n .nca-label-filter-rail input:focus-visible,\n .nca-label-filter-rail select:focus-visible {\n outline: none;\n border-color: color-mix(in srgb, var(--nclp-yellow, #facc15) 72%, transparent);\n }\n .nca-label-filter-rail__trigger-icon,\n .nca-label-filter-rail__nav-icon,\n .nca-label-filter-rail__row-icon {\n display: grid;\n place-items: center;\n flex: 0 0 auto;\n }\n .nca-label-filter-rail__trigger-icon svg,\n .nca-label-filter-rail__nav-icon svg { width: 16px; height: 16px; }\n .nca-label-filter-rail__trigger-label {\n font: inherit;\n letter-spacing: inherit;\n max-width: 0;\n opacity: 0;\n overflow: hidden;\n transition: max-width 160ms ease, opacity 100ms ease;\n }\n .nca-label-filter-rail__trigger:hover .nca-label-filter-rail__trigger-label,\n .nca-label-filter-rail__trigger:focus-visible .nca-label-filter-rail__trigger-label {\n max-width: 180px;\n opacity: 1;\n }\n .nca-label-filter-rail__badge {\n min-width: 16px;\n height: 16px;\n padding: 0 4px;\n border-radius: 8px;\n box-sizing: border-box;\n display: grid;\n place-items: center;\n background: rgba(255,255,255,.08);\n color: inherit;\n font: 800 8px/1 var(--nca-font-mono, monospace);\n letter-spacing: 0;\n max-width: 40px;\n min-width: 20px;\n padding: 0 4px;\n opacity: 1;\n overflow: hidden;\n transition: max-width 160ms ease, min-width 160ms ease, padding 160ms ease, opacity 100ms ease;\n }\n .nca-label-filter-rail__trigger:hover .nca-label-filter-rail__badge,\n .nca-label-filter-rail__trigger:focus-visible .nca-label-filter-rail__badge {\n max-width: 32px;\n min-width: 16px;\n padding: 0 4px;\n opacity: 1;\n }\n .nca-label-filter-rail__panel {\n position: absolute;\n top: 0;\n right: 0;\n width: min(430px, calc(100vw - 24px));\n max-height: min(754px, calc(100vh - 104px));\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n border-radius: var(--nc-radius-sm, 3px);\n background: var(--nclp-bg-secondary, #111);\n background: color-mix(in srgb, var(--nclp-bg-secondary, #111) 94%, transparent);\n box-shadow: 0 12px 32px rgba(0,0,0,.34);\n backdrop-filter: blur(12px);\n }\n .nca-label-filter-rail__panel[hidden] { display: none; }\n .nca-label-filter-rail__panel-header {\n height: 32px;\n min-height: 32px;\n box-sizing: border-box;\n padding: 0 4px;\n border-bottom: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n display: grid;\n grid-template-columns: 28px minmax(0,1fr) 28px;\n align-items: center;\n gap: 2px;\n }\n .nca-label-filter-rail__nav-button {\n width: 26px;\n height: 26px;\n padding: 0;\n border: 0;\n border-radius: var(--nc-radius-sm, 3px);\n background: transparent;\n color: var(--nclp-quiet, rgba(250,250,250,.48));\n cursor: pointer;\n display: grid;\n place-items: center;\n }\n .nca-label-filter-rail__nav-button:hover {\n color: var(--nclp-yellow, #facc15);\n background: var(--nclp-bg-tertiary, #1a1a1a);\n }\n .nca-label-filter-rail__back[hidden] { visibility: hidden; display: grid; }\n .nca-label-filter-rail__heading { min-width: 0; }\n .nca-label-filter-rail__eyebrow { display: none; }\n .nca-label-filter-rail__title {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--nclp-text-primary, #fff);\n font: 650 9px/1 var(--nca-font-mono, monospace);\n letter-spacing: .12em;\n text-transform: uppercase;\n }\n .nca-label-filter-rail__search-wrap {\n position: relative;\n margin: 12px 12px 13px;\n }\n .nca-label-filter-rail__search-icon { display: none; }\n .nca-label-filter-rail__search {\n width: 100%;\n height: 34px;\n box-sizing: border-box;\n padding: 0 10px;\n color: inherit;\n background: rgba(255,255,255,.035);\n border: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n border-radius: var(--nc-radius-sm, 3px);\n font: 550 11px/1 var(--nca-font-sans, sans-serif);\n outline: none;\n }\n .nca-label-filter-rail__search:focus {\n border-color: color-mix(in srgb, var(--nclp-yellow, #facc15) 72%, transparent);\n }\n .nca-label-filter-rail__search::placeholder { color: var(--nclp-quiet, rgba(250,250,250,.48)); }\n .nca-label-filter-rail__quick-actions {\n margin: 0 12px 13px;\n display: grid;\n grid-template-columns: minmax(0,1fr) repeat(3, auto);\n gap: 6px;\n }\n .nca-label-filter-rail__master,\n .nca-label-filter-rail__preset,\n .nca-label-filter-rail__bulk {\n height: 32px;\n padding: 0 9px;\n border: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n border-radius: var(--nc-radius-sm, 3px);\n background: var(--nclp-bg-secondary, #111);\n color: var(--nclp-muted, rgba(250,250,250,.7));\n font: 650 9px/1 var(--nca-font-mono, monospace);\n letter-spacing: .06em;\n text-transform: uppercase;\n cursor: pointer;\n }\n .nca-label-filter-rail__master {\n min-width: 0;\n text-align: left;\n }\n .nca-label-filter-rail__master:hover,\n .nca-label-filter-rail__preset:hover,\n .nca-label-filter-rail__bulk:hover {\n color: var(--nclp-yellow, #facc15);\n border-color: var(--nclp-yellow, #facc15);\n }\n .nca-label-filter-rail__preset[aria-pressed=\"true\"],\n .nca-label-filter-rail__master[aria-checked=\"true\"] {\n color: var(--nclp-yellow, #facc15) !important;\n border-color: var(--nclp-yellow, #facc15) !important;\n background: var(--nclp-bg-secondary, #111) !important;\n box-shadow: none !important;\n }\n .nca-label-filter-rail__body {\n min-height: 120px;\n max-height: 720px;\n padding: 0 12px 12px;\n overflow-x: hidden;\n overflow-y: auto;\n overscroll-behavior: contain;\n scrollbar-width: thin;\n scrollbar-color: var(--nclp-line-strong, rgba(250,250,250,.3)) transparent;\n }\n .nca-label-filter-rail__view {\n display: grid;\n grid-template-columns: repeat(2, minmax(0,1fr));\n gap: 6px;\n }\n .nca-label-filter-rail__view[hidden] { display: none; }\n .nca-label-filter-rail__view-intro {\n grid-column: 1 / -1;\n margin: 0 0 4px;\n color: rgba(255,255,255,.58);\n font: 500 10px/1.45 var(--nca-font-sans, sans-serif);\n }\n .nca-label-filter-rail__category-card {\n width: 100%;\n min-height: 64px;\n padding: 8px 9px;\n border: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n border-radius: var(--nc-radius-sm, 3px);\n background: var(--nclp-bg-secondary, #111);\n color: inherit;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: flex-start;\n text-align: left;\n font: 600 10px/1.2 var(--nca-font-sans, sans-serif);\n cursor: pointer;\n position: relative;\n }\n .nca-label-filter-rail__category-card:hover {\n color: var(--nclp-yellow, #facc15);\n border-color: var(--nclp-yellow, #facc15);\n }\n .nca-label-filter-rail__category-copy { width: 100%; min-width: 0; }\n .nca-label-filter-rail__category-name {\n display: block;\n padding-right: 16px;\n color: inherit;\n font-size: 11px;\n line-height: 1.25;\n font-weight: 700;\n }\n .nca-label-filter-rail__category-description {\n display: block;\n margin-top: 4px;\n color: rgba(255,255,255,.56);\n font-size: 9px;\n line-height: 1.25;\n }\n .nca-label-filter-rail__category-count {\n margin-top: auto;\n padding-top: 5px;\n color: rgba(255,255,255,.34);\n font: 600 8px/1 var(--nca-font-mono, monospace);\n letter-spacing: .03em;\n white-space: nowrap;\n }\n .nca-label-filter-rail__category-card:hover .nca-label-filter-rail__category-description,\n .nca-label-filter-rail__category-card:hover .nca-label-filter-rail__category-count {\n color: color-mix(in srgb, var(--nclp-yellow, #facc15) 68%, #fff);\n }\n .nca-label-filter-rail__category-chevron {\n position: absolute;\n top: 8px;\n right: 7px;\n color: rgba(255,255,255,.34);\n display: grid;\n }\n .nca-label-filter-rail__category-chevron svg { width: 13px; height: 13px; }\n .nca-label-filter-rail__view-toolbar {\n grid-column: 1 / -1;\n min-height: 32px;\n margin-bottom: 1px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n }\n .nca-label-filter-rail__view-summary {\n color: rgba(255,255,255,.9);\n font: 700 9px/1 var(--nca-font-mono, monospace);\n letter-spacing: .11em;\n text-transform: uppercase;\n }\n .nca-label-filter-rail__bulk-actions { display: flex; gap: 5px; }\n .nca-label-filter-rail__layer-row {\n width: 100%;\n min-height: 80px;\n box-sizing: border-box;\n padding: 8px 9px;\n border: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n border-radius: var(--nc-radius-sm, 3px);\n background: var(--nclp-bg-secondary, #111);\n color: inherit;\n display: grid;\n grid-template-columns: 24px minmax(0,1fr) auto;\n align-items: start;\n gap: 7px;\n text-align: left;\n font: 600 10px/1.2 var(--nca-font-sans, sans-serif);\n cursor: pointer;\n }\n .nca-label-filter-rail__layer-row:hover {\n color: var(--nclp-yellow, #facc15);\n border-color: var(--nclp-yellow, #facc15);\n background: var(--nclp-bg-secondary, #111);\n }\n .nca-label-filter-rail__layer-row[aria-disabled=\"true\"] { opacity: .43; cursor: default; }\n .nca-label-filter-rail__row-icon {\n width: 22px;\n height: 22px;\n margin-top: 1px;\n border: 0;\n border-radius: 0;\n background: transparent;\n color: var(--nclp-quiet, rgba(250,250,250,.48));\n }\n .nca-label-filter-rail__row-icon svg { width: 15px; height: 15px; }\n .nca-label-filter-rail__row-copy { min-width: 0; }\n .nca-label-filter-rail__row-parent {\n display: block;\n margin-bottom: 2px;\n color: rgba(255,255,255,.34);\n font: 700 7px/1 var(--nca-font-mono, monospace);\n letter-spacing: .1em;\n text-transform: uppercase;\n }\n .nca-label-filter-rail__row-name {\n display: block;\n color: inherit;\n font-size: 11px;\n line-height: 1.25;\n font-weight: 700;\n }\n .nca-label-filter-rail__row-description {\n display: -webkit-box;\n margin-top: 3px;\n color: rgba(255,255,255,.56);\n font-size: 9px;\n line-height: 1.25;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n .nca-label-filter-rail__switch {\n width: auto;\n height: auto;\n margin-top: 2px;\n color: rgba(255,255,255,.34);\n background: transparent;\n box-shadow: none;\n font: 700 8px/1 var(--nca-font-mono, monospace);\n letter-spacing: .06em;\n }\n .nca-label-filter-rail__switch::after {\n content: 'OFF';\n }\n .nca-label-filter-rail__layer-row.is-active .nca-label-filter-rail__switch,\n .nca-label-filter-rail__layer-row[aria-checked=\"true\"] .nca-label-filter-rail__switch {\n color: var(--nclp-yellow, #facc15);\n background: transparent;\n }\n .nca-label-filter-rail__layer-row.is-active .nca-label-filter-rail__switch::after,\n .nca-label-filter-rail__layer-row[aria-checked=\"true\"] .nca-label-filter-rail__switch::after {\n content: 'ON';\n }\n .nca-label-filter-rail__layer-row.is-active,\n .nca-label-filter-rail__layer-row[aria-checked=\"true\"] {\n color: var(--nclp-yellow, #facc15) !important;\n background: var(--nclp-bg-secondary, #111) !important;\n border-color: var(--nclp-yellow, #facc15) !important;\n box-shadow: none !important;\n font-weight: 750 !important;\n }\n .nca-label-filter-rail__layer-row.is-active .nca-label-filter-rail__row-icon,\n .nca-label-filter-rail__layer-row[aria-checked=\"true\"] .nca-label-filter-rail__row-icon {\n color: var(--nclp-yellow, #facc15);\n }\n .nca-label-filter-rail__layer-row.is-active .nca-label-filter-rail__row-description,\n .nca-label-filter-rail__layer-row[aria-checked=\"true\"] .nca-label-filter-rail__row-description,\n .nca-label-filter-rail__layer-row.is-active .nca-label-filter-rail__row-parent,\n .nca-label-filter-rail__layer-row[aria-checked=\"true\"] .nca-label-filter-rail__row-parent {\n color: color-mix(in srgb, var(--nclp-yellow, #facc15) 68%, #fff);\n }\n .nca-label-filter-rail__section-label {\n grid-column: 1 / -1;\n margin-top: 10px;\n color: rgba(255,255,255,.9);\n font: 700 9px/1 var(--nca-font-mono, monospace);\n letter-spacing: .11em;\n text-transform: uppercase;\n }\n .nca-label-filter-rail__temporal {\n grid-column: 1 / -1;\n display: grid;\n gap: 8px;\n padding: 10px;\n border: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n border-radius: var(--nc-radius-sm, 3px);\n background: var(--nclp-bg-secondary, #111);\n }\n .nca-label-filter-rail__temporal-field {\n display: grid;\n gap: 4px;\n color: var(--nclp-quiet, rgba(250,250,250,.48));\n font: 650 8px/1.25 var(--nca-font-mono, monospace);\n letter-spacing: .07em;\n text-transform: uppercase;\n }\n .nca-label-filter-rail__temporal-select,\n .nca-label-filter-rail__temporal-date {\n width: 100%;\n height: 32px;\n box-sizing: border-box;\n padding: 0 8px;\n border: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n border-radius: var(--nc-radius-sm, 3px);\n background: var(--nclp-bg-main, #0a0a0a);\n color: var(--nclp-text, #fafafa);\n color-scheme: dark;\n font: 600 9px/1 var(--nca-font-mono, monospace);\n }\n .nca-label-filter-rail__temporal-undated {\n display: flex;\n align-items: flex-start;\n gap: 7px;\n color: var(--nclp-muted, rgba(250,250,250,.7));\n font: 600 8px/1.4 var(--nca-font-mono, monospace);\n cursor: pointer;\n }\n .nca-label-filter-rail__temporal-undated input { margin: 1px 0 0; accent-color: var(--nclp-yellow,#facc15); }\n .nca-label-filter-rail__temporal-summary { color: var(--nclp-yellow,#facc15); font: 650 8px/1.35 var(--nca-font-mono, monospace); }\n .nca-label-filter-rail__smoke-modes {\n grid-column: 1 / -1;\n display: grid;\n grid-template-columns: repeat(3,minmax(0,1fr));\n gap: 6px;\n }\n .nca-label-filter-rail__smoke-mode {\n min-width: 0;\n height: 32px;\n border: 1px solid var(--nclp-border-subtle, rgba(255,255,255,.14));\n border-radius: var(--nc-radius-sm, 3px);\n background: var(--nclp-bg-secondary, #111);\n color: var(--nclp-muted, rgba(250,250,250,.7));\n font: 650 8px/1 var(--nca-font-mono, monospace);\n cursor: pointer;\n }\n .nca-label-filter-rail__smoke-mode:hover { color: var(--nclp-yellow,#facc15); border-color: var(--nclp-yellow,#facc15); }\n .nca-label-filter-rail__smoke-mode.is-active,\n .nca-label-filter-rail__smoke-mode[aria-pressed=\"true\"] {\n color: var(--nclp-yellow,#facc15) !important;\n border-color: var(--nclp-yellow,#facc15) !important;\n background: var(--nclp-bg-secondary,#111) !important;\n box-shadow: none !important;\n font-weight: 750 !important;\n }\n .nca-label-filter-rail__empty {\n grid-column: 1 / -1;\n padding: 34px 20px;\n color: rgba(255,255,255,.58);\n font: 500 10px/1.45 var(--nca-font-sans, sans-serif);\n text-align: center;\n }\n /* The layers rail stays available while the agent chat popup is open. */\n /* Phones use the mobile command shell's layers sheet (rule below). A\n narrow desktop window or a touchscreen laptop keeps the rail in 3D;\n hiding it by width or pointer made it vanish everywhere except 2D. */\n body.nca-minimap-fullscreen .nca-label-filter-rail {\n display: block !important;\n z-index: 2100 !important;\n opacity: 1 !important;\n visibility: visible !important;\n pointer-events: auto !important;\n }\n body.is-mobile.mobile-command-shell-active .nca-label-filter-rail { display: none !important; }\n @media (prefers-reduced-motion: reduce) {\n .nca-label-filter-rail__panel { animation: none; }\n }\n `;\n document.head.appendChild(style);\n}\n\nexport class LabelFilterRail {\n constructor({ settings, layerCatalog = null, container = document.body } = {}) {\n this.settings = settings || null;\n this.layerCatalog = layerCatalog;\n this.container = container;\n this.element = null;\n this._categoryButtons = new Map();\n this._utilityButtons = new Map();\n this._borderButtons = new Set();\n this._categoryCards = new Map();\n this._viewSummaries = new Map();\n this._smokeModeButtons = new Map();\n this._temporalControls = null;\n this._searchItems = [];\n this._searchControls = [];\n this._views = new Map();\n this._activeView = 'root';\n this._expanded = false;\n this._unsubscribe = null;\n this._catalogUnsubscribe = null;\n this._onDocumentPointerDown = (event) => {\n if (this._expanded && !this.element?.contains(event.target)) this.setExpanded(false);\n };\n this._onDocumentKeyDown = (event) => {\n if (event.key !== 'Escape' || !this._expanded) return;\n this.setExpanded(false);\n this._triggerButton?.focus();\n };\n this._build();\n }\n\n _build() {\n if (!this.container || this.element) return;\n ensureSidebarMenuSystemStyles();\n injectStyles();\n\n const rail = document.createElement('aside');\n rail.className = 'nca-label-filter-rail';\n rail.setAttribute('aria-label', 'Layers');\n\n const trigger = document.createElement('button');\n trigger.type = 'button';\n trigger.className = 'nca-label-filter-rail__trigger';\n trigger.innerHTML = `\n ${iconSvg('overlays')}\n Layers\n 0\n `;\n trigger.setAttribute('aria-haspopup', 'dialog');\n trigger.setAttribute('aria-expanded', 'false');\n trigger.addEventListener('click', () => this.setExpanded(!this._expanded));\n rail.appendChild(trigger);\n this._triggerButton = trigger;\n this._countBadge = trigger.querySelector('.nca-label-filter-rail__badge');\n\n const panel = document.createElement('section');\n panel.className = 'nca-label-filter-rail__panel';\n applySidebarMenuRole(panel, SIDEBAR_MENU_ROLES.surface);\n panel.setAttribute('role', 'dialog');\n panel.setAttribute('aria-modal', 'false');\n panel.setAttribute('aria-label', 'Layers');\n panel.hidden = true;\n\n const header = document.createElement('header');\n header.className = 'nca-label-filter-rail__panel-header';\n applySidebarMenuRole(header, SIDEBAR_MENU_ROLES.header);\n const back = this._createNavButton('back', 'Back to layer categories');\n back.classList.add('nca-label-filter-rail__back');\n back.hidden = true;\n back.addEventListener('click', () => this._showView('root'));\n const heading = document.createElement('div');\n heading.className = 'nca-label-filter-rail__heading';\n heading.innerHTML = 'Layers
';\n applySidebarMenuRole(heading.querySelector('.nca-label-filter-rail__title'), SIDEBAR_MENU_ROLES.title);\n const close = this._createNavButton('close', 'Close layers');\n close.addEventListener('click', () => {\n this.setExpanded(false);\n trigger.focus();\n });\n header.append(back, heading, close);\n panel.appendChild(header);\n this._backButton = back;\n this._title = heading.querySelector('.nca-label-filter-rail__title');\n\n const searchWrap = document.createElement('div');\n searchWrap.className = 'nca-label-filter-rail__search-wrap';\n searchWrap.innerHTML = `${iconSvg('search')}`;\n const search = document.createElement('input');\n search.type = 'search';\n search.className = 'nca-label-filter-rail__search';\n search.placeholder = 'Filter layers and scans';\n search.setAttribute('aria-label', 'Filter layers and scans');\n search.addEventListener('input', () => this._applySearch(search.value));\n searchWrap.appendChild(search);\n panel.appendChild(searchWrap);\n this._searchInput = search;\n\n const actions = document.createElement('div');\n actions.className = 'nca-label-filter-rail__quick-actions';\n const master = document.createElement('button');\n master.type = 'button';\n master.className = 'nca-label-filter-rail__master';\n applySidebarMenuRole(master, SIDEBAR_MENU_ROLES.button);\n master.setAttribute('role', 'switch');\n master.innerHTML = 'Scene labels';\n master.addEventListener('click', () => {\n const enabled = this.settings?.getSection?.('scene.labels.enabled') !== false;\n if (this.layerCatalog) this.layerCatalog.setMasterVisibility(!enabled);\n else this.settings?.updateScene?.({ labels: { enabled: !enabled } });\n });\n actions.appendChild(master);\n this._masterButton = master;\n for (const [id, label] of [['focus', 'Focus'], ['all', 'All'], ['none', 'None']]) {\n const button = document.createElement('button');\n button.type = 'button';\n button.className = 'nca-label-filter-rail__preset';\n applySidebarMenuRole(button, SIDEBAR_MENU_ROLES.button);\n button.dataset.preset = id;\n button.textContent = label;\n button.setAttribute('aria-label', `${label} scene label preset`);\n button.setAttribute('aria-pressed', 'false');\n button.addEventListener('click', () => this._applyLabelPreset(id));\n (this._presetButtons ||= new Map()).set(id, button);\n actions.appendChild(button);\n }\n panel.appendChild(actions);\n\n const body = document.createElement('div');\n body.className = 'nca-label-filter-rail__body';\n applySidebarMenuRole(body, SIDEBAR_MENU_ROLES.body);\n panel.appendChild(body);\n this._body = body;\n\n const rootView = this._createView('root');\n rootView.appendChild(this._createIntro('Choose a layer category. Visibility is shared across desktop, mobile, and VR.'));\n for (const group of LABEL_CATEGORY_GROUPS) {\n const categories = getLabelCategoriesForFilterRail(group.id);\n if (!categories.length) continue;\n rootView.appendChild(this._createCategoryCard(group.id, group.label, group.description, categories.length));\n body.appendChild(this._createCategoryView(group, categories));\n }\n rootView.appendChild(this._createCategoryCard(\n 'utilities',\n 'Utility infrastructure',\n CATEGORY_VIEW_DESCRIPTIONS.utilities,\n OPEN_INFRA_MAP_UTILITY_FILTERS.length,\n ));\n rootView.appendChild(this._createCategoryCard('display', 'Display & time', CATEGORY_VIEW_DESCRIPTIONS.display, 1));\n if (this.layerCatalog) {\n rootView.appendChild(this._createCategoryCard(\n 'content',\n 'My content & scans',\n 'Authored overlays and private reconstruction results.',\n 0,\n ));\n }\n body.prepend(rootView);\n body.appendChild(this._createUtilityView());\n body.appendChild(this._createDisplayView());\n if (this.layerCatalog) body.appendChild(this._createCatalogView());\n body.appendChild(this._createSearchView());\n\n rail.appendChild(panel);\n this.container.appendChild(rail);\n this.element = rail;\n this._panel = panel;\n this.setExpanded(false);\n this._showView('root');\n this.sync();\n this._unsubscribe = this.settings?.subscribe?.(() => this.sync()) || null;\n this._catalogUnsubscribe = this.layerCatalog?.subscribe?.(() => this.sync()) || null;\n document.addEventListener('pointerdown', this._onDocumentPointerDown, true);\n document.addEventListener('keydown', this._onDocumentKeyDown);\n }\n\n _createNavButton(icon, label) {\n const button = document.createElement('button');\n button.type = 'button';\n button.className = 'nca-label-filter-rail__nav-button';\n button.setAttribute('aria-label', label);\n button.innerHTML = `${iconSvg(icon)}`;\n return button;\n }\n\n _createView(id) {\n const view = generateSidebarMenuComponent({\n type: 'view',\n id,\n className: 'nca-label-filter-rail__view',\n }).element;\n view.dataset.view = id;\n view.hidden = id !== 'root';\n this._views.set(id, view);\n return view;\n }\n\n _createIntro(text) {\n const intro = document.createElement('div');\n intro.className = 'nca-label-filter-rail__view-intro';\n intro.textContent = text;\n return intro;\n }\n\n _createCategoryCard(id, label, description, total) {\n const generated = generateSidebarMenuComponent({\n type: 'card',\n id,\n title: label,\n description,\n trailingHtml: iconSvg('chevron'),\n className: 'nca-label-filter-rail__category-card nclp-dynamic-surface',\n attributes: { 'aria-label': `Open ${label} layers` },\n onActivate: () => this._showView(id),\n });\n const button = generated.element;\n button.dataset.categoryId = id;\n generated.copy.classList.add('nca-label-filter-rail__category-copy');\n generated.title.classList.add('nca-label-filter-rail__category-name');\n button.querySelector('.nca-menu-item-description')?.classList.add('nca-label-filter-rail__category-description');\n const count = document.createElement('span');\n count.className = 'nca-label-filter-rail__category-count';\n count.setAttribute('aria-hidden', 'true');\n count.textContent = `0 / ${total}`;\n generated.copy.appendChild(count);\n const chevron = button.querySelector('.nca-menu-item-trailing');\n chevron?.classList.add('nca-label-filter-rail__category-chevron');\n this._categoryCards.set(id, button);\n return button;\n }\n\n _createCategoryView(group, categories) {\n const view = this._createView(group.id);\n if(group.id==='weatherVolumes')view.appendChild(createWeatherVolumeControls(this.settings));\n view.appendChild(this._createViewToolbar(group.id, categories.length, (enabled) => {\n const states = Object.fromEntries(categories.map((category) => [category.id, enabled]));\n const patch = buildLabelCategoryPresetPatch(states);\n if (enabled) patch.labels = { ...patch.labels, enabled: true };\n this.settings?.updateScene?.(patch);\n }));\n for (const category of categories) {\n const createRow = (parentLabel = '') => this._createLayerRow({\n id: category.id,\n label: category.label,\n description: category.description,\n parentLabel,\n iconMarkup: getLabelTypeIconSvg(category.types?.[0]),\n iconType: getLabelTypeIconId(category.types?.[0]),\n previewTypes: category.types,\n onClick: () => {\n const labels = this.settings?.getSection?.('scene.labels') || {};\n const next = !getLabelCategoryControlValue(this.settings, labels, category.id);\n if (this.layerCatalog) void this.layerCatalog.setVisibility(`label:${category.id}`, next);\n else this.settings?.updateScene?.(buildLabelCategoryControlPatch(category.id, next));\n },\n });\n const row = createRow();\n registerControl(this._categoryButtons, category.id, row);\n view.appendChild(row);\n if (category.id === 'smokePlumes') view.appendChild(this._createSmokeModeControl());\n this._searchItems.push({\n id: category.id,\n label: category.label,\n description: category.description,\n parentLabel: group.label,\n keywords: `${category.label} ${category.description} ${group.label}`.toLowerCase(),\n createRow,\n type: 'category',\n });\n }\n return view;\n }\n\n _createUtilityView() {\n const view = this._createView('utilities');\n view.appendChild(this._createViewToolbar('utilities', OPEN_INFRA_MAP_UTILITY_FILTERS.length, (enabled) => {\n const layers = Object.fromEntries(OPEN_INFRA_MAP_UTILITY_FILTERS.map(({ setting }) => [setting, enabled]));\n this.settings?.updateScene?.({ infrastructure: { layers } });\n }));\n for (const filter of OPEN_INFRA_MAP_UTILITY_FILTERS) {\n const createRow = (parentLabel = '') => this._createLayerRow({\n id: `openinfra-${filter.setting}`,\n label: filter.label,\n description: filter.description,\n parentLabel,\n iconMarkup: getLabelTypeIconSvg(filter.iconType),\n iconType: filter.iconType,\n onClick: () => {\n const infrastructure = this.settings?.getSection?.('scene.infrastructure') || {};\n const active = infrastructure.layers?.[filter.setting] === true;\n const patch = buildOpenInfraMapLayerPatch(filter.setting, !active);\n if (patch) this.settings?.updateScene?.(patch);\n },\n });\n const row = createRow();\n row.dataset.openInfraGroup = filter.group;\n registerControl(this._utilityButtons, filter.setting, row);\n view.appendChild(row);\n this._searchItems.push({\n id: filter.setting,\n label: filter.label,\n description: filter.description,\n parentLabel: 'Utility infrastructure',\n keywords: `${filter.label} ${filter.description} utility infrastructure`.toLowerCase(),\n createRow,\n type: 'utility',\n });\n }\n return view;\n }\n\n _createDisplayView() {\n const view = this._createView('display');\n view.appendChild(this._createIntro(CATEGORY_VIEW_DESCRIPTIONS.display));\n const createBordersRow = (parentLabel = '') => this._createLayerRow({\n id: 'geojsonBorders',\n label: 'Administrative borders',\n description: 'Country, regional, and local boundary geometry in the 3D scene.',\n parentLabel,\n iconMarkup: iconSvg('geojsonBorders'),\n onClick: () => {\n const labels = this.settings?.getSection?.('scene.labels') || {};\n const enabled = getLabelCategoryControlValue(this.settings, labels, 'administrative');\n this.settings?.updateScene?.(buildLabelCategoryControlPatch('administrative', !enabled));\n },\n });\n const borders = createBordersRow();\n this._borderButtons.add(borders);\n view.appendChild(borders);\n this._searchItems.push({\n id: 'geojsonBorders',\n label: 'Administrative borders',\n description: 'Country, regional, and local boundary geometry in the 3D scene.',\n parentLabel: 'Display & time',\n keywords: 'administrative borders boundaries geojson display map'.toLowerCase(),\n createRow: createBordersRow,\n type: 'borders',\n });\n const label = document.createElement('div');\n label.className = 'nca-label-filter-rail__section-label';\n label.textContent = 'Time filter';\n view.append(label, this._createTemporalControls());\n return view;\n }\n\n _createCatalogView() {\n const view = this._createView('content');\n this._catalogView = view;\n this._renderCatalogView();\n return view;\n }\n\n _catalogEntries() {\n return this.layerCatalog?.list?.({\n kinds: ['authored_overlay', 'scan_collection', 'scan_result'],\n }) || [];\n }\n\n _renderCatalogView() {\n if (!this._catalogView) return;\n const activeCatalogId = this._catalogView.contains(document.activeElement)\n ? document.activeElement?.dataset?.catalogId\n : null;\n this._catalogView.replaceChildren();\n const entries = this._catalogEntries();\n if (!entries.length) {\n this._catalogView.appendChild(this._createIntro('No authored overlays or scan results are available.'));\n return;\n }\n for (const entry of entries) {\n const description = [entry.description, entry.status && `Status: ${entry.status.replaceAll('_', ' ')}`]\n .filter(Boolean).join(' ');\n const row = this._createLayerRow({\n id: entry.id,\n label: entry.label,\n description,\n parentLabel: entry.categoryLabel,\n onClick: () => void this.layerCatalog.setVisibility(entry.id, !entry.visible),\n });\n this._setButtonState(row, entry.visible);\n row.disabled = entry.disabled || !entry.mutable;\n row.setAttribute('aria-disabled', row.disabled ? 'true' : 'false');\n row.dataset.catalogId = entry.id;\n this._catalogView.appendChild(row);\n }\n if (activeCatalogId) {\n const activeRow = [...this._catalogView.querySelectorAll('[data-catalog-id]')]\n .find((row) => row.dataset.catalogId === activeCatalogId);\n activeRow?.focus?.({ preventScroll: true });\n }\n }\n\n _createViewToolbar(id, total, onBulk) {\n const toolbar = document.createElement('div');\n toolbar.className = 'nca-label-filter-rail__view-toolbar';\n const summary = document.createElement('div');\n summary.className = 'nca-label-filter-rail__view-summary';\n summary.textContent = `0 of ${total} enabled`;\n this._viewSummaries.set(id, summary);\n const actions = document.createElement('div');\n actions.className = 'nca-label-filter-rail__bulk-actions';\n for (const [enabled, label] of [[true, 'Enable all'], [false, 'Clear']]) {\n const button = document.createElement('button');\n button.type = 'button';\n button.className = 'nca-label-filter-rail__bulk';\n applySidebarMenuRole(button, SIDEBAR_MENU_ROLES.button);\n button.textContent = label;\n button.addEventListener('click', () => onBulk(enabled));\n actions.appendChild(button);\n }\n toolbar.append(summary, actions);\n return toolbar;\n }\n\n _createLayerRow({ id, label, description, parentLabel = '', iconMarkup = '', iconType = '', previewTypes = null, onClick }) {\n const generated = generateSidebarMenuComponent({\n type: 'row',\n id,\n title: label,\n description,\n eyebrow: parentLabel,\n iconHtml: iconMarkup || iconSvg('overlays'),\n trailingHtml: '',\n className: 'nca-label-filter-rail__layer-row nca-label-filter-rail__filter',\n attributes: { role: 'switch', 'aria-label': label },\n onActivate: onClick,\n });\n const button = generated.element;\n button.dataset.filterId = id;\n if (iconType) button.dataset.iconType = iconType;\n button.querySelector('.nca-menu-item-icon')?.classList.add('nca-label-filter-rail__row-icon');\n generated.copy.classList.add('nca-label-filter-rail__row-copy');\n button.querySelector('.nca-menu-item-eyebrow')?.classList.add('nca-label-filter-rail__row-parent');\n generated.title.classList.add('nca-label-filter-rail__row-name');\n button.querySelector('.nca-menu-item-description')?.classList.add('nca-label-filter-rail__row-description');\n const state = document.createElement('span');\n state.className = 'nca-label-filter-rail__switch';\n state.setAttribute('aria-hidden', 'true');\n button.appendChild(state);\n if (Array.isArray(previewTypes) && previewTypes.length) {\n button.addEventListener('pointerenter', (event) => {\n if (event?.pointerType !== 'touch') this._setCategoryPreview(id, previewTypes);\n });\n button.addEventListener('pointerleave', () => this._clearCategoryPreview(id));\n button.addEventListener('focus', () => this._setCategoryPreview(id, previewTypes));\n button.addEventListener('blur', () => this._clearCategoryPreview(id));\n }\n return button;\n }\n\n _createSearchView() {\n const view = this._createView('search');\n view.setAttribute('aria-live', 'polite');\n this._searchView = view;\n return view;\n }\n\n _createTemporalControls() {\n const controls = document.createElement('div');\n controls.className = 'nca-label-filter-rail__temporal';\n const rangeField = document.createElement('label');\n rangeField.className = 'nca-label-filter-rail__temporal-field';\n rangeField.append(document.createTextNode('Time range'));\n const modeSelect = document.createElement('select');\n modeSelect.className = 'nca-label-filter-rail__temporal-select nca-sidebar-select';\n modeSelect.setAttribute('aria-label', 'Filter scene labels by time range');\n for (const mode of LABEL_TEMPORAL_FILTER_MODES) {\n const option = document.createElement('option');\n option.value = mode.id;\n option.textContent = mode.label;\n modeSelect.appendChild(option);\n }\n rangeField.appendChild(modeSelect);\n const dateField = document.createElement('label');\n dateField.className = 'nca-label-filter-rail__temporal-field';\n dateField.append(document.createTextNode('Calendar day'));\n const dateInput = document.createElement('input');\n dateInput.type = 'date';\n dateInput.className = 'nca-label-filter-rail__temporal-date nca-sidebar-input';\n dateInput.setAttribute('aria-label', 'Specific scene label calendar day');\n dateField.appendChild(dateInput);\n const undatedLabel = document.createElement('label');\n undatedLabel.className = 'nca-label-filter-rail__temporal-undated';\n const includeUntimestamped = document.createElement('input');\n includeUntimestamped.type = 'checkbox';\n undatedLabel.append(includeUntimestamped, document.createTextNode('Keep static and undated labels'));\n const summary = document.createElement('div');\n summary.className = 'nca-label-filter-rail__temporal-summary';\n modeSelect.addEventListener('change', () => {\n let selectedDate = dateInput.value;\n if (modeSelect.value === 'day' && !selectedDate) {\n const now = new Date();\n selectedDate = [now.getFullYear(), String(now.getMonth() + 1).padStart(2, '0'), String(now.getDate()).padStart(2, '0')].join('-');\n dateInput.value = selectedDate;\n }\n this.settings?.updateScene?.({ labels: { temporalFilter: { mode: modeSelect.value, selectedDate } } });\n });\n dateInput.addEventListener('change', () => {\n this.settings?.updateScene?.({ labels: { temporalFilter: { mode: 'day', selectedDate: dateInput.value } } });\n });\n includeUntimestamped.addEventListener('change', () => {\n this.settings?.updateScene?.({ labels: { temporalFilter: { includeUntimestamped: includeUntimestamped.checked } } });\n });\n controls.append(rangeField, dateField, undatedLabel, summary);\n this._temporalControls = { modeSelect, dateInput, dateField, includeUntimestamped, summary };\n return controls;\n }\n\n _createSmokeModeControl() {\n const control = document.createElement('div');\n control.className = 'nca-label-filter-rail__smoke-modes';\n control.setAttribute('role', 'group');\n control.setAttribute('aria-label', 'Orbit smoke presentation');\n for (const [id, label] of [['geometry', 'GeoJSON'], ['volume', 'Raster'], ['both', 'Both']]) {\n const button = document.createElement('button');\n button.type = 'button';\n button.className = 'nca-label-filter-rail__smoke-mode';\n button.dataset.smokePresentation = id;\n button.textContent = label;\n button.setAttribute('aria-label', `${label} orbit smoke presentation`);\n button.addEventListener('click', () => {\n this._setSmokeModeState(id);\n this.settings?.updateScene?.({ labels: { smokePresentation: id } });\n });\n control.appendChild(button);\n this._smokeModeButtons.set(id, button);\n }\n return control;\n }\n\n _applyLabelPreset(id) {\n if (this.layerCatalog) {\n this.layerCatalog.applyLabelPreset(id);\n return;\n }\n const categories = LABEL_CATEGORY_GROUPS.flatMap((group) => getLabelCategoriesForFilterRail(group.id));\n const states = Object.fromEntries(categories.map((category) => [\n category.id,\n id === 'all' || (id === 'focus' && category.essential === true),\n ]));\n const patch = buildLabelCategoryPresetPatch(states);\n patch.labels = { ...patch.labels, enabled: true };\n this.settings?.updateScene?.(patch);\n }\n\n _applySearch(value) {\n const query = String(value || '').trim().toLowerCase();\n this._clearSearchControls();\n if (!query) {\n this._searchView.replaceChildren();\n this._renderActiveView();\n return;\n }\n for (const view of this._views.values()) view.hidden = true;\n this._searchView.hidden = false;\n this._backButton.hidden = false;\n this._title.textContent = 'Search results';\n this._searchView.replaceChildren();\n const matches = this._searchItems.filter((item) => item.keywords.includes(query));\n for (const entry of this.layerCatalog?.list?.({\n kinds: ['authored_overlay', 'scan_collection', 'scan_result'],\n query,\n }) || []) {\n matches.push({\n id: entry.id,\n label: entry.label,\n parentLabel: entry.categoryLabel,\n type: 'catalog',\n createRow: (parentLabel = '') => {\n const row = this._createLayerRow({\n id: entry.id,\n label: entry.label,\n description: entry.description,\n parentLabel,\n onClick: () => void this.layerCatalog.setVisibility(entry.id, !entry.visible),\n });\n this._setButtonState(row, entry.visible);\n row.disabled = entry.disabled || !entry.mutable;\n return row;\n },\n });\n }\n if (!matches.length) {\n const empty = document.createElement('div');\n empty.className = 'nca-label-filter-rail__empty';\n empty.textContent = `No layers match “${String(value).trim()}”.`;\n this._searchView.appendChild(empty);\n return;\n }\n for (const item of matches) {\n const row = item.createRow(item.parentLabel);\n if (item.type === 'category') registerControl(this._categoryButtons, item.id, row);\n else if (item.type === 'utility') registerControl(this._utilityButtons, item.id, row);\n else if (item.type === 'borders') this._borderButtons.add(row);\n this._searchControls.push({ type: item.type, id: item.id, row });\n this._searchView.appendChild(row);\n }\n this.sync();\n }\n\n _showView(id) {\n if (!this._views.has(id) || id === 'search') return;\n this._activeView = id;\n if (this._searchInput?.value) this._searchInput.value = '';\n this._clearSearchControls();\n this._searchView?.replaceChildren();\n this._renderActiveView();\n }\n\n _renderActiveView() {\n for (const [id, view] of this._views) view.hidden = id !== this._activeView;\n const root = this._activeView === 'root';\n this._backButton.hidden = root;\n this._title.textContent = root\n ? 'Layers'\n : (this._categoryCards.get(this._activeView)?.querySelector('.nca-label-filter-rail__category-name')?.textContent || 'Layers');\n this._body?.scrollTo?.({ top: 0 });\n }\n\n _clearSearchControls() {\n for (const { type, id, row } of this._searchControls) {\n if (type === 'category') this._categoryButtons.get(id)?.delete(row);\n else if (type === 'utility') this._utilityButtons.get(id)?.delete(row);\n else if (type === 'borders') this._borderButtons.delete(row);\n }\n this._searchControls = [];\n }\n\n setExpanded(expanded) {\n this._expanded = !!expanded;\n this._panel.hidden = !this._expanded;\n this._triggerButton.hidden = this._expanded;\n this._triggerButton.setAttribute('aria-expanded', this._expanded ? 'true' : 'false');\n if (!this._expanded) {\n this._showView('root');\n this._triggerButton.hidden = false;\n } else {\n requestAnimationFrame(() => this._searchInput?.focus());\n }\n }\n\n _setCategoryPreview(categoryId, types) {\n const normalizedTypes = [...new Set((Array.isArray(types) ? types : []).map((type) => String(type || '').trim()).filter(Boolean))];\n if (!categoryId || !normalizedTypes.length) return;\n this._previewCategoryId = categoryId;\n try {\n document.dispatchEvent(new CustomEvent('noclip:scene-label-category-preview', { detail: { categoryId, types: normalizedTypes } }));\n } catch {}\n }\n\n _clearCategoryPreview(categoryId = null) {\n if (categoryId && this._previewCategoryId !== categoryId) return;\n if (!this._previewCategoryId) return;\n this._previewCategoryId = null;\n try {\n document.dispatchEvent(new CustomEvent('noclip:scene-label-category-preview', { detail: null }));\n } catch {}\n }\n\n sync() {\n this._renderCatalogView();\n const labels = this.settings?.getSection?.('scene.labels') || {};\n const labelsEnabled = labels.enabled !== false;\n this._setButtonState(this._masterButton, labelsEnabled);\n this._masterButton?.setAttribute('aria-label', labelsEnabled ? 'Hide all scene labels' : 'Show scene labels');\n this._syncPresetButtons(labels, labelsEnabled);\n\n const groupCounts = new Map();\n let enabledCount = 0;\n for (const group of LABEL_CATEGORY_GROUPS) {\n const categories = getLabelCategoriesForFilterRail(group.id);\n let activeCount = 0;\n for (const category of categories) {\n const configured = getLabelCategoryControlValue(this.settings, labels, category.id);\n const active = labelsEnabled && configured;\n if (active) activeCount += 1;\n const buttons = this._categoryButtons.get(category.id) || [];\n const catalogEntry = this.layerCatalog?.get?.(`label:${category.id}`) || null;\n for (const button of buttons) {\n this._setButtonState(button, active);\n button.disabled = !labelsEnabled;\n button.setAttribute('aria-disabled', labelsEnabled ? 'false' : 'true');\n button.dataset.configured = configured ? 'true' : 'false';\n if (catalogEntry?.status) button.dataset.sourceStatus = catalogEntry.status;\n const description = button.querySelector('.nca-menu-item-description');\n if (description) description.textContent = catalogEntry?.description || category.description;\n }\n }\n groupCounts.set(group.id, { active: activeCount, total: categories.length });\n enabledCount += activeCount;\n }\n\n const infrastructure = this.settings?.getSection?.('scene.infrastructure') || {};\n let utilityCount = 0;\n for (const filter of OPEN_INFRA_MAP_UTILITY_FILTERS) {\n const active = infrastructure.layers?.[filter.setting] === true;\n if (active) utilityCount += 1;\n for (const button of this._utilityButtons.get(filter.setting) || []) {\n this._setButtonState(button, active);\n button.disabled = false;\n button.setAttribute('aria-disabled', 'false');\n button.dataset.configured = active ? 'true' : 'false';\n }\n }\n enabledCount += utilityCount;\n\n const catalogEntries = this._catalogEntries();\n const visibleCatalogEntries = catalogEntries.filter((entry) => entry.visible).length;\n enabledCount += visibleCatalogEntries;\n\n const bordersEnabled = labelsEnabled\n && getLabelCategoryControlValue(this.settings, labels, 'administrative');\n for (const button of this._borderButtons) {\n this._setButtonState(button, bordersEnabled);\n button.disabled = !labelsEnabled;\n button.setAttribute('aria-disabled', labelsEnabled ? 'false' : 'true');\n }\n // This row is an alternate route to the canonical administrative label\n // category, not a second independently enabled overlay.\n\n for (const [id, counts] of groupCounts) this._setCountState(id, counts.active, counts.total);\n this._setCountState('utilities', utilityCount, OPEN_INFRA_MAP_UTILITY_FILTERS.length);\n this._setCountState('display', bordersEnabled ? 1 : 0, 1);\n if (this.layerCatalog) this._setCountState('content', visibleCatalogEntries, catalogEntries.length);\n if (this._countBadge) this._countBadge.textContent = String(enabledCount);\n this._triggerButton?.classList.toggle('is-active', labelsEnabled);\n this.element?.classList.toggle('labels-enabled', labelsEnabled);\n const label = `Scene labels ${labelsEnabled ? 'on' : 'off'}, ${enabledCount} enabled layers. Open layers`;\n this._triggerButton?.setAttribute('aria-label', label);\n this._triggerButton?.setAttribute('title', label);\n\n const temporalFilter = normalizeLabelTemporalFilter(labels.temporalFilter);\n if (this._temporalControls) {\n const { modeSelect, dateInput, dateField, includeUntimestamped, summary } = this._temporalControls;\n modeSelect.value = temporalFilter.mode;\n dateInput.value = temporalFilter.selectedDate;\n dateField.hidden = temporalFilter.mode !== 'day';\n includeUntimestamped.checked = temporalFilter.includeUntimestamped;\n summary.textContent = `Showing: ${labelTemporalFilterSummary(temporalFilter)}`;\n }\n this._setSmokeModeState(['geometry', 'volume', 'both'].includes(labels.smokePresentation) ? labels.smokePresentation : 'geometry');\n }\n\n /** Highlight the preset that matches the current category states, if any. */\n _syncPresetButtons(labels, labelsEnabled) {\n if (!this._presetButtons?.size) return;\n const categories = LABEL_CATEGORY_GROUPS.flatMap((group) => getLabelCategoriesForFilterRail(group.id));\n const states = categories.map((category) => ({\n on: getLabelCategoryControlValue(this.settings, labels, category.id),\n essential: category.essential === true,\n }));\n const matches = {\n all: labelsEnabled && states.every((s) => s.on),\n none: states.every((s) => !s.on),\n focus: labelsEnabled && states.some((s) => s.essential) && states.every((s) => s.on === s.essential),\n };\n for (const [id, button] of this._presetButtons) this._setButtonState(button, matches[id] === true);\n }\n\n _setCountState(id, active, total) {\n const card = this._categoryCards.get(id);\n const count = card?.querySelector('.nca-label-filter-rail__category-count');\n if (count) count.textContent = `${active} / ${total}`;\n if (card) card.dataset.activeCount = String(active);\n const summary = this._viewSummaries.get(id);\n if (summary) summary.textContent = `${active} of ${total} enabled`;\n }\n\n _setSmokeModeState(smokePresentation) {\n for (const [id, button] of this._smokeModeButtons) {\n const active = id === smokePresentation;\n button.classList.toggle('is-active', active);\n button.setAttribute('aria-pressed', active ? 'true' : 'false');\n button.dataset.active = active ? 'true' : 'false';\n button.disabled = false;\n }\n }\n\n _setButtonState(button, active) {\n if (!button) return;\n button.classList.toggle('is-active', active);\n button.setAttribute('aria-checked', active ? 'true' : 'false');\n button.setAttribute('aria-pressed', active ? 'true' : 'false');\n }\n\n destroy() {\n this._clearCategoryPreview();\n this._unsubscribe?.();\n this._catalogUnsubscribe?.();\n document.removeEventListener('pointerdown', this._onDocumentPointerDown, true);\n document.removeEventListener('keydown', this._onDocumentKeyDown);\n this._categoryButtons.clear();\n this._utilityButtons.clear();\n this._borderButtons.clear();\n this._categoryCards.clear();\n this._viewSummaries.clear();\n this._smokeModeButtons.clear();\n this._views.clear();\n this._searchControls = [];\n this.element?.remove();\n this.element = null;\n }\n}\n","import {createWeatherVolumeControls} from './WeatherVolumeControls.js';\nimport { mountDataFeed } from '../feed/DataFeedView.js';\nimport { mountLeadership } from '../leadership/LeadershipView.js';\nimport { mountCveNowFeed } from '../cve/CveNowFeedView.js';\nimport {\n buildLabelCategoryControlPatch as labelCategoryScenePatch,\n buildLabelCategoryPresetPatch as labelPresetScenePatch,\n getLabelCategoriesByGroup,\n getLabelCategoryControlValue,\n LABEL_CATEGORY_GROUPS,\n} from '../labels/LabelCategoryRegistry.js';\nimport {\n LABEL_TEMPORAL_FILTER_MODES,\n labelTemporalFilterSummary,\n normalizeLabelTemporalFilter,\n} from '../labels/LabelTemporalFilter.js';\nimport * as BasemapRegistry from '../imagery/BasemapRegistry.js';\nimport { groupMapSources } from '../imagery/MapSourceCatalog.js';\nimport { MAPSOURCE_MAX_PITCH } from '../imagery/MapSourceStyle.js';\nimport { getHudIcon } from './HudIcons.js';\nimport { getTimelinePanel } from './TimelinePanel.js';\nimport { areSceneCloudsEnabled, toggleSceneClouds } from './CloudsControl.js';\n\nconst SMOKE_PRESENTATION_MODES = Object.freeze([\n ['geometry', 'GeoJSON'],\n ['volume', 'Raster'],\n ['both', 'Both'],\n]);\n\nconst NAV_ITEMS = Object.freeze([\n { id: 'explore', label: 'Map', icon: 'basemap' },\n { id: 'labels', label: 'Layers', icon: 'label' },\n { id: 'timeline', label: 'Time', icon: 'timeline' },\n { id: 'more', label: 'More', icon: 'config' },\n { id: 'quick', label: 'Quick actions', icon: 'quick' },\n]);\n\nconst LEGACY_EXCLUSIONS = new Set(['minimap', 'map-expand', 'timeline', 'labels']);\nconst MAP_MODE_LONG_PRESS_MS = 500;\nconst MAP_MODE_LONG_PRESS_MOVE_PX = 12;\nconst MAP_MODE_CLICK_SUPPRESSION_MS = 400;\n\nconst LEGACY_GROUPS = Object.freeze([\n {\n id: 'create',\n label: 'Create & scan',\n ids: ['camera', 'camera-submit', 'add-field-asset', 'overlays', 'draw'],\n },\n {\n id: 'navigate',\n label: 'Navigate & observe',\n ids: ['basemap', 'gps', 'joystick', 'orbit', 'sensors', 'ar', 'vr'],\n },\n {\n id: 'connect',\n label: 'People & live feeds',\n ids: ['user', 'friends', 'chat', 'radio-auto', 'rtl-sdr', 'wallet'],\n },\n {\n id: 'system',\n label: 'Display & system',\n ids: ['config', 'info', 'metaverse'],\n },\n]);\n\nconst AGENT_ICON = `\n `;\n\nconst SEARCH_ICON = `\n `;\n\nconst isCategoryActive = (settings, labels, category) => (\n getLabelCategoryControlValue(settings, labels, category.id)\n);\n\nfunction injectStyles() {\n if (document.getElementById('nca-mobile-navigation-shell-styles')) return;\n const style = document.createElement('style');\n style.id = 'nca-mobile-navigation-shell-styles';\n style.textContent = `\n body.is-mobile.mobile-command-shell-active {\n --nca-mobile-nav-height: 60px;\n --nca-mobile-visual-height: 100dvh;\n --nca-mobile-visual-width: 100vw;\n --nca-mobile-visual-offset-top: 0px;\n --nca-mobile-visual-offset-left: 0px;\n --nca-mobile-keyboard-inset: 0px;\n --nca-mobile-pill-bg: var(--nc-hud-glass-bg, rgba(5, 9, 14, 0.7));\n --nca-mobile-pill-border: var(--nc-hud-glass-border, rgba(255, 255, 255, 0.18));\n --nca-mobile-pill-shadow: var(--nc-hud-glass-shadow, 0 10px 32px rgba(0, 0, 0, 0.3));\n --nca-mobile-top-control-size: 36px;\n --nca-mobile-top-control-gap: 6px;\n --nca-mobile-mode-control-width: 68px;\n --nca-mobile-top-inset-left: max(8px, env(safe-area-inset-left, 0px));\n --nca-mobile-top-inset-right: max(8px, env(safe-area-inset-right, 0px));\n }\n\n body.is-mobile.mobile-command-shell-active .hud-dock-buttons,\n body.is-mobile.mobile-command-shell-active .hud-dock-expander {\n display: none !important;\n }\n body.is-mobile.mobile-command-shell-active .hud-dock {\n pointer-events: none !important;\n }\n body.is-mobile.mobile-command-shell-active .hud-dock.mobile-panel-open {\n pointer-events: auto !important;\n }\n body.is-mobile.mobile-command-shell-active .nca-agent-chat-btn {\n display: none !important;\n }\n /* A legacy dock panel takes over the whole viewport on phones. It used to\n cover the search row by z-index alone, because the row was buried in the\n #hud-layout stacking context with it. The row now lives at so it\n can clear the fullscreen map, which puts it above the panel's trapped\n z-index — so retire it explicitly for that state, exactly as the sheet\n and agent chat already do. */\n body.is-mobile.mobile-command-shell-active.nca-mobile-sheet-open #hud-search,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open #hud-search,\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open #hud-search,\n body.is-mobile.mobile-command-shell-active.nca-mobile-sheet-open .nca-mobile-search-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-sheet-open .nca-mobile-gps-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-sheet-open .nca-mobile-night-vision-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-sheet-open .nca-mobile-map-mode-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open .nca-mobile-search-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open .nca-mobile-gps-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open .nca-mobile-night-vision-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open .nca-mobile-map-mode-trigger,\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .nca-mobile-search-trigger,\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .nca-mobile-gps-trigger,\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .nca-mobile-night-vision-trigger,\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .nca-mobile-map-mode-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open .nca-mobile-agent-trigger,\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .nca-mobile-agent-trigger {\n opacity: 0 !important;\n visibility: hidden !important;\n pointer-events: none !important;\n }\n body.is-mobile.mobile-command-shell-active .nca-address-toast {\n bottom: calc(var(--nca-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 10px) !important;\n max-width: calc(100vw - 16px) !important;\n }\n body.is-mobile.mobile-command-shell-active #debug-toggle,\n body.is-mobile.mobile-command-shell-active #noclip-mem-debug-btn,\n body.is-mobile.mobile-command-shell-active #cesium-open-ecosystem-badge:not(.nca-mobile-cesium-badge) {\n display: none !important;\n }\n body.is-mobile.mobile-command-shell-active .nca-mobile-sheet #cesium-open-ecosystem-badge.nca-mobile-cesium-badge {\n position: static !important;\n display: inline-flex;\n width: auto !important;\n height: auto !important;\n margin-top: 16px;\n padding: 8px 12px !important;\n gap: 10px;\n font: 12px/1.4 var(--nca-font-ui, sans-serif);\n }\n body.is-mobile.mobile-command-shell-active #cesium-open-ecosystem-badge[hidden] { display: none !important; }\n /* The account button owns this corner on phones; the marketplace panel\n stays mounted for programmatic opens but its toggle is retired here. */\n body.is-mobile.mobile-command-shell-active #provider-marketplace-toggle { display: none !important; }\n body.is-mobile.mobile-command-shell-active.nca-mobile-sheet-open .nca-mobile-account-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open .nca-mobile-account-trigger,\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .nca-mobile-account-trigger { visibility: hidden; pointer-events: none; }\n .nca-mobile-action[hidden] { display: none !important; }\n body.is-mobile.mobile-command-shell-active #provider-marketplace-panel {\n position: absolute;\n top: calc(max(8px, env(safe-area-inset-top, 0px)) + 44px);\n bottom: auto;\n left: auto;\n right: var(--nca-mobile-top-inset-right);\n width: min(340px, calc(100% - 16px));\n max-height: calc(var(--nca-mobile-visual-height) - 116px);\n box-sizing: border-box;\n pointer-events: auto;\n display: none !important;\n background: var(--nca-mobile-pill-bg);\n border: 1px solid var(--nca-mobile-pill-border);\n border-radius: 18px;\n box-shadow: var(--nca-mobile-pill-shadow);\n backdrop-filter: blur(18px);\n -webkit-backdrop-filter: blur(18px);\n }\n body.is-mobile.mobile-command-shell-active #provider-marketplace-panel.open { display: block !important; }\n .nca-mobile-provider-close { margin-left: auto; }\n body.is-mobile.mobile-command-shell-active.nca-mobile-sheet-open .nca-address-toast,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open .nca-address-toast,\n body.is-mobile.mobile-command-shell-active.nca-mobile-provider-open .nca-address-toast,\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .nca-address-toast {\n display: none !important;\n }\n body.is-mobile.mobile-command-shell-active .virtual-joystick,\n body.is-mobile.mobile-command-shell-active .virtual-actions {\n bottom: calc(var(--nca-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 14px) !important;\n }\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .virtual-joystick,\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .virtual-actions,\n body.is-mobile.mobile-command-shell-active.nca-mobile-sheet-open .virtual-joystick,\n body.is-mobile.mobile-command-shell-active.nca-mobile-sheet-open .virtual-actions,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open .virtual-joystick,\n body.is-mobile.mobile-command-shell-active.nca-mobile-deep-panel-open .virtual-actions {\n opacity: 0;\n pointer-events: none;\n }\n\n /* The command bar owns the bottom safe area. Keep every flight\n instrument inside the remaining visual viewport instead of allowing\n the dock tapes and compass to continue underneath the bar. */\n body.is-mobile.mobile-command-shell-active .hud-dock {\n top: calc(var(--nca-mobile-visual-offset-top) + max(8px, env(safe-area-inset-top, 0px))) !important;\n }\n body.is-mobile.mobile-command-shell-active .hud-dock-controls {\n height: calc(\n var(--nca-mobile-visual-height)\n - var(--nca-mobile-nav-height)\n - env(safe-area-inset-bottom, 0px)\n - max(16px, env(safe-area-inset-top, 0px) + 8px)\n - 8px\n ) !important;\n box-sizing: border-box;\n }\n body.is-mobile.mobile-command-shell-active #hud-compass {\n bottom: calc(var(--nca-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 6px) !important;\n width: min(420px, calc(var(--nca-mobile-visual-width) - 24px)) !important;\n }\n body.is-mobile.mobile-command-shell-active #hud-compass > .hud-instrument-readout {\n bottom: calc(100% + 18px) !important;\n }\n\n body.is-mobile.mobile-command-shell-active .hud-instrument-readout {\n border: 0 !important;\n border-radius: 0 !important;\n background: transparent !important;\n box-shadow: none !important;\n backdrop-filter: none !important;\n -webkit-backdrop-filter: none !important;\n opacity: 0.5 !important;\n }\n body.is-mobile.mobile-command-shell-active .hud-scale-subreadout,\n body.is-mobile.mobile-command-shell-active .hud-compass-subreadout {\n padding-inline: 4px !important;\n font-size: 8px !important;\n letter-spacing: 0.08em !important;\n }\n\n /* Phone instruments should read as precise references rather than heavy\n bars. Removing the desktop halo is as important as reducing the stroke:\n otherwise the 0.5px line still presents as a four-pixel tick. */\n body.is-mobile.mobile-command-shell-active #hud-altimeter .hud-tick,\n body.is-mobile.mobile-command-shell-active #hud-pitch-ladder .hud-tick {\n height: 0.5px !important;\n min-height: 0 !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n }\n body.is-mobile.mobile-command-shell-active #hud-compass .hud-compass-tick {\n width: 0.5px !important;\n min-width: 0 !important;\n border-radius: 0 !important;\n box-shadow: none !important;\n }\n\n /* Phone chrome contains contextual night vision, map mode, GPS, search and Agent.\n Home, directions, language, and travel modes move into the Map and More\n sheets instead of competing for the narrow top row. */\n body.is-mobile.mobile-command-shell-active .nca-hud-top-row {\n top: calc(var(--nca-mobile-visual-offset-top) + max(8px, env(safe-area-inset-top, 0px))) !important;\n left: calc(var(--nca-mobile-visual-offset-left) + max(8px, env(safe-area-inset-left, 0px))) !important;\n right: auto !important;\n width: calc(\n var(--nca-mobile-visual-width)\n - var(--nca-mobile-top-inset-left)\n - var(--nca-mobile-top-inset-right)\n - var(--nca-mobile-top-control-size)\n - var(--nca-mobile-top-control-gap)\n ) !important;\n gap: 0 !important;\n }\n body.is-mobile.mobile-command-shell-active .nca-hud-top-row > .nca-sidebar-header {\n display: none !important;\n }\n body.is-mobile.mobile-command-shell-active #hud-search {\n position: fixed !important;\n top: calc(var(--nca-mobile-visual-offset-top) + max(8px, env(safe-area-inset-top, 0px))) !important;\n left: auto !important;\n right: calc(\n 100vw\n - var(--nca-mobile-visual-offset-left)\n - var(--nca-mobile-visual-width)\n + var(--nca-mobile-top-inset-right)\n + var(--nca-mobile-top-control-size)\n + var(--nca-mobile-top-control-gap)\n ) !important;\n width: var(--nca-mobile-top-control-size) !important;\n max-width: none !important;\n transform: none !important;\n transform-origin: right center !important;\n z-index: 1500 !important;\n box-sizing: border-box !important;\n opacity: 0 !important;\n visibility: hidden !important;\n pointer-events: none !important;\n transition:\n width 220ms cubic-bezier(.22, 1, .36, 1),\n opacity 90ms ease,\n visibility 0s linear 220ms !important;\n will-change: width, opacity;\n --nca-search-surface-radius: calc(var(--nca-mobile-top-control-size) / 2);\n --nca-search-surface-bg: var(--nca-mobile-pill-bg);\n --nca-search-surface-border: var(--nca-mobile-pill-border);\n --nca-search-surface-shadow: var(--nca-mobile-pill-shadow);\n --nca-search-surface-filter: blur(18px) brightness(0.82);\n --nca-search-drawer-gap: 8px;\n }\n body.is-mobile.mobile-command-shell-active.nca-mobile-search-open #hud-search {\n width: max(\n var(--nca-mobile-top-control-size),\n calc(\n var(--nca-mobile-visual-width)\n - var(--nca-mobile-top-inset-left)\n - var(--nca-mobile-top-inset-right)\n - var(--nca-mobile-top-control-size)\n - var(--nca-mobile-top-control-gap)\n )\n ) !important;\n opacity: 1 !important;\n visibility: visible !important;\n pointer-events: auto !important;\n transition-delay: 0s, 0s, 0s !important;\n }\n body.is-mobile.mobile-command-shell-active .nca-hud-top-row > #hud-search,\n body.is-mobile.mobile-command-shell-active.hud-nav-active .nca-hud-top-row > #hud-search {\n flex: 1 1 auto !important;\n max-width: none !important;\n min-width: 0 !important;\n }\n body.is-mobile.mobile-command-shell-active #hud-search .hud-search-row,\n body.is-mobile.mobile-command-shell-active.hud-nav-active #hud-search .hud-search-row {\n width: 100% !important;\n height: var(--nca-mobile-top-control-size) !important;\n flex-wrap: nowrap !important;\n gap: 8px !important;\n }\n body.is-mobile.mobile-command-shell-active #hud-search .hud-search-inner,\n body.is-mobile.mobile-command-shell-active.hud-nav-active #hud-search .hud-search-inner {\n flex: 1 1 auto !important;\n width: auto !important;\n min-width: 0 !important;\n padding-inline: 14px !important;\n overflow: hidden !important;\n border: 1px solid var(--nca-search-surface-border) !important;\n border-radius: var(--nca-search-surface-radius) !important;\n background: var(--nca-search-surface-bg) !important;\n box-shadow: var(--nca-search-surface-shadow) !important;\n backdrop-filter: var(--nca-search-surface-filter) !important;\n -webkit-backdrop-filter: var(--nca-search-surface-filter) !important;\n }\n body.is-mobile.mobile-command-shell-active #hud-search .hud-search-input,\n body.is-mobile.mobile-command-shell-active.hud-nav-active #hud-search .hud-search-input {\n border: 0 !important;\n border-radius: 0 !important;\n outline: 0 !important;\n background: transparent !important;\n box-shadow: none !important;\n -webkit-appearance: none !important;\n appearance: none !important;\n }\n body.is-mobile.mobile-command-shell-active #hud-search .hud-search-action-cluster,\n body.is-mobile.mobile-command-shell-active.hud-nav-active #hud-search .hud-search-action-cluster {\n display: none !important;\n }\n body.is-mobile.mobile-command-shell-active #hud-search .hud-search-results,\n body.is-mobile.mobile-command-shell-active.hud-nav-active #hud-search .hud-search-results {\n top: calc(var(--nca-mobile-top-control-size) + var(--nca-search-drawer-gap)) !important;\n left: 0 !important;\n right: auto !important;\n width: min(100%, var(--nca-search-drawer-width, 100%)) !important;\n max-height: min(\n 62dvh,\n calc(\n var(--nca-mobile-visual-height)\n - var(--nca-mobile-nav-height)\n - var(--nca-mobile-top-control-size)\n - var(--nca-search-drawer-gap)\n - max(24px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px))\n )\n ) !important;\n border: 1px solid var(--nca-search-surface-border) !important;\n border-radius: var(--nca-search-surface-radius) !important;\n background: var(--nca-search-surface-bg) !important;\n box-shadow: var(--nca-search-surface-shadow) !important;\n backdrop-filter: var(--nca-search-surface-filter) !important;\n -webkit-backdrop-filter: var(--nca-search-surface-filter) !important;\n }\n\n .nca-mobile-night-vision-trigger,\n .nca-mobile-gps-trigger,\n .nca-mobile-map-mode-trigger,\n .nca-mobile-search-trigger,\n .nca-mobile-account-trigger {\n position: absolute;\n z-index: 2;\n top: max(8px, env(safe-area-inset-top, 0px));\n }\n .nca-mobile-circle[hidden] { display: none !important; }\n .nca-mobile-circle {\n width: var(--nca-mobile-top-control-size);\n min-width: var(--nca-mobile-top-control-size);\n max-width: var(--nca-mobile-top-control-size);\n height: var(--nca-mobile-top-control-size);\n min-height: var(--nca-mobile-top-control-size);\n max-height: var(--nca-mobile-top-control-size);\n aspect-ratio: 1;\n padding: 0;\n display: grid;\n place-items: center;\n box-sizing: border-box;\n border: 1px solid var(--nca-mobile-pill-border) !important;\n border-radius: 50% !important;\n background: var(--nca-mobile-pill-bg) !important;\n color: var(--nclp-text, rgba(255,255,255,.86)) !important;\n box-shadow: var(--nca-mobile-pill-shadow) !important;\n backdrop-filter: blur(18px) brightness(0.82);\n -webkit-backdrop-filter: blur(18px) brightness(0.82);\n pointer-events: auto;\n cursor: pointer;\n line-height: 0;\n transition: opacity 120ms ease, border-color 120ms ease, color 120ms ease;\n }\n .nca-mobile-search-trigger {\n right: calc(\n var(--nca-mobile-top-inset-right)\n + var(--nca-mobile-top-control-size)\n + var(--nca-mobile-top-control-gap)\n );\n }\n .nca-mobile-gps-trigger {\n right: calc(\n var(--nca-mobile-top-inset-right)\n + (var(--nca-mobile-top-control-size) * 2)\n + (var(--nca-mobile-top-control-gap) * 2)\n );\n }\n .nca-mobile-night-vision-trigger {\n right: calc(\n var(--nca-mobile-top-inset-right)\n + (var(--nca-mobile-top-control-size) * 3)\n + (var(--nca-mobile-top-control-gap) * 4)\n + var(--nca-mobile-mode-control-width)\n );\n }\n .nca-mobile-map-mode-trigger {\n right: calc(\n var(--nca-mobile-top-inset-right)\n + (var(--nca-mobile-top-control-size) * 3)\n + (var(--nca-mobile-top-control-gap) * 3)\n );\n width: var(--nca-mobile-mode-control-width);\n min-width: var(--nca-mobile-mode-control-width);\n max-width: var(--nca-mobile-mode-control-width);\n aspect-ratio: auto;\n grid-template-columns: 1fr auto 1fr;\n gap: 3px;\n padding: 0 8px;\n border-radius: 999px !important;\n font: 700 9px/1 var(--nca-font-mono, monospace);\n letter-spacing: 0.03em;\n }\n .nca-mobile-view-actions {\n position: absolute; z-index: 2;\n top: max(8px, env(safe-area-inset-top, 0px));\n right: calc(var(--nca-mobile-top-inset-right) + (var(--nca-mobile-top-control-size) * 3) + (var(--nca-mobile-top-control-gap) * 3));\n display: flex; align-items: center; gap: var(--nca-mobile-top-control-gap);\n pointer-events: none;\n }\n .nca-mobile-view-actions > button { position: static; flex: 0 0 auto; }\n .nca-mobile-map-mode-trigger__divider {\n color: rgba(255, 255, 255, 0.3);\n font-weight: 500;\n }\n .nca-mobile-map-mode-trigger__option {\n color: rgba(255, 255, 255, 0.42);\n transition: color 120ms ease;\n }\n .nca-mobile-map-mode-trigger[data-current-mode=\"3d\"] [data-map-mode-option=\"3d\"],\n .nca-mobile-map-mode-trigger[data-current-mode=\"2d\"] [data-map-mode-option=\"2d\"] {\n color: var(--nclp-yellow, #facc15);\n }\n .nca-mobile-account-trigger {\n right: var(--nca-mobile-top-inset-right);\n }\n .nca-mobile-account-trigger.is-signed-in { color: var(--nclp-yellow, #facc15); }\n body.is-mobile.mobile-command-shell-active.nca-mobile-search-open .nca-mobile-search-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-search-open .nca-mobile-gps-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-search-open .nca-mobile-night-vision-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-search-open .nca-mobile-map-mode-trigger,\n body.is-mobile.mobile-command-shell-active.nca-mobile-search-open .nca-lens-toggle.nca-mobile-circle {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n }\n .nca-mobile-circle svg { width: 18px; height: 18px; }\n .nca-mobile-circle:hover,\n .nca-mobile-circle:focus-visible,\n .nca-mobile-circle[aria-expanded=\"true\"],\n .nca-mobile-circle[aria-pressed=\"true\"] {\n border-color: var(--nclp-yellow, #facc15) !important;\n color: var(--nclp-yellow, #facc15) !important;\n outline: none;\n }\n body.is-mobile.mobile-command-shell-active .nca-mobile-circle[aria-pressed=\"true\"],\n body.is-mobile.mobile-command-shell-active .nca-mobile-circle[aria-expanded=\"true\"] {\n border-color: var(--nclp-yellow, #facc15) !important;\n background: color-mix(in srgb, var(--nclp-yellow, #facc15) 12%, var(--nca-mobile-pill-bg)) !important;\n color: var(--nclp-yellow, #facc15) !important;\n box-shadow: var(--nca-mobile-pill-shadow) !important;\n }\n .nca-mobile-gps-trigger[aria-busy=\"true\"] {\n cursor: progress;\n opacity: 0.72;\n }\n\n .nca-mobile-navigation {\n position: fixed;\n z-index: 1900;\n top: 0;\n left: 0;\n right: auto;\n bottom: auto;\n width: var(--nca-mobile-visual-width);\n height: var(--nca-mobile-visual-height);\n transform: translate3d(\n var(--nca-mobile-visual-offset-left),\n var(--nca-mobile-visual-offset-top),\n 0\n );\n color: #fff;\n font-family: var(--nca-font-ui, var(--font-ui, system-ui, sans-serif));\n pointer-events: none;\n }\n body.is-mobile.nca-camera-live .nca-mobile-navigation {\n /* CameraCaptureSystem deliberately owns a full-opacity layer at 20000.\n Keep the compact command bar and its scan controls reachable without\n bringing the released Earth scene back into the camera viewport. */\n z-index: 20030;\n }\n .nca-mobile-navigation__bar {\n position: absolute;\n left: 50%;\n bottom: max(8px, env(safe-area-inset-bottom, 0px));\n display: flex;\n gap: var(--nca-mobile-top-control-gap);\n padding: 0;\n border: 0;\n background: transparent;\n box-shadow: none;\n pointer-events: auto;\n transform: translateX(-50%);\n transition: opacity 120ms ease;\n }\n .nca-mobile-navigation__item { position: relative; }\n body.is-mobile.mobile-command-shell-active.nca-agent-chat-open .nca-mobile-navigation__bar {\n visibility: hidden;\n pointer-events: none;\n }\n\n .nca-mobile-sheet {\n position: absolute;\n left: max(8px, env(safe-area-inset-left, 0px));\n right: max(8px, env(safe-area-inset-right, 0px));\n bottom: calc(var(--nca-mobile-nav-height) + env(safe-area-inset-bottom, 0px) + 8px);\n width: auto;\n max-width: 620px;\n max-height: min(64dvh, calc(var(--nca-mobile-visual-height) - var(--nca-mobile-nav-height) - 24px));\n margin: 0 auto;\n display: none;\n flex-direction: column;\n border: 1px solid rgba(255, 255, 255, 0.18);\n background: #1117;\n box-shadow: 0 18px 54px rgba(0, 0, 0, 0.46);\n backdrop-filter: blur(20px) brightness(0.68);\n -webkit-backdrop-filter: blur(20px) brightness(0.68);\n pointer-events: auto;\n overflow: hidden;\n }\n .nca-mobile-sheet.is-open {\n display: flex;\n animation: nca-mobile-sheet-in 140ms ease-out both;\n }\n @keyframes nca-mobile-sheet-in {\n from { opacity: 0; transform: translateY(12px); }\n to { opacity: 1; transform: translateY(0); }\n }\n .nca-mobile-sheet__header {\n min-height: 52px;\n padding: 0 6px 0 15px;\n display: grid;\n grid-template-columns: minmax(0, 1fr) 44px;\n align-items: center;\n border-bottom: 1px solid rgba(255, 255, 255, 0.11);\n flex: 0 0 auto;\n }\n .nca-mobile-sheet__heading {\n min-width: 0;\n }\n .nca-mobile-sheet__eyebrow {\n display: block;\n margin-bottom: 3px;\n color: var(--nca-accent, #ffae00);\n font: 650 8px/1 var(--nca-font-mono, monospace);\n letter-spacing: 0.13em;\n text-transform: uppercase;\n }\n .nca-mobile-sheet__title {\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: 14px;\n line-height: 1.15;\n font-weight: 650;\n }\n .nca-mobile-sheet__close {\n width: 44px;\n height: 44px;\n border: 0;\n background: transparent;\n color: rgba(255,255,255,.68);\n cursor: pointer;\n font-size: 18px;\n }\n .nca-mobile-sheet__close:hover { color: #fff; background: rgba(255,255,255,.07); }\n .nca-mobile-sheet__close:focus-visible {\n outline: 2px solid var(--nca-accent, #ffae00);\n outline-offset: -3px;\n }\n .nca-mobile-sheet__body {\n min-height: 0;\n padding: 12px;\n overflow-x: hidden;\n overflow-y: auto;\n overscroll-behavior: contain;\n -webkit-overflow-scrolling: touch;\n }\n .nca-mobile-sheet__hint {\n margin: 0 0 12px;\n color: rgba(255,255,255,.5);\n font-size: 10px;\n line-height: 1.45;\n }\n\n .nca-mobile-action-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 7px;\n }\n .nca-mobile-action {\n min-width: 0;\n min-height: 56px;\n padding: 8px 9px;\n border: 1px solid rgba(255,255,255,.13);\n background: rgba(255,255,255,.035);\n color: rgba(255,255,255,.84);\n display: grid;\n grid-template-columns: 28px minmax(0,1fr);\n align-items: center;\n gap: 8px;\n text-align: left;\n cursor: pointer;\n }\n .nca-mobile-action:hover,\n .nca-mobile-action:active {\n background: rgba(255,255,255,.09);\n border-color: rgba(255,255,255,.27);\n color: #fff;\n }\n .nca-mobile-action:focus-visible {\n outline: 2px solid var(--nca-accent, #ffae00);\n outline-offset: -2px;\n }\n .nca-mobile-action[disabled] { opacity: .35; cursor: default; }\n /* nclp-dashboard.css flattens every