Face Lab 2027

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_167":168,"_169":170},"routes/_app.x.$handle.$name",{"_94":93,"_32":45,"_102":84,"_27":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":120,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",59,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","8dbb9ad0-e857-11f0-bcde-42dde27851f2","name","fileType","http","content","// ============================================================================\n// FACE LAB 2027 - AI Avatar Studio\n// Edge-first, offline-capable face tracking with pattern-based customization\n// ============================================================================\nimport { STYLES } from \"./styles.ts\";\n\"./styles.ts\";\n// ============================================================================\n// TYPES AND INTERFACES\n// ============================================================================\n\ninterface PatternParameter {\n id: string;\n name: string;\n type: \"float\" | \"int\" | \"bool\" | \"color\" | \"enum\";\n default: number | boolean | string;\n min?: number;\n max?: number;\n step?: number;\n options?: string[];\n ui: \"slider\" | \"toggle\" | \"colorpicker\" | \"dropdown\" | \"dial\";\n}\n\ninterface StyleDefinition {\n id: string;\n name: string;\n description: string;\n category: \"sketch\" | \"cartoon\" | \"surreal\" | \"realistic\" | \"abstract\";\n tier: \"free\" | \"basic\" | \"pro\" | \"enterprise\";\n parameters: PatternParameter[];\n fragmentShader: string;\n preview: string;\n}\n\ninterface AppConfig {\n version: string;\n styles: StyleDefinition[];\n defaultStyle: string;\n}\n\n// ============================================================================\n// DEFAULT CONFIGURATION\n// ============================================================================\n\nconst DEFAULT_CONFIG: AppConfig = {\n version: \"1.0.0\",\n defaultStyle: \"hand-drawn-sketch\",\n styles: [\n {\n id: \"none\",\n name: \"No Effect\",\n description: \"Raw camera feed\",\n category: \"realistic\",\n tier: \"free\",\n preview: \"📷\",\n parameters: [],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n void main() {\n gl_FragColor = texture2D(map, vUv);\n }\n `,\n },\n {\n id: \"hand-drawn-sketch\",\n name: \"Hand-Drawn Sketch\",\n description: \"Animated pencil sketch with wobbling lines\",\n category: \"sketch\",\n tier: \"free\",\n preview: \"📝\",\n parameters: [\n {\n id: \"strokeWeight\",\n name: \"Stroke Weight\",\n type: \"float\",\n default: 1.5,\n min: 0.5,\n max: 4.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"wobbleAmount\",\n name: \"Hand Tremor\",\n type: \"float\",\n default: 0.002,\n min: 0,\n max: 0.01,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"inkDensity\",\n name: \"Ink Density\",\n type: \"float\",\n default: 0.9,\n min: 0.3,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"paperBrightness\",\n name: \"Paper Brightness\",\n type: \"float\",\n default: 0.95,\n min: 0.7,\n max: 1.0,\n step: 0.01,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float strokeWeight;\n uniform float wobbleAmount;\n uniform float inkDensity;\n uniform float paperBrightness;\n \n float random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n \n float noise(vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(i + vec2(1.0, 1.0));\n vec2 u = f * f * (3.0 - 2.0 * f);\n return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n }\n \n void main() {\n vec2 texel = strokeWeight / resolution;\n \n // Add wobble\n vec2 wobble = vec2(\n noise(vUv * 8.0 + time * 1.5) - 0.5,\n noise(vUv * 8.0 + time * 1.5 + 50.0) - 0.5\n ) * wobbleAmount;\n vec2 uv = vUv + wobble;\n \n // Sobel edge detection\n float tl = dot(texture2D(map, uv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float t = dot(texture2D(map, uv + vec2(0.0, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(map, uv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float l = dot(texture2D(map, uv + vec2(-texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float r = dot(texture2D(map, uv + vec2(texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(map, uv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float b = dot(texture2D(map, uv + vec2(0.0, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(map, uv + vec2(texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n \n float gx = tl + 2.0*l + bl - tr - 2.0*r - br;\n float gy = tl + 2.0*t + tr - bl - 2.0*b - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(0.05, 0.2, edge);\n \n // Paper color with slight texture\n float paperNoise = noise(vUv * 100.0) * 0.03;\n vec3 paper = vec3(paperBrightness - paperNoise);\n \n // Ink\n vec3 ink = vec3(0.1);\n \n vec3 color = mix(paper, ink, edge * inkDensity);\n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"cartoon-cel\",\n name: \"Cartoon Cel-Shade\",\n description: \"Anime-style cel-shading with bold outlines\",\n category: \"cartoon\",\n tier: \"free\",\n preview: \"🎨\",\n parameters: [\n {\n id: \"colorLevels\",\n name: \"Color Levels\",\n type: \"float\",\n default: 4.0,\n min: 2.0,\n max: 8.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"outlineThickness\",\n name: \"Outline\",\n type: \"float\",\n default: 1.0,\n min: 0.0,\n max: 3.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"saturation\",\n name: \"Saturation\",\n type: \"float\",\n default: 1.3,\n min: 0.5,\n max: 2.0,\n step: 0.1,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform vec2 resolution;\n uniform float colorLevels;\n uniform float outlineThickness;\n uniform float saturation;\n \n vec3 rgb2hsv(vec3 c) {\n vec4 K = vec4(0.0, -1.0/3.0, 2.0/3.0, -1.0);\n vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n float d = q.x - min(q.w, q.y);\n float e = 1.0e-10;\n return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);\n }\n \n vec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0/3.0, 1.0/3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n }\n \n void main() {\n vec4 texColor = texture2D(map, vUv);\n vec3 color = texColor.rgb;\n \n // Boost saturation\n vec3 hsv = rgb2hsv(color);\n hsv.y = clamp(hsv.y * saturation, 0.0, 1.0);\n color = hsv2rgb(hsv);\n \n // Posterize\n color = floor(color * colorLevels + 0.5) / colorLevels;\n \n // Edge detection for outline\n vec2 texel = outlineThickness / resolution;\n float tl = dot(texture2D(map, vUv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(map, vUv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(map, vUv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(map, vUv + vec2(texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n \n float gx = tl + bl - tr - br;\n float gy = tl + tr - bl - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(0.1, 0.3, edge);\n \n color = mix(color, vec3(0.15, 0.1, 0.1), edge * step(0.1, outlineThickness));\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"glitch\",\n name: \"Digital Glitch\",\n description: \"RGB split and scanline distortion\",\n category: \"surreal\",\n tier: \"free\",\n preview: \"🌀\",\n parameters: [\n {\n id: \"rgbShift\",\n name: \"RGB Shift\",\n type: \"float\",\n default: 0.005,\n min: 0.0,\n max: 0.02,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"scanlines\",\n name: \"Scanlines\",\n type: \"float\",\n default: 0.3,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"noise\",\n name: \"Noise\",\n type: \"float\",\n default: 0.1,\n min: 0.0,\n max: 0.5,\n step: 0.02,\n ui: \"slider\",\n },\n {\n id: \"glitchIntensity\",\n name: \"Glitch\",\n type: \"float\",\n default: 0.3,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float rgbShift;\n uniform float scanlines;\n uniform float noise;\n uniform float glitchIntensity;\n \n float random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n \n void main() {\n vec2 uv = vUv;\n \n // Random glitch offset\n float glitchLine = step(0.99 - glitchIntensity * 0.1, random(vec2(floor(uv.y * 50.0), floor(time * 10.0))));\n uv.x += glitchLine * (random(vec2(time)) - 0.5) * 0.1 * glitchIntensity;\n \n // RGB shift\n float r = texture2D(map, uv + vec2(rgbShift, 0.0)).r;\n float g = texture2D(map, uv).g;\n float b = texture2D(map, uv - vec2(rgbShift, 0.0)).b;\n vec3 color = vec3(r, g, b);\n \n // Scanlines\n float scanline = sin(vUv.y * resolution.y * 1.5) * 0.5 + 0.5;\n color *= 1.0 - scanlines * 0.3 * scanline;\n \n // Noise\n float n = random(vUv + time) * noise;\n color += n - noise * 0.5;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"neon\",\n name: \"Neon Glow\",\n description: \"Glowing neon edge effect\",\n category: \"abstract\",\n tier: \"free\",\n preview: \"💡\",\n parameters: [\n {\n id: \"edgeThreshold\",\n name: \"Edge Sensitivity\",\n type: \"float\",\n default: 0.15,\n min: 0.05,\n max: 0.5,\n step: 0.01,\n ui: \"slider\",\n },\n {\n id: \"glowStrength\",\n name: \"Glow Strength\",\n type: \"float\",\n default: 2.0,\n min: 0.5,\n max: 4.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"hueShift\",\n name: \"Hue Shift\",\n type: \"float\",\n default: 0.0,\n min: 0.0,\n max: 1.0,\n step: 0.01,\n ui: \"slider\",\n },\n {\n id: \"bgBrightness\",\n name: \"Background\",\n type: \"float\",\n default: 0.05,\n min: 0.0,\n max: 0.3,\n step: 0.01,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float edgeThreshold;\n uniform float glowStrength;\n uniform float hueShift;\n uniform float bgBrightness;\n \n vec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0/3.0, 1.0/3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n }\n \n void main() {\n vec2 texel = 1.5 / resolution;\n \n // Sobel\n float tl = dot(texture2D(map, vUv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float t = dot(texture2D(map, vUv + vec2(0.0, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(map, vUv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float l = dot(texture2D(map, vUv + vec2(-texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float r = dot(texture2D(map, vUv + vec2(texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(map, vUv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float b = dot(texture2D(map, vUv + vec2(0.0, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(map, vUv + vec2(texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n \n float gx = tl + 2.0*l + bl - tr - 2.0*r - br;\n float gy = tl + 2.0*t + tr - bl - 2.0*b - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(edgeThreshold * 0.5, edgeThreshold, edge);\n \n // Neon color based on position\n float hue = fract(vUv.x * 0.5 + vUv.y * 0.3 + hueShift + time * 0.1);\n vec3 neonColor = hsv2rgb(vec3(hue, 0.9, 1.0));\n \n // Glow effect\n vec3 glow = neonColor * edge * glowStrength;\n \n // Add bloom\n for(float i = 1.0; i <= 3.0; i++) {\n vec2 offset = texel * i * 2.0;\n float e1 = dot(texture2D(map, vUv + vec2(offset.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float e2 = dot(texture2D(map, vUv - vec2(offset.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float e3 = dot(texture2D(map, vUv + vec2(0.0, offset.y)).rgb, vec3(0.299, 0.587, 0.114));\n float e4 = dot(texture2D(map, vUv - vec2(0.0, offset.y)).rgb, vec3(0.299, 0.587, 0.114));\n float avgEdge = (e1 + e2 + e3 + e4) * 0.25;\n glow += neonColor * smoothstep(edgeThreshold, edgeThreshold * 2.0, avgEdge) * (0.5 / i);\n }\n \n vec3 bg = vec3(bgBrightness * 0.1, bgBrightness * 0.05, bgBrightness * 0.15);\n vec3 color = bg + glow;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"pixelate\",\n name: \"Pixel Art\",\n description: \"Retro pixelated effect\",\n category: \"abstract\",\n tier: \"free\",\n preview: \"👾\",\n parameters: [\n {\n id: \"pixelSize\",\n name: \"Pixel Size\",\n type: \"float\",\n default: 6.0,\n min: 2.0,\n max: 20.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"colorDepth\",\n name: \"Color Depth\",\n type: \"float\",\n default: 8.0,\n min: 2.0,\n max: 32.0,\n step: 1.0,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform vec2 resolution;\n uniform float pixelSize;\n uniform float colorDepth;\n \n void main() {\n vec2 pixelUv = floor(vUv * resolution / pixelSize) * pixelSize / resolution;\n vec4 color = texture2D(map, pixelUv);\n \n // Reduce color depth\n color.rgb = floor(color.rgb * colorDepth + 0.5) / colorDepth;\n \n gl_FragColor = color;\n }\n `,\n },\n ],\n};\n\n// ============================================================================\n// HTML\n// ============================================================================\n\nconst HTML = `\n

\n \n \n

\n \n

Starting camera...

\n \n

\n FPS:\n --\n

\n \n

\n \n \n

\n\n

\n`;\n\n// ============================================================================\n// CLIENT SCRIPT\n// ============================================================================\n\nconst CLIENT_SCRIPT = `\nconst CONFIG = ${JSON.stringify(DEFAULT_CONFIG)};\n\n// ============================================================================\n// STATE\n// ============================================================================\n\nconst state = {\n currentStyle: 'none',\n params: {},\n isTracking: false,\n fps: 0,\n flipX: true\n};\n\nlet mindarThree = null;\nlet filterMesh = null;\nlet filterMaterial = null;\nlet clock = null;\nlet frameCount = 0;\nlet lastFpsTime = 0;\n\n// ============================================================================\n// UTILITIES\n// ============================================================================\n\nfunction toast(msg, type = 'info') {\n const container = document.getElementById('toast-container');\n const el = document.createElement('div');\n el.className = 'toast ' + type;\n el.textContent = msg;\n container.appendChild(el);\n setTimeout(() => el.remove(), 3000);\n}\n\nfunction setLoading(show, text = '') {\n const el = document.getElementById('loading');\n const textEl = document.getElementById('loading-text');\n el.style.display = show ? 'flex' : 'none';\n if (text) textEl.textContent = text;\n}\n\nfunction updateStatus(active, text) {\n document.getElementById('status-dot').className = 'status-dot' + (active ? ' active' : '');\n document.getElementById('status-text').textContent = text;\n}\n\n// ============================================================================\n// UI SETUP\n// ============================================================================\n\nfunction setupUI() {\n const styleList = document.getElementById('style-list');\n \n CONFIG.styles.forEach(style => {\n const card = document.createElement('div');\n card.className = 'style-card' + (state.currentStyle === style.id ? ' active' : '');\n card.dataset.id = style.id;\n card.innerHTML = \\`\n

\\${style.preview}

\\${style.name}

\\${style.description}

\n \\`;\n card.onclick = () => selectStyle(style.id);\n styleList.appendChild(card);\n });\n \n // Button handlers\n document.getElementById('btn-flip').onclick = () => {\n state.flipX = !state.flipX;\n if (filterMesh) {\n filterMesh.scale.x = state.flipX ? -1 : 1;\n }\n toast(state.flipX ? 'Mirrored' : 'Normal');\n };\n \n document.getElementById('btn-screenshot').onclick = () => {\n if (mindarThree && mindarThree.renderer) {\n const canvas = mindarThree.renderer.domElement;\n const link = document.createElement('a');\n link.download = 'facelab-' + Date.now() + '.png';\n link.href = canvas.toDataURL('image/png');\n link.click();\n toast('Screenshot saved', 'success');\n }\n };\n}\n\nfunction selectStyle(styleId) {\n state.currentStyle = styleId;\n \n // Update UI\n document.querySelectorAll('.style-card').forEach(card => {\n card.classList.toggle('active', card.dataset.id === styleId);\n });\n \n const style = CONFIG.styles.find(s => s.id === styleId);\n if (!style) return;\n \n // Initialize params\n if (!state.params[styleId]) {\n state.params[styleId] = {};\n style.parameters.forEach(p => {\n state.params[styleId][p.id] = p.default;\n });\n }\n \n // Build param UI\n buildParamsUI(style);\n \n // Update shader\n updateShader(style);\n \n toast('Style: ' + style.name, 'success');\n}\n\nfunction buildParamsUI(style) {\n const container = document.getElementById('params-container');\n \n if (!style.parameters.length) {\n container.innerHTML = '

No parameters

';\n return;\n }\n \n container.innerHTML = '';\n const params = state.params[style.id];\n \n style.parameters.forEach(param => {\n const value = params[param.id];\n const div = document.createElement('div');\n div.className = 'param-group';\n div.innerHTML = \\`\n

\n \\${param.name}\n \\${formatVal(value, param)}\n

\n \n \\`;\n container.appendChild(div);\n \n const input = div.querySelector('input');\n input.oninput = (e) => {\n const v = parseFloat(e.target.value);\n params[param.id] = v;\n document.getElementById('val-' + param.id).textContent = formatVal(v, param);\n updateUniform(param.id, v);\n };\n });\n}\n\nfunction formatVal(v, param) {\n if (param.type === 'int' || param.step >= 1) return Math.round(v);\n return v.toFixed(param.step < 0.01 ? 3 : 2);\n}\n\nfunction updateShader(style) {\n if (!filterMaterial) return;\n \n // Create new material with style's shader\n const vertexShader = \\`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`;\n \n filterMaterial.vertexShader = vertexShader;\n filterMaterial.fragmentShader = style.fragmentShader;\n filterMaterial.needsUpdate = true;\n \n // Set uniforms\n const params = state.params[style.id] || {};\n style.parameters.forEach(param => {\n if (filterMaterial.uniforms[param.id]) {\n filterMaterial.uniforms[param.id].value = params[param.id];\n } else {\n filterMaterial.uniforms[param.id] = { value: params[param.id] };\n }\n });\n}\n\nfunction updateUniform(name, value) {\n if (filterMaterial && filterMaterial.uniforms[name]) {\n filterMaterial.uniforms[name].value = value;\n }\n}\n\n// ============================================================================\n// MINDAR SETUP\n// ============================================================================\n\nasync function initMindAR() {\n setLoading(true, 'Loading face tracking...');\n \n try {\n const { MindARThree } = await import('mindar-face-three');\n const THREE = await import('three');\n \n clock = new THREE.Clock();\n \n const container = document.getElementById('mindar-container');\n \n mindarThree = new MindARThree({\n container: container\n });\n \n const { renderer, scene, camera } = mindarThree;\n \n // Get video texture after start\n await mindarThree.start();\n \n setLoading(true, 'Creating filter mesh...');\n \n // Create video texture from MindAR's video element\n const video = mindarThree.video;\n const videoTexture = new THREE.VideoTexture(video);\n videoTexture.minFilter = THREE.LinearFilter;\n videoTexture.magFilter = THREE.LinearFilter;\n \n // Get initial style\n const style = CONFIG.styles.find(s => s.id === state.currentStyle) || CONFIG.styles[0];\n \n // Create shader material\n filterMaterial = new THREE.ShaderMaterial({\n uniforms: {\n map: { value: videoTexture },\n time: { value: 0 },\n resolution: { value: new THREE.Vector2(video.videoWidth || 640, video.videoHeight || 480) }\n },\n vertexShader: \\`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`,\n fragmentShader: style.fragmentShader,\n transparent: true\n });\n \n // Add style-specific uniforms\n style.parameters.forEach(param => {\n filterMaterial.uniforms[param.id] = { value: state.params[style.id]?.[param.id] ?? param.default };\n });\n \n // Create fullscreen quad that sits in front of camera\n const aspect = video.videoWidth / video.videoHeight || 4/3;\n const planeHeight = 2.5;\n const planeWidth = planeHeight * aspect;\n \n const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);\n filterMesh = new THREE.Mesh(geometry, filterMaterial);\n \n // Position in front of camera\n filterMesh.position.z = -2;\n if (state.flipX) filterMesh.scale.x = -1;\n \n // Add to anchor that tracks face\n const anchor = mindarThree.addAnchor(168); // Nose tip\n anchor.group.add(filterMesh);\n \n // Alternative: Add directly to scene for full-screen effect\n // scene.add(filterMesh);\n \n // Update status\n updateStatus(true, 'Tracking active');\n state.isTracking = true;\n \n setLoading(false);\n toast('Face tracking ready', 'success');\n \n // Animation loop\n const animate = () => {\n requestAnimationFrame(animate);\n \n // Update time uniform\n if (filterMaterial.uniforms.time) {\n filterMaterial.uniforms.time.value = clock.getElapsedTime();\n }\n \n // Update resolution if video size changed\n if (video.videoWidth && filterMaterial.uniforms.resolution) {\n filterMaterial.uniforms.resolution.value.set(video.videoWidth, video.videoHeight);\n }\n \n // FPS counter\n frameCount++;\n const now = performance.now();\n if (now - lastFpsTime >= 500) {\n state.fps = Math.round(frameCount * 1000 / (now - lastFpsTime));\n frameCount = 0;\n lastFpsTime = now;\n document.getElementById('fps').textContent = state.fps;\n }\n \n renderer.render(scene, camera);\n };\n \n animate();\n \n } catch (error) {\n console.error('MindAR init error:', error);\n setLoading(false);\n updateStatus(false, 'Error: ' + error.message);\n toast('Failed to start: ' + error.message, 'error');\n }\n}\n\n// ============================================================================\n// INITIALIZE\n// ============================================================================\n\ndocument.addEventListener('DOMContentLoaded', async () => {\n setupUI();\n \n // Initialize params for default style\n const defaultStyle = CONFIG.styles.find(s => s.id === state.currentStyle) || CONFIG.styles[0];\n if (defaultStyle) {\n state.currentStyle = defaultStyle.id;\n state.params[defaultStyle.id] = {};\n defaultStyle.parameters.forEach(p => {\n state.params[defaultStyle.id][p.id] = p.default;\n });\n buildParamsUI(defaultStyle);\n \n // Update active state in UI\n document.querySelectorAll('.style-card').forEach(card => {\n card.classList.toggle('active', card.dataset.id === defaultStyle.id);\n });\n }\n \n await initMindAR();\n});\n`;\n\n// ============================================================================\n// MAIN HANDLER\n// ============================================================================\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/api/config\") {\n return Response.json(DEFAULT_CONFIG);\n }\n\n const html = `\n\n\n Face Lab 2027\n \n \n \n \n\n\n${HTML}\n\n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n}\n\nexport { DEFAULT_CONFIG };","// ============================================================================\n// FACE LAB 2027 - AI Avatar Studio\n// Edge-first, offline-capable face tracking with pattern-based customization\n// ============================================================================\nimport { FACELAB_STYLES as STYLES } from \"./styles.ts\";\n\"./styles.ts\";\n// ============================================================================\n// TYPES AND INTERFACES\n// ============================================================================\n\ninterface PatternParameter {\n id: string;\n name: string;\n type: \"float\" | \"int\" | \"bool\" | \"color\" | \"enum\";\n default: number | boolean | string;\n min?: number;\n max?: number;\n step?: number;\n options?: string[];\n ui: \"slider\" | \"toggle\" | \"colorpicker\" | \"dropdown\" | \"dial\";\n}\n\ninterface StyleDefinition {\n id: string;\n name: string;\n description: string;\n category: \"sketch\" | \"cartoon\" | \"surreal\" | \"realistic\" | \"abstract\";\n tier: \"free\" | \"basic\" | \"pro\" | \"enterprise\";\n parameters: PatternParameter[];\n fragmentShader: string;\n preview: string;\n}\n\ninterface AppConfig {\n version: string;\n styles: StyleDefinition[];\n defaultStyle: string;\n}\n\n// ============================================================================\n// DEFAULT CONFIGURATION\n// ============================================================================\n\nconst DEFAULT_CONFIG: AppConfig = {\n version: \"1.0.0\",\n defaultStyle: \"hand-drawn-sketch\",\n styles: [\n {\n id: \"none\",\n name: \"No Effect\",\n description: \"Raw camera feed\",\n category: \"realistic\",\n tier: \"free\",\n preview: \"📷\",\n parameters: [],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n void main() {\n gl_FragColor = texture2D(map, vUv);\n }\n `,\n },\n {\n id: \"hand-drawn-sketch\",\n name: \"Hand-Drawn Sketch\",\n description: \"Animated pencil sketch with wobbling lines\",\n category: \"sketch\",\n tier: \"free\",\n preview: \"📝\",\n parameters: [\n {\n id: \"strokeWeight\",\n name: \"Stroke Weight\",\n type: \"float\",\n default: 1.5,\n min: 0.5,\n max: 4.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"wobbleAmount\",\n name: \"Hand Tremor\",\n type: \"float\",\n default: 0.002,\n min: 0,\n max: 0.01,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"inkDensity\",\n name: \"Ink Density\",\n type: \"float\",\n default: 0.9,\n min: 0.3,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"paperBrightness\",\n name: \"Paper Brightness\",\n type: \"float\",\n default: 0.95,\n min: 0.7,\n max: 1.0,\n step: 0.01,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float strokeWeight;\n uniform float wobbleAmount;\n uniform float inkDensity;\n uniform float paperBrightness;\n \n float random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n \n float noise(vec2 st) {\n vec2 i = floor(st);\n vec2 f = fract(st);\n float a = random(i);\n float b = random(i + vec2(1.0, 0.0));\n float c = random(i + vec2(0.0, 1.0));\n float d = random(i + vec2(1.0, 1.0));\n vec2 u = f * f * (3.0 - 2.0 * f);\n return mix(a, b, u.x) + (c - a) * u.y * (1.0 - u.x) + (d - b) * u.x * u.y;\n }\n \n void main() {\n vec2 texel = strokeWeight / resolution;\n \n // Add wobble\n vec2 wobble = vec2(\n noise(vUv * 8.0 + time * 1.5) - 0.5,\n noise(vUv * 8.0 + time * 1.5 + 50.0) - 0.5\n ) * wobbleAmount;\n vec2 uv = vUv + wobble;\n \n // Sobel edge detection\n float tl = dot(texture2D(map, uv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float t = dot(texture2D(map, uv + vec2(0.0, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(map, uv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float l = dot(texture2D(map, uv + vec2(-texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float r = dot(texture2D(map, uv + vec2(texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(map, uv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float b = dot(texture2D(map, uv + vec2(0.0, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(map, uv + vec2(texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n \n float gx = tl + 2.0*l + bl - tr - 2.0*r - br;\n float gy = tl + 2.0*t + tr - bl - 2.0*b - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(0.05, 0.2, edge);\n \n // Paper color with slight texture\n float paperNoise = noise(vUv * 100.0) * 0.03;\n vec3 paper = vec3(paperBrightness - paperNoise);\n \n // Ink\n vec3 ink = vec3(0.1);\n \n vec3 color = mix(paper, ink, edge * inkDensity);\n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"cartoon-cel\",\n name: \"Cartoon Cel-Shade\",\n description: \"Anime-style cel-shading with bold outlines\",\n category: \"cartoon\",\n tier: \"free\",\n preview: \"🎨\",\n parameters: [\n {\n id: \"colorLevels\",\n name: \"Color Levels\",\n type: \"float\",\n default: 4.0,\n min: 2.0,\n max: 8.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"outlineThickness\",\n name: \"Outline\",\n type: \"float\",\n default: 1.0,\n min: 0.0,\n max: 3.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"saturation\",\n name: \"Saturation\",\n type: \"float\",\n default: 1.3,\n min: 0.5,\n max: 2.0,\n step: 0.1,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform vec2 resolution;\n uniform float colorLevels;\n uniform float outlineThickness;\n uniform float saturation;\n \n vec3 rgb2hsv(vec3 c) {\n vec4 K = vec4(0.0, -1.0/3.0, 2.0/3.0, -1.0);\n vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));\n vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));\n float d = q.x - min(q.w, q.y);\n float e = 1.0e-10;\n return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);\n }\n \n vec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0/3.0, 1.0/3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n }\n \n void main() {\n vec4 texColor = texture2D(map, vUv);\n vec3 color = texColor.rgb;\n \n // Boost saturation\n vec3 hsv = rgb2hsv(color);\n hsv.y = clamp(hsv.y * saturation, 0.0, 1.0);\n color = hsv2rgb(hsv);\n \n // Posterize\n color = floor(color * colorLevels + 0.5) / colorLevels;\n \n // Edge detection for outline\n vec2 texel = outlineThickness / resolution;\n float tl = dot(texture2D(map, vUv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(map, vUv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(map, vUv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(map, vUv + vec2(texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n \n float gx = tl + bl - tr - br;\n float gy = tl + tr - bl - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(0.1, 0.3, edge);\n \n color = mix(color, vec3(0.15, 0.1, 0.1), edge * step(0.1, outlineThickness));\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"glitch\",\n name: \"Digital Glitch\",\n description: \"RGB split and scanline distortion\",\n category: \"surreal\",\n tier: \"free\",\n preview: \"🌀\",\n parameters: [\n {\n id: \"rgbShift\",\n name: \"RGB Shift\",\n type: \"float\",\n default: 0.005,\n min: 0.0,\n max: 0.02,\n step: 0.001,\n ui: \"slider\",\n },\n {\n id: \"scanlines\",\n name: \"Scanlines\",\n type: \"float\",\n default: 0.3,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n {\n id: \"noise\",\n name: \"Noise\",\n type: \"float\",\n default: 0.1,\n min: 0.0,\n max: 0.5,\n step: 0.02,\n ui: \"slider\",\n },\n {\n id: \"glitchIntensity\",\n name: \"Glitch\",\n type: \"float\",\n default: 0.3,\n min: 0.0,\n max: 1.0,\n step: 0.05,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float rgbShift;\n uniform float scanlines;\n uniform float noise;\n uniform float glitchIntensity;\n \n float random(vec2 st) {\n return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);\n }\n \n void main() {\n vec2 uv = vUv;\n \n // Random glitch offset\n float glitchLine = step(0.99 - glitchIntensity * 0.1, random(vec2(floor(uv.y * 50.0), floor(time * 10.0))));\n uv.x += glitchLine * (random(vec2(time)) - 0.5) * 0.1 * glitchIntensity;\n \n // RGB shift\n float r = texture2D(map, uv + vec2(rgbShift, 0.0)).r;\n float g = texture2D(map, uv).g;\n float b = texture2D(map, uv - vec2(rgbShift, 0.0)).b;\n vec3 color = vec3(r, g, b);\n \n // Scanlines\n float scanline = sin(vUv.y * resolution.y * 1.5) * 0.5 + 0.5;\n color *= 1.0 - scanlines * 0.3 * scanline;\n \n // Noise\n float n = random(vUv + time) * noise;\n color += n - noise * 0.5;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"neon\",\n name: \"Neon Glow\",\n description: \"Glowing neon edge effect\",\n category: \"abstract\",\n tier: \"free\",\n preview: \"💡\",\n parameters: [\n {\n id: \"edgeThreshold\",\n name: \"Edge Sensitivity\",\n type: \"float\",\n default: 0.15,\n min: 0.05,\n max: 0.5,\n step: 0.01,\n ui: \"slider\",\n },\n {\n id: \"glowStrength\",\n name: \"Glow Strength\",\n type: \"float\",\n default: 2.0,\n min: 0.5,\n max: 4.0,\n step: 0.1,\n ui: \"slider\",\n },\n {\n id: \"hueShift\",\n name: \"Hue Shift\",\n type: \"float\",\n default: 0.0,\n min: 0.0,\n max: 1.0,\n step: 0.01,\n ui: \"slider\",\n },\n {\n id: \"bgBrightness\",\n name: \"Background\",\n type: \"float\",\n default: 0.05,\n min: 0.0,\n max: 0.3,\n step: 0.01,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform float time;\n uniform vec2 resolution;\n uniform float edgeThreshold;\n uniform float glowStrength;\n uniform float hueShift;\n uniform float bgBrightness;\n \n vec3 hsv2rgb(vec3 c) {\n vec4 K = vec4(1.0, 2.0/3.0, 1.0/3.0, 3.0);\n vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);\n return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);\n }\n \n void main() {\n vec2 texel = 1.5 / resolution;\n \n // Sobel\n float tl = dot(texture2D(map, vUv + vec2(-texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float t = dot(texture2D(map, vUv + vec2(0.0, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float tr = dot(texture2D(map, vUv + vec2(texel.x, -texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float l = dot(texture2D(map, vUv + vec2(-texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float r = dot(texture2D(map, vUv + vec2(texel.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float bl = dot(texture2D(map, vUv + vec2(-texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float b = dot(texture2D(map, vUv + vec2(0.0, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n float br = dot(texture2D(map, vUv + vec2(texel.x, texel.y)).rgb, vec3(0.299, 0.587, 0.114));\n \n float gx = tl + 2.0*l + bl - tr - 2.0*r - br;\n float gy = tl + 2.0*t + tr - bl - 2.0*b - br;\n float edge = sqrt(gx*gx + gy*gy);\n edge = smoothstep(edgeThreshold * 0.5, edgeThreshold, edge);\n \n // Neon color based on position\n float hue = fract(vUv.x * 0.5 + vUv.y * 0.3 + hueShift + time * 0.1);\n vec3 neonColor = hsv2rgb(vec3(hue, 0.9, 1.0));\n \n // Glow effect\n vec3 glow = neonColor * edge * glowStrength;\n \n // Add bloom\n for(float i = 1.0; i <= 3.0; i++) {\n vec2 offset = texel * i * 2.0;\n float e1 = dot(texture2D(map, vUv + vec2(offset.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float e2 = dot(texture2D(map, vUv - vec2(offset.x, 0.0)).rgb, vec3(0.299, 0.587, 0.114));\n float e3 = dot(texture2D(map, vUv + vec2(0.0, offset.y)).rgb, vec3(0.299, 0.587, 0.114));\n float e4 = dot(texture2D(map, vUv - vec2(0.0, offset.y)).rgb, vec3(0.299, 0.587, 0.114));\n float avgEdge = (e1 + e2 + e3 + e4) * 0.25;\n glow += neonColor * smoothstep(edgeThreshold, edgeThreshold * 2.0, avgEdge) * (0.5 / i);\n }\n \n vec3 bg = vec3(bgBrightness * 0.1, bgBrightness * 0.05, bgBrightness * 0.15);\n vec3 color = bg + glow;\n \n gl_FragColor = vec4(color, 1.0);\n }\n `,\n },\n {\n id: \"pixelate\",\n name: \"Pixel Art\",\n description: \"Retro pixelated effect\",\n category: \"abstract\",\n tier: \"free\",\n preview: \"👾\",\n parameters: [\n {\n id: \"pixelSize\",\n name: \"Pixel Size\",\n type: \"float\",\n default: 6.0,\n min: 2.0,\n max: 20.0,\n step: 1.0,\n ui: \"slider\",\n },\n {\n id: \"colorDepth\",\n name: \"Color Depth\",\n type: \"float\",\n default: 8.0,\n min: 2.0,\n max: 32.0,\n step: 1.0,\n ui: \"slider\",\n },\n ],\n fragmentShader: `\n precision mediump float;\n varying vec2 vUv;\n uniform sampler2D map;\n uniform vec2 resolution;\n uniform float pixelSize;\n uniform float colorDepth;\n \n void main() {\n vec2 pixelUv = floor(vUv * resolution / pixelSize) * pixelSize / resolution;\n vec4 color = texture2D(map, pixelUv);\n \n // Reduce color depth\n color.rgb = floor(color.rgb * colorDepth + 0.5) / colorDepth;\n \n gl_FragColor = color;\n }\n `,\n },\n ],\n};\n\n// ============================================================================\n// HTML\n// ============================================================================\n\nconst HTML = `\n

\n \n \n

\n \n

Starting camera...

\n \n

\n FPS:\n --\n

\n \n

\n \n \n

\n\n

\\${style.preview}

\\${style.name}

\\${style.description}

No parameters

\n \\${param.name}\n \\${formatVal(value, param)}\n

\n \n \\`;\n container.appendChild(div);\n \n const input = div.querySelector('input');\n input.oninput = (e) => {\n const v = parseFloat(e.target.value);\n params[param.id] = v;\n document.getElementById('val-' + param.id).textContent = formatVal(v, param);\n updateUniform(param.id, v);\n };\n });\n}\n\nfunction formatVal(v, param) {\n if (param.type === 'int' || param.step >= 1) return Math.round(v);\n return v.toFixed(param.step < 0.01 ? 3 : 2);\n}\n\nfunction updateShader(style) {\n if (!filterMaterial) return;\n \n // Create new material with style's shader\n const vertexShader = \\`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`;\n \n filterMaterial.vertexShader = vertexShader;\n filterMaterial.fragmentShader = style.fragmentShader;\n filterMaterial.needsUpdate = true;\n \n // Set uniforms\n const params = state.params[style.id] || {};\n style.parameters.forEach(param => {\n if (filterMaterial.uniforms[param.id]) {\n filterMaterial.uniforms[param.id].value = params[param.id];\n } else {\n filterMaterial.uniforms[param.id] = { value: params[param.id] };\n }\n });\n}\n\nfunction updateUniform(name, value) {\n if (filterMaterial && filterMaterial.uniforms[name]) {\n filterMaterial.uniforms[name].value = value;\n }\n}\n\n// ============================================================================\n// MINDAR SETUP\n// ============================================================================\n\nasync function initMindAR() {\n setLoading(true, 'Loading face tracking...');\n \n try {\n const { MindARThree } = await import('mindar-face-three');\n const THREE = await import('three');\n \n clock = new THREE.Clock();\n \n const container = document.getElementById('mindar-container');\n \n mindarThree = new MindARThree({\n container: container\n });\n \n const { renderer, scene, camera } = mindarThree;\n \n // Get video texture after start\n await mindarThree.start();\n \n setLoading(true, 'Creating filter mesh...');\n \n // Create video texture from MindAR's video element\n const video = mindarThree.video;\n const videoTexture = new THREE.VideoTexture(video);\n videoTexture.minFilter = THREE.LinearFilter;\n videoTexture.magFilter = THREE.LinearFilter;\n \n // Get initial style\n const style = CONFIG.styles.find(s => s.id === state.currentStyle) || CONFIG.styles[0];\n \n // Create shader material\n filterMaterial = new THREE.ShaderMaterial({\n uniforms: {\n map: { value: videoTexture },\n time: { value: 0 },\n resolution: { value: new THREE.Vector2(video.videoWidth || 640, video.videoHeight || 480) }\n },\n vertexShader: \\`\n varying vec2 vUv;\n void main() {\n vUv = uv;\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n }\n \\`,\n fragmentShader: style.fragmentShader,\n transparent: true\n });\n \n // Add style-specific uniforms\n style.parameters.forEach(param => {\n filterMaterial.uniforms[param.id] = { value: state.params[style.id]?.[param.id] ?? param.default };\n });\n \n // Create fullscreen quad that sits in front of camera\n const aspect = video.videoWidth / video.videoHeight || 4/3;\n const planeHeight = 2.5;\n const planeWidth = planeHeight * aspect;\n \n const geometry = new THREE.PlaneGeometry(planeWidth, planeHeight);\n filterMesh = new THREE.Mesh(geometry, filterMaterial);\n \n // Position in front of camera\n filterMesh.position.z = -2;\n if (state.flipX) filterMesh.scale.x = -1;\n \n // Add to anchor that tracks face\n const anchor = mindarThree.addAnchor(168); // Nose tip\n anchor.group.add(filterMesh);\n \n // Alternative: Add directly to scene for full-screen effect\n // scene.add(filterMesh);\n \n // Update status\n updateStatus(true, 'Tracking active');\n state.isTracking = true;\n \n setLoading(false);\n toast('Face tracking ready', 'success');\n \n // Animation loop\n const animate = () => {\n requestAnimationFrame(animate);\n \n // Update time uniform\n if (filterMaterial.uniforms.time) {\n filterMaterial.uniforms.time.value = clock.getElapsedTime();\n }\n \n // Update resolution if video size changed\n if (video.videoWidth && filterMaterial.uniforms.resolution) {\n filterMaterial.uniforms.resolution.value.set(video.videoWidth, video.videoHeight);\n }\n \n // FPS counter\n frameCount++;\n const now = performance.now();\n if (now - lastFpsTime >= 500) {\n state.fps = Math.round(frameCount * 1000 / (now - lastFpsTime));\n frameCount = 0;\n lastFpsTime = now;\n document.getElementById('fps').textContent = state.fps;\n }\n \n renderer.render(scene, camera);\n };\n \n animate();\n \n } catch (error) {\n console.error('MindAR init error:', error);\n setLoading(false);\n updateStatus(false, 'Error: ' + error.message);\n toast('Failed to start: ' + error.message, 'error');\n }\n}\n\n// ============================================================================\n// INITIALIZE\n// ============================================================================\n\ndocument.addEventListener('DOMContentLoaded', async () => {\n setupUI();\n \n // Initialize params for default style\n const defaultStyle = CONFIG.styles.find(s => s.id === state.currentStyle) || CONFIG.styles[0];\n if (defaultStyle) {\n state.currentStyle = defaultStyle.id;\n state.params[defaultStyle.id] = {};\n defaultStyle.parameters.forEach(p => {\n state.params[defaultStyle.id][p.id] = p.default;\n });\n buildParamsUI(defaultStyle);\n \n // Update active state in UI\n document.querySelectorAll('.style-card').forEach(card => {\n card.classList.toggle('active', card.dataset.id === defaultStyle.id);\n });\n }\n \n await initMindAR();\n});\n`;\n\n// ============================================================================\n// MAIN HANDLER\n// ============================================================================\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n\n if (url.pathname === \"/api/config\") {\n return Response.json(DEFAULT_CONFIG);\n }\n\n const html = `\n\n\n Face Lab 2027\n \n \n \n \n\n\n${HTML}\n\n\n`;\n\n return new Response(html, {\n headers: {\n \"Content-Type\": \"text/html; charset=utf-8\",\n \"Cache-Control\": \"no-cache\",\n },\n });\n}\n\nexport { DEFAULT_CONFIG };","createdAt",["D",1767425606896],"branchVersion","branchId","8db9776e-e857-11f0-bcde-42dde27851f2","id","8db936b4-e857-11f0-bcde-42dde27851f2","patternlanguage",["D",1767412318598],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","019b43e2-aa14-727d-9d22-490aa147aa0b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019b43e2-aa14-727d-9d22-4c67294d95f4","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},"branch",{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"isOwned",80,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","banks","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzM3QkpMYjNNQXJWZGdESmFRZHZyc2ZSS1djUyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":163,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":164,"_78":165,"_80":166,"_82":25},"tree",[154,155],"files",[154,155],"counts",{"_143":60,"_144":145,"_146":60,"_147":148,"_149":150},"contents",[125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":139,"_32":28,"_30":31,"_130":-5,"_41":42,"_40":14,"_132":25,"_38":140,"_13":141,"_33":34,"_35":37,"_24":25,"_137":-5,"_27":142},{"_43":127,"_32":128,"_30":129,"_130":-5,"_41":42,"_40":131,"_132":25,"_38":133,"_13":134,"_33":135,"_35":136,"_24":25,"_137":-5,"_27":138},"3718b72a-e876-11f0-b6f6-42dde27851f2","styles.ts","d73570f0-e857-11f0-8c47-42dde27851f2","parentId",54,"latest",["D",1767425487642],13,"script","const FACELAB_STYLES = `\n:root {\n --bg-primary: #0a0a0f;\n --bg-secondary: #12121a;\n --bg-tertiary: #1a1a25;\n --bg-card: #16161f;\n --bg-hover: #1e1e2a;\n \n --text-primary: #ffffff;\n --text-secondary: #a0a0b0;\n --text-muted: #606070;\n \n --accent-primary: #6366f1;\n --accent-secondary: #8b5cf6;\n --accent-success: #10b981;\n --accent-warning: #f59e0b;\n --accent-error: #ef4444;\n \n --border-color: #2a2a35;\n --border-radius: 12px;\n --border-radius-sm: 8px;\n \n --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);\n --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);\n --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);\n \n --transition-fast: 150ms ease;\n --transition-normal: 250ms ease;\n \n --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n --font-mono: 'JetBrains Mono', 'Fira Code', monospace;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nhtml, body {\n width: 100%;\n height: 100%;\n overflow: hidden;\n font-family: var(--font-sans);\n background: var(--bg-primary);\n color: var(--text-primary);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Layout */\n.app-container {\n display: flex;\n width: 100%;\n height: 100%;\n}\n\n.sidebar {\n width: 320px;\n min-width: 320px;\n height: 100%;\n background: var(--bg-secondary);\n border-right: 1px solid var(--border-color);\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.main-content {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n position: relative;\n}\n\n/* Sidebar Header */\n.sidebar-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n}\n\n.logo {\n display: flex;\n align-items: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.logo-icon {\n width: 40px;\n height: 40px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n border-radius: var(--border-radius-sm);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n}\n\n.logo-text {\n font-size: 20px;\n font-weight: 700;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.status-bar {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: var(--text-secondary);\n}\n\n.status-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--accent-success);\n animation: pulse 2s infinite;\n}\n\n.status-dot.warning { background: var(--accent-warning); }\n.status-dot.error { background: var(--accent-error); }\n\n@keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n/* Sidebar Tabs */\n.sidebar-tabs {\n display: flex;\n border-bottom: 1px solid var(--border-color);\n}\n\n.tab-btn {\n flex: 1;\n padding: 12px;\n background: transparent;\n border: none;\n color: var(--text-secondary);\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition-fast);\n position: relative;\n}\n\n.tab-btn:hover {\n color: var(--text-primary);\n background: var(--bg-hover);\n}\n\n.tab-btn.active {\n color: var(--accent-primary);\n}\n\n.tab-btn.active::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 2px;\n background: var(--accent-primary);\n}\n\n/* Sidebar Content */\n.sidebar-content {\n flex: 1;\n overflow-y: auto;\n padding: 16px;\n}\n\n.sidebar-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.sidebar-content::-webkit-scrollbar-track {\n background: var(--bg-tertiary);\n}\n\n.sidebar-content::-webkit-scrollbar-thumb {\n background: var(--border-color);\n border-radius: 3px;\n}\n\n.tab-panel {\n display: none;\n}\n\n.tab-panel.active {\n display: block;\n}\n\n/* Style Grid */\n.style-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 12px;\n}\n\n.style-card {\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius);\n padding: 16px;\n cursor: pointer;\n transition: var(--transition-fast);\n position: relative;\n overflow: hidden;\n}\n\n.style-card:hover {\n border-color: var(--accent-primary);\n transform: translateY(-2px);\n box-shadow: var(--shadow-md);\n}\n\n.style-card.active {\n border-color: var(--accent-primary);\n background: rgba(99, 102, 241, 0.1);\n}\n\n.style-card.locked {\n opacity: 0.6;\n}\n\n.style-card.locked::after {\n content: '🔒';\n position: absolute;\n top: 8px;\n right: 8px;\n font-size: 12px;\n}\n\n.style-preview {\n font-size: 32px;\n text-align: center;\n margin-bottom: 8px;\n}\n\n.style-name {\n font-size: 13px;\n font-weight: 600;\n text-align: center;\n margin-bottom: 4px;\n}\n\n.style-tier {\n font-size: 10px;\n text-align: center;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.style-tier.free { color: var(--accent-success); }\n.style-tier.pro { color: var(--accent-primary); }\n.style-tier.enterprise { color: var(--accent-secondary); }\n\n/* Controls */\n.control-group {\n margin-bottom: 20px;\n}\n\n.control-label {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 8px;\n font-size: 13px;\n color: var(--text-secondary);\n}\n\n.control-value {\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--accent-primary);\n}\n\n/* Slider */\ninput[type=\"range\"] {\n width: 100%;\n height: 6px;\n background: var(--bg-tertiary);\n border-radius: 3px;\n outline: none;\n -webkit-appearance: none;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n background: var(--accent-primary);\n border-radius: 50%;\n cursor: pointer;\n transition: var(--transition-fast);\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n transform: scale(1.2);\n box-shadow: 0 0 10px var(--accent-primary);\n}\n\n/* Toggle */\n.toggle-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px;\n background: var(--bg-card);\n border-radius: var(--border-radius-sm);\n margin-bottom: 8px;\n}\n\n.toggle-label {\n font-size: 13px;\n}\n\n.toggle {\n width: 44px;\n height: 24px;\n background: var(--bg-tertiary);\n border-radius: 12px;\n position: relative;\n cursor: pointer;\n transition: var(--transition-fast);\n}\n\n.toggle.active {\n background: var(--accent-primary);\n}\n\n.toggle::after {\n content: '';\n position: absolute;\n top: 2px;\n left: 2px;\n width: 20px;\n height: 20px;\n background: white;\n border-radius: 50%;\n transition: var(--transition-fast);\n}\n\n.toggle.active::after {\n left: 22px;\n}\n\n/* Color Picker */\n.color-picker-wrapper {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.color-preview {\n width: 36px;\n height: 36px;\n border-radius: var(--border-radius-sm);\n border: 2px solid var(--border-color);\n cursor: pointer;\n}\n\n.color-input {\n flex: 1;\n padding: 8px 12px;\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 13px;\n}\n\n/* Buttons */\n.btn {\n padding: 10px 20px;\n border: none;\n border-radius: var(--border-radius-sm);\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition-fast);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n}\n\n.btn-primary {\n background: var(--accent-primary);\n color: white;\n}\n\n.btn-primary:hover {\n background: var(--accent-secondary);\n transform: translateY(-1px);\n}\n\n.btn-secondary {\n background: var(--bg-tertiary);\n color: var(--text-primary);\n border: 1px solid var(--border-color);\n}\n\n.btn-secondary:hover {\n background: var(--bg-hover);\n border-color: var(--accent-primary);\n}\n\n.btn-icon {\n width: 40px;\n height: 40px;\n padding: 0;\n border-radius: 50%;\n}\n\n/* Canvas Container */\n.canvas-container {\n flex: 1;\n position: relative;\n background: var(--bg-primary);\n overflow: hidden;\n}\n\n#render-canvas {\n width: 100%;\n height: 100%;\n}\n\n.video-hidden {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n\n/* Overlay Controls */\n.overlay-controls {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n gap: 12px;\n padding: 12px 20px;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-radius: 50px;\n border: 1px solid var(--border-color);\n}\n\n.overlay-btn {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n background: var(--bg-tertiary);\n border: 1px solid var(--border-color);\n color: var(--text-primary);\n font-size: 20px;\n cursor: pointer;\n transition: var(--transition-fast);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.overlay-btn:hover {\n background: var(--accent-primary);\n border-color: var(--accent-primary);\n transform: scale(1.1);\n}\n\n.overlay-btn.recording {\n background: var(--accent-error);\n border-color: var(--accent-error);\n animation: pulse-red 1s infinite;\n}\n\n@keyframes pulse-red {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }\n 50% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }\n}\n\n/* Stats Overlay */\n.stats-overlay {\n position: absolute;\n top: 20px;\n left: 20px;\n padding: 12px 16px;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(10px);\n border-radius: var(--border-radius-sm);\n font-family: var(--font-mono);\n font-size: 12px;\n color: var(--text-secondary);\n pointer-events: none;\n}\n\n.stats-row {\n display: flex;\n justify-content: space-between;\n gap: 20px;\n margin-bottom: 4px;\n}\n\n.stats-row:last-child {\n margin-bottom: 0;\n}\n\n.stats-value {\n color: var(--accent-success);\n}\n\n.stats-value.warning { color: var(--accent-warning); }\n.stats-value.error { color: var(--accent-error); }\n\n/* Watermark */\n.watermark {\n position: absolute;\n bottom: 80px;\n right: 20px;\n padding: 8px 12px;\n background: rgba(0, 0, 0, 0.6);\n border-radius: var(--border-radius-sm);\n font-size: 11px;\n color: var(--text-muted);\n pointer-events: none;\n}\n\n/* Settings Panel */\n.settings-section {\n margin-bottom: 24px;\n}\n\n.settings-section-title {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 1px;\n color: var(--text-muted);\n margin-bottom: 12px;\n}\n\n/* License Panel */\n.license-card {\n padding: 20px;\n background: var(--bg-card);\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n text-align: center;\n}\n\n.license-tier {\n font-size: 24px;\n font-weight: 700;\n margin-bottom: 8px;\n background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n}\n\n.license-features {\n margin: 16px 0;\n text-align: left;\n}\n\n.license-feature {\n display: flex; align-items: center;\n gap: 8px;\n padding: 8px 0;\n font-size: 13px;\n color: var(--text-secondary);\n border-bottom: 1px solid var(--border-color);\n}\n\n.license-feature:last-child {\n border-bottom: none;\n}\n\n.feature-icon {\n width: 20px;\n text-align: center;\n}\n\n.feature-icon.enabled { color: var(--accent-success); }\n.feature-icon.disabled { color: var(--text-muted); }\n\n/* Modal */\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.8);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n opacity: 0;\n visibility: hidden;\n transition: var(--transition-normal);\n}\n\n.modal-overlay.active {\n opacity: 1;\n visibility: visible;\n}\n\n.modal {\n background: var(--bg-secondary);\n border-radius: var(--border-radius);\n border: 1px solid var(--border-color);\n max-width: 500px;\n width: 90%;\n max-height: 80vh;\n overflow: auto;\n transform: translateY(20px);\n transition: var(--transition-normal);\n}\n\n.modal-overlay.active .modal {\n transform: translateY(0);\n}\n\n.modal-header {\n padding: 20px;\n border-bottom: 1px solid var(--border-color);\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.modal-title {\n font-size: 18px;\n font-weight: 600;\n}\n\n.modal-close {\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: var(--bg-tertiary);\n border: none;\n color: var(--text-secondary);\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: var(--transition-fast);\n}\n\n.modal-close:hover {\n background: var(--accent-error);\n color: white;\n}\n\n.modal-body {\n padding: 20px;\n}\n\n.modal-footer {\n padding: 20px;\n border-top: 1px solid var(--border-color);\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n}\n\n/* License Input */\n.license-input-wrapper {\n margin-bottom: 20px;\n}\n\n.license-input {\n width: 100%;\n padding: 16px;\n background: var(--bg-card);\n border: 2px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n color: var(--text-primary);\n font-family: var(--font-mono);\n font-size: 14px;\n text-align: center;\n letter-spacing: 2px;\n transition: var(--transition-fast);\n}\n\n.license-input:focus {\n outline: none;\n border-color: var(--accent-primary);\n}\n\n.license-input.valid {\n border-color: var(--accent-success);\n}\n\n.license-input.invalid {\n border-color: var(--accent-error);\n}\n\n/* Toast Notifications */\n.toast-container {\n position: fixed;\n top: 20px;\n right: 20px;\n z-index: 2000;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.toast {\n padding: 12px 20px;\n background: var(--bg-secondary);\n border: 1px solid var(--border-color);\n border-radius: var(--border-radius-sm);\n box-shadow: var(--shadow-lg);\n display: flex;\n align-items: center;\n gap: 12px;\n animation: slideIn 0.3s ease;\n}\n\n@keyframes slideIn {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n\n.toast.success { border-left: 3px solid var(--accent-success); }\n.toast.error { border-left: 3px solid var(--accent-error); }\n.toast.warning { border-left: 3px solid var(--accent-warning); }\n.toast.info { border-left: 3px solid var(--accent-primary); }\n\n/* Loading Spinner */\n.spinner {\n width: 40px;\n height: 40px;\n border: 3px solid var(--bg-tertiary);\n border-top-color: var(--accent-primary);\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n to { transform: rotate(360deg); }\n}\n\n.loading-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(10, 10, 15, 0.9);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n z-index: 100;\n}\n\n.loading-text {\n font-size: 14px;\n color: var(--text-secondary);\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n .app-container {\n flex-direction: column;\n }\n \n .sidebar {\n width: 100%;\n min-width: 100%;\n height: auto;\n max-height: 50vh;\n border-right: none;\n border-bottom: 1px solid var(--border-color);\n }\n \n .style-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n \n .overlay-controls {\n bottom: 10px;\n padding: 8px 16px;\n }\n \n .overlay-btn {\n width: 40px;\n height: 40px;\n font-size: 16px;\n }\n}\n`;\n\nexport default FACELAB_STYLES;","label",[128],"7e2b4b50-e876-11f0-9b2f-42dde27851f2",["D",1767425606896],46,[28],"pulls","branches",1,"forks","envVars",{"_151":60,"_153":60},"connections",{"_151":60,"_152":60},"count","unfilledCount","emptyCount",{"_43":139,"_32":28,"_30":31,"_130":-5,"_41":42,"_40":14,"_132":25,"_38":160,"_13":141,"_33":34,"_35":37,"_24":25,"_137":-5,"_157":161,"_27":162},{"_43":127,"_32":128,"_30":129,"_130":-5,"_41":42,"_40":131,"_132":25,"_38":156,"_13":134,"_33":135,"_35":136,"_24":25,"_137":-5,"_157":158,"_27":159},["D",1767425487642],"children",[],[128],["D",1767425606896],[],[28],["D",1767412318598],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":25},{"_13":83,"_32":84,"_43":42,"_85":44,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":45,"_92":93},"ctx",{"_76":-5,"_122":200,"_201":202,"_203":204,"_205":25,"_206":25,"_207":25,"_208":120,"_209":-5,"_210":-7,"_211":-7,"_212":60,"_213":25,"_214":25,"_215":-5,"_216":25,"_217":25,"_218":25,"_219":-5},"ENV",{"_171":172,"_173":174,"_175":84,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197,"_198":199},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","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","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v59