[{"_1":2,"_174":-5,"_175":-5},"loaderData",{"_3":4,"_92":93},"root",{"_5":6,"_35":36,"_65":66},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20,"_34":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","isTeamOrgMember","ENV",{"_37":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","96591c8dbfc078fdbadefbda462961392fdd9880","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_67":68},"__internal_clerk_state",{"_69":70,"_71":46,"_72":73,"_74":73,"_75":20,"_76":73,"_77":73,"_78":73,"_79":73,"_80":81,"_90":20,"_91":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_82":20,"_19":20,"_83":73,"_84":85,"_86":73,"_87":46,"_88":20,"_89":73},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_94":95,"_96":97,"_98":99,"_100":101,"_148":149,"_171":172,"_173":-5},"handle","banks","name","facelab","path","ui/bindings.ts","project",{"_102":103,"_96":97,"_104":105,"_106":-5,"_107":20,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":20,"_115":-5,"_116":-5,"_117":32,"_14":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":128,"_131":132,"_134":135,"_147":20},"id","ff28b2e4-e4e6-11f0-8e11-42dde27851f2","createdAt",["D",1767034122291],"deletedAt","legacyEnvVars","privacy","unlisted","description","imageUrl","019b43e2-aa14-727d-9d22-490aa147aa0b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019b43e2-aa14-727d-9d22-4c67294d95f4","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_94":95,"_129":130},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM3QkpMYjNNQXJWZGdESmFRZHZyc2ZSS1djUyJ9","org",{"_94":95,"_133":130,"_12":112},"avatar","branch",{"_136":137,"_96":44,"_102":138,"_139":103,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":97,"_146":95},"version",70,"ff28fbd2-e4e6-11f0-8e11-42dde27851f2","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_102":150,"_96":151,"_152":153,"_154":155,"_156":138,"_157":158,"_159":160,"_104":161,"_136":162,"_163":164,"_165":166,"_167":20,"_168":-5,"_98":169},"8cd83a00-e538-11f0-9467-42dde27851f2","bindings.ts","fileId","0aeb577a-e4e8-11f0-9a59-42dde27851f2","parentId","2aa4d466-e4e7-11f0-95fb-42dde27851f2","branchId","branchVersion",69,"latest",true,["D",1767069149231],4,"fileType","script","content","/** @facelab/ui/bindings.ts */\n\nimport { configStore } from \"../core/config.ts\";\nimport type { AppConfig, HexColor } from \"../core/types.ts\";\n\n// ═══════════════════════════════════════════════════════════════════════════\n// BINDING UTILITIES\n// ═══════════════════════════════════════════════════════════════════════════\n\ntype PathOf = T extends object ? {\n [K in keyof T & string]: T[K] extends object\n ? PathOf\n : `${Prefix}${K}`;\n }[keyof T & string]\n : never;\n\ntype ConfigPath = PathOf;\n\nfunction getNestedValue(obj: T, path: string): unknown {\n return path.split(\".\").reduce(\n (acc: unknown, key) => (acc as Record)?.[key],\n obj,\n );\n}\n\nfunction setNestedValue(\n section: K,\n key: string,\n value: unknown,\n): void {\n const current = configStore.get()[section];\n const keys = key.split(\".\");\n\n if (keys.length === 1) {\n configStore.set(section, { [key]: value } as Partial);\n } else {\n // Handle nested paths\n const result = { ...current } as Record;\n let cursor = result;\n\n for (let i = 0; i < keys.length - 1; i++) {\n cursor[keys[i]] = { ...(cursor[keys[i]] as object) };\n cursor = cursor[keys[i]] as Record;\n }\n\n cursor[keys[keys.length - 1]] = value;\n configStore.set(section, result as Partial);\n }\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// SLIDER BINDING\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface SliderBindingOptions {\n readonly sliderId: string;\n readonly valueId?: string;\n readonly section: keyof AppConfig;\n readonly key: string;\n readonly transform?: (value: number) => number;\n readonly format?: (value: number) => string;\n readonly onChange?: (value: number) => void;\n}\n\nexport function bindSlider(options: SliderBindingOptions): () => void {\n const {\n sliderId,\n valueId,\n section,\n key,\n transform = (v) => v,\n format = (v) => v.toFixed(2),\n onChange,\n } = options;\n\n const slider = document.getElementById(sliderId) as HTMLInputElement | null;\n const valueEl = valueId ? document.getElementById(valueId) : null;\n\n if (!slider) {\n console.warn(`[bindSlider] Element not found: ${sliderId}`);\n return () => {};\n }\n\n const config = configStore.get();\n const initialValue = getNestedValue(config[section], key) as number;\n\n slider.value = String(initialValue);\n if (valueEl) {\n valueEl.textContent = format(initialValue);\n }\n\n const handler = () => {\n const rawValue = parseFloat(slider.value);\n const value = transform(rawValue);\n\n setNestedValue(section, key, value);\n\n if (valueEl) {\n valueEl.textContent = format(value);\n }\n\n onChange?.(value);\n };\n\n slider.addEventListener(\"input\", handler);\n\n // Return cleanup function\n return () => slider.removeEventListener(\"input\", handler);\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// COLOR BINDING\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface ColorBindingOptions {\n readonly inputId: string;\n readonly previewId: string;\n readonly hexId?: string;\n readonly section: keyof AppConfig;\n readonly key: string;\n readonly onChange?: (color: HexColor) => void;\n}\n\nexport function bindColor(options: ColorBindingOptions): () => void {\n const {\n inputId,\n previewId,\n hexId,\n section,\n key,\n onChange,\n } = options;\n\n const input = document.getElementById(inputId) as HTMLInputElement | null;\n const preview = document.getElementById(previewId) as HTMLElement | null;\n const hexEl = hexId ? document.getElementById(hexId) : null;\n\n if (!input || !preview) {\n console.warn(`[bindColor] Elements not found: ${inputId}, ${previewId}`);\n return () => {};\n }\n\n const config = configStore.get();\n const initialValue = getNestedValue(config[section], key) as HexColor;\n\n input.value = initialValue;\n preview.style.background = initialValue;\n if (hexEl) hexEl.textContent = initialValue;\n\n // Click preview to open color picker\n const previewClickHandler = () => input.click();\n preview.addEventListener(\"click\", previewClickHandler);\n\n const inputHandler = () => {\n const color = input.value as HexColor;\n\n setNestedValue(section, key, color);\n preview.style.background = color;\n if (hexEl) hexEl.textContent = color;\n\n onChange?.(color);\n };\n\n input.addEventListener(\"input\", inputHandler);\n\n return () => {\n preview.removeEventListener(\"click\", previewClickHandler);\n input.removeEventListener(\"input\", inputHandler);\n };\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// TOGGLE BINDING\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface ToggleBindingOptions {\n readonly elementId: string;\n readonly section: keyof AppConfig;\n readonly key: string;\n readonly onChange?: (enabled: boolean) => void;\n}\n\nexport function bindToggle(options: ToggleBindingOptions): () => void {\n const { elementId, section, key, onChange } = options;\n\n const element = document.getElementById(elementId);\n\n if (!element) {\n console.warn(`[bindToggle] Element not found: ${elementId}`);\n return () => {};\n }\n\n const config = configStore.get();\n const initialValue = getNestedValue(config[section], key) as boolean;\n\n element.classList.toggle(\"active\", initialValue);\n\n const handler = () => {\n const currentValue = getNestedValue(\n configStore.get()[section],\n key,\n ) as boolean;\n const newValue = !currentValue;\n\n setNestedValue(section, key, newValue);\n element.classList.toggle(\"active\", newValue);\n\n onChange?.(newValue);\n };\n\n element.addEventListener(\"click\", handler);\n\n return () => element.removeEventListener(\"click\", handler);\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// PRESET BUTTON GROUP BINDING\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface PresetBindingOptions {\n readonly selector: string;\n readonly dataAttribute: string;\n readonly section: keyof AppConfig;\n readonly key: string;\n readonly onChange?: (value: T) => void;\n}\n\nexport function bindPresetGroup(\n options: PresetBindingOptions,\n): () => void {\n const { selector, dataAttribute, section, key, onChange } = options;\n\n const buttons = document.querySelectorAll(selector);\n\n if (buttons.length === 0) {\n console.warn(`[bindPresetGroup] No elements found: ${selector}`);\n return () => {};\n }\n\n const config = configStore.get();\n const initialValue = getNestedValue(config[section], key) as T;\n\n // Set initial active state\n buttons.forEach((btn) => {\n const value = btn.dataset[dataAttribute.replace(\"data-\", \"\")] as T;\n btn.classList.toggle(\n \"active\",\n value?.toLowerCase() === initialValue?.toLowerCase(),\n );\n });\n\n const handlers: Array<[HTMLElement, () => void]> = [];\n\n buttons.forEach((btn) => {\n const handler = () => {\n const value = btn.dataset[dataAttribute.replace(\"data-\", \"\")] as T;\n\n buttons.forEach((b) => b.classList.remove(\"active\"));\n btn.classList.add(\"active\");\n\n setNestedValue(section, key, value.toLowerCase());\n onChange?.(value);\n };\n\n btn.addEventListener(\"click\", handler);\n handlers.push([btn, handler]);\n });\n\n return () => {\n handlers.forEach(([btn, handler]) => {\n btn.removeEventListener(\"click\", handler);\n });\n };\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// VIEW MODE TOGGLE BINDING\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface ViewToggleBindingOptions {\n readonly selector: string;\n readonly dataAttribute: string;\n readonly onChange: (mode: string) => void;\n}\n\nexport function bindViewToggle(options: ViewToggleBindingOptions): () => void {\n const { selector, dataAttribute, onChange } = options;\n\n const buttons = document.querySelectorAll(selector);\n const handlers: Array<[HTMLElement, () => void]> = [];\n\n buttons.forEach((btn) => {\n const handler = () => {\n const mode = btn.dataset[dataAttribute.replace(\"data-\", \"\")] ?? \"\";\n\n buttons.forEach((b) => b.classList.remove(\"active\"));\n btn.classList.add(\"active\");\n\n onChange(mode);\n };\n\n btn.addEventListener(\"click\", handler);\n handlers.push([btn, handler]);\n });\n\n return () => {\n handlers.forEach(([btn, handler]) => {\n btn.removeEventListener(\"click\", handler);\n });\n };\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// BATCH BINDING HELPER\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport class BindingManager {\n private readonly cleanups: Array<() => void> = [];\n\n slider(options: SliderBindingOptions): this {\n this.cleanups.push(bindSlider(options));\n return this;\n }\n\n color(options: ColorBindingOptions): this {\n this.cleanups.push(bindColor(options));\n return this;\n }\n\n toggle(options: ToggleBindingOptions): this {\n this.cleanups.push(bindToggle(options));\n return this;\n }\n\n presetGroup(options: PresetBindingOptions): this {\n this.cleanups.push(bindPresetGroup(options));\n return this;\n }\n\n viewToggle(options: ViewToggleBindingOptions): this {\n this.cleanups.push(bindViewToggle(options));\n return this;\n }\n\n custom(cleanup: () => void): this {\n this.cleanups.push(cleanup);\n return this;\n }\n\n dispose(): void {\n this.cleanups.forEach((fn) => fn());\n this.cleanups.length = 0;\n }\n}\n\nexport function createBindingManager(): BindingManager {\n return new BindingManager();\n}","deleted","label",[170,151],"ui","permalink","https://www.val.town/x/banks/facelab/code/ui/bindings.ts","extension","actionData","errors"]