[{"_1":2,"_173":-5,"_174":-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,"_170":171,"_172":-5},"handle","banks","name","facelab","path","ui/wizard.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":137,"_158":159,"_104":160,"_136":161,"_162":163,"_164":165,"_166":20,"_167":-5,"_98":168},"93776fc0-e538-11f0-9e15-42dde27851f2","wizard.ts","fileId","389a0612-e4e8-11f0-a2dd-42dde27851f2","parentId","2aa4d466-e4e7-11f0-95fb-42dde27851f2","branchId","branchVersion","latest",true,["D",1767069160264],3,"fileType","script","content","/** @facelab/ui/wizard.ts */\n\nimport { WIZARD_STEPS, type ZoomMode } from \"../core/constants.ts\";\n\n// ═══════════════════════════════════════════════════════════════════════════\n// WIZARD STATE MACHINE\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface WizardState {\n readonly currentStep: number;\n readonly totalSteps: number;\n readonly isFirst: boolean;\n readonly isLast: boolean;\n readonly zoomMode: ZoomMode;\n}\n\ntype WizardSubscriber = (state: WizardState) => void;\n\nexport interface WizardController {\n getState(): WizardState;\n next(): void;\n prev(): void;\n goTo(step: number): void;\n subscribe(fn: WizardSubscriber): () => void;\n}\n\nexport function createWizardController(): WizardController {\n let currentStep = 0;\n const totalSteps = WIZARD_STEPS.length;\n const subscribers = new Set();\n\n function computeState(): WizardState {\n return {\n currentStep,\n totalSteps,\n isFirst: currentStep === 0,\n isLast: currentStep === totalSteps - 1,\n zoomMode: WIZARD_STEPS[currentStep].zoom,\n };\n }\n\n function notify(): void {\n const state = computeState();\n subscribers.forEach((fn) => fn(state));\n }\n\n return {\n getState: computeState,\n\n next() {\n if (currentStep < totalSteps - 1) {\n currentStep++;\n notify();\n }\n },\n\n prev() {\n if (currentStep > 0) {\n currentStep--;\n notify();\n }\n },\n\n goTo(step: number) {\n const clamped = Math.max(0, Math.min(totalSteps - 1, step));\n if (clamped !== currentStep) {\n currentStep = clamped;\n notify();\n }\n },\n\n subscribe(fn: WizardSubscriber) {\n subscribers.add(fn);\n // Emit current state immediately\n fn(computeState());\n return () => subscribers.delete(fn);\n },\n };\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// DOM UPDATER\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport interface WizardDOMElements {\n readonly progressSteps: NodeListOf;\n readonly stepLabels: NodeListOf;\n readonly stepPanels: NodeListOf;\n readonly prevButton: HTMLElement;\n readonly nextButton: HTMLElement;\n readonly container: HTMLElement;\n readonly zoomIndicator: HTMLElement;\n readonly zoomLabel: HTMLElement;\n}\n\nexport function queryWizardElements(): WizardDOMElements {\n return {\n progressSteps: document.querySelectorAll(\".progress-step\"),\n stepLabels: document.querySelectorAll(\".step-label\"),\n stepPanels: document.querySelectorAll(\".step-panel\"),\n prevButton: document.getElementById(\"prev-step\")!,\n nextButton: document.getElementById(\"next-step\")!,\n container: document.getElementById(\"container\")!,\n zoomIndicator: document.getElementById(\"zoom-indicator\")!,\n zoomLabel: document.getElementById(\"zoom-label\")!,\n };\n}\n\nexport function createWizardUpdater(\n elements: WizardDOMElements,\n options: { devMode: () => boolean },\n): WizardSubscriber {\n return (state: WizardState) => {\n const { currentStep, isFirst, isLast, zoomMode } = state;\n\n // Update progress indicators\n elements.progressSteps.forEach((el, i) => {\n el.classList.remove(\"active\", \"completed\");\n if (i < currentStep) el.classList.add(\"completed\");\n else if (i === currentStep) el.classList.add(\"active\");\n });\n\n // Update step labels\n elements.stepLabels.forEach((el, i) => {\n el.classList.remove(\"active\", \"completed\");\n if (i < currentStep) el.classList.add(\"completed\");\n else if (i === currentStep) el.classList.add(\"active\");\n });\n\n // Update visible panel\n elements.stepPanels.forEach((el, i) => {\n el.classList.toggle(\"active\", i === currentStep);\n });\n\n // Update navigation buttons\n elements.prevButton.style.visibility = isFirst ? \"hidden\" : \"visible\";\n\n if (isLast) {\n elements.nextButton.innerHTML = `\n Finish \n \n `;\n } else {\n elements.nextButton.innerHTML = `\n Next \n \n `;\n }\n\n // Update zoom state\n updateZoom(elements, zoomMode, options.devMode());\n };\n}\n\nfunction updateZoom(\n elements: WizardDOMElements,\n zoomMode: ZoomMode,\n devMode: boolean,\n): void {\n const { container, zoomIndicator, zoomLabel } = elements;\n\n // Remove all zoom classes\n container.classList.remove(\n \"zoomed-eyes\",\n \"zoomed-mouth\",\n \"zoomed-face\",\n \"dev-mode\",\n );\n\n if (devMode) {\n container.classList.add(\"dev-mode\");\n zoomIndicator.classList.remove(\"visible\");\n return;\n }\n\n switch (zoomMode) {\n case \"eyes\":\n container.classList.add(\"zoomed-eyes\");\n zoomIndicator.classList.add(\"visible\");\n zoomLabel.textContent = \"Zoomed: Eyes\";\n break;\n case \"mouth\":\n container.classList.add(\"zoomed-mouth\");\n zoomIndicator.classList.add(\"visible\");\n zoomLabel.textContent = \"Zoomed: Mouth\";\n break;\n default:\n zoomIndicator.classList.remove(\"visible\");\n }\n}\n\n// ═══════════════════════════════════════════════════════════════════════════\n// WIZARD BINDING\n// ═══════════════════════════════════════════════════════════════════════════\n\nexport function bindWizardNavigation(\n controller: WizardController,\n elements: WizardDOMElements,\n callbacks: {\n onFinish?: () => void;\n } = {},\n): () => void {\n const cleanups: Array<() => void> = [];\n\n // Prev button\n const prevHandler = () => controller.prev();\n elements.prevButton.addEventListener(\"click\", prevHandler);\n cleanups.push(() =>\n elements.prevButton.removeEventListener(\"click\", prevHandler)\n );\n\n // Next button\n const nextHandler = () => {\n const state = controller.getState();\n if (state.isLast) {\n callbacks.onFinish?.();\n } else {\n controller.next();\n }\n };\n elements.nextButton.addEventListener(\"click\", nextHandler);\n cleanups.push(() =>\n elements.nextButton.removeEventListener(\"click\", nextHandler)\n );\n\n // Progress step clicks\n elements.progressSteps.forEach((el) => {\n const step = parseInt(el.dataset.step ?? \"0\", 10);\n const handler = () => controller.goTo(step);\n el.addEventListener(\"click\", handler);\n cleanups.push(() => el.removeEventListener(\"click\", handler));\n });\n\n // Step label clicks\n elements.stepLabels.forEach((el) => {\n const step = parseInt(el.dataset.step ?? \"0\", 10);\n const handler = () => controller.goTo(step);\n el.addEventListener(\"click\", handler);\n cleanups.push(() => el.removeEventListener(\"click\", handler));\n });\n\n return () => cleanups.forEach((fn) => fn());\n}","deleted","label",[169,151],"ui","permalink","https://www.val.town/x/banks/facelab/code/ui/wizard.ts","extension","actionData","errors"]