technology software

documentation technical

government public service

adult content

English

systemTheme

_gcl_au

_ga_5Q6H9FT0R3

ajs_anonymous_id

Within the commercial generic top-level domain (.com), 'trickle-app.com' is registered and has no subdomain. The registrable portion 'trickle-app' spans 11 characters containing three vowels alongside seven consonants, along with 1 hyphen. It segments into 2 words: trickle, app. Average segment length settles at five characters. No strong language cues emerged from the frequency lists.

html/92/40/9240f37d-44ce-4586-9aa9-ea8f77aae850.html.gz

script-src 'none'; form-action 'none'; frame-src 'none'; report-uri https://csp.withgoogle.com/csp/scaffolding/ascnsrsggc:196:0

script-src 'none'; form-action 'none'; frame-src 'none'; report-uri https://csp.withgoogle.com/csp/scaffolding/ascnsrsggc:164:0

90cc0cbf2ee78fabf417e5edd51009ebb991d15d93358dca930681292f7007a1

012eadd714272e72b21158b72cfa145c74d79a2f0232d4a6fa543b1cb984abfc

13bef7da57568af826bf0c20bb58469e5bca9cda3e41d1d7a83ffa39b6fc1bbe

cbe4f6b21c1cf018511d3d29fc8206088e289de141b696d01778ce61aac9f921

04617e8a3f25dd227e087c5998547097fc481b339b0bf97c8a2f27a833d0e041

b75afdaf5411dfe5cf0543fcc8f62648978342a5d9319f7bdf40ee665eaae4b9

bbf544bb1c89d0ff3d25260e9a4ea8d202b889a0958a17ed95f4cf6ed31741ca

0bc9c32997aeecef678c9b9964e81279fc75d601c6a652315c850e70309e3016

68da53420bf904884f0509db1bd3498a3d0b27c2093d4fe12b489f6136bfe983

ab4fb72d5ac31872b13a067f7a2bc8eaf6793b9c82da08bda1798a8274b226d1

8c9a860ad1aba1fc53b99c85d72bdb6a60247f1c78d5206b5d612eb0fbd7ae15

26bffe476878ec6fe6207211195b475aaf7a4040166a1d0203bae4232422632b

64ec9681139edb222c2faaef1ac2927f8e5d9b69df8829d5dfc8abe5e3b72e08

20a7760d023d46a9bf2c5d98385d2447ccbdc76f6fc3694a1de437af1abdc392

d9c221a1c850168bba32ad1707b29659c1676f93bafc3575c1017fedc612bf21

5a3190d71c74cedbb690304b4def02a9df92bc7a48cff638e4d28b790e81107d

03224a56c5b151b6dc3393e41e6d8e7b801945f5d3d9ad3b4a56d2f690798ca8

b220422a7893656d8552456c029278cb920ffa108eb02583d380b32b09e52dd2

2dcb2e50c883929aebb7a64a7a22cfe2260d856a3c36a6926c082da19c552b7b

8d990c9d852ba91bbad01e663cf35aeb3db6829d5e683175c7e63a2dc8961f6b

37bba4472e53e74007b027fb4439b8d955df8aafea29dd32d2979105c4107960

c5fa814637690806373974aeaeb3537d5de17eb6da8ec8debe513b637d86616c

9b77a6133ebc0cf6ab3817f1686e7442555ab451448247de41a746d92529fa40

3814cddd18b2095e01abb745a99e5ada90178e709c09879324c3b623f2d829ea

30c825ebf446ac081fd9f54275ff53fbe4351981ff55b5777feffff007fb1628

0ea5a86ba6f4e35a6ea9480be531b78b11946f207a19015bbd7cec1c90a0a821

21aee8c2b163633e21ab5f5fa710f07a6b6681bb2f006f74fec8449c9816aa7c

e20cd0f945ade887e7921859c602a07c5b0fa8bae238c4dfb9061f30a7def4b6

370ef38c4a61dad2a871db906aa574d2cf04f9bccd8842995b7066d8df7fcc2b

0b784e9a6078a4f70998263771d4619823a146dfbf71b79b8457dea6a565fece

d110fd64d8723cf2e83c718f9a296046b68dc71b673b57d6150876db9de8cb51

88206f7e63cea3114296a4235b927fd9d55b3e369810c63a375b82ffc44ac3c2

ba4b0e74ccd16230a2e50e8f27174ac43f557703e2662c020bfa0bf2b9178f00

72b1053f2d2e7b0c8e7e518590ed022c95e22726e1fbff6873d0d1fe20904774

0953cc4b761c2ce718cc1d9448060b60966f3bbfc83364779753817c733c39dc

49bccd84d0f2093942960014c82055c66b177a914114c9841696cc9394b928ac

d6ac27d76f56144d330ea4d31caaf71441f798ac6e172845e9846d4f5eb3a273

ebce6d781320e5a06862ee621e76f1fc0ef3a90e519e2656bd864ccd8dedc1ed

d10bada338e1f607879f6523ed60ab1efc4d91e35ebabca2a918f8e8bda90128

97631b770d3e6cbc5bbc32e7a60646ac539310ef45c0b431d83c093a0fa7e89c

8290ab35d13f46857b9ab5f56132a071cce1c1ff3b2a8acab536085d0741cdd5

6522f34021b495a8b1ba16a770521c252f7540b84179259addd872a28b14236b

2f84b558303c726ff76a915ab68bf3aa7035a265d2d84c8ec0a88d99a836396d

a0d6c716918c24e72aed909e84b7a8e6010d6345d2c0ba89b145a275bef0218f

a06254abb383c6233e229e968c9e21a5781f3ec3cdcb1a7a1c9dd2b576760ac9

0918339b847eff042e49a7a30825c20cbba26b923c8d80ca7a5756bb99ecbae8

947cf7c9f0ef013f4fc95bbbb61a0a2ab1f112fcf188d78e8a993c40f4239ffc

a753800df820940634a9dbe5aa547caa31614ed95b355cdea94c3cb117275503

8d60cbf908c9acb105816500a951b9bb6c3859c4deb33a9e0ae3f675031097aa

7866cf0dceaa1c5d110a954b0a18b984404bc2874a8e43a1c223c442ab4518f4

95470edc2f36072634fd22ba9a84b07dbd684c4e4b19a24337758663125323cc

26b931e2a8a682c7da4d8c450e6b5f429ca029fee15800e5f494c610dac3a501

7b22262c135a0f527ddb8b8b8c09dac9db2ad0a4892a8a1239534ba0f39181bc

c948bf3c387ac3635315ebac17be5f87c6e24c2d1972f50349147712351f4a42

6f940da437b798fd2badae2f43a0ae7d15bb50d68a845c3d2e713fb6ea8f2998

8805b288068f2a1b32783b93c7930f110b4ac65f8f7ecfb0e21e206bf821bbe7

83829eaa9529941387b6b9aea74e2b3ca945da05855212e2487b51669cce1527

f469547f34a84be9ae67c9d555991c5051c5fbb126a4febbadb6eb47dedb9e62

53e6c023184d3d0ab4aad8e480249ae094bbae966ddd3f7950a1de4b0d2a72ba

8792e2fa72abc8a22e0e14ec307180fc8aac0b029659149f043f3bf5fcaf7af7

3bd10909c3549413a0fd71a6e4db1c4709298a8c5697a45c93241ad61d8bd49b

62e31612700870d98c09ea8229077049206d1e5fff1675bac4ddaccc71c6723d

e19531543849435de518a68c897ebca40c7bbb40f7f7274ef1164a5c2739a166

5a3f4d8d0d3236c14df564546eac6ba351675aaf280af8e2d6159e82e976ce12

3d161a393d56c2ec224d80c2d2cfcdc8d89d3bddee65dfa74e5435c7d171f6c2

e783c49cbeae2161a57ce0b38417b91458d783eb73c73716d379e61bf1956ef7

f68d89dd214734ccfd2b3f62fe17d8e5d0ae3728914af49247637ea1b4b981b8

f0a345c0061fc11c9a167e3ab8966338746ffda8e060688863dc1fa433d8ce47

ed16a397a9fa17201f380b4f6aef1d68d1092f6cb6f01c7580b4b1787d0914e3

ea7461c141c782d69f4e25e5d02dfdbe63036f64104bca72ebf9ac5d3287ac47

4138a288db1bd091295a64fdf800500c9fefe4dfce1d2fcbd9465b84d589afe6

0356d34e9126e39b3a9ea5fd135b2c5d8b4e8a30d3af229e67d01db2068fdb90

d76e09e33f2d2374014a4ae9813c8e03663b9b3295212d4ee8c057d9757ea08f

d3da7ea691f671c2c46ae546da8e57ec4ff5ddc7d121386a207fb1c8d7829bc1

f3f51e0ebfed6b8e8727043c864f19cbc1ce822c07f9223b76e79081747c8df4

01d7ab5cd0955337f8da4797ce21f6a743b4568e8fd58ecc76f295fee735546a

51805762bb9e1e2cd42909b6d68800d13fcda1b5be98497b24c2de6a555617d2

7f656f5dcc983cea396b0999c43ec2b22a2dfb1ed46b778262ea4e4b9261d956

d09773b1bdeea8ea67c52a40ce9415cac98324a1f7cec606b7f7defd3e0522fc

55643ac997014f1b3080c6b44931673093e4198f5e7ba002f13ebf70f7dcabbb

2d6f0e0e0e0e681744cb0c2ede10eb3aa245522e531fb601c712918e346d2fbd

30e86309ba382462d41ed410df81d68dfc3b6559d75c3ebc18a641df2ce11071

8bd94bed8236c2f8befac8ac02185de4ae0a8d04624211f089bb5359a3e9fdb1

037013be1a83ed1c351fe3fa62458c28be3aeb58a6cc296718f00fa4ceb491cf

42b9905e3c8ef984b53e912646da99ec48c0b9016a2076fee531eb7f32b353d5

8b972dcc1a9d696e14600d57dc6bb827948955838d5945926438e8bbd635c4cf

d78c5b005a5605e4dd4a528068a44c40875d247a59f24d446a2bad9bbbb5e54b

c7d32759363ec9fc6a4718eca8dfaa598e1733c8f55c995aa39805226c7b8895

dbe95cb3aed7bd864b89dfdc23ce50dd53cee84279af650789fbaf95e8c2012d

14a2a1af1c60405deadd3300d78cdc84d303a71f34e4249f887ff673a4b93052

ca922a300e24a0cdd059d3891123aad6e157fe565b30d1567e0738d24d81c3fe

a2e3ebc6a60487c892f556d747422c3214c60e5a47b292d23703a77716de0564

6a888f2cb5792ea9394fa24777c7680e650103612e8df122f54def4085e4beb3

3bf9ca5ba65eee71b8043ebee5c5c2f38becb9496cf0a0bc02eb50b52f6a9667

317d05dac524d354fe6c7c0d8954e5086e5609ce92edfc662677456db5a1426f

6079d542b3e1751b06373a6e5cf28078a8eb88e9830191a5cba7646a10dda99e

f911edbb92d8a1fc8bdfb8e0b08857bf7dfd0a611f3d7e1a6bd97b227fb5e03b

900b6121de1a22a73d78a4c9bb3bbfc92c50c6e7ca6da1a8e13e9489538a8402

bdd53d0e3c05c1b872b65e2ca55498a85bdc84ca5912ca824fc477835a0ab449

d44af46270d73a7e624afa42389ca7ada99c296b0451a367c3dac452bdc63792

viewport

next-size-adjust

From websites to internal tools—templates that fit any idea.

description

twitter:card

twitter:title

twitter:description

fcbcb4f8cc25ee52ef8f35bf5909d497-38bdad2bb049a479-1

sentry-trace

sentry-environment=production,sentry-release=255428955442523ac989e8ace66892cc5d5bf8d9,sentry-public_key=3061503aa01aef7ebb137e2a9d452727,sentry-trace_id=fcbcb4f8cc25ee52ef8f35bf5909d497,sentry-org_id=1313095,sentry-transaction=GET%20%2Ftemplates%2Fapps,sentry-sampled=true,sentry-sample_rand=0.033833340132241596,sentry-sample_rate=1

baggage

script-src 'report-sample' 'nonce-BaUR3DGV6xeh2sH-b3bL5A' 'unsafe-inline' 'strict-dynamic' https: http: 'unsafe-eval';object-src 'none';base-uri 'self';report-uri https://csp.withgoogle.com/csp/identity-sign-in-google-http, require-trusted-types-for 'script';report-uri https://csp.withgoogle.com/csp/identity-sign-in-google-http

Cloudflare, Inc.

TRICKLE-APP.COM

Abuse

Google LLC

GOOGLE


							window.dataLayer = window.dataLayer || [];
							function gtag(){dataLayer.push(arguments);}
							gtag('js', new Date());
							gtag('config', 'G-5Q6H9FT0R3');
              gtag('config', 'AW-17543851592');
						

document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))

Browse AI-powered app and site templates on Trickle. Discover ready-to-use project layouts built for vibe coding and customize them instantly with Magic Canvas.

Apps & Sites Templates | Trickle

Home

Templates

Apps & Sites

(self.__next_s=self.__next_s||[]).push([0,{"type":"application/ld+json","children":"{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"CollectionPage\",\"@id\":\"https://trickle.so/templates/apps\",\"url\":\"https://trickle.so/templates/apps\",\"name\":\"Apps & Sites Templates | Trickle\",\"description\":\"Browse AI-powered app and site templates on Trickle. Discover ready-to-use project layouts built for vibe coding and customize them instantly with Magic Canvas.\",\"isPartOf\":{\"@id\":\"https://trickle.so/#website\"},\"about\":{\"@id\":\"https://trickle.so/#organization\"},\"publisher\":{\"@id\":\"https://trickle.so/#organization\"}},{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://trickle.so/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Templates\",\"item\":\"https://trickle.so/templates\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Apps & Sites\"}]}]}","id":"trickle-schema"}])

(self.__next_f=self.__next_f||[]).push([0])

self.__next_f.push([1,"1:\"$Sreact.fragment\"\n3:I[35462,[],\"\"]\n4:I[86828,[],\"\"]\n6:I[48126,[],\"OutletBoundary\"]\n9:I[58766,[],\"AsyncMetadataOutlet\"]\nb:I[48126,[],\"ViewportBoundary\"]\nd:I[48126,[],\"MetadataBoundary\"]\nf:I[43100,[\"34219\",\"static/chunks/app/global-error-b9ee186a573a1cb5.js\"],\"default\"]\n10:\"$Sreact.suspense\"\n11:I[58766,[],\"AsyncMetadata\"]\n13:I[42837,[\"43786\",\"static/chunks/1b3e99d6-19cc25bb70c3ce98.js\",\"24995\",\"static/chunks/e5ef1592-7e526ac1b781acfb.js\",\"54995\",\"static/chunks/54995-b29e4ccefe07e4a6.js\",\"11435\",\"static/chunks/11435-843a00880cb79c2c.js\",\"84691\",\"static/chunks/84691-f4c1e81be2f62214.js\",\"70995\",\"static/chunks/70995-4b4f710ab76cd3c6.js\",\"91230\",\"static/chunks/91230-79b6650ff5be12f0.js\",\"20775\",\"static/chunks/20775-4639f232b0383a4d.js\",\"68282\",\"static/chunks/68282-3bc29e15fa24b971.js\",\"7177\",\"static/chunks/app/layout-53ce6c0672b5d462.js\"],\"default\"]\n:HL[\"/_next/static/media/4cf2300e9c8272f7-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/93f479601ee12b01-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/9644be92924a3d45.css\",\"style\"]\n:HL[\"/_next/static/css/16affb9dcb74d2c8.css\",\"style\"]\n:HL[\"/_next/static/css/de70bee13400563f.css\",\"style\"]\n:HL[\"/_next/static/css/b8f4d1889cdf21eb.css\",\"style\"]\n:HL[\"/_next/static/css/3ff764f2e98cef16.css\",\"style\"]\n:HL[\"/_next/static/media/11dedeb847bfe47e-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/34b8cd6f73814ef9-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/676bdb24eaf5c1a0-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/70ef1bced3f02718-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/7bd105f9beb92580-s.p.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/770f056f26f8492e.css\",\"style\"]\n0:{\"P\":null,\"b\":\"TFgJ2Zf385xlWyMXzi5t-\",\"p\":\"\",\"c\":[\"\",\"templates\",\"apps\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"templates\",{\"children\":[\"apps\",{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/9644be92924a3d45.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/16affb9dcb74d2c8.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"2\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/de70bee13400563f.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"3\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/b8f4d1889cdf21eb.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"4\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/3ff764f2e98cef16.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"$L2\"]}],{\"children\":[\"templates\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"apps\",[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[\"__PAGE__\",[\"$\",\"$1\",\"c\",{\"children\":[\"$L5\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/770f056f26f8492e.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"$L6\",null,{\"children\":[\"$L7\",\"$L8\",[\"$\",\"$L9\",null,{\"promise\":\"$@a\"}]]}]]}],{},null,false]},null,false]},null,false]},null,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$1\",\"IbiGE7QcGk5t9tfNKih1Lv\",{\"children\":[[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"meta\",null,{\"name\":\""])

self.__next_f.push([1,"next-size-adjust\",\"content\":\"\"}]]}],[\"$\",\"$Ld\",null,{\"children\":\"$Le\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[]],\"s\":false,\"S\":false}\ne:[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$10\",null,{\"fallback\":null,\"children\":[\"$\",\"$L11\",null,{\"promise\":\"$@12\"}]}]}]\n8:null\n2:[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"\",\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"script\",null,{\"src\":\"https://accounts.google.com/gsi/client\",\"async\":true,\"defer\":true}],[\"$\",\"script\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-5Q6H9FT0R3\",\"async\":true,\"defer\":true}],[\"$\",\"script\",null,{\"id\":\"google-analytics\",\"dangerouslySetInnerHTML\":{\"__html\":\"\\n\\t\\t\\t\\t\\t\\t\\twindow.dataLayer = window.dataLayer || [];\\n\\t\\t\\t\\t\\t\\t\\tfunction gtag(){dataLayer.push(arguments);}\\n\\t\\t\\t\\t\\t\\t\\tgtag('js', new Date());\\n\\t\\t\\t\\t\\t\\t\\tgtag('config', 'G-5Q6H9FT0R3');\\n              gtag('config', 'AW-17543851592');\\n\\t\\t\\t\\t\\t\\t\"}}],false]}],[\"$\",\"body\",null,{\"className\":\"__variable_188709 __variable_9a8899 antialiased bg-white dark:bg-black\",\"children\":[\"$\",\"$L13\",null,{\"children\":[\"$\",\"$L3\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L4\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}]\nc:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n7:null\na:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"Apps \u0026 Sites | Trickle templates\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"From websites to internal tools—templates that fit any idea.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"canonical\",\"href\":\"https://trickle.so/templates/apps\"}],[\"$\",\"meta\",\"3\",{\"property\":\"og:title\",\"content\":\"Apps \u0026 Sites | Trickle templates\"}],[\"$\",\"meta\",\"4\",{\"property\":\"og:description\",\"content\":\"From websites to internal tools—templates that fit any idea.\"}],[\"$\",\"meta\",\"5\",{\"property\":\"og:url\",\"content\":\"https://trickle.so/templates/apps\"}],[\"$\",\"meta\",\"6\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"7\",{\"name\":\"twitter:title\",\"content\":\"Apps \u0026 Sites | Trickle templates\"}],[\"$\",\"meta\",\"8\",{\"name\":\"twitter:description\",\"content\":\"From websites to internal tools—templates that fit any idea.\"}],[\"$\",\"link\",\"9\",{\"rel\":\"icon\",\"href\":\"/favicon.png\",\"type\":\"image/x-icon\",\"sizes\":\"48x48\"}]],\"error\":null,\"digest\":\"$undefined\"}\n12:{\"metadata\":\"$a:metadata\",\"error\":null,\"digest\":\"$undefined\"}\n5:[\"$L14\",\"$L15\"]\n16:I[83999,[\"84598\",\"static/chunks/12f8fac4-6225fd0c4d9ce985.js\",\"99209\",\"static/chunks/c717b9ed-6570769a7b8ea267.js\",\"54995\",\"static/chunks/54995-b29e4ccefe07e4a6.js\",\"10355\",\"static/chunks/10355-9eec53340801bde2.js\",\"11435\",\"static/chunks/11435-843a00880cb79c2c.js\",\"66898\",\"static/chunks/66898-6bcf1c2293e1eeba.js\",\"84691\",\"static/chunks/84691-f4c1e81be2f62214.js\",\"33743\",\"static/chunks/33743-8f293e5ed6dc9635.js\",\"23832\",\"static/chunks/23832-a70ae7c9"])

self.__next_f.push([1,"a4456ee2.js\",\"48741\",\"static/chunks/48741-df083f3e344fef90.js\",\"70995\",\"static/chunks/70995-4b4f710ab76cd3c6.js\",\"36999\",\"static/chunks/36999-7271a55d4f4d4c0b.js\",\"42314\",\"static/chunks/42314-e06ebc57cdb2d284.js\",\"20775\",\"static/chunks/20775-4639f232b0383a4d.js\",\"68282\",\"static/chunks/68282-3bc29e15fa24b971.js\",\"27133\",\"static/chunks/27133-9316660278f52fad.js\",\"77795\",\"static/chunks/77795-a56282920d4fa14d.js\",\"78658\",\"static/chunks/78658-0c17ea5155fba203.js\",\"69211\",\"static/chunks/app/templates/apps/page-9a8a3f56f1369665.js\"],\"default\"]\n18:I[35401,[\"84598\",\"static/chunks/12f8fac4-6225fd0c4d9ce985.js\",\"99209\",\"static/chunks/c717b9ed-6570769a7b8ea267.js\",\"54995\",\"static/chunks/54995-b29e4ccefe07e4a6.js\",\"10355\",\"static/chunks/10355-9eec53340801bde2.js\",\"11435\",\"static/chunks/11435-843a00880cb79c2c.js\",\"66898\",\"static/chunks/66898-6bcf1c2293e1eeba.js\",\"84691\",\"static/chunks/84691-f4c1e81be2f62214.js\",\"33743\",\"static/chunks/33743-8f293e5ed6dc9635.js\",\"23832\",\"static/chunks/23832-a70ae7c9a4456ee2.js\",\"48741\",\"static/chunks/48741-df083f3e344fef90.js\",\"70995\",\"static/chunks/70995-4b4f710ab76cd3c6.js\",\"36999\",\"static/chunks/36999-7271a55d4f4d4c0b.js\",\"42314\",\"static/chunks/42314-e06ebc57cdb2d284.js\",\"20775\",\"static/chunks/20775-4639f232b0383a4d.js\",\"68282\",\"static/chunks/68282-3bc29e15fa24b971.js\",\"27133\",\"static/chunks/27133-9316660278f52fad.js\",\"77795\",\"static/chunks/77795-a56282920d4fa14d.js\",\"78658\",\"static/chunks/78658-0c17ea5155fba203.js\",\"69211\",\"static/chunks/app/templates/apps/page-9a8a3f56f1369665.js\"],\"TemplatesHeaderMiddle\"]\n19:I[66671,[\"84598\",\"static/chunks/12f8fac4-6225fd0c4d9ce985.js\",\"99209\",\"static/chunks/c717b9ed-6570769a7b8ea267.js\",\"54995\",\"static/chunks/54995-b29e4ccefe07e4a6.js\",\"10355\",\"static/chunks/10355-9eec53340801bde2.js\",\"11435\",\"static/chunks/11435-843a00880cb79c2c.js\",\"66898\",\"static/chunks/66898-6bcf1c2293e1eeba.js\",\"84691\",\"static/chunks/84691-f4c1e81be2f62214.js\",\"33743\",\"static/chunks/33743-8f293e5ed6dc9635.js\",\"23832\",\"static/chunks/23832-a70ae7c9a4456ee2.js\",\"48741\",\"static/chunks/48741-df083f3e344fef90.js\",\"70995\",\"static/chunks/70995-4b4f710ab76cd3c6.js\",\"36999\",\"static/chunks/36999-7271a55d4f4d4c0b.js\",\"42314\",\"static/chunks/42314-e06ebc57cdb2d284.js\",\"20775\",\"static/chunks/20775-4639f232b0383a4d.js\",\"68282\",\"static/chunks/68282-3bc29e15fa24b971.js\",\"27133\",\"static/chunks/27133-9316660278f52fad.js\",\"77795\",\"static/chunks/77795-a56282920d4fa14d.js\",\"78658\",\"static/chunks/78658-0c17ea5155fba203.js\",\"69211\",\"static/chunks/app/templates/apps/page-9a8a3f56f1369665.js\"],\"default\"]\nba:I[67130,[\"84598\",\"static/chunks/12f8fac4-6225fd0c4d9ce985.js\",\"99209\",\"static/chunks/c717b9ed-6570769a7b8ea267.js\",\"54995\",\"static/chunks/54995-b29e4ccefe07e4a6.js\",\"10355\",\"static/chunks/10355-9eec53340801bde2.js\",\"11435\",\"static/chunks/11435-843a00880cb79c2c.js\",\"66898\",\"static/chunks/66898-6bcf1c2293e1eeba.js\",\"84691\",\"static/chunks/84691-f4c1e81be2f62214.js\",\"33743\",\"static/chunks/33743-8f293e5ed6dc9635.js\",\"23832\",\"static/chunks/23832-a70ae7c9a4456ee2.js\",\"48741\",\"static/chunks/48741-df083f3e344fef90.js\",\"70995\",\"static/chunks/70995-4b4f710ab76cd3c6.js\",\"36999\",\"static/chunks/36999-7271a55d4f4d4c0b.js\",\"42314\",\"static/chunks/42314-e06ebc57cdb2d284.js\",\"20775\",\"static/chunks/20775-4639f232b0383a4d.js\",\"68282\",\"static/chunks/68282-3bc29e15fa24b971.js\",\"27133\",\"static/chunks/27133-9316660278f52fad.js\",\"77795\",\"static/chunks/77795-a56282920d4fa14d.js\",\"78658\",\"static/chunks/78658-0c17ea5155fba203.js\",\"69211\",\"static/chunks/app/templates/apps/page-9a8a3f56f1369665.js\"],\"default\"]\nbb:I[93370,[\"84598\",\"static/chunks/12f8fac4-6225fd0c4d9ce985.js\",\"99209\",\"static/chunks/c717b9ed-6570769a7b8ea267.js\",\"54995\",\"static/chunks/54995-b29e4ccefe07e4a6.js\",\"10355\",\"static/chunks/10355-9eec53340801bde2.js\",\"11435\",\"static/chunks/11435-843a00880cb79c2c.js\",\"66898\",\"static/chunks/66898-6bcf1c2293e1eeba.js\",\"84691\",\"static/chunks/84691-f4c1e81be2f62214.js\",\"33743\",\"static/chunks/33743-8f293e5ed6dc9635.js\",\"23832\",\"static/chunks/23832-a70ae7c9a4456ee2.js\",\"48741\",\"static/chunks/48741-df083f3e344fef90.js\",\"70995\",\"static/chunks/7099"])

self.__next_f.push([1,"5-4b4f710ab76cd3c6.js\",\"36999\",\"static/chunks/36999-7271a55d4f4d4c0b.js\",\"42314\",\"static/chunks/42314-e06ebc57cdb2d284.js\",\"20775\",\"static/chunks/20775-4639f232b0383a4d.js\",\"68282\",\"static/chunks/68282-3bc29e15fa24b971.js\",\"27133\",\"static/chunks/27133-9316660278f52fad.js\",\"77795\",\"static/chunks/77795-a56282920d4fa14d.js\",\"78658\",\"static/chunks/78658-0c17ea5155fba203.js\",\"69211\",\"static/chunks/app/templates/apps/page-9a8a3f56f1369665.js\"],\"\"]\n1a:T8bc,{\n  \"longText\": {\n    \"Overview\": \"### Bring Products to Life in 3D with Trickle AI  \\nThe 3D Product Showcase Template by Trickle AI enables you to present products through dynamic, interactive 3D visuals. Whether you're launching a new gadget, a luxury accessory, or any high-impact product, this template gives you a canvas to let users explore every angle. It blends immersive visuals with clear calls-to-action and supports mobile responsiveness, helping convert interest into sales.\\n\\n### Key Features  \\n- Interactive 3D model embedding with rotation and zoom  \\n- Clean, minimal UI to let the product take center stage  \\n- Call-to-action buttons for purchase or learn more  \\n- Smooth transitions and animations powered by Trickle  \\n- Fully responsive and optimized for performance  \\n\\n### Use Cases  \\n- Tech and gadget product pages needing visual depth  \\n- Luxury accessories or jewelry with intricate detail  \\n- Furniture or home goods where form matters  \\n- Demonstrating features in high-end electronics  \\n- Brand storytelling around flagship product launches  \\\",\",\n    \"Tips\": \"Since this is a visually immersive template, prioritize high-quality 3D assets and minimal interface elements. Let the visuals speak, but guide users with clear CTAs.\\n\\n- Use clean, well-lit 3D renders or scans for best results  \\n- Keep controls intuitive (rotate, zoom, reset)  \\n- Offer a fallback 2D view for devices with limited support  \\n- Pair 3D view with concise product highlights or features  \\n- Monitor performance on mobile and low-end devices  \\n\\n### Who Is It For?  \\n- Tech startups launching flagship hardware  \\n- Premium brands showcasing luxury goods  \\n- Designers of high-detail or precision products  \\n- E-commerce stores selling high-ticket items  \\n- Product marketing teams needing immersive demos\"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Apple Vision Pro | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Showcase your products in immersive 3D with Trickle AI’s 3D Product Showcase Template. Perfect for tech, gadgets, and high-end merchandise that deserves interactive visual presentation.\"\n  },\n  \"features\": [\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Interactive elements\",\n    \"Custom knowledge\"\n  ]\n}1b:T40b,### Bring Products to Life in 3D with Trickle AI  \nThe 3D Product Showcase Template by Trickle AI enables you to present products through dynamic, interactive 3D visuals. Whether you're launching a new gadget, a luxury accessory, or any high-impact product, this template gives you a canvas to let users explore every angle. It blends immersive visuals with clear calls-to-action and supports mobile responsiveness, helping convert interest into sales.\n\n### Key Features  \n- Interactive 3D model embedding with rotation and zoom  \n- Clean, minimal UI to let the product take center stage  \n- Call-to-action buttons for purchase or learn more  \n- Smooth transitions and animations powered by Trickle  \n- Fully responsive and optimized for performance  \n\n### Use Cases  \n- Tech and gadget product pages needing visual depth  \n- Luxury accessories or jewelry with intricate detail  \n- Furniture or home goods where form matters  \n- Demonstrating features in high-end electronics  \n- Brand storytelling around flagship product launches  \",1c:T927,{\n  \"longText\": {\n    \"Overview\": \"### Elevate Your Artist Profile with Style and Narrative  \\nThe Trainee Profile Template from Trickle AI blends visual storytelling and structured presentation, letting you communicate your artistic identity with clarity. Whether you're a performer, trainee, or creative professional, this template helps you combine car"])

self.__next_f.push([1,"eer milestones, media, and personal vision into a cohesive, modern profile page that resonates with fans and industry viewers alike.\\n\\n### Key Features  \\n- Hero banner with name, role, and spotlight visuals  \\n- Training timeline to illustrate growth and milestones  \\n- Visual gallery for performance photos or media  \\n- Bio section for background, vision, and personality  \\n- Contact or inquiry form for auditions or collaborations  \\n\\n### Use Cases  \\n- Artist portfolio for trainees, performers, and musicians  \\n- Landing page for audition or casting submissions  \\n- Personal branding site for creatives in entertainment  \\n- Showcase for media kits or press-related pages  \\n- Profile site for talent agencies and entertainment platforms\",\n    \"Tips\": \"To make this profile truly shine, focus on blending your visual identity with narrative elements. Use high-quality imagery, timeline clarity, and thoughtful storytelling to craft a page that feels both personal and professional.\\n\\n- Select standout visuals that reflect your style  \\n- Keep your training timeline concise and meaningful  \\n- Write your biography in your authentic tone  \\n- Include contact or inquiry forms with minimal fields  \\n- Update as you grow — new milestones deserve new space  \\n\\n### Who Is It For?  \\n- K‑pop, idol, or trainee artists wanting a digital profile  \\n- Singers, dancers, or entertainers building a brand  \\n- Multimedia artists needing a polished public page  \\n- Talent agencies managing artist showcases  \\n- Creators or influencers in performance arts  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Kpop Trainee Bio | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Present a polished trainee/artist profile with Trickle AI’s Template — highlight journey, skills, visuals, and contact in a stylish, professional layout to engage fans and collaborators.\"\n  },\n  \"features\": [\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"AI image \u0026 video generation\",\n    \"Interactive elements\"\n  ]\n}1d:T41e,### Elevate Your Artist Profile with Style and Narrative  \nThe Trainee Profile Template from Trickle AI blends visual storytelling and structured presentation, letting you communicate your artistic identity with clarity. Whether you're a performer, trainee, or creative professional, this template helps you combine career milestones, media, and personal vision into a cohesive, modern profile page that resonates with fans and industry viewers alike.\n\n### Key Features  \n- Hero banner with name, role, and spotlight visuals  \n- Training timeline to illustrate growth and milestones  \n- Visual gallery for performance photos or media  \n- Bio section for background, vision, and personality  \n- Contact or inquiry form for auditions or collaborations  \n\n### Use Cases  \n- Artist portfolio for trainees, performers, and musicians  \n- Landing page for audition or casting submissions  \n- Personal branding site for creatives in entertainment  \n- Showcase for media kits or press-related pages  \n- Profile site for talent agencies and entertainment platforms1e:T914,{\n  \"longText\": {\n    \"Overview\": \"### Playful AI-Powered Bunny Avatar Maker\\nThe Bunny Avatar Generator template, powered by Trickle AI, is your go-to tool for creating personalized bunny characters. With an intuitive interface, users can mix and match backgrounds, headphones, glasses, and bunny styles to craft unique avatars without needing any design experience. Whether you’re looking for a fun profile picture or a custom mascot for a project, this Trickle template makes avatar creation a breeze.\\n\\n### Key Features\\n- Easy-to-use avatar customization without sign-up\\n- Multiple background, accessory, and skin options\\n- Instant download or random avatar generation\\n- Powered by Trickle AI for smooth performance\\n- Fun, playful interface that’s engaging and creative\\n\\n### Use Cases\\n- Personal profile pictures for social media or chats\\n- Community or forum avatar creation\\n- Virtual event or campaign mascot design\\n- Fun branding for pet-related businesses or blogs\\n- Digital gifts or shareable images for friends\""])

self.__next_f.push([1,",\n    \"Tips\": \"The Bunny Avatar Generator is all about having fun and expressing creativity. Experiment with different combinations, try random mode for surprises, and don’t forget to download your favorite designs. Since it’s powered by Trickle, you can expect a smooth, fast experience every time.\\n- Play around with random generation for surprise combos\\n- Use high-contrast backgrounds to make accessories pop\\n- Save multiple versions for different moods or platforms\\n- Mix styles to reflect your personality\\n- Share your creations to spark engagement in communities\\n\\n### Who Is It For?\\n- Social media users looking for cute, custom avatars\\n- Community managers creating mascot images\\n- Designers seeking playful assets for pet or animal themes\\n- Kids or teens wanting to create fun online icons\\n- Anyone who enjoys quirky, creative digital tools powered by Trickle\"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Bunny Avatar Generator | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Create your own unique bunny avatars with Bunny Avatar Generator, built by Trickle. Customize features like skin tone, headphones, and glasses for a fun and personalized experience.\"\n  },\n  \"features\": [\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Database storage\",\n    \"Custom knowledge\"\n  ]\n}1f:T729,\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n\u003cmeta charset=\"UTF-8\"\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\u003ctitle\u003eAuraOS Web Experience\u003c/title\u003e\n\u003cmeta name=\"description\" content=\"AuraOS - A complete web-based operating system simulation\"\u003e\n\u003cmeta name=\"keywords\" content=\"web os, operating system, browser os, auraos\"\u003e\n\n\u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/react@18/umd/react.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/react-dom@18/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/@babel/standalone/babel.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css\"\u003e\n\u003clink href=\"https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;600\u0026display=swap\" rel=\"stylesheet\"\u003e\n\u003clink href=\"styles.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv id=\"root\"\u003e\u003c/div\u003e\n\u003cscript type=\"text/babel\" src=\"components/NotepadApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/TerminalApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/FileExplorerApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/CalculatorApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/BrowserApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/SnakeGameApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/PaintApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/CodeEditorApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/VideoEditorApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/MusicPlayerApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"components/SettingsApp.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/babel\" src=\"app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e20:T32a8,const { useState, useEffect, useRef } = React;\n\nfunction App() {\n  const [booting, setBooting] = useState(true);\n  const [startMenuOpen, setStartMenuOpen] = useState(false);\n  const [windows, setWindows] = useState([]);\n  const [time, setTime] = useState(new Date());\n  const [showBSOD, setShowBSOD] = useState(false);\n  const [draggedWindow, setDraggedWindow] = useState(null);\n  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });\n  const [resizingWindow, setResizingWindow] = useState(null);\n  const [resizeDirection, setResizeDirection] = useState(null);\n  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 0, height: 0 });\n\n  useEffect(() =\u003e {\n    const bootTimer = setTimeout(() =\u003e setBooting(false), 3000);\n    const clockTimer = setInterval(() =\u003e setTime(new Date()), 1000);\n    return () =\u003e {\n      clearTimeout(bootTimer);\n      clearInterval(clockTimer);\n    };\n  }, []);\n\n  const apps = [\n    { id: 'file-explorer', titl"])

self.__next_f.push([1,"e: 'File Explorer', icon: 'fa-folder-open', color: '#ffd66b' },\n    { id: 'notepad', title: 'Notepad', icon: 'fa-file-lines', color: '#4cc2ff' },\n    { id: 'terminal', title: 'Terminal', icon: 'fa-terminal', color: '#fff' },\n    { id: 'edge', title: 'Browser', icon: 'fa-edge fa-brands', color: '#00ca7d' },\n    { id: 'calculator', title: 'Calculator', icon: 'fa-calculator', color: '#fff' },\n    { id: 'game', title: 'Cyber Snake', icon: 'fa-gamepad', color: '#adff2f' },\n    { id: 'paint', title: 'Paint', icon: 'fa-palette', color: '#e05194' },\n    { id: 'vscode', title: 'Code Editor', icon: 'fa-code', color: '#0078d4' },\n    { id: 'video', title: 'Video Editor', icon: 'fa-film', color: '#9b59b6' },\n    { id: 'music', title: 'Music Player', icon: 'fa-music', color: '#ff6b6b' },\n    { id: 'settings', title: 'Settings', icon: 'fa-gear', color: '#95a5a6' }\n  ];\n\n  const openApp = (appId) =\u003e {\n    const app = apps.find(a =\u003e a.id === appId);\n    if (!app) return;\n    \n    const offset = windows.length * 30;\n    const maxOffset = 200;\n    const actualOffset = offset % maxOffset;\n    \n    const maxZ = windows.length \u003e 0 ? Math.max(...windows.map(w =\u003e w.zIndex || 100)) : 100;\n    \n    const newWindow = {\n      id: `win-${Date.now()}`,\n      appId: app.id,\n      title: app.title,\n      icon: app.icon,\n      color: app.color,\n      x: 100 + actualOffset,\n      y: 50 + actualOffset,\n      width: 800,\n      height: 500,\n      minimized: false,\n      maximized: false,\n      zIndex: maxZ + 1\n    };\n    \n    setWindows([...windows, newWindow]);\n    setStartMenuOpen(false);\n  };\n\n  const closeWindow = (id) =\u003e {\n    setWindows(windows.filter(w =\u003e w.id !== id));\n  };\n\n  const minimizeWindow = (id) =\u003e {\n    setWindows(windows.map(w =\u003e w.id === id ? {...w, minimized: true} : w));\n  };\n\n  const restoreWindow = (id) =\u003e {\n    setWindows(windows.map(w =\u003e w.id === id ? {...w, minimized: false} : w));\n  };\n\n  const toggleMaximize = (id) =\u003e {\n    setWindows(windows.map(w =\u003e w.id === id ? {...w, maximized: !w.maximized} : w));\n  };\n\n  const bringToFront = (id) =\u003e {\n    const maxZ = Math.max(...windows.map(w =\u003e w.zIndex || 100), 100);\n    setWindows(windows.map(w =\u003e w.id === id ? {...w, zIndex: maxZ + 1} : w));\n  };\n\n  const handleMouseDown = (e, id) =\u003e {\n    if (e.target.closest('.window-controls')) return;\n    if (e.target.closest('.resize-handle')) return;\n    const win = windows.find(w =\u003e w.id === id);\n    if (!win || win.maximized) return;\n    \n    const rect = e.currentTarget.getBoundingClientRect();\n    setDragOffset({\n      x: e.clientX - rect.left,\n      y: e.clientY - rect.top\n    });\n    setDraggedWindow(id);\n    bringToFront(id);\n  };\n\n  const handleResizeStart = (e, id, direction) =\u003e {\n    e.stopPropagation();\n    const win = windows.find(w =\u003e w.id === id);\n    if (!win || win.maximized) return;\n    \n    setResizingWindow(id);\n    setResizeDirection(direction);\n    setResizeStart({\n      x: e.clientX,\n      y: e.clientY,\n      width: win.width,\n      height: win.height,\n      winX: win.x,\n      winY: win.y\n    });\n    bringToFront(id);\n  };\n\n  useEffect(() =\u003e {\n    const handleMouseMove = (e) =\u003e {\n      if (draggedWindow) {\n        const win = windows.find(w =\u003e w.id === draggedWindow);\n        if (!win) return;\n\n        setWindows(windows.map(w =\u003e {\n          if (w.id === draggedWindow) {\n            return {\n              ...w,\n              x: e.clientX - dragOffset.x,\n              y: Math.max(0, e.clientY - dragOffset.y)\n            };\n          }\n          return w;\n        }));\n      }\n\n      if (resizingWindow) {\n        const deltaX = e.clientX - resizeStart.x;\n        const deltaY = e.clientY - resizeStart.y;\n\n        setWindows(windows.map(w =\u003e {\n          if (w.id === resizingWindow) {\n            let newWidth = w.width;\n            let newHeight = w.height;\n            let newX = w.x;\n            let newY = w.y;\n\n            if (resizeDirection.includes('e')) {\n              newWidth = Math.max(300, resizeStart.width + deltaX);\n            }\n            if (resizeDirection.includes('s')) {\n              newHeight = Math.max(200"])

self.__next_f.push([1,", resizeStart.height + deltaY);\n            }\n            if (resizeDirection.includes('w')) {\n              const newW = Math.max(300, resizeStart.width - deltaX);\n              if (newW \u003e 300) {\n                newX = resizeStart.winX + deltaX;\n                newWidth = newW;\n              }\n            }\n            if (resizeDirection.includes('n')) {\n              const newH = Math.max(200, resizeStart.height - deltaY);\n              if (newH \u003e 200) {\n                newY = Math.max(0, resizeStart.winY + deltaY);\n                newHeight = newH;\n              }\n            }\n\n            return { ...w, width: newWidth, height: newHeight, x: newX, y: newY };\n          }\n          return w;\n        }));\n      }\n    };\n\n    const handleMouseUp = () =\u003e {\n      setDraggedWindow(null);\n      setResizingWindow(null);\n      setResizeDirection(null);\n    };\n\n    if (draggedWindow || resizingWindow) {\n      document.addEventListener('mousemove', handleMouseMove);\n      document.addEventListener('mouseup', handleMouseUp);\n    }\n\n    return () =\u003e {\n      document.removeEventListener('mousemove', handleMouseMove);\n      document.removeEventListener('mouseup', handleMouseUp);\n    };\n  }, [draggedWindow, resizingWindow, dragOffset, resizeDirection, resizeStart, windows]);\n\n  if (booting) {\n    return (\n      \u003cdiv id=\"boot-screen\"\u003e\n        \u003ci className=\"fa-brands fa-windows\" style={{fontSize: '64px', marginBottom: '40px', color: '#00a2ed'}}\u003e\u003c/i\u003e\n        \u003cdiv className=\"spinner\"\u003e\u003c/div\u003e\n        \u003cdiv\u003eStarting AuraOS...\u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  if (showBSOD) {\n    return (\n      \u003cdiv id=\"bsod\" style={{display: 'flex'}}\u003e\n        \u003ch1\u003e:(\u003c/h1\u003e\n        \u003cp\u003eYour PC ran into a problem and needs to restart. We're just collecting some error info, and then we'll restart for you.\u003c/p\u003e\n        \u003cp style={{fontSize: '16px', marginTop: '30px'}}\u003eStop Code: CRITICAL_PROCESS_DIED\u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n\n  return (\n    \u003cdiv id=\"desktop\"\u003e\n      \u003cdiv id=\"desktop-icons\"\u003e\n        {apps.map(app =\u003e (\n          \u003cdiv key={app.id} className=\"d-icon\" data-app={app.id} onDoubleClick={() =\u003e openApp(app.id)}\u003e\n            \u003ci className={`fa-solid ${app.icon}`} style={{color: app.color}}\u003e\u003c/i\u003e\n            \u003cspan\u003e{app.title}\u003c/span\u003e\n          \u003c/div\u003e\n        ))}\n      \u003c/div\u003e\n\n      {windows.map(win =\u003e !win.minimized \u0026\u0026 (\n        \u003cdiv key={win.id} \n             className={`window ${win.maximized ? 'maximized' : ''}`} \n             style={win.maximized ? {zIndex: win.zIndex || 100} : {\n               left: win.x, \n               top: win.y, \n               width: win.width, \n               height: win.height,\n               zIndex: win.zIndex || 100\n             }}\n             onClick={() =\u003e bringToFront(win.id)}\u003e\n          \u003cdiv className=\"title-bar\" onMouseDown={(e) =\u003e handleMouseDown(e, win.id)}\u003e\n            \u003cdiv className=\"title-bar-text\"\u003e\n              \u003ci className={`fa-solid ${win.icon}`} style={{color: win.color}}\u003e\u003c/i\u003e {win.title}\n            \u003c/div\u003e\n            \u003cdiv className=\"window-controls\"\u003e\n              \u003cdiv className=\"win-btn\" onClick={(e) =\u003e { e.stopPropagation(); minimizeWindow(win.id); }}\u003e\n                \u003ci className=\"fa-solid fa-minus\"\u003e\u003c/i\u003e\n              \u003c/div\u003e\n              \u003cdiv className=\"win-btn\" onClick={(e) =\u003e { e.stopPropagation(); toggleMaximize(win.id); }}\u003e\n                \u003ci className=\"fa-regular fa-square\"\u003e\u003c/i\u003e\n              \u003c/div\u003e\n              \u003cdiv className=\"win-btn close\" onClick={(e) =\u003e { e.stopPropagation(); closeWindow(win.id); }}\u003e\n                \u003ci className=\"fa-solid fa-xmark\"\u003e\u003c/i\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n          \u003cdiv className=\"window-content\"\u003e\n            {win.appId === 'notepad' \u0026\u0026 \u003cNotepadApp /\u003e}\n            {win.appId === 'terminal' \u0026\u0026 \u003cTerminalApp /\u003e}\n            {win.appId === 'file-explorer' \u0026\u0026 \u003cFileExplorerApp /\u003e}\n            {win.appId === 'calculator' \u0026\u0026 \u003cCalculatorApp /\u003e}\n            {win.appId === 'edge' \u0026\u0026 \u003cBrowserApp /\u003e}\n            {win.appId === 'game' \u0026\u0026 \u003cSnakeGameApp /\u003e}\n            {win.appId === 'paint' \u0026\u0026 \u003cPaintApp /\u003e}\n            {win.appId === 'vscode' \u0026\u0026 \u003cCodeEditorAp"])

self.__next_f.push([1,"p /\u003e}\n            {win.appId === 'video' \u0026\u0026 \u003cVideoEditorApp /\u003e}\n            {win.appId === 'music' \u0026\u0026 \u003cMusicPlayerApp /\u003e}\n            {win.appId === 'settings' \u0026\u0026 \u003cSettingsApp /\u003e}\n          \u003c/div\u003e\n          {!win.maximized \u0026\u0026 (\n            \u003c\u003e\n              \u003cdiv className=\"resize-handle resize-n\" onMouseDown={(e) =\u003e handleResizeStart(e, win.id, 'n')}\u003e\u003c/div\u003e\n              \u003cdiv className=\"resize-handle resize-s\" onMouseDown={(e) =\u003e handleResizeStart(e, win.id, 's')}\u003e\u003c/div\u003e\n              \u003cdiv className=\"resize-handle resize-e\" onMouseDown={(e) =\u003e handleResizeStart(e, win.id, 'e')}\u003e\u003c/div\u003e\n              \u003cdiv className=\"resize-handle resize-w\" onMouseDown={(e) =\u003e handleResizeStart(e, win.id, 'w')}\u003e\u003c/div\u003e\n              \u003cdiv className=\"resize-handle resize-ne\" onMouseDown={(e) =\u003e handleResizeStart(e, win.id, 'ne')}\u003e\u003c/div\u003e\n              \u003cdiv className=\"resize-handle resize-nw\" onMouseDown={(e) =\u003e handleResizeStart(e, win.id, 'nw')}\u003e\u003c/div\u003e\n              \u003cdiv className=\"resize-handle resize-se\" onMouseDown={(e) =\u003e handleResizeStart(e, win.id, 'se')}\u003e\u003c/div\u003e\n              \u003cdiv className=\"resize-handle resize-sw\" onMouseDown={(e) =\u003e handleResizeStart(e, win.id, 'sw')}\u003e\u003c/div\u003e\n            \u003c/\u003e\n          )}\n        \u003c/div\u003e\n      ))}\n\n      \u003cdiv id=\"start-menu\" className={startMenuOpen ? 'open' : ''}\u003e\n        \u003cdiv className=\"search-bar\"\u003e\n          \u003ci className=\"fa-solid fa-magnifying-glass\"\u003e\u003c/i\u003e\n          \u003cinput type=\"text\" placeholder=\"Type here to search\" /\u003e\n        \u003c/div\u003e\n        \u003cdiv style={{fontWeight: 600, marginBottom: '10px', fontSize: '14px'}}\u003ePinned\u003c/div\u003e\n        \u003cdiv className=\"pinned-apps\"\u003e\n          {apps.map(app =\u003e (\n            \u003cdiv key={app.id} className=\"app-item\" onClick={() =\u003e openApp(app.id)}\u003e\n              \u003ci className={`fa-solid ${app.icon}`} style={{color: app.color}}\u003e\u003c/i\u003e\n              \u003cspan\u003e{app.title}\u003c/span\u003e\n            \u003c/div\u003e\n          ))}\n        \u003c/div\u003e\n        \u003cdiv style={{marginTop: 'auto', paddingTop: '15px', borderTop: '1px solid var(--border-color)', display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}\u003e\n          \u003cdiv style={{display: 'flex', alignItems: 'center', gap: '10px'}}\u003e\n            \u003cdiv style={{width: '32px', height: '32px', background: '#555', borderRadius: '50%', display: 'flex', justifyContent: 'center', alignItems: 'center', color: 'white'}}\u003e\n              \u003ci className=\"fa-solid fa-user\"\u003e\u003c/i\u003e\n            \u003c/div\u003e\n            \u003cspan style={{fontSize: '12px', fontWeight: 600}}\u003eUser\u003c/span\u003e\n          \u003c/div\u003e\n          \u003ci className=\"fa-solid fa-power-off\" style={{cursor: 'pointer', padding: '8px'}} onClick={() =\u003e setShowBSOD(true)}\u003e\u003c/i\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n      \u003cdiv id=\"taskbar\"\u003e\n        \u003cdiv style={{display: 'flex', gap: '5px'}}\u003e\u003c/div\u003e\n        \u003cdiv className=\"taskbar-center\"\u003e\n          \u003cdiv className=\"tb-icon\" id=\"start-btn\" onClick={() =\u003e setStartMenuOpen(!startMenuOpen)}\u003e\n            \u003ci className=\"fa-brands fa-windows\"\u003e\u003c/i\u003e\n          \u003c/div\u003e\n          {windows.map(win =\u003e (\n            \u003cdiv key={win.id} className={`tb-icon ${!win.minimized ? 'active' : ''}`} \n                 onClick={() =\u003e win.minimized ? restoreWindow(win.id) : minimizeWindow(win.id)}\u003e\n              \u003ci className={`fa-solid ${win.icon}`}\u003e\u003c/i\u003e\n            \u003c/div\u003e\n          ))}\n        \u003c/div\u003e\n        \u003cdiv className=\"taskbar-right\"\u003e\n          \u003ci className=\"fa-solid fa-wifi\"\u003e\u003c/i\u003e\n          \u003ci className=\"fa-solid fa-volume-high\"\u003e\u003c/i\u003e\n          \u003cdiv id=\"clock\"\u003e\n            \u003cdiv style={{fontWeight: 600}}\u003e{time.toLocaleTimeString('en-US', {hour: '2-digit', minute: '2-digit'})}\u003c/div\u003e\n            \u003cdiv\u003e{time.toLocaleDateString('en-US', {month: '2-digit', day: '2-digit', year: 'numeric'})}\u003c/div\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\u003cApp /\u003e);21:T2fa0,:root {\n    --bg-color: #f3f3f3;\n    --taskbar-bg: rgba(243, 243, 243, 0.85);\n    --window-bg: rgba(255, 255, 255, 0.9);\n    --acrylic-blur: blur(20px) saturate(125%);\n    --accent-color: #0078d4;\n    --text-color: #222;\n    --border-color: rgba(0, 0, 0, 0.1);\n    --bord"])

self.__next_f.push([1,"er-radius: 8px;\n    --shadow: 0 10px 30px rgba(0,0,0,0.15);\n    --Wallpaper: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80\u0026w=2564\u0026auto=format\u0026fit=crop');\n}\n\n@media (prefers-color-scheme: dark) {\n    :root {\n        --bg-color: #202020;\n        --taskbar-bg: rgba(32, 32, 32, 0.85);\n        --window-bg: rgba(40, 40, 40, 0.85);\n        --text-color: #eee;\n        --border-color: rgba(255, 255, 255, 0.1);\n        --shadow: 0 10px 30px rgba(0,0,0,0.5);\n    }\n}\n\n* { box-sizing: border-box; user-select: none; margin: 0; padding: 0; }\nbody, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: 'Segoe UI', sans-serif; color: var(--text-color); }\n#root { width: 100%; height: 100%; }\n\n#boot-screen {\n    position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n    background: #000; z-index: 99999; display: flex; flex-direction: column;\n    justify-content: center; align-items: center; color: white; transition: opacity 1s;\n}\n.spinner {\n    border: 4px solid rgba(255, 255, 255, 0.1); width: 50px; height: 50px;\n    border-radius: 50%; border-left-color: var(--accent-color);\n    animation: spin 1s linear infinite; margin-bottom: 20px;\n}\n@keyframes spin { 100% { transform: rotate(360deg); } }\n\n#desktop {\n    background-image: var(--Wallpaper);\n    background-size: cover; background-position: center;\n    width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; overflow: hidden;\n    transition: transform 0.1s ease-out;\n}\n\n#desktop-icons {\n    padding: 10px; display: flex; flex-direction: column; gap: 10px; flex-wrap: wrap; height: 90%; width: fit-content;\n}\n\n.d-icon {\n    width: 80px; text-align: center; padding: 10px 5px; border-radius: 4px;\n    cursor: pointer; color: white; text-shadow: 0 1px 4px rgba(0,0,0,0.8);\n    transition: background 0.2s; display: flex; flex-direction: column; align-items: center;\n}\n.d-icon:hover { background: rgba(255,255,255,0.1); }\n.d-icon.selected { background: rgba(255,255,255,0.2); border: 1px dotted rgba(255,255,255,0.5); }\n.d-icon i { font-size: 32px; margin-bottom: 5px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }\n.d-icon[data-app=\"file-explorer\"] i { color: #ffd66b; }\n.d-icon[data-app=\"edge\"] i { color: #00ca7d; }\n.d-icon span { font-size: 12px; word-break: break-word; }\n\n#taskbar {\n    position: absolute; bottom: 0; left: 0; width: 100%; height: 48px;\n    background: var(--taskbar-bg); backdrop-filter: var(--acrylic-blur);\n    border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center;\n    padding: 0 15px; z-index: 10000;\n}\n\n.taskbar-center { display: flex; gap: 8px; height: 100%; align-items: center; position:absolute; left: 50%; transform: translateX(-50%); }\n.tb-icon {\n    width: 40px; height: 40px; border-radius: 4px; display: flex; justify-content: center; align-items: center;\n    font-size: 22px; cursor: pointer; transition: all 0.2s; color: var(--text-color); position: relative;\n}\n.tb-icon:hover { background: rgba(255,255,255,0.1); }\n.tb-icon:active { transform: scale(0.9); }\n.tb-icon.active::after {\n    content: ''; position: absolute; bottom: 2px; width: 16px; height: 3px;\n    background: var(--accent-color); border-radius: 2px;\n}\n#start-btn i { color: #00a2ed; }\n\n.taskbar-right { display: flex; align-items: center; gap: 15px; font-size: 12px; }\n#clock { text-align: center; cursor: default;}\n\n#start-menu {\n    position: absolute; bottom: 55px; left: 50%; transform: translateX(-50%) translateY(20px);\n    width: 600px; height: 600px; background: var(--window-bg);\n    backdrop-filter: var(--acrylic-blur); border: 1px solid var(--border-color);\n    border-radius: var(--border-radius); box-shadow: var(--shadow);\n    padding: 20px; display: none; flex-direction: column; opacity: 0; transition: all 0.2s ease-out; z-index: 10001;\n}\n#start-menu.open { display: flex; opacity: 1; transform: translateX(-50%) translateY(0); }\n\n.search-bar {\n    background: rgba(128,128,128,0.1); border: 1px solid var(--border-color); border-radius: 4px;\n    padding: 8px 12px; display: flex; align-ite"])

self.__next_f.push([1,"ms: center; gap: 10px; margin-bottom: 20px;\n}\n.search-bar input { border: none; background: transparent; outline: none; width: 100%; color: var(--text-color); }\n\n.pinned-apps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 15px; padding: 10px; overflow-y: auto; }\n.app-item { display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; padding: 10px; border-radius: 4px; }\n.app-item:hover { background: rgba(255,255,255,0.1); }\n.app-item i { font-size: 28px; }\n.app-item span { font-size: 11px; text-align: center; }\n\n.window {\n    position: absolute; background: var(--window-bg); backdrop-filter: blur(40px);\n    border: 1px solid var(--border-color); border-radius: var(--border-radius);\n    box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;\n    min-width: 300px; min-height: 200px;\n}\n\n.resize-handle {\n    position: absolute;\n    z-index: 10;\n}\n\n.resize-n, .resize-s {\n    left: 0;\n    right: 0;\n    height: 5px;\n    cursor: ns-resize;\n}\n\n.resize-n { top: 0; }\n.resize-s { bottom: 0; }\n\n.resize-e, .resize-w {\n    top: 0;\n    bottom: 0;\n    width: 5px;\n    cursor: ew-resize;\n}\n\n.resize-e { right: 0; }\n.resize-w { left: 0; }\n\n.resize-ne, .resize-nw, .resize-se, .resize-sw {\n    width: 10px;\n    height: 10px;\n}\n\n.resize-ne {\n    top: 0;\n    right: 0;\n    cursor: nesw-resize;\n}\n\n.resize-nw {\n    top: 0;\n    left: 0;\n    cursor: nwse-resize;\n}\n\n.resize-se {\n    bottom: 0;\n    right: 0;\n    cursor: nwse-resize;\n}\n\n.resize-sw {\n    bottom: 0;\n    left: 0;\n    cursor: nesw-resize;\n}\n@keyframes openWindow { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }\n.window.minimized { display: none; }\n.window.maximized { top: 0 !important; left: 0 !important; width: 100% !important; height: calc(100% - 48px) !important; border-radius: 0; }\n\n.title-bar {\n    height: 32px; display: flex; justify-content: space-between; align-items: center; padding: 0 10px;\n    border-bottom: 1px solid var(--border-color); cursor: grab; background: rgba(255,255,255,0.05);\n}\n.title-bar-text { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600;}\n.window-controls { display: flex; height: 100%; position: relative; z-index: 10; }\n.win-btn { width: 40px; height: 100%; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: 0.2s; position: relative;}\n.win-btn:hover { background: rgba(128,128,128,0.1); }\n.win-btn.close:hover { background: #e81123; color: white; }\n.win-btn:active { transform: scale(0.95); }\n\n.window-content { flex: 1; overflow: auto; position: relative; user-select: text; }\n\ntextarea.notepad-area { width: 100%; height: 100%; border: none; padding: 10px; resize: none; outline: none; background: transparent; color: var(--text-color); font-family: monospace; }\n\n.terminal { background: #1e1e1e; color: #ccc; font-family: 'Consolas', monospace; padding: 10px; height: 100%; overflow-y: auto; font-size: 14px; }\n\n#bsod { position: fixed; top:0; left:0; width:100%; height:100%; background: #0078d7; color: white; z-index: 100000; padding: 100px; font-family: 'Segoe UI', sans-serif; display: none; flex-direction: column; gap: 20px;}\n#bsod h1 { font-size: 100px; font-weight: 100; margin: 0;}\n#bsod p { font-size: 24px; }\n\n.app-menu { padding: 5px; border-bottom: 1px solid var(--border-color); font-size: 12px; display: flex; gap: 10px; }\n.menu-item { padding: 2px 8px; cursor: pointer; } \n.menu-item:hover { background: rgba(128,128,128,0.1); border-radius: 4px;}\n\n.terminal .term-output { white-space: pre-wrap; }\n.terminal .term-input-line { display: flex; margin-top: 5px; }\n.terminal .prompt { color: #4caf50; margin-right: 5px; font-weight: bold; }\n.terminal .term-input { background: transparent; border: none; color: #fff; outline: none; flex: 1; font-family: inherit; font-size: inherit; }\n\n.fe-container { display: flex; height: 100%; flex-direction: column;}\n.fe-toolbar { padding: 8px; border-bottom: 1px solid var(--border-color); display: flex; gap: 10px;}\n.fe-path { padding: 4px 10px; border: 1px solid "])

self.__next_f.push([1,"var(--border-color); flex: 1; border-radius: 4px; font-size: 12px; display: flex; align-items: center;}\n.fe-body { display: flex; flex: 1; overflow: hidden; }\n.fe-sidebar { width: 150px; border-right: 1px solid var(--border-color); padding: 10px; font-size: 13px; }\n.fe-sidebar div { padding: 5px; cursor: pointer; border-radius: 4px; display: flex; gap: 8px; align-items: center;}\n.fe-sidebar div:hover { background: rgba(128,128,128,0.1); }\n.fe-content { flex: 1; padding: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); grid-auto-rows: min-content; gap: 10px; overflow-y: auto;}\n.file-item { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; padding: 5px; border-radius: 4px; text-align: center;}\n.file-item:hover { background: rgba(128,128,128,0.1); }\n.file-item i { font-size: 32px; }\n.file-item[data-type=\"folder\"] i { color: #ffd66b; }\n.file-item[data-type=\"txt\"] i { color: #aaa; }\n.file-item[data-type=\"js\"] i, .file-item[data-type=\"py\"] i { color: #519aba; }\n.file-item span { font-size: 11px; word-break: break-all;}\n\n.paint-container { display: flex; flex-direction: column; height: 100%; }\n.paint-toolbar { padding: 5px; border-bottom: 1px solid var(--border-color); display: flex; gap: 10px; align-items: center; background: rgba(128,128,128,0.05);}\ncanvas.paint-canvas { background: #fff; cursor: crosshair; display: block; margin: auto; box-shadow: 0 0 5px rgba(0,0,0,0.2); }\n.color-btn { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; border: 1px solid #ccc; }\n.color-btn.active { border: 2px solid var(--text-color); transform: scale(1.1); }\n\n.game-container { background: #000; display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column; color: #0f0; font-family: 'Courier New', Courier, monospace;}\n#game-canvas { border: 2px solid #0f0; box-shadow: 0 0 20px #0f0; background: #001100;}\n.game-ui { display: flex; justify-content: space-between; width: 400px; margin-bottom: 10px; font-size: 18px; text-shadow: 0 0 5px #0f0;}\n.game-over-overlay { position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); text-align: center; display: none;}\n.game-over-overlay h1 { font-size: 40px; color: red; text-shadow: 0 0 10px red; margin: 0;}\n.neon-btn { border: 1px solid #0f0; color: #0f0; padding: 5px 15px; background: transparent; cursor: pointer; margin-top: 10px; box-shadow: 0 0 5px #0f0; }\n.neon-btn:hover { background: #0f0; color: #000; }\n\n.vid-container { display: flex; flex-direction: column; height: 100%; background: #222; color: white; }\n.vid-preview { flex: 1; display: flex; justify-content: center; align-items: center; background: #000; position: relative; overflow: hidden;}\n.vid-timeline { height: 100px; border-top: 1px solid #444; padding: 10px; display: flex; flex-direction: column; gap: 5px;}\n.vid-controls { display: flex; gap: 15px; justify-content: center; padding: 10px; background: #333; }\n.trk { height: 30px; background: #4caf50; border-radius: 4px; position: relative; width: 80%; cursor: ew-resize;}\n.trk::after { content: 'Clip 1.mp4'; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 10px; color: black;}\n.playhead { position: absolute; height: 100%; width: 2px; background: red; left: 0; top:0; pointer-events: none;}\n#vid-canvas { height: 90%; max-width: 100%; }\n\n@keyframes pulse {\n    0%, 100% { transform: scale(1); }\n    50% { transform: scale(1.05); }\n}\n\n.fe-content.list { display: flex; flex-direction: column; grid-template-columns: none; }\n.fe-content.list .file-item { width: 100%; }\n.fe-content .file-item.selected { background: rgba(0, 120, 212, 0.2); border: 1px solid var(--accent-color); }\n22:Ta12,function NotepadApp() {\n  const [content, setContent] = React.useState('');\n  const [fontSize, setFontSize] = React.useState(14);\n  const [wordWrap, setWordWrap] = React.useState(true);\n\n  const wordCount = content.trim() ? content.trim().split(/\\s+/).length : 0;\n  const charCount = content.length;\n  const lineCount = content.split('\\n').length;\n\n  const ha"])

self.__next_f.push([1,"ndleSave = () =\u003e {\n    const blob = new Blob([content], { type: 'text/plain' });\n    const url = URL.createObjectURL(blob);\n    const a = document.createElement('a');\n    a.href = url;\n    a.download = 'document.txt';\n    a.click();\n    URL.revokeObjectURL(url);\n  };\n\n  const handleOpen = (e) =\u003e {\n    const file = e.target.files[0];\n    if (file) {\n      const reader = new FileReader();\n      reader.onload = (e) =\u003e setContent(e.target.result);\n      reader.readAsText(file);\n    }\n  };\n\n  return (\n    \u003cdiv style={{height: '100%', display: 'flex', flexDirection: 'column'}}\u003e\n      \u003cdiv className=\"app-menu\"\u003e\n        \u003clabel className=\"menu-item\" style={{cursor: 'pointer'}}\u003e\n          Open\n          \u003cinput type=\"file\" accept=\".txt\" onChange={handleOpen} style={{display: 'none'}} /\u003e\n        \u003c/label\u003e\n        \u003cspan className=\"menu-item\" onClick={handleSave}\u003eSave\u003c/span\u003e\n        \u003cspan className=\"menu-item\" onClick={() =\u003e setWordWrap(!wordWrap)}\u003e\n          Word Wrap: {wordWrap ? 'On' : 'Off'}\n        \u003c/span\u003e\n        \u003cspan className=\"menu-item\"\u003e\n          Font:\n          \u003cselect value={fontSize} onChange={(e) =\u003e setFontSize(Number(e.target.value))} style={{marginLeft: '5px', background: 'transparent', border: '1px solid var(--border-color)', color: 'var(--text-color)'}}\u003e\n            \u003coption value={12}\u003e12\u003c/option\u003e\n            \u003coption value={14}\u003e14\u003c/option\u003e\n            \u003coption value={16}\u003e16\u003c/option\u003e\n            \u003coption value={18}\u003e18\u003c/option\u003e\n            \u003coption value={20}\u003e20\u003c/option\u003e\n          \u003c/select\u003e\n        \u003c/span\u003e\n      \u003c/div\u003e\n      \u003ctextarea \n        className=\"notepad-area\" \n        placeholder=\"Start typing...\"\n        value={content}\n        onChange={(e) =\u003e setContent(e.target.value)}\n        style={{\n          fontSize: `${fontSize}px`,\n          whiteSpace: wordWrap ? 'pre-wrap' : 'pre'\n        }}\n      /\u003e\n      \u003cdiv style={{\n        padding: '5px 10px',\n        borderTop: '1px solid var(--border-color)',\n        fontSize: '11px',\n        display: 'flex',\n        gap: '15px',\n        background: 'rgba(128,128,128,0.05)'\n      }}\u003e\n        \u003cspan\u003eLines: {lineCount}\u003c/span\u003e\n        \u003cspan\u003eWords: {wordCount}\u003c/span\u003e\n        \u003cspan\u003eCharacters: {charCount}\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n23:Tc04,function TerminalApp() {\n  const [history, setHistory] = React.useState([\n    'AuraOS Terminal [Version 1.0.0]',\n    '(c) 2025 AuraOS Corporation. All rights reserved.',\n    ''\n  ]);\n  const [input, setInput] = React.useState('');\n  const [processing, setProcessing] = React.useState(false);\n  const inputRef = React.useRef(null);\n\n  const executePython = async (code) =\u003e {\n    try {\n      const systemPrompt = `You are a Python interpreter. Execute the given Python code and return ONLY the output that would appear in the console. Do not include any explanations, markdown formatting, or extra text. If there's an error, return the error message as it would appear in Python.`;\n      const userPrompt = code;\n      const result = await invokeAIAgent(systemPrompt, userPrompt);\n      return result;\n    } catch (error) {\n      return `Error: ${error.message}`;\n    }\n  };\n\n  const handleCommand = async (cmd) =\u003e {\n    const newHistory = [...history, `C:\\\\Users\\\\User\u003e ${cmd}`];\n    setHistory(newHistory);\n    setInput('');\n    \n    if (cmd.toLowerCase() === 'help') {\n      newHistory.push('Available commands: help, clear, date, echo, ver, python');\n      newHistory.push('Type \"python\" followed by Python code to execute');\n      newHistory.push('');\n      setHistory(newHistory);\n    } else if (cmd.toLowerCase() === 'clear') {\n      setHistory([]);\n      return;\n    } else if (cmd.toLowerCase() === 'date') {\n      newHistory.push(new Date().toLocaleString());\n      newHistory.push('');\n      setHistory(newHistory);\n    } else if (cmd.toLowerCase() === 'ver') {\n      newHistory.push('AuraOS Version 1.0.0');\n      newHistory.push('');\n      setHistory(newHistory);\n    } else if (cmd.toLowerCase().startsWith('echo ')) {\n      newHistory.push(cmd.substring(5));\n      newHistory.push('');\n      setHistory(newHistory);\n    } else if (cmd.toLowerCase().startsW"])

self.__next_f.push([1,"ith('python ')) {\n      setProcessing(true);\n      const pythonCode = cmd.substring(7);\n      const output = await executePython(pythonCode);\n      newHistory.push(output);\n      newHistory.push('');\n      setHistory(newHistory);\n      setProcessing(false);\n    } else if (cmd) {\n      newHistory.push(`'${cmd}' is not recognized as a command.`);\n      newHistory.push('');\n      setHistory(newHistory);\n    }\n  };\n\n  return (\n    \u003cdiv className=\"terminal\" onClick={() =\u003e inputRef.current?.focus()}\u003e\n      \u003cdiv className=\"term-output\"\u003e\n        {history.map((line, i) =\u003e (\n          \u003cdiv key={i}\u003e{line}\u003c/div\u003e\n        ))}\n        {processing \u0026\u0026 \u003cdiv style={{color: '#4caf50'}}\u003eExecuting Python code...\u003c/div\u003e}\n      \u003c/div\u003e\n      \u003cdiv className=\"term-input-line\"\u003e\n        \u003cspan className=\"prompt\"\u003eC:\\Users\\User\u0026gt;\u003c/span\u003e\n        \u003cinput\n          ref={inputRef}\n          className=\"term-input\"\n          value={input}\n          onChange={(e) =\u003e setInput(e.target.value)}\n          onKeyDown={(e) =\u003e {\n            if (e.key === 'Enter' \u0026\u0026 !processing) {\n              handleCommand(input);\n            }\n          }}\n          disabled={processing}\n          autoFocus\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n24:T1131,function FileExplorerApp() {\n  const [currentPath, setCurrentPath] = React.useState('Desktop');\n  const [viewMode, setViewMode] = React.useState('grid');\n  const [selectedFile, setSelectedFile] = React.useState(null);\n  \n  const fileStructure = {\n    'Desktop': [\n      { name: 'Documents', type: 'folder', icon: 'fa-folder', size: '--', modified: '2025-10-15' },\n      { name: 'Pictures', type: 'folder', icon: 'fa-folder', size: '--', modified: '2025-10-10' },\n      { name: 'Welcome.txt', type: 'txt', icon: 'fa-file-lines', size: '2 KB', modified: '2025-10-20' },\n      { name: 'Project', type: 'folder', icon: 'fa-folder', size: '--', modified: '2025-10-18' },\n      { name: 'script.js', type: 'js', icon: 'fa-file-code', size: '5 KB', modified: '2025-10-19' }\n    ],\n    'Documents': [\n      { name: 'Resume.pdf', type: 'pdf', icon: 'fa-file-pdf', size: '145 KB', modified: '2025-09-20' },\n      { name: 'Report.docx', type: 'docx', icon: 'fa-file-word', size: '78 KB', modified: '2025-10-05' }\n    ],\n    'Pictures': [\n      { name: 'Vacation.jpg', type: 'jpg', icon: 'fa-file-image', size: '2.3 MB', modified: '2025-08-15' },\n      { name: 'Screenshot.png', type: 'png', icon: 'fa-file-image', size: '856 KB', modified: '2025-10-12' }\n    ]\n  };\n\n  const files = fileStructure[currentPath] || [];\n\n  const navigateTo = (folderName) =\u003e {\n    if (fileStructure[folderName]) {\n      setCurrentPath(folderName);\n      setSelectedFile(null);\n    }\n  };\n\n  return (\n    \u003cdiv className=\"fe-container\"\u003e\n      \u003cdiv className=\"fe-toolbar\"\u003e\n        \u003ci className=\"fa-solid fa-arrow-left\" style={{cursor: 'pointer', opacity: currentPath === 'Desktop' ? 0.3 : 1}} onClick={() =\u003e currentPath !== 'Desktop' \u0026\u0026 setCurrentPath('Desktop')}\u003e\u003c/i\u003e\n        \u003ci className=\"fa-solid fa-arrow-right\" style={{cursor: 'pointer', opacity: 0.3}}\u003e\u003c/i\u003e\n        \u003ci className=\"fa-solid fa-arrow-up\" style={{cursor: 'pointer'}} onClick={() =\u003e setCurrentPath('Desktop')}\u003e\u003c/i\u003e\n        \u003cdiv className=\"fe-path\"\u003e\n          \u003ci className=\"fa-solid fa-folder\" style={{marginRight: '5px'}}\u003e\u003c/i\u003e\n          {currentPath}\n        \u003c/div\u003e\n        \u003cdiv style={{marginLeft: 'auto', display: 'flex', gap: '10px'}}\u003e\n          \u003ci className={`fa-solid fa-grip ${viewMode === 'grid' ? 'active' : ''}`} style={{cursor: 'pointer', padding: '5px'}} onClick={() =\u003e setViewMode('grid')}\u003e\u003c/i\u003e\n          \u003ci className={`fa-solid fa-list ${viewMode === 'list' ? 'active' : ''}`} style={{cursor: 'pointer', padding: '5px'}} onClick={() =\u003e setViewMode('list')}\u003e\u003c/i\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"fe-body\"\u003e\n        \u003cdiv className=\"fe-sidebar\"\u003e\n          \u003cdiv onClick={() =\u003e navigateTo('Desktop')}\u003e\u003ci className=\"fa-solid fa-desktop\"\u003e\u003c/i\u003e Desktop\u003c/div\u003e\n          \u003cdiv onClick={() =\u003e navigateTo('Documents')}\u003e\u003ci className=\"fa-solid fa-file\"\u003e\u003c/i\u003e Documents\u003c/div\u003e\n          \u003cdiv onClick={() =\u003e navigateTo('Pictures')}\u003e\u003ci clas"])

self.__next_f.push([1,"sName=\"fa-solid fa-image\"\u003e\u003c/i\u003e Pictures\u003c/div\u003e\n          \u003cdiv\u003e\u003ci className=\"fa-solid fa-download\"\u003e\u003c/i\u003e Downloads\u003c/div\u003e\n          \u003cdiv\u003e\u003ci className=\"fa-solid fa-music\"\u003e\u003c/i\u003e Music\u003c/div\u003e\n          \u003cdiv\u003e\u003ci className=\"fa-solid fa-video\"\u003e\u003c/i\u003e Videos\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv className={`fe-content ${viewMode}`}\u003e\n          {files.map((file, i) =\u003e (\n            \u003cdiv \n              key={i} \n              className={`file-item ${selectedFile === i ? 'selected' : ''}`}\n              data-type={file.type}\n              onClick={() =\u003e setSelectedFile(i)}\n              onDoubleClick={() =\u003e file.type === 'folder' \u0026\u0026 navigateTo(file.name)}\n            \u003e\n              {viewMode === 'grid' ? (\n                \u003c\u003e\n                  \u003ci className={`fa-solid ${file.icon}`}\u003e\u003c/i\u003e\n                  \u003cspan\u003e{file.name}\u003c/span\u003e\n                \u003c/\u003e\n              ) : (\n                \u003cdiv style={{display: 'flex', width: '100%', justifyContent: 'space-between', padding: '5px'}}\u003e\n                  \u003cdiv style={{display: 'flex', gap: '10px', alignItems: 'center'}}\u003e\n                    \u003ci className={`fa-solid ${file.icon}`}\u003e\u003c/i\u003e\n                    \u003cspan\u003e{file.name}\u003c/span\u003e\n                  \u003c/div\u003e\n                  \u003cdiv style={{display: 'flex', gap: '30px', fontSize: '11px', color: '#888'}}\u003e\n                    \u003cspan\u003e{file.modified}\u003c/span\u003e\n                    \u003cspan\u003e{file.size}\u003c/span\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              )}\n            \u003c/div\u003e\n          ))}\n        \u003c/div\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n25:Te17,function CalculatorApp() {\n  const [display, setDisplay] = React.useState('0');\n  const [prevValue, setPrevValue] = React.useState(null);\n  const [operation, setOperation] = React.useState(null);\n  const [newNumber, setNewNumber] = React.useState(true);\n\n  const handleNumber = (num) =\u003e {\n    if (newNumber) {\n      setDisplay(String(num));\n      setNewNumber(false);\n    } else {\n      setDisplay(display === '0' ? String(num) : display + num);\n    }\n  };\n\n  const handleOperation = (op) =\u003e {\n    const current = parseFloat(display);\n    if (prevValue === null) {\n      setPrevValue(current);\n    } else if (operation) {\n      const result = calculate(prevValue, current, operation);\n      setDisplay(String(result));\n      setPrevValue(result);\n    }\n    setOperation(op);\n    setNewNumber(true);\n  };\n\n  const calculate = (a, b, op) =\u003e {\n    switch(op) {\n      case '+': return a + b;\n      case '-': return a - b;\n      case '×': return a * b;\n      case '÷': return a / b;\n      default: return b;\n    }\n  };\n\n  const handleEquals = () =\u003e {\n    if (operation \u0026\u0026 prevValue !== null) {\n      const result = calculate(prevValue, parseFloat(display), operation);\n      setDisplay(String(result));\n      setPrevValue(null);\n      setOperation(null);\n      setNewNumber(true);\n    }\n  };\n\n  const handleClear = () =\u003e {\n    setDisplay('0');\n    setPrevValue(null);\n    setOperation(null);\n    setNewNumber(true);\n  };\n\n  const Button = ({ value, onClick, className = '' }) =\u003e (\n    \u003cbutton \n      onClick={onClick}\n      style={{\n        padding: '20px',\n        fontSize: '18px',\n        border: '1px solid var(--border-color)',\n        background: 'var(--window-bg)',\n        cursor: 'pointer',\n        transition: '0.2s'\n      }}\n      onMouseEnter={(e) =\u003e e.target.style.background = 'rgba(128,128,128,0.1)'}\n      onMouseLeave={(e) =\u003e e.target.style.background = 'var(--window-bg)'}\n      className={className}\n    \u003e\n      {value}\n    \u003c/button\u003e\n  );\n\n  return (\n    \u003cdiv style={{padding: '10px', display: 'flex', flexDirection: 'column', gap: '10px'}}\u003e\n      \u003cdiv style={{\n        padding: '20px',\n        background: 'rgba(128,128,128,0.05)',\n        textAlign: 'right',\n        fontSize: '32px',\n        fontWeight: 'bold',\n        borderRadius: '4px',\n        border: '1px solid var(--border-color)'\n      }}\u003e\n        {display}\n      \u003c/div\u003e\n      \u003cdiv style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: '5px'}}\u003e\n        \u003cButton value=\"C\" onClick={handleClear} /\u003e\n        \u003cButton value=\"÷\" onClick={() =\u003e handleOperation('÷')} /\u003e\n        \u003cB"])

self.__next_f.push([1,"utton value=\"×\" onClick={() =\u003e handleOperation('×')} /\u003e\n        \u003cButton value=\"-\" onClick={() =\u003e handleOperation('-')} /\u003e\n        \n        \u003cButton value=\"7\" onClick={() =\u003e handleNumber(7)} /\u003e\n        \u003cButton value=\"8\" onClick={() =\u003e handleNumber(8)} /\u003e\n        \u003cButton value=\"9\" onClick={() =\u003e handleNumber(9)} /\u003e\n        \u003cButton value=\"+\" onClick={() =\u003e handleOperation('+')} /\u003e\n        \n        \u003cButton value=\"4\" onClick={() =\u003e handleNumber(4)} /\u003e\n        \u003cButton value=\"5\" onClick={() =\u003e handleNumber(5)} /\u003e\n        \u003cButton value=\"6\" onClick={() =\u003e handleNumber(6)} /\u003e\n        \u003cButton value=\"=\" onClick={handleEquals} style={{gridRow: 'span 2'}} /\u003e\n        \n        \u003cButton value=\"1\" onClick={() =\u003e handleNumber(1)} /\u003e\n        \u003cButton value=\"2\" onClick={() =\u003e handleNumber(2)} /\u003e\n        \u003cButton value=\"3\" onClick={() =\u003e handleNumber(3)} /\u003e\n        \n        \u003cButton value=\"0\" onClick={() =\u003e handleNumber(0)} style={{gridColumn: 'span 2'}} /\u003e\n        \u003cButton value=\".\" onClick={() =\u003e handleNumber('.')} /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}26:T10be,function BrowserApp() {\n  const [url, setUrl] = React.useState('https://www.bing.com');\n  const [inputUrl, setInputUrl] = React.useState('https://www.bing.com');\n  const [loading, setLoading] = React.useState(false);\n  const [content, setContent] = React.useState('');\n  const [error, setError] = React.useState('');\n  const iframeRef = React.useRef(null);\n\n  const loadPage = async (targetUrl) =\u003e {\n    setLoading(true);\n    setError('');\n    \n    try {\n      const proxyUrl = `https://proxy-api.trickle-app.host/?url=${encodeURIComponent(targetUrl)}`;\n      const response = await fetch(proxyUrl);\n      \n      if (!response.ok) {\n        throw new Error('Failed to load page');\n      }\n      \n      let html = await response.text();\n      \n      const baseTag = `\u003cbase href=\"${targetUrl}\"\u003e`;\n      html = html.replace('\u003chead\u003e', `\u003chead\u003e${baseTag}`);\n      \n      setContent(html);\n      setUrl(targetUrl);\n    } catch (err) {\n      setError(`Unable to load: ${err.message}`);\n      console.error('Browser load error:', err);\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  const handleNavigate = () =\u003e {\n    let targetUrl = inputUrl.trim();\n    if (!targetUrl) return;\n    \n    if (!targetUrl.startsWith('http://') \u0026\u0026 !targetUrl.startsWith('https://')) {\n      targetUrl = 'https://' + targetUrl;\n    }\n    \n    loadPage(targetUrl);\n  };\n\n  const handleRefresh = () =\u003e {\n    loadPage(url);\n  };\n\n  const handleKeyPress = (e) =\u003e {\n    if (e.key === 'Enter') {\n      handleNavigate();\n    }\n  };\n\n  React.useEffect(() =\u003e {\n    loadPage(url);\n  }, []);\n\n  return (\n    \u003cdiv style={{height: '100%', display: 'flex', flexDirection: 'column'}}\u003e\n      \u003cdiv style={{\n        padding: '10px',\n        borderBottom: '1px solid var(--border-color)',\n        display: 'flex',\n        gap: '10px',\n        alignItems: 'center',\n        background: 'rgba(128,128,128,0.03)'\n      }}\u003e\n        \u003ci \n          className=\"fa-solid fa-rotate-right\" \n          style={{cursor: 'pointer', padding: '5px'}}\n          onClick={handleRefresh}\n        \u003e\u003c/i\u003e\n        \u003cdiv style={{\n          flex: 1,\n          display: 'flex',\n          alignItems: 'center',\n          gap: '5px',\n          padding: '8px 12px',\n          border: '1px solid var(--border-color)',\n          borderRadius: '20px',\n          background: 'var(--window-bg)'\n        }}\u003e\n          \u003ci className=\"fa-solid fa-globe\" style={{fontSize: '12px'}}\u003e\u003c/i\u003e\n          \u003cinput\n            type=\"text\"\n            value={inputUrl}\n            onChange={(e) =\u003e setInputUrl(e.target.value)}\n            onKeyPress={handleKeyPress}\n            placeholder=\"Enter URL...\"\n            style={{\n              flex: 1,\n              border: 'none',\n              outline: 'none',\n              background: 'transparent',\n              color: 'var(--text-color)',\n              fontSize: '14px'\n            }}\n          /\u003e\n          \u003ci \n            className=\"fa-solid fa-arrow-right\" \n            style={{cursor: 'pointer', fontSize: '14px', color: 'var(--accent-color)', padding: '5px'}}\n            onClick={"])

self.__next_f.push([1,"handleNavigate}\n          \u003e\u003c/i\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      {loading \u0026\u0026 (\n        \u003cdiv style={{\n          padding: '8px 15px',\n          background: 'rgba(0, 120, 212, 0.1)',\n          fontSize: '12px',\n          color: 'var(--accent-color)',\n          display: 'flex',\n          alignItems: 'center',\n          gap: '8px'\n        }}\u003e\n          \u003ci className=\"fa-solid fa-spinner fa-spin\"\u003e\u003c/i\u003e\n          Loading page content...\n        \u003c/div\u003e\n      )}\n      {error \u0026\u0026 (\n        \u003cdiv style={{\n          padding: '8px 15px',\n          background: 'rgba(255, 0, 0, 0.1)',\n          fontSize: '12px',\n          color: '#d32f2f',\n          display: 'flex',\n          alignItems: 'center',\n          gap: '8px'\n        }}\u003e\n          \u003ci className=\"fa-solid fa-circle-exclamation\"\u003e\u003c/i\u003e\n          {error}\n        \u003c/div\u003e\n      )}\n      \u003cdiv style={{flex: 1, position: 'relative', background: 'white', overflow: 'auto'}}\u003e\n        \u003ciframe\n          ref={iframeRef}\n          srcDoc={content}\n          style={{\n            width: '100%',\n            height: '100%',\n            border: 'none'\n          }}\n          sandbox=\"allow-scripts allow-same-origin allow-forms\"\n          title=\"Browser Content\"\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n27:Tf47,function SnakeGameApp() {\n  const canvasRef = React.useRef(null);\n  const [score, setScore] = React.useState(0);\n  const [gameOver, setGameOver] = React.useState(false);\n  const [gameStarted, setGameStarted] = React.useState(false);\n  const gameLoop = React.useRef(null);\n\n  const gridSize = 20;\n  const tileCount = 20;\n\n  const snake = React.useRef([{ x: 10, y: 10 }]);\n  const direction = React.useRef({ x: 0, y: 0 });\n  const food = React.useRef({ x: 15, y: 15 });\n\n  const startGame = () =\u003e {\n    snake.current = [{ x: 10, y: 10 }];\n    direction.current = { x: 1, y: 0 };\n    food.current = { \n      x: Math.floor(Math.random() * tileCount), \n      y: Math.floor(Math.random() * tileCount) \n    };\n    setScore(0);\n    setGameOver(false);\n    setGameStarted(true);\n  };\n\n  React.useEffect(() =\u003e {\n    const handleKeyPress = (e) =\u003e {\n      if (!gameStarted || gameOver) return;\n      \n      switch(e.key) {\n        case 'ArrowUp':\n          if (direction.current.y === 0) direction.current = { x: 0, y: -1 };\n          break;\n        case 'ArrowDown':\n          if (direction.current.y === 0) direction.current = { x: 0, y: 1 };\n          break;\n        case 'ArrowLeft':\n          if (direction.current.x === 0) direction.current = { x: -1, y: 0 };\n          break;\n        case 'ArrowRight':\n          if (direction.current.x === 0) direction.current = { x: 1, y: 0 };\n          break;\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyPress);\n    return () =\u003e window.removeEventListener('keydown', handleKeyPress);\n  }, [gameStarted, gameOver]);\n\n  React.useEffect(() =\u003e {\n    if (!gameStarted || gameOver) return;\n\n    gameLoop.current = setInterval(() =\u003e {\n      const head = { ...snake.current[0] };\n      head.x += direction.current.x;\n      head.y += direction.current.y;\n\n      if (head.x \u003c 0 || head.x \u003e= tileCount || head.y \u003c 0 || head.y \u003e= tileCount) {\n        setGameOver(true);\n        return;\n      }\n\n      for (let segment of snake.current) {\n        if (segment.x === head.x \u0026\u0026 segment.y === head.y) {\n          setGameOver(true);\n          return;\n        }\n      }\n\n      snake.current.unshift(head);\n\n      if (head.x === food.current.x \u0026\u0026 head.y === food.current.y) {\n        setScore(s =\u003e s + 10);\n        food.current = {\n          x: Math.floor(Math.random() * tileCount),\n          y: Math.floor(Math.random() * tileCount)\n        };\n      } else {\n        snake.current.pop();\n      }\n\n      const canvas = canvasRef.current;\n      if (!canvas) return;\n      const ctx = canvas.getContext('2d');\n      \n      ctx.fillStyle = '#001100';\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n      ctx.fillStyle = '#0f0';\n      for (let segment of snake.current) {\n        ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);\n      }\n\n      ctx.fillStyle = '#f00';\n      "])

self.__next_f.push([1,"ctx.fillRect(food.current.x * gridSize, food.current.y * gridSize, gridSize - 2, gridSize - 2);\n    }, 100);\n\n    return () =\u003e clearInterval(gameLoop.current);\n  }, [gameStarted, gameOver]);\n\n  return (\n    \u003cdiv className=\"game-container\"\u003e\n      \u003cdiv className=\"game-ui\"\u003e\n        \u003cdiv\u003eScore: {score}\u003c/div\u003e\n        \u003cdiv\u003eHigh Score: {Math.max(score, 0)}\u003c/div\u003e\n      \u003c/div\u003e\n      \u003ccanvas \n        ref={canvasRef}\n        id=\"game-canvas\"\n        width={400}\n        height={400}\n      /\u003e\n      {gameOver \u0026\u0026 (\n        \u003cdiv className=\"game-over-overlay\" style={{display: 'block'}}\u003e\n          \u003ch1\u003eGAME OVER\u003c/h1\u003e\n          \u003cp\u003eScore: {score}\u003c/p\u003e\n          \u003cbutton className=\"neon-btn\" onClick={startGame}\u003eRestart\u003c/button\u003e\n        \u003c/div\u003e\n      )}\n      {!gameStarted \u0026\u0026 !gameOver \u0026\u0026 (\n        \u003cdiv className=\"game-over-overlay\" style={{display: 'block'}}\u003e\n          \u003ch1 style={{color: '#0f0'}}\u003eCYBER SNAKE\u003c/h1\u003e\n          \u003cp\u003eUse arrow keys to move\u003c/p\u003e\n          \u003cbutton className=\"neon-btn\" onClick={startGame}\u003eStart Game\u003c/button\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n}28:Tb1b,function PaintApp() {\n  const canvasRef = React.useRef(null);\n  const [isDrawing, setIsDrawing] = React.useState(false);\n  const [color, setColor] = React.useState('#000000');\n  const [brushSize, setBrushSize] = React.useState(2);\n  const [tool, setTool] = React.useState('brush');\n\n  const colors = ['#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff', '#ffa500', '#800080'];\n\n  React.useEffect(() =\u003e {\n    clearCanvas();\n  }, []);\n\n  const startDrawing = (e) =\u003e {\n    setIsDrawing(true);\n    draw(e);\n  };\n\n  const stopDrawing = () =\u003e {\n    setIsDrawing(false);\n    const canvas = canvasRef.current;\n    const ctx = canvas.getContext('2d');\n    ctx.beginPath();\n  };\n\n  const draw = (e) =\u003e {\n    if (!isDrawing \u0026\u0026 e.type !== 'mousedown') return;\n    \n    const canvas = canvasRef.current;\n    const rect = canvas.getBoundingClientRect();\n    const ctx = canvas.getContext('2d');\n    \n    ctx.strokeStyle = color;\n    ctx.lineWidth = brushSize;\n    ctx.lineCap = 'round';\n    \n    ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);\n    ctx.stroke();\n    ctx.beginPath();\n    ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);\n  };\n\n  const clearCanvas = () =\u003e {\n    const canvas = canvasRef.current;\n    const ctx = canvas.getContext('2d');\n    ctx.fillStyle = '#ffffff';\n    ctx.fillRect(0, 0, canvas.width, canvas.height);\n  };\n\n  return (\n    \u003cdiv className=\"paint-container\"\u003e\n      \u003cdiv className=\"paint-toolbar\"\u003e\n        \u003cspan style={{fontSize: '12px', marginRight: '10px'}}\u003eBrush:\u003c/span\u003e\n        {colors.map(c =\u003e (\n          \u003cdiv\n            key={c}\n            className={`color-btn ${color === c ? 'active' : ''}`}\n            style={{background: c}}\n            onClick={() =\u003e setColor(c)}\n          /\u003e\n        ))}\n        \u003cinput\n          type=\"range\"\n          min=\"1\"\n          max=\"20\"\n          value={brushSize}\n          onChange={(e) =\u003e setBrushSize(e.target.value)}\n          style={{marginLeft: '10px'}}\n        /\u003e\n        \u003cspan style={{fontSize: '12px', marginLeft: '5px'}}\u003e{brushSize}px\u003c/span\u003e\n        \u003cbutton\n          onClick={clearCanvas}\n          style={{\n            marginLeft: 'auto',\n            padding: '5px 15px',\n            border: '1px solid var(--border-color)',\n            background: 'var(--window-bg)',\n            cursor: 'pointer',\n            borderRadius: '4px'\n          }}\n        \u003e\n          Clear\n        \u003c/button\u003e\n      \u003c/div\u003e\n      \u003cdiv style={{flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#e0e0e0'}}\u003e\n        \u003ccanvas\n          ref={canvasRef}\n          className=\"paint-canvas\"\n          width={700}\n          height={400}\n          onMouseDown={startDrawing}\n          onMouseUp={stopDrawing}\n          onMouseMove={draw}\n          onMouseLeave={stopDrawing}\n        /\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}29:T103f,function CodeEditorApp() {\n  const [code, setCode] = React.useState(`// Welcome to AuraOS Code Editor\nfunction hello() {\n  console.log(\"Hello, World!\");\n}\n\nhello();`);\n  cons"])

self.__next_f.push([1,"t [language, setLanguage] = React.useState('javascript');\n  const [output, setOutput] = React.useState('');\n  const [running, setRunning] = React.useState(false);\n\n  const lineCount = code.split('\\n').length;\n\n  const runCode = async () =\u003e {\n    setRunning(true);\n    setOutput('Running...');\n    \n    if (language === 'javascript') {\n      try {\n        const result = eval(code);\n        setOutput(result !== undefined ? String(result) : 'Code executed successfully');\n      } catch (error) {\n        setOutput(`Error: ${error.message}`);\n      }\n    } else if (language === 'python') {\n      try {\n        const systemPrompt = `You are a Python interpreter. Execute the given Python code and return ONLY the output. If there's an error, return the error message.`;\n        const result = await invokeAIAgent(systemPrompt, code);\n        setOutput(result);\n      } catch (error) {\n        setOutput(`Error: ${error.message}`);\n      }\n    }\n    setRunning(false);\n  };\n\n  return (\n    \u003cdiv style={{height: '100%', display: 'flex', flexDirection: 'column'}}\u003e\n      \u003cdiv style={{\n        padding: '10px',\n        borderBottom: '1px solid var(--border-color)',\n        display: 'flex',\n        gap: '15px',\n        fontSize: '12px',\n        alignItems: 'center',\n        background: '#2d2d30'\n      }}\u003e\n        \u003cspan style={{cursor: 'pointer', color: '#ccc'}}\u003eFile\u003c/span\u003e\n        \u003cspan style={{cursor: 'pointer', color: '#ccc'}}\u003eEdit\u003c/span\u003e\n        \u003cspan style={{cursor: 'pointer', color: '#ccc'}}\u003eView\u003c/span\u003e\n        \u003cselect \n          value={language} \n          onChange={(e) =\u003e setLanguage(e.target.value)}\n          style={{background: '#1e1e1e', color: '#ccc', border: '1px solid #444', padding: '3px 8px', borderRadius: '3px'}}\n        \u003e\n          \u003coption value=\"javascript\"\u003eJavaScript\u003c/option\u003e\n          \u003coption value=\"python\"\u003ePython\u003c/option\u003e\n        \u003c/select\u003e\n        \u003cbutton \n          onClick={runCode}\n          disabled={running}\n          style={{\n            background: '#0e639c',\n            color: 'white',\n            border: 'none',\n            padding: '5px 15px',\n            borderRadius: '3px',\n            cursor: running ? 'not-allowed' : 'pointer',\n            opacity: running ? 0.5 : 1\n          }}\n        \u003e\n          \u003ci className=\"fa-solid fa-play\" style={{marginRight: '5px'}}\u003e\u003c/i\u003e\n          Run\n        \u003c/button\u003e\n        \u003cspan style={{marginLeft: 'auto', color: '#888', fontSize: '11px'}}\u003eLines: {lineCount}\u003c/span\u003e\n      \u003c/div\u003e\n      \u003cdiv style={{display: 'flex', flex: 1, overflow: 'hidden'}}\u003e\n        \u003cdiv style={{\n          width: '40px',\n          background: '#1e1e1e',\n          borderRight: '1px solid #444',\n          padding: '10px 5px',\n          textAlign: 'right',\n          fontSize: '14px',\n          color: '#858585',\n          fontFamily: 'Consolas, monospace',\n          userSelect: 'none',\n          overflow: 'hidden'\n        }}\u003e\n          {Array.from({length: lineCount}, (_, i) =\u003e (\n            \u003cdiv key={i} style={{lineHeight: '1.6'}}\u003e{i + 1}\u003c/div\u003e\n          ))}\n        \u003c/div\u003e\n        \u003ctextarea\n          value={code}\n          onChange={(e) =\u003e setCode(e.target.value)}\n          style={{\n            flex: 1,\n            padding: '10px',\n            border: 'none',\n            outline: 'none',\n            fontFamily: 'Consolas, monospace',\n            fontSize: '14px',\n            background: '#1e1e1e',\n            color: '#d4d4d4',\n            resize: 'none',\n            lineHeight: '1.6'\n          }}\n        /\u003e\n      \u003c/div\u003e\n      {output \u0026\u0026 (\n        \u003cdiv style={{\n          height: '150px',\n          borderTop: '1px solid #444',\n          background: '#1e1e1e',\n          color: '#ccc',\n          padding: '10px',\n          fontFamily: 'Consolas, monospace',\n          fontSize: '13px',\n          overflow: 'auto'\n        }}\u003e\n          \u003cdiv style={{color: '#4ec9b0', marginBottom: '5px'}}\u003eOutput:\u003c/div\u003e\n          \u003cpre style={{margin: 0, whiteSpace: 'pre-wrap'}}\u003e{output}\u003c/pre\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n}\n2a:T42c,function VideoEditorApp() {\n  const [playing, setPlaying] = React.useState(false);\n\n  return (\n    \u003cdiv"])

self.__next_f.push([1," className=\"vid-container\"\u003e\n      \u003cdiv className=\"vid-preview\"\u003e\n        \u003ccanvas id=\"vid-canvas\"\u003e\u003c/canvas\u003e\n        \u003cdiv style={{\n          position: 'absolute',\n          color: '#888',\n          fontSize: '14px'\n        }}\u003e\n          Video Preview Area\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"vid-timeline\"\u003e\n        \u003cdiv style={{position: 'relative', height: '40px'}}\u003e\n          \u003cdiv className=\"trk\"\u003e\u003c/div\u003e\n          \u003cdiv className=\"playhead\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n      \u003cdiv className=\"vid-controls\"\u003e\n        \u003ci \n          className={`fa-solid ${playing ? 'fa-pause' : 'fa-play'}`}\n          style={{cursor: 'pointer'}}\n          onClick={() =\u003e setPlaying(!playing)}\n        \u003e\u003c/i\u003e\n        \u003ci className=\"fa-solid fa-stop\" style={{cursor: 'pointer'}}\u003e\u003c/i\u003e\n        \u003ci className=\"fa-solid fa-scissors\" style={{cursor: 'pointer'}}\u003e\u003c/i\u003e\n        \u003ci className=\"fa-solid fa-folder-open\" style={{cursor: 'pointer'}}\u003e\u003c/i\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}2b:T14ba,function MusicPlayerApp() {\n  const [playing, setPlaying] = React.useState(false);\n  const [currentTime, setCurrentTime] = React.useState(0);\n  const [duration, setDuration] = React.useState(180);\n  const [volume, setVolume] = React.useState(70);\n  const [currentTrack, setCurrentTrack] = React.useState(0);\n\n  const playlist = [\n    { title: 'Neon Dreams', artist: 'Synthwave Collection', duration: '3:24' },\n    { title: 'Digital Horizon', artist: 'Cyber Sound', duration: '4:12' },\n    { title: 'Electric Pulse', artist: 'Wave Rider', duration: '3:45' },\n    { title: 'Midnight Drive', artist: 'Retro Future', duration: '5:01' }\n  ];\n\n  React.useEffect(() =\u003e {\n    let interval;\n    if (playing) {\n      interval = setInterval(() =\u003e {\n        setCurrentTime(t =\u003e {\n          if (t \u003e= duration) {\n            setPlaying(false);\n            return 0;\n          }\n          return t + 1;\n        });\n      }, 1000);\n    }\n    return () =\u003e clearInterval(interval);\n  }, [playing, duration]);\n\n  const formatTime = (seconds) =\u003e {\n    const mins = Math.floor(seconds / 60);\n    const secs = seconds % 60;\n    return `${mins}:${secs.toString().padStart(2, '0')}`;\n  };\n\n  return (\n    \u003cdiv style={{height: '100%', display: 'flex', flexDirection: 'column', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'}}\u003e\n      \u003cdiv style={{flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', color: 'white'}}\u003e\n        \u003cdiv style={{\n          width: '200px',\n          height: '200px',\n          background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',\n          borderRadius: '10px',\n          display: 'flex',\n          justifyContent: 'center',\n          alignItems: 'center',\n          marginBottom: '30px',\n          boxShadow: '0 20px 40px rgba(0,0,0,0.3)',\n          animation: playing ? 'pulse 2s infinite' : 'none'\n        }}\u003e\n          \u003ci className=\"fa-solid fa-music\" style={{fontSize: '64px', opacity: 0.8}}\u003e\u003c/i\u003e\n        \u003c/div\u003e\n        \u003ch2 style={{margin: '10px 0', fontSize: '24px'}}\u003e{playlist[currentTrack].title}\u003c/h2\u003e\n        \u003cp style={{margin: '5px 0', opacity: 0.8}}\u003e{playlist[currentTrack].artist}\u003c/p\u003e\n      \u003c/div\u003e\n\n      \u003cdiv style={{padding: '20px', background: 'rgba(0,0,0,0.2)'}}\u003e\n        \u003cdiv style={{display: 'flex', justifyContent: 'space-between', color: 'white', fontSize: '12px', marginBottom: '10px'}}\u003e\n          \u003cspan\u003e{formatTime(currentTime)}\u003c/span\u003e\n          \u003cspan\u003e{formatTime(duration)}\u003c/span\u003e\n        \u003c/div\u003e\n        \u003cinput\n          type=\"range\"\n          min=\"0\"\n          max={duration}\n          value={currentTime}\n          onChange={(e) =\u003e setCurrentTime(Number(e.target.value))}\n          style={{width: '100%', marginBottom: '20px'}}\n        /\u003e\n\n        \u003cdiv style={{display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '20px', marginBottom: '20px'}}\u003e\n          \u003ci className=\"fa-solid fa-backward\" style={{fontSize: '24px', cursor: 'pointer', color: 'white'}} onClick={() =\u003e setCurrentTrack((currentTrack - 1 + playlist.length) % playlist.length)}\u003e\u003c/i\u003e\n          \u003cdiv \n            onClick={() =\u003e setPlaying(!pla"])

self.__next_f.push([1,"ying)}\n            style={{\n              width: '60px',\n              height: '60px',\n              borderRadius: '50%',\n              background: 'white',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n              cursor: 'pointer',\n              boxShadow: '0 5px 15px rgba(0,0,0,0.3)'\n            }}\n          \u003e\n            \u003ci className={`fa-solid ${playing ? 'fa-pause' : 'fa-play'}`} style={{fontSize: '24px', color: '#667eea', marginLeft: playing ? '0' : '3px'}}\u003e\u003c/i\u003e\n          \u003c/div\u003e\n          \u003ci className=\"fa-solid fa-forward\" style={{fontSize: '24px', cursor: 'pointer', color: 'white'}} onClick={() =\u003e setCurrentTrack((currentTrack + 1) % playlist.length)}\u003e\u003c/i\u003e\n        \u003c/div\u003e\n\n        \u003cdiv style={{display: 'flex', alignItems: 'center', gap: '10px', color: 'white'}}\u003e\n          \u003ci className=\"fa-solid fa-volume-low\"\u003e\u003c/i\u003e\n          \u003cinput\n            type=\"range\"\n            min=\"0\"\n            max=\"100\"\n            value={volume}\n            onChange={(e) =\u003e setVolume(Number(e.target.value))}\n            style={{flex: 1}}\n          /\u003e\n          \u003cspan style={{fontSize: '12px', width: '35px'}}\u003e{volume}%\u003c/span\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n\n      \u003cdiv style={{maxHeight: '150px', overflowY: 'auto', background: 'rgba(0,0,0,0.3)', padding: '10px'}}\u003e\n        {playlist.map((track, i) =\u003e (\n          \u003cdiv \n            key={i}\n            onClick={() =\u003e setCurrentTrack(i)}\n            style={{\n              padding: '10px',\n              borderRadius: '5px',\n              cursor: 'pointer',\n              background: i === currentTrack ? 'rgba(255,255,255,0.1)' : 'transparent',\n              color: 'white',\n              display: 'flex',\n              justifyContent: 'space-between',\n              marginBottom: '5px'\n            }}\n          \u003e\n            \u003cdiv\u003e\n              \u003cdiv style={{fontWeight: i === currentTrack ? 'bold' : 'normal'}}\u003e{track.title}\u003c/div\u003e\n              \u003cdiv style={{fontSize: '11px', opacity: 0.7}}\u003e{track.artist}\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cspan style={{fontSize: '12px', opacity: 0.7}}\u003e{track.duration}\u003c/span\u003e\n          \u003c/div\u003e\n        ))}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}2c:T1160,function SettingsApp() {\n  const [theme, setTheme] = React.useState('auto');\n  const [notifications, setNotifications] = React.useState(true);\n  const [soundEnabled, setSoundEnabled] = React.useState(true);\n  const [animationsEnabled, setAnimationsEnabled] = React.useState(true);\n\n  const settingsSections = [\n    { id: 'system', icon: 'fa-desktop', label: 'System' },\n    { id: 'display', icon: 'fa-tv', label: 'Display' },\n    { id: 'sound', icon: 'fa-volume-high', label: 'Sound' },\n    { id: 'privacy', icon: 'fa-lock', label: 'Privacy' },\n    { id: 'accounts', icon: 'fa-user', label: 'Accounts' },\n    { id: 'about', icon: 'fa-circle-info', label: 'About' }\n  ];\n\n  const [activeSection, setActiveSection] = React.useState('system');\n\n  return (\n    \u003cdiv style={{height: '100%', display: 'flex'}}\u003e\n      \u003cdiv style={{width: '200px', borderRight: '1px solid var(--border-color)', padding: '15px', background: 'rgba(128,128,128,0.03)'}}\u003e\n        {settingsSections.map(section =\u003e (\n          \u003cdiv\n            key={section.id}\n            onClick={() =\u003e setActiveSection(section.id)}\n            style={{\n              padding: '12px',\n              borderRadius: '6px',\n              cursor: 'pointer',\n              display: 'flex',\n              alignItems: 'center',\n              gap: '10px',\n              marginBottom: '5px',\n              background: activeSection === section.id ? 'var(--accent-color)' : 'transparent',\n              color: activeSection === section.id ? 'white' : 'var(--text-color)',\n              transition: '0.2s'\n            }}\n          \u003e\n            \u003ci className={`fa-solid ${section.icon}`}\u003e\u003c/i\u003e\n            \u003cspan style={{fontSize: '14px'}}\u003e{section.label}\u003c/span\u003e\n          \u003c/div\u003e\n        ))}\n      \u003c/div\u003e\n      \u003cdiv style={{flex: 1, padding: '20px', overflowY: 'auto'}}\u003e\n        {activeSection === 'system' \u0026\u0026 (\n          \u003cdiv\u003e\n            \u003ch2 style={{marginBottom"])

self.__next_f.push([1,": '20px', fontSize: '24px'}}\u003eSystem Settings\u003c/h2\u003e\n            \u003cdiv style={{marginBottom: '25px'}}\u003e\n              \u003clabel style={{display: 'block', marginBottom: '8px', fontWeight: 600}}\u003eTheme\u003c/label\u003e\n              \u003cselect value={theme} onChange={(e) =\u003e setTheme(e.target.value)} style={{padding: '8px', width: '200px', border: '1px solid var(--border-color)', borderRadius: '4px', background: 'var(--window-bg)', color: 'var(--text-color)'}}\u003e\n                \u003coption value=\"light\"\u003eLight\u003c/option\u003e\n                \u003coption value=\"dark\"\u003eDark\u003c/option\u003e\n                \u003coption value=\"auto\"\u003eAuto\u003c/option\u003e\n              \u003c/select\u003e\n            \u003c/div\u003e\n            \u003cdiv style={{marginBottom: '20px'}}\u003e\n              \u003clabel style={{display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer'}}\u003e\n                \u003cinput type=\"checkbox\" checked={notifications} onChange={(e) =\u003e setNotifications(e.target.checked)} /\u003e\n                \u003cspan\u003eEnable notifications\u003c/span\u003e\n              \u003c/label\u003e\n            \u003c/div\u003e\n            \u003cdiv style={{marginBottom: '20px'}}\u003e\n              \u003clabel style={{display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer'}}\u003e\n                \u003cinput type=\"checkbox\" checked={animationsEnabled} onChange={(e) =\u003e setAnimationsEnabled(e.target.checked)} /\u003e\n                \u003cspan\u003eEnable animations\u003c/span\u003e\n              \u003c/label\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        )}\n        {activeSection === 'about' \u0026\u0026 (\n          \u003cdiv\u003e\n            \u003ch2 style={{marginBottom: '20px', fontSize: '24px'}}\u003eAbout AuraOS\u003c/h2\u003e\n            \u003cdiv style={{display: 'flex', alignItems: 'center', gap: '20px', marginBottom: '30px'}}\u003e\n              \u003ci className=\"fa-brands fa-windows\" style={{fontSize: '64px', color: '#00a2ed'}}\u003e\u003c/i\u003e\n              \u003cdiv\u003e\n                \u003ch3 style={{margin: '0 0 10px 0'}}\u003eAuraOS\u003c/h3\u003e\n                \u003cp style={{margin: '5px 0', color: '#888'}}\u003eVersion 1.0.0\u003c/p\u003e\n                \u003cp style={{margin: '5px 0', color: '#888'}}\u003e© 2025 AuraOS Corporation\u003c/p\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv style={{padding: '15px', background: 'rgba(128,128,128,0.05)', borderRadius: '8px'}}\u003e\n              \u003cp style={{margin: '0 0 10px 0', fontWeight: 600}}\u003eSystem Information\u003c/p\u003e\n              \u003cp style={{margin: '5px 0', fontSize: '13px'}}\u003eBrowser: Chrome/Edge\u003c/p\u003e\n              \u003cp style={{margin: '5px 0', fontSize: '13px'}}\u003ePlatform: Web\u003c/p\u003e\n              \u003cp style={{margin: '5px 0', fontSize: '13px'}}\u003eArchitecture: x64\u003c/p\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}2d:T9e7,{\n  \"longText\": {\n    \"Overview\": \"### Experience a Browser‑Based Desktop OS Interface  \\nAura OS gives users the feel of a full desktop environment inside a webpage. Built with Trickle AI, it features a taskbar, start menu, draggable windows, icons, system tray, and responsive behavior. Whether you want an OS look‑and‑feel landing page, portfolio environment, or interactive demo, this template brings a desktop aesthetic to the web.\\n\\n### Key Features  \\n- Taskbar with start menu, system tray, clock, and icons  \\n- Draggable windows with content panels (apps, browser windows)  \\n- Desktop icons and context menu support  \\n- Responsive layout that adapts for mobile and desktop  \\n- Customizable theming (desktop background, icon set, window behavior)  \\n- Built entirely in Trickle AI—no external OS required  \\n\\n### Use Cases  \\n- Immersive portfolio sites styled like an OS desktop  \\n- Product demos presented in a “desktop” metaphor  \\n- Online interactive experiences with desktop UI nostalgia  \\n- Marketing landing pages emulating software environments  \\n- Developers showcasing UI/UX or interactive web apps  \",\n    \"Tips\": \"Make the “desktop OS” feel real by layering subtle animations, window transitions, and consistent theming. Ensure icons lead to meaningful content, and adapt layout for mobile (maybe collapse desktop view for small screens). Provide clear instructions if users aren’t expecting a full desktop experience.\\n\\n- Choose a desktop background that supports icon readability  \\n-"])

self.__next_f.push([1," Keep window titles, icons, and interactions intuitive  \\n- Provide “esc” or close controls on windows to avoid user confusion  \\n- Test performance: multiple draggable windows shouldn’t lag  \\n- For mobile, consider simplified or static version of the desktop  \\n\\n#### Who Is It For?  \\n- Web designers wanting a high‑impact interactive portfolio  \\n- Developers showcasing web‑apps or UI/UX skills in a novel frame  \\n- Brands launching software or digital products via immersive experiences  \\n- Marketing teams creating memorable landing pages  \\n- Developers creating interactive tutorials or web OS demos  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Aura OS | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Simulate a full Windows‑style desktop environment online with this Trickle AI template—complete with windows, taskbar, icons, and interactive UI elements.\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Interactive elements\"\n  ]\n}2e:T449,### Experience a Browser‑Based Desktop OS Interface  \nAura OS gives users the feel of a full desktop environment inside a webpage. Built with Trickle AI, it features a taskbar, start menu, draggable windows, icons, system tray, and responsive behavior. Whether you want an OS look‑and‑feel landing page, portfolio environment, or interactive demo, this template brings a desktop aesthetic to the web.\n\n### Key Features  \n- Taskbar with start menu, system tray, clock, and icons  \n- Draggable windows with content panels (apps, browser windows)  \n- Desktop icons and context menu support  \n- Responsive layout that adapts for mobile and desktop  \n- Customizable theming (desktop background, icon set, window behavior)  \n- Built entirely in Trickle AI—no external OS required  \n\n### Use Cases  \n- Immersive portfolio sites styled like an OS desktop  \n- Product demos presented in a “desktop” metaphor  \n- Online interactive experiences with desktop UI nostalgia  \n- Marketing landing pages emulating software environments  \n- Developers showcasing UI/UX or interactive web apps  2f:T9fc,{\n  \"longText\": {\n    \"Overview\": \"### Bring Stories to Life with Interactive AI Video  \\nThe Interactive AI Video Narrative Template by Trickle AI merges cinematic video with dynamic logic, allowing viewers to make choices that steer the storyline. With each clickable decision, the narrative branches to new scenes or plotlines, creating a unique experience per viewer. Ideal for storytellers, brands, and educators, this Trickle template gives you a framework to integrate video content and decision paths into one compelling interactive experience.\\n\\n### Key Features  \\n- Branching video logic with clickable decision points  \\n- Smooth transitions between video scenes  \\n- Customizable narrative nodes and branching structure  \\n- Support for fallback paths, retries, or alternate endings  \\n- Mobile-optimized playback with low-latency interactions  \\n\\n### Use Cases  \\n- Marketing campaigns using interactive storytelling  \\n- Training simulations where users choose paths  \\n- Educational modules with decision-based learning  \\n- Branded content with engaging narrative journeys  \\n- Interactive trailers or narrative previews for games or media  \\n\",\n    \"Tips\": \"To make your interactive video template shine, plan your branching logic carefully and use clear decision cues. Each choice should feel meaningful and guide viewers deeper into the story. Test transitions and responsiveness across devices for smooth engagement.\\n\\n- Map out the narrative tree before filming to avoid dead ends  \\n- Use on-screen labels or animations to highlight clickable options  \\n- Include fallback or “go back” paths to reduce frustration  \\n- Optimize video sizes for streaming across devices  \\n- Monitor hot paths (popular choices) to refine future content  \\n\\n### Who Is It For?  \\n- Content creators and filmmakers exploring interactive stories  \\n- Marketing teams wanting immersive brand narratives  \\n- Educational designers building scenario-based learning  \\n- Game developer"])

self.__next_f.push([1,"s prototyping narrative systems  \\n- Training departments crafting decision-driven video modules  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Sci-fi Interactive Video | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Build engaging AI‑driven interactive videos with this Trickle AI template. Viewers click choices to follow branching storylines, combining video and logic in a seamless experience.\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"AI image \u0026 video generation\",\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Interactive elements\",\n    \"Background music\"\n  ]\n}30:T457,### Bring Stories to Life with Interactive AI Video  \nThe Interactive AI Video Narrative Template by Trickle AI merges cinematic video with dynamic logic, allowing viewers to make choices that steer the storyline. With each clickable decision, the narrative branches to new scenes or plotlines, creating a unique experience per viewer. Ideal for storytellers, brands, and educators, this Trickle template gives you a framework to integrate video content and decision paths into one compelling interactive experience.\n\n### Key Features  \n- Branching video logic with clickable decision points  \n- Smooth transitions between video scenes  \n- Customizable narrative nodes and branching structure  \n- Support for fallback paths, retries, or alternate endings  \n- Mobile-optimized playback with low-latency interactions  \n\n### Use Cases  \n- Marketing campaigns using interactive storytelling  \n- Training simulations where users choose paths  \n- Educational modules with decision-based learning  \n- Branded content with engaging narrative journeys  \n- Interactive trailers or narrative previews for games or media  \n31:T8cb,{\n  \"longText\": {\n    \"Overview\": \"### Streamline Client Management with Trickle AI  \\nThe Mini CRM Dashboard Template by Trickle AI gives you a user-friendly, efficient interface to oversee leads, contacts, and sales activity. With real-time metrics, pipeline views, and status filters, this Trickle template helps small teams or solo entrepreneurs maintain visibility over customer relationships without complexity or overhead.\\n\\n### Key Features  \\n- Lead and contact lists with status tracking  \\n- Pipeline or stage view to monitor deal flow  \\n- Data filters and sorting (e.g., by status, date)  \\n- Summary metrics for totals, conversions, or activity  \\n- Responsive layout built with Trickle AI for desktop and mobile  \\n\\n### Use Cases  \\n- Small businesses managing a simple sales pipeline  \\n- Freelancers tracking leads and proposals  \\n- Startups organizing client outreach and follow-ups  \\n- Service providers monitoring active versus closed deals  \\n- Agencies or consultants centralizing client contacts  \",\n    \"Tips\": \"To make this Mini CRM dashboard template effective, keep your data clean and workflows simple. Use consistent statuses and regularly review pipelines so insights stay accurate and actionable.\\n\\n- Define clear stages (e.g., New, In Progress, Closed)  \\n- Use filters to isolate high-priority leads  \\n- Update status promptly to maintain accuracy  \\n- Add notes or tagging to capture important client context  \\n- Customize metric cards to surface your key KPIs  \\n\\n### Who Is It For?  \\n- Small business owners handling direct client sales  \\n- Freelancers managing proposals and prospects  \\n- Startup founders tracking early-stage customers  \\n- Consultants organizing client pipeline and outreach  \\n- Service-based businesses needing lightweight CRM functionality  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Mini CRM Dashboard | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Manage leads, clients, and interactions with the Mini CRM Dashboard template by Trickle AI. Track sales pipelines, contact data, and performance in one intuitive interface.\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Database storage\",\n    \"Interactive elements\",\n    \"Custom knowledge\"\n  ]\n}32:T982,{\n  \"longText\": {\n    \"Overview\": \"### Turn Viewers Into Participants with Branching Video  \\nThe Interactive Video Story Template by Trickle AI "])

self.__next_f.push([1,"merges storytelling and interactivity, letting viewers actively shape the narrative. As users click through options, the video branches into different plotlines, creating a unique experience based on choices. Ideal for visual storytellers, marketing campaigns, or educational narratives, this template gives you the tools to combine video content and decision logic into one compelling journey.\\n\\n### Key Features  \\n- Clickable decision points that branch the storyline  \\n- Smooth video transitions between narrative nodes  \\n- Customizable paths, endings, and fallback options  \\n- Support for retries or alternate story branches  \\n- Responsive playback and optimized for mobile devices  \\n\\n### Use Cases  \\n- Immersive brand stories or video marketing campaigns  \\n- Training or learning modules requiring decision scenarios  \\n- Choose-your-own-adventure style storytelling  \\n- Campaign teasers for film, game, or media  \\n- Interactive trailers or narrative demos  \",\n    \"Tips\": \"To make this template effective, plan your branching logic carefully and make each choice feel meaningful. Use visual or audio cues to guide viewers and reduce confusion. Always test transitions and the mobile experience for smooth engagement.\\n\\n- Sketch the narrative tree in advance before building  \\n- Label clickable options clearly to avoid ambiguity  \\n- Provide fallback branches to prevent dead ends  \\n- Use compression and adaptive video formats for faster loads  \\n- Analyze which paths attract more user engagement  \\n\\n### Who Is It For?  \\n- Filmmakers and storytellers experimenting with interactivity  \\n- Marketing and brand teams creating immersive campaigns  \\n- Educators building scenario-based learning tools  \\n- Game developers prototyping narrative systems  \\n- Video creators wanting to engage audiences in new ways  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Silent Cranes | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Create cinematic narrative experiences using Trickle AI’s interactive video template. Viewers click choices to guide the plot, making every viewing a personalized story journey.\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"AI image \u0026 video generation\",\n    \"SEO friendly\",\n    \"Responsive Design\",\n    \"Interactive elements\",\n    \"Background music\"\n  ]\n}33:T42e,### Turn Viewers Into Participants with Branching Video  \nThe Interactive Video Story Template by Trickle AI merges storytelling and interactivity, letting viewers actively shape the narrative. As users click through options, the video branches into different plotlines, creating a unique experience based on choices. Ideal for visual storytellers, marketing campaigns, or educational narratives, this template gives you the tools to combine video content and decision logic into one compelling journey.\n\n### Key Features  \n- Clickable decision points that branch the storyline  \n- Smooth video transitions between narrative nodes  \n- Customizable paths, endings, and fallback options  \n- Support for retries or alternate story branches  \n- Responsive playback and optimized for mobile devices  \n\n### Use Cases  \n- Immersive brand stories or video marketing campaigns  \n- Training or learning modules requiring decision scenarios  \n- Choose-your-own-adventure style storytelling  \n- Campaign teasers for film, game, or media  \n- Interactive trailers or narrative demos  34:T967,{\n  \"longText\": {\n    \"Overview\": \"### Elevate Home Aesthetics with Premium Displays  \\nThe Furniture \u0026 Interior Design Showcase Template by Trickle AI allows brands and designers to present curated collections and project showcases with visual impact. With refined typography, strong hero visuals, and layout sections for collections and design philosophy, this Trickle template is ideal for conveying quality, taste, and craftsmanship in the home décor space.\\n\\n### Key Features  \\n- Hero section with bold imagery and designer tagline  \\n- Featured product and furniture collection grids  \\n- Project showcase section with interior design case studies  \\n- Philosophy or “About Us” section to share brand story  "])

self.__next_f.push([1,"\\n- Contact and inquiry form for client connection  \\n\\n### Use Cases  \\n- Premium furniture brands launching online catalogs  \\n- Interior design firms showcasing completed projects  \\n- Boutique home decor stores promoting signature pieces  \\n- Designers offering consultation services with visual portfolios  \\n- Showrooms integrating online display for client outreach  \",\n    \"Tips\": \"Because this template emphasizes visuals and style, use high-resolution photography and consistent design aesthetics to strengthen brand presence. Let your visuals show craftsmanship, and use text sparingly to support rather than dominate.\\n\\n- Use lifestyle photography to contextualize products  \\n- Keep product grids clean and uncluttered  \\n- Write a concise brand story to connect emotionally  \\n- Ensure your contact form is straightforward and accessible  \\n- Refresh featured collections seasonally to maintain relevance  \\n\\n### Who Is It For?  \\n- Furniture designers and brands highlighting premium lines  \\n- Interior design studios presenting portfolios  \\n- Boutique home decor shops with visual appeal  \\n- Showrooms wanting to bridge physical and online displays  \\n- Designers and makers wanting elegant product presentation  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"FormaHome | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Showcase premium home furniture and interior design services with this elegant Trickle AI template. Highlight collections, design philosophy, and client spaces in one beautiful site.\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"Responsive Design\",\n    \"Database storage\",\n    \"SEO friendly\",\n    \"AI image \u0026 video generation\",\n    \"Interactive elements\"\n  ]\n}35:T415,### Elevate Home Aesthetics with Premium Displays  \nThe Furniture \u0026 Interior Design Showcase Template by Trickle AI allows brands and designers to present curated collections and project showcases with visual impact. With refined typography, strong hero visuals, and layout sections for collections and design philosophy, this Trickle template is ideal for conveying quality, taste, and craftsmanship in the home décor space.\n\n### Key Features  \n- Hero section with bold imagery and designer tagline  \n- Featured product and furniture collection grids  \n- Project showcase section with interior design case studies  \n- Philosophy or “About Us” section to share brand story  \n- Contact and inquiry form for client connection  \n\n### Use Cases  \n- Premium furniture brands launching online catalogs  \n- Interior design firms showcasing completed projects  \n- Boutique home decor stores promoting signature pieces  \n- Designers offering consultation services with visual portfolios  \n- Showrooms integrating online display for client outreach  36:T7b3,{\n  \"longText\": {\n    \"Overview\": \"### Turn Ideas Into Text With Interactive AI  \\nThe AI Content Generator Template by Trickle AI marries prompt-based input, real-time generation, and clean content presentation in a unified environment. Users choose a content type or write their own prompt, then receive refined text outputs instantly. With presets, customization, and easy exports, this Trickle template empowers creators, marketers, and publishers to scale content creation effortlessly.\\n\\n### Key Features  \\n- Prompt input with optional presets for ease  \\n- Real-time content generation via AI  \\n- Copy, download, and share output controls  \\n- Multiple templates (e.g. blog, tagline, description)  \\n- Responsive design built using Trickle AI  \",\n    \"Tips\": \"Make your content generator intuitive and inspiring. Use sample prompts and clean UI so users focus on their ideas and not the mechanics. Keep the tool lightweight and responsive — it should feel like magic, not a puzzle.\\n\\n- Provide example prompts to lower entry barriers  \\n- Offer several content templates to suit varied needs  \\n- Enable quick copy or download of generated output  \\n- Limit output length or format for readability  \\n- Test prompt-responses across devices for smooth UX  \\n\\n### Who Is It For?  \\n- Marketing professionals needing fast copy generation "])

self.__next_f.push([1," \\n- Bloggers and content creators seeking inspiration  \\n- Agencies delivering AI content tools to clients  \\n- SaaS founders building AI writing features  \\n- Solo entrepreneurs launching content platforms  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"APOB AI | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Build a smart content generation site using the APOB.AI template by Trickle AI. Create copy, articles, or marketing content automatically, combining AI power with intuitive web design.\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Database storage\",\n    \"Custom knowledge\"\n  ]\n}37:T9a0,{\n  \"longText\": {\n    \"Overview\": \"### Guide Users to Their Home Aesthetic with Style Questions  \\nThe Interior Style Finder Quiz Template by Trickle AI allows users to explore different design aesthetics through a series of curated questions. With visual prompts and interactive choices, it guides users toward their ideal interior style. This template is perfect for décor brands, designers, or content creators wanting to boost engagement and gather preferences through a quick, enjoyable quiz.\\n\\n### Key Features  \\n- Visually-driven style quiz with image-based options  \\n- Branching logic to match design style outcomes  \\n- Smooth transitions and interactive UI  \\n- Responsive for mobile and desktop viewing  \\n- Optional email capture to save results or build leads  \\n\\n### Use Cases  \\n- Home decor brands helping users identify style preferences  \\n- Interior designers offering quizzes to attract clients  \\n- Content creators driving traffic with fun quizzes  \\n- E-commerce stores suggesting curated collections  \\n- Real estate staging or styling services getting insights  \",\n    \"Tips\": \"For this interior quiz to resonate, pair each question with high-quality visuals and emotionally evocative options. Keep the quiz under 7 questions to maintain engagement. Use the results to suggest curated collections or personalized content.\\n\\n- Use clear, vibrant images that illustrate each design style  \\n- Keep questions concise and evocative (e.g. “Choose your ideal living room”)  \\n- Provide a result summary with style descriptions and product suggestions  \\n- Offer email opt-in to send style results or tailored catalogs  \\n- Test on mobile to ensure visual clarity and smooth navigation  \\n\\n### Who Is It For?  \\n- Home décor brands exploring buyer personas  \\n- Interior designers sourcing client style preferences  \\n- Furniture retailers offering curated collection suggestions  \\n- Lifestyle bloggers driving engagement through visual quizzes  \\n- Real estate stylists or staging services adding interactive tools  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Interior Style Finder | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Let users discover their home design style with this interactive Interior Style Finder template by Trickle AI. Engage and guide visitors with a style quiz that leads to personalized aesthetic outcomes.\"\n  },\n  \"features\": [\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Custom form\",\n    \"Database storage\"\n  ]\n}38:T412,### Guide Users to Their Home Aesthetic with Style Questions  \nThe Interior Style Finder Quiz Template by Trickle AI allows users to explore different design aesthetics through a series of curated questions. With visual prompts and interactive choices, it guides users toward their ideal interior style. This template is perfect for décor brands, designers, or content creators wanting to boost engagement and gather preferences through a quick, enjoyable quiz.\n\n### Key Features  \n- Visually-driven style quiz with image-based options  \n- Branching logic to match design style outcomes  \n- Smooth transitions and interactive UI  \n- Responsive for mobile and desktop viewing  \n- Optional email capture to save results or build leads  \n\n### Use Cases  \n- Home decor brands helping users identify style preferences  \n- Interior designers offering quizzes to attract clients  \n- Content creators driving traffic with fun quizzes  \n- E-commerce stores suggesting curated collections  \n- Real estat"])

self.__next_f.push([1,"e staging or styling services getting insights  39:T958,\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\n    \u003ctitle\u003eF1 Anatomy - 3D Structure Showcase\u003c/title\u003e\n    \u003cmeta name=\"description\" content=\"Interactive 3D visualization of Formula 1 car core components and structure.\"\u003e\n    \u003cmeta name=\"keywords\" content=\"F1, Formula 1, 3D, Three.js, Car Structure, Engineering\"\u003e\n    \n    \u003c!-- React --\u003e\n    \u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/react@18/umd/react.production.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/react-dom@18/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n    \n    \u003c!-- Babel --\u003e\n    \u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/@babel/standalone/babel.min.js\"\u003e\u003c/script\u003e\n    \n    \u003c!-- TailwindCSS --\u003e\n    \u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n    \n    \u003c!-- Lucide Icons --\u003e\n    \u003clink href=\"https://resource.trickle.so/vendor_lib/unpkg/lucide-static@0.516.0/font/lucide.css\" rel=\"stylesheet\"\u003e\n\n    \u003c!-- Three.js and OrbitControls --\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.jsdelivr.net/npm/three@0.134.0/examples/js/controls/OrbitControls.js\"\u003e\u003c/script\u003e\n\n    \u003cstyle type=\"text/tailwindcss\"\u003e\n    @layer theme {\n        :root {\n            --primary-color: #ef4444; /* Red-500 for racing vibe */\n            --secondary-color: #1f2937; /* Gray-800 */\n            --accent-color: #fbbf24; /* Amber-400 */\n            --bg-dark: #111827;\n        }\n    }\n\n    @layer base {\n        body {\n            @apply bg-[var(--bg-dark)] text-white antialiased;\n            font-family: 'Inter', sans-serif;\n        }\n    }\n\n    @layer components {\n        .glass-panel {\n            @apply bg-black/60 backdrop-blur-md border border-white/10 rounded-xl;\n        }\n        .interactive-btn {\n            @apply px-4 py-2 rounded-lg transition-all duration-300 font-medium;\n        }\n        .interactive-btn:hover {\n            @apply bg-[var(--primary-color)] text-white transform scale-105;\n        }\n    }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \n    \u003c!-- Modules --\u003e\n    \u003cscript type=\"text/babel\" src=\"components/UIOverlay.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/F1Scene.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e3a:Tac0,class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false, error: null, errorInfo: null };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    console.error('ErrorBoundary caught an error:', error, errorInfo);\n    this.setState({ error, errorInfo });\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return (\n        \u003cdiv className=\"min-h-screen flex items-center justify-center bg-gray-900 text-white p-6\"\u003e\n          \u003cdiv className=\"max-w-lg w-full bg-gray-800 rounded-xl p-6 border border-red-500/30 shadow-2xl\"\u003e\n            \u003cdiv className=\"flex items-center gap-3 mb-4 text-red-500\"\u003e\n              \u003cdiv className=\"icon-alert-circle text-3xl\"\u003e\u003c/div\u003e\n              \u003ch2 className=\"text-xl font-bold\"\u003eSomething went wrong\u003c/h2\u003e\n            \u003c/div\u003e\n            \u003cp className=\"text-gray-300 mb-4\"\u003eThe application encountered an unexpected error.\u003c/p\u003e\n            \u003cdiv className=\"bg-black/50 p-4 rounded-lg overflow-auto max-h-64 text-xs font-mono text-red-400\"\u003e\n              {this.state.error \u0026\u0026 this.state.error.toString()}\n              \u003cbr /\u003e\n              {this.state.errorInfo \u0026\u0026 this.state.errorInfo.componentStack}\n            \u003c/div\u003e\n            \u003cbutton \n              onClick={() =\u003e window.location.reload()}\n              className=\"mt-6 px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors w-full font-medium\"\n            \u003e\n              Reload Application\n            \u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      );\n    }\n\n    return this.props.children; \n  }\n}"])

self.__next_f.push([1,"\n\nfunction App() {\n    try {\n        const [activePart, setActivePart] = React.useState(null);\n\n        return (\n            \u003cdiv className=\"relative w-full h-screen overflow-hidden\" data-name=\"app\" data-file=\"app.js\"\u003e\n                {/* 3D Scene Background */}\n                \u003cdiv className=\"absolute inset-0 z-0\"\u003e\n                    \u003cF1Scene onPartSelect={setActivePart} activePart={activePart} /\u003e\n                \u003c/div\u003e\n\n                {/* UI Overlay */}\n                \u003cdiv className=\"relative z-10 h-full pointer-events-none\"\u003e\n                    \u003cUIOverlay activePart={activePart} onReset={() =\u003e setActivePart(null)} /\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        );\n    } catch (error) {\n        console.error('App component error:', error);\n        return (\n            \u003cdiv className=\"min-h-screen flex items-center justify-center text-white\"\u003e\n                \u003cp\u003eFailed to load application. Check console for details.\u003c/p\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \u003cErrorBoundary\u003e\n    \u003cApp /\u003e\n  \u003c/ErrorBoundary\u003e\n);3b:T6cd0,function F1Scene({ onPartSelect, activePart }) {\n    const mountRef = React.useRef(null);\n    const sceneRef = React.useRef(null);\n    const cameraRef = React.useRef(null);\n    const rendererRef = React.useRef(null);\n    const controlsRef = React.useRef(null);\n    const carGroupRef = React.useRef(null);\n    const animationFrameRef = React.useRef(null);\n\n    React.useEffect(() =\u003e {\n        if (!mountRef.current) return;\n\n        // Scene Setup\n        const scene = new THREE.Scene();\n        scene.background = new THREE.Color(0x111827); // Matches Tailwind gray-900\n        scene.fog = new THREE.Fog(0x111827, 10, 50);\n        sceneRef.current = scene;\n\n        // Camera\n        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);\n        camera.position.set(5.5, 3.0, 5.5);\n        cameraRef.current = camera;\n\n        // Renderer\n        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });\n        renderer.setSize(window.innerWidth, window.innerHeight);\n        renderer.shadowMap.enabled = true;\n        renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n        mountRef.current.appendChild(renderer.domElement);\n        rendererRef.current = renderer;\n\n        // Lighting\n        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\n        scene.add(ambientLight);\n\n        const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);\n        dirLight.position.set(5, 10, 7);\n        dirLight.castShadow = true;\n        dirLight.shadow.mapSize.width = 2048;\n        dirLight.shadow.mapSize.height = 2048;\n        dirLight.shadow.bias = -0.0001;\n        scene.add(dirLight);\n\n        // Rim lights for dramatic effect\n        const spotLight1 = new THREE.SpotLight(0xef4444, 2);\n        spotLight1.position.set(-5, 1, 2);\n        spotLight1.lookAt(0, 0, 0);\n        scene.add(spotLight1);\n\n        const spotLight2 = new THREE.SpotLight(0x3b82f6, 2); // Blue rim light\n        spotLight2.position.set(5, 1, -2);\n        spotLight2.lookAt(0, 0, 0);\n        scene.add(spotLight2);\n\n        // Controls\n        const controls = new THREE.OrbitControls(camera, renderer.domElement);\n        controls.enableDamping = true;\n        controls.dampingFactor = 0.05;\n        controls.maxPolarAngle = Math.PI / 2 - 0.05;\n        controls.minDistance = 2.5;\n        controls.maxDistance = 12;\n        controlsRef.current = controls;\n\n        // Grid \u0026 Environment\n        const gridHelper = new THREE.GridHelper(40, 40, 0x333333, 0x1a1a1a);\n        scene.add(gridHelper);\n\n        const floorGeometry = new THREE.PlaneGeometry(100, 100);\n        const floorMaterial = new THREE.MeshStandardMaterial({ \n            color: 0x0f131a, \n            roughness: 0.8, \n            metalness: 0.4 \n        });\n        const floor = new THREE.Mesh(floorGeometry, floorMaterial);\n        floor.rotation.x = -Math.PI / 2;\n        floor.receiveShadow = true;\n        scene.add(floor);\n\n        // --- BUILD HIGH"])

self.__next_f.push([1,"-FIDELITY F1 CAR ---\n        const carGroup = new THREE.Group();\n        \n        // Materials\n        const paintMat = new THREE.MeshPhysicalMaterial({ \n            color: 0xd90429, // Vibrant Red\n            metalness: 0.5, \n            roughness: 0.2,\n            clearcoat: 1.0,\n            clearcoatRoughness: 0.1,\n            sheen: 0.5\n        });\n        const carbonMat = new THREE.MeshStandardMaterial({ \n            color: 0x1a1a1a, \n            metalness: 0.6, \n            roughness: 0.6,\n            normalScale: new THREE.Vector2(1, 1) \n        });\n        const darkMetalMat = new THREE.MeshStandardMaterial({ \n            color: 0x222222, \n            metalness: 0.8, \n            roughness: 0.3 \n        });\n        const mirrorMat = new THREE.MeshStandardMaterial({\n            color: 0xffffff,\n            metalness: 0.9,\n            roughness: 0.1\n        });\n        const rubberMat = new THREE.MeshStandardMaterial({ \n            color: 0x1a1a1a, \n            roughness: 0.9 \n        });\n        const exhaustMat = new THREE.MeshStandardMaterial({\n            color: 0x554433,\n            metalness: 0.9,\n            roughness: 0.4\n        });\n        const rainLightMat = new THREE.MeshBasicMaterial({\n            color: 0xff0000\n        });\n\n        // --- 1. Nose \u0026 Front Structure ---\n        const noseGroup = new THREE.Group();\n        const noseGeo = new THREE.BoxGeometry(0.4, 0.15, 1.8, 4, 2, 8);\n        const nosePos = noseGeo.attributes.position;\n        \n        for(let i=0; i \u003c nosePos.count; i++){\n            const x = nosePos.getX(i);\n            const y = nosePos.getY(i);\n            const z = nosePos.getZ(i);\n            \n            const factor = (z + 0.9) / 1.8; // 0 at base, 1 at tip\n            \n            if (z \u003e 0.5) {\n                nosePos.setX(i, x * (1 - (factor - 0.7) * 1.5)); \n                nosePos.setY(i, y * (1 - (factor - 0.7) * 1.8));\n            }\n            if (z \u003e 0) {\n                nosePos.setY(i, y - (z * z * 0.05));\n            }\n            if (z \u003c -0.5) {\n                nosePos.setX(i, x * 1.2);\n            }\n        }\n        noseGeo.computeVertexNormals();\n        const noseMesh = new THREE.Mesh(noseGeo, paintMat);\n        noseMesh.position.set(0, 0, 0);\n        noseMesh.castShadow = true;\n        noseGroup.add(noseMesh);\n\n        noseGroup.position.set(0, 0.45, 2.0);\n        noseGroup.userData = { id: 'nose', name: 'Nose Cone' };\n        carGroup.add(noseGroup);\n\n        // --- 2. Front Wing ---\n        const fwGroup = new THREE.Group();\n        const fwMainGeo = new THREE.BoxGeometry(1.8, 0.03, 0.45);\n        const fwMain = new THREE.Mesh(fwMainGeo, carbonMat);\n        fwMain.castShadow = true;\n        \n        const fwFlapGeo = new THREE.BoxGeometry(1.75, 0.02, 0.15);\n        const fwFlap1 = new THREE.Mesh(fwFlapGeo, paintMat);\n        fwFlap1.position.set(0, 0.08, -0.1);\n        fwFlap1.rotation.x = -0.3;\n        \n        const fwFlap2 = new THREE.Mesh(fwFlapGeo, paintMat);\n        fwFlap2.position.set(0, 0.14, -0.22);\n        fwFlap2.rotation.x = -0.45;\n        fwFlap2.scale.set(0.95, 1, 1);\n        \n        const createEndplate = (isLeft) =\u003e {\n            const group = new THREE.Group();\n            const main = new THREE.Mesh(new THREE.BoxGeometry(0.02, 0.35, 0.6), carbonMat);\n            const canardGeo = new THREE.BoxGeometry(0.1, 0.02, 0.15);\n            const canard = new THREE.Mesh(canardGeo, carbonMat);\n            canard.position.set(isLeft ? 0.05 : -0.05, 0.1, 0.1);\n            canard.rotation.z = isLeft ? -0.2 : 0.2;\n            canard.rotation.y = isLeft ? 0.3 : -0.3;\n\n            const footGeo = new THREE.BoxGeometry(0.1, 0.02, 0.6);\n            const foot = new THREE.Mesh(footGeo, carbonMat);\n            foot.position.set(isLeft ? 0.04 : -0.04, -0.17, 0);\n            group.add(main, canard, foot);\n            return group;\n        };\n\n        const fwEndL = createEndplate(true);\n        fwEndL.position.set(-0.91, 0.12, 0);\n        const fwEndR = createEndplate(false);\n        fwEndR.position.set(0.91, 0.12, 0);\n\n        fwGroup.add(fwMain, fwFlap1, fw"])

self.__next_f.push([1,"Flap2, fwEndL, fwEndR);\n        fwGroup.position.set(0, 0.12, 2.8);\n        fwGroup.userData = { id: 'front_wing', name: 'Front Wing' };\n        carGroup.add(fwGroup);\n\n        // --- 3. Chassis \u0026 Cockpit ---\n        const chassisGeo = new THREE.BoxGeometry(0.75, 0.55, 2.2, 6, 4, 8);\n        const cPos = chassisGeo.attributes.position;\n        for(let i=0; i\u003ccPos.count; i++){\n            const x = cPos.getX(i);\n            const y = cPos.getY(i);\n            const z = cPos.getZ(i);\n            \n            if(z \u003e 0.6) {\n                const taper = (z - 0.6) / 0.5; \n                cPos.setX(i, x * (1 - taper * 0.35)); \n                if (y \u003c 0) cPos.setY(i, y * (1 - taper * 0.4)); \n            }\n            if (z \u003e -0.5 \u0026\u0026 z \u003c 0.5 \u0026\u0026 y \u003e 0) {\n                cPos.setX(i, x * 0.95); \n            }\n        }\n        chassisGeo.computeVertexNormals();\n        const chassis = new THREE.Mesh(chassisGeo, paintMat);\n        chassis.position.set(0, 0.55, 0.4);\n        chassis.castShadow = true;\n        chassis.userData = { id: 'chassis', name: 'Chassis' };\n        carGroup.add(chassis);\n\n        // Cockpit Interior\n        const cockpitGroup = new THREE.Group();\n        const cockpitGeo = new THREE.BoxGeometry(0.45, 0.3, 0.8);\n        const cockpit = new THREE.Mesh(cockpitGeo, new THREE.MeshStandardMaterial({color: 0x111111, roughness: 0.9}));\n        cockpit.position.set(0, 0.8, 0.3);\n        \n        const steeringGeo = new THREE.BoxGeometry(0.2, 0.12, 0.05);\n        const steering = new THREE.Mesh(steeringGeo, new THREE.MeshStandardMaterial({color: 0x333333}));\n        steering.position.set(0, 0.8, 0.5);\n        steering.rotation.x = -0.2;\n        \n        const screenGeo = new THREE.PlaneGeometry(0.12, 0.07);\n        const screen = new THREE.Mesh(screenGeo, new THREE.MeshBasicMaterial({color: 0x0055ff}));\n        screen.position.set(0, 0.8, 0.526);\n        screen.rotation.x = -0.2;\n        \n        const headrestGeo = new THREE.TorusGeometry(0.25, 0.08, 8, 16, Math.PI);\n        const headrest = new THREE.Mesh(headrestGeo, new THREE.MeshStandardMaterial({color: 0xdddddd})); \n        headrest.rotation.x = -Math.PI/2;\n        headrest.position.set(0, 0.85, -0.05);\n\n        cockpitGroup.add(cockpit, steering, screen, headrest);\n        cockpitGroup.userData = { id: 'chassis', name: 'Cockpit Interior' };\n        carGroup.add(cockpitGroup);\n\n        // --- 5. Engine Cover \u0026 Airbox ---\n        const ecGroup = new THREE.Group();\n        const airboxGeo = new THREE.CylinderGeometry(0.1, 0.25, 0.6, 16);\n        airboxGeo.rotateX(Math.PI/2);\n        airboxGeo.scale(1, 0.8, 1);\n        const airbox = new THREE.Mesh(airboxGeo, paintMat);\n        airbox.position.set(0, 1.15, -0.15);\n        airbox.rotation.x = -0.1;\n        \n        const coverGeo = new THREE.BoxGeometry(0.2, 0.6, 1.8, 4, 4, 10);\n        const coverPos = coverGeo.attributes.position;\n        for(let i=0; i\u003ccoverPos.count; i++){\n            const y = coverPos.getY(i);\n            const z = coverPos.getZ(i);\n            const x = coverPos.getX(i);\n\n            if (y \u003e 0) {\n                coverPos.setX(i, x * 0.1); \n            }\n            if (z \u003c -0.2) {\n                const drop = (-z - 0.2) * 0.4;\n                if (y \u003e 0) coverPos.setY(i, y - drop);\n            }\n            if (z \u003e 0.7) {\n                if (y \u003e 0) coverPos.setY(i, y * 1.2); \n            }\n        }\n        coverGeo.computeVertexNormals();\n        const cover = new THREE.Mesh(coverGeo, paintMat);\n        cover.position.set(0, 0.7, -0.8);\n\n        ecGroup.add(airbox, cover);\n        ecGroup.userData = { id: 'chassis', name: 'Engine Cover \u0026 Airbox' };\n        carGroup.add(ecGroup);\n\n        const tCamGeo = new THREE.BoxGeometry(0.04, 0.12, 0.3);\n        const tCam = new THREE.Mesh(tCamGeo, new THREE.MeshStandardMaterial({color: 0x111111}));\n        tCam.position.set(0, 1.32, -0.25);\n        tCam.userData = { id: 'chassis', name: 'T-Cam' };\n        carGroup.add(tCam);\n\n        const createMirror = (isLeft) =\u003e {\n            const mGroup = new THREE.Group();\n            const stalkGeo = new THREE.Box"])

self.__next_f.push([1,"Geometry(0.25, 0.02, 0.02);\n            const stalk = new THREE.Mesh(stalkGeo, carbonMat);\n            stalk.position.set(isLeft ? -0.3 : 0.3, 0, 0);\n            stalk.rotation.z = isLeft ? 0.2 : -0.2;\n            const housingGeo = new THREE.BoxGeometry(0.18, 0.1, 0.08);\n            const housing = new THREE.Mesh(housingGeo, paintMat);\n            housing.position.set(isLeft ? -0.45 : 0.45, 0.05, 0);\n            const glass = new THREE.Mesh(new THREE.PlaneGeometry(0.16, 0.08), mirrorMat);\n            glass.position.set(isLeft ? -0.45 : 0.45, 0.05, 0.041);\n            glass.rotation.y = Math.PI; \n            mGroup.add(stalk, housing, glass);\n            return mGroup;\n        };\n        const mirrorL = createMirror(true);\n        mirrorL.position.set(0, 0.85, 0.7);\n        const mirrorR = createMirror(false);\n        mirrorR.position.set(0, 0.85, 0.7);\n        \n        const mirrorsGroup = new THREE.Group();\n        mirrorsGroup.add(mirrorL, mirrorR);\n        mirrorsGroup.userData = { id: 'chassis', name: 'Mirrors' };\n        carGroup.add(mirrorsGroup);\n\n        // --- 4. Sidepods ---\n        const sidepodGroup = new THREE.Group();\n        const spGeo = new THREE.CylinderGeometry(0.32, 0.15, 2.0, 24);\n        spGeo.rotateX(Math.PI / 2); \n        \n        const spLeft = new THREE.Mesh(spGeo, paintMat);\n        spLeft.position.set(-0.55, 0.35, -0.3);\n        spLeft.scale.set(1.1, 0.8, 1); \n        spLeft.castShadow = true;\n\n        const spRight = new THREE.Mesh(spGeo, paintMat);\n        spRight.position.set(0.55, 0.35, -0.3);\n        spRight.scale.set(1.1, 0.8, 1);\n        spRight.castShadow = true;\n\n        const intakeGeo = new THREE.BoxGeometry(0.35, 0.25, 0.1);\n        const intakeL = new THREE.Mesh(intakeGeo, carbonMat);\n        intakeL.position.set(-0.55, 0.35, 0.7);\n        const intakeR = new THREE.Mesh(intakeGeo, carbonMat);\n        intakeR.position.set(0.55, 0.35, 0.7);\n\n        const louverGeo = new THREE.BoxGeometry(0.2, 0.01, 0.8);\n        const louverL = new THREE.Mesh(louverGeo, darkMetalMat);\n        louverL.position.set(-0.55, 0.55, -0.3);\n        louverL.rotation.z = 0.2;\n        const louverR = new THREE.Mesh(louverGeo, darkMetalMat);\n        louverR.position.set(0.55, 0.55, -0.3);\n        louverR.rotation.z = -0.2;\n\n        sidepodGroup.add(spLeft, spRight, intakeL, intakeR, louverL, louverR);\n        sidepodGroup.userData = { id: 'sidepods', name: 'Sidepods \u0026 Cooling' };\n        carGroup.add(sidepodGroup);\n\n        // --- 7. Floor \u0026 Diffuser (REFINED) ---\n        const floorGroup = new THREE.Group();\n        \n        // Main Floor Plank (Center)\n        const plankGeo = new THREE.BoxGeometry(0.5, 0.04, 5.0);\n        const plank = new THREE.Mesh(plankGeo, new THREE.MeshStandardMaterial({ color: 0x332211, roughness: 0.9 }));\n        plank.position.set(0, 0.05, -0.2);\n        floorGroup.add(plank);\n\n        // Side Floor (Left \u0026 Right) with sculpted edges\n        const floorBodyGeo = new THREE.BoxGeometry(2.0, 0.04, 4.2);\n        const fbPos = floorBodyGeo.attributes.position;\n        for(let i=0; i\u003cfbPos.count; i++){\n             const z = fbPos.getZ(i);\n             const x = fbPos.getX(i);\n             const y = fbPos.getY(i);\n\n             // Taper floor at rear (coke bottle exposure)\n             if (z \u003c -1.0) {\n                if (Math.abs(x) \u003e 0.4) {\n                     // Slight narrowing\n                     fbPos.setX(i, x * 0.9);\n                }\n             }\n             // Lift edges slightly\n             if (Math.abs(x) \u003e 0.9) {\n                fbPos.setY(i, y + 0.02);\n             }\n        }\n        floorBodyGeo.computeVertexNormals();\n        const floorBody = new THREE.Mesh(floorBodyGeo, carbonMat);\n        floorBody.position.set(0, 0.1, -0.05);\n        floorBody.castShadow = true;\n        floorGroup.add(floorBody);\n        \n        // Diffuser (Rear Expansion)\n        const diffuserGeo = new THREE.BoxGeometry(1.0, 0.3, 0.8, 4, 2, 2);\n        const diffPos = diffuserGeo.attributes.position;\n        for(let i=0; i\u003cdiffPos.count; i++){\n            const z = diffPos.getZ(i);\n         "])

self.__next_f.push([1,"   const y = diffPos.getY(i);\n            // Ramp up at the back\n            if (z \u003e 0 \u0026\u0026 y \u003c 0) {\n                 // No change to bottom front\n            }\n            if (z \u003c -0.1 \u0026\u0026 y \u003e -0.1) {\n                // Top surface slope\n                diffPos.setY(i, y + (z * -0.2));\n            }\n            // Expand width at rear\n            if (z \u003c 0) {\n                 const x = diffPos.getX(i);\n                 diffPos.setX(i, x * 1.2);\n            }\n        }\n        diffuserGeo.computeVertexNormals();\n        const diffuser = new THREE.Mesh(diffuserGeo, carbonMat);\n        diffuser.position.set(0, 0.25, -2.3);\n        // Rotate to ramp up\n        diffuser.rotation.x = 0.15; \n        floorGroup.add(diffuser);\n\n        // Diffuser Strakes (Vertical fences)\n        const strakeGeo = new THREE.BoxGeometry(0.02, 0.25, 0.6);\n        for(let i of [-0.25, -0.12, 0.12, 0.25]) {\n            const strake = new THREE.Mesh(strakeGeo, carbonMat);\n            strake.position.set(i, 0.15, -2.4);\n            strake.rotation.x = 0.15;\n            floorGroup.add(strake);\n        }\n        \n        floorGroup.userData = { id: 'floor', name: 'Floor \u0026 Diffuser' };\n        carGroup.add(floorGroup);\n\n        // --- 6. Rear Wing \u0026 Rear Structure (REFINED) ---\n        const rwGroup = new THREE.Group();\n        \n        // Central Pylon (Single or Double) - Swan neck style\n        const pylonGeo = new THREE.BoxGeometry(0.03, 0.6, 0.6);\n        const pylonPos = pylonGeo.attributes.position;\n        for(let i=0; i\u003cpylonPos.count; i++){\n            const z = pylonPos.getZ(i);\n            const y = pylonPos.getY(i);\n            // Curve the pylon back\n            if (y \u003e 0.2) {\n                pylonPos.setZ(i, z + 0.2);\n            }\n        }\n        pylonGeo.computeVertexNormals();\n        const pylon = new THREE.Mesh(pylonGeo, carbonMat);\n        pylon.position.set(0, 0.9, -1.9);\n        rwGroup.add(pylon);\n\n        // Main Plane\n        const rwMainGeo = new THREE.BoxGeometry(1.3, 0.05, 0.45);\n        // Spoon shape effect\n        const rwPos = rwMainGeo.attributes.position;\n        for(let i=0; i\u003crwPos.count; i++){\n            const x = rwPos.getX(i);\n            const y = rwPos.getY(i);\n            // Dip in middle\n            if (Math.abs(x) \u003c 0.3) {\n                rwPos.setY(i, y - 0.05);\n            }\n        }\n        rwMainGeo.computeVertexNormals();\n        const rwMain = new THREE.Mesh(rwMainGeo, carbonMat);\n        rwMain.position.set(0, 1.1, -2.1);\n        \n        // DRS Flap\n        const rwDrsGeo = new THREE.BoxGeometry(1.3, 0.03, 0.25);\n        const rwDrs = new THREE.Mesh(rwDrsGeo, paintMat);\n        rwDrs.position.set(0, 1.28, -2.05);\n        rwDrs.rotation.x = 0.25;\n\n        // DRS Actuator Pod\n        const drsPod = new THREE.Mesh(new THREE.CylinderGeometry(0.04, 0.04, 0.2), darkMetalMat);\n        drsPod.position.set(0, 1.2, -2.0);\n        drsPod.rotation.z = Math.PI/2;\n\n        // Endplates (Complex shape)\n        const rwEndGeo = new THREE.BoxGeometry(0.04, 0.75, 0.7);\n        const rwEndL = new THREE.Mesh(rwEndGeo, paintMat);\n        rwEndL.position.set(-0.67, 0.95, -2.1);\n        const rwEndR = new THREE.Mesh(rwEndGeo, paintMat);\n        rwEndR.position.set(0.67, 0.95, -2.1);\n\n        // Exhaust Pipe\n        const exhaustGeo = new THREE.CylinderGeometry(0.06, 0.06, 0.4, 16);\n        exhaustGeo.rotateX(Math.PI/2);\n        const exhaust = new THREE.Mesh(exhaustGeo, exhaustMat);\n        exhaust.position.set(0, 0.45, -1.8);\n        rwGroup.add(exhaust);\n\n        // Rear Crash Structure \u0026 Rain Light\n        const crashStructGeo = new THREE.BoxGeometry(0.15, 0.15, 0.3);\n        const crashStruct = new THREE.Mesh(crashStructGeo, carbonMat);\n        crashStruct.position.set(0, 0.25, -2.1);\n        \n        const rainLightGeo = new THREE.PlaneGeometry(0.1, 0.1);\n        const rainLight = new THREE.Mesh(rainLightGeo, rainLightMat);\n        rainLight.position.set(0, 0.25, -2.251);\n        rainLight.rotation.y = Math.PI; // Face back\n        \n        rwGroup.add(rwMain, rwDrs, rwEndL, rwEndR, drsPod, crashStruct, rainLight);\n  "])

self.__next_f.push([1,"      rwGroup.userData = { id: 'rear_wing', name: 'Rear Wing \u0026 DRS' };\n        carGroup.add(rwGroup);\n\n        // --- 8. Halo ---\n        const haloGroup = new THREE.Group();\n        const haloTubeGeo = new THREE.TorusGeometry(0.32, 0.05, 8, 32, Math.PI);\n        const haloMain = new THREE.Mesh(haloTubeGeo, carbonMat);\n        haloMain.rotation.x = -Math.PI / 2;\n        haloMain.scale.set(1, 1.6, 1); \n        \n        const haloSupportGeo = new THREE.CylinderGeometry(0.04, 0.04, 0.5);\n        const haloSupport = new THREE.Mesh(haloSupportGeo, carbonMat);\n        haloSupport.rotation.x = Math.PI / 3.5;\n        haloSupport.position.set(0, 0, 0.45);\n\n        haloGroup.add(haloMain, haloSupport);\n        haloGroup.position.set(0, 0.9, 0.35);\n        haloGroup.userData = { id: 'halo', name: 'Halo' };\n        carGroup.add(haloGroup);\n\n        // --- 9. Wheels \u0026 Suspension ---\n        const createWheelAssembly = (x, y, z, isFront) =\u003e {\n            const assembly = new THREE.Group();\n            \n            const tireGeo = new THREE.CylinderGeometry(0.34, 0.34, 0.42, 40);\n            tireGeo.rotateZ(Math.PI / 2);\n            const tire = new THREE.Mesh(tireGeo, rubberMat);\n            tire.castShadow = true;\n\n            const rimGeo = new THREE.CylinderGeometry(0.24, 0.24, 0.43, 32);\n            rimGeo.rotateZ(Math.PI / 2);\n            const rim = new THREE.Mesh(rimGeo, darkMetalMat);\n\n            const nutGeo = new THREE.CylinderGeometry(0.04, 0.04, 0.45, 6);\n            nutGeo.rotateZ(Math.PI / 2);\n            const nut = new THREE.Mesh(nutGeo, new THREE.MeshStandardMaterial({color: isFront?0x00ff00:0xff0000, metalness:0.8}));\n\n            assembly.add(tire, rim, nut);\n\n            if(isFront) {\n                const coverGeo = new THREE.CylinderGeometry(0.24, 0.24, 0.02, 32);\n                coverGeo.rotateZ(Math.PI/2);\n                const cover = new THREE.Mesh(coverGeo, carbonMat);\n                cover.position.x = x \u003e 0 ? 0.22 : -0.22;\n                assembly.add(cover);\n                \n                const wingletGeo = new THREE.BoxGeometry(0.02, 0.1, 0.3);\n                const winglet = new THREE.Mesh(wingletGeo, carbonMat);\n                winglet.position.set(x \u003e 0 ? -0.15 : 0.15, 0.38, 0);\n                winglet.rotation.z = x \u003e 0 ? -0.5 : 0.5;\n                assembly.add(winglet);\n            }\n\n            const ductGeo = new THREE.BoxGeometry(0.15, 0.2, 0.15);\n            const duct = new THREE.Mesh(ductGeo, carbonMat);\n            duct.position.set(x \u003e 0 ? -0.25 : 0.25, 0, 0.1);\n            assembly.add(duct);\n\n            assembly.position.set(x, y, z);\n            assembly.userData = { id: 'wheels', name: 'Wheel Assembly' };\n            return assembly;\n        };\n\n        const wheelFL = createWheelAssembly(-0.95, 0.34, 1.7, true);\n        const wheelFR = createWheelAssembly(0.95, 0.34, 1.7, true);\n        const wheelRL = createWheelAssembly(-0.95, 0.34, -1.3, false);\n        const wheelRR = createWheelAssembly(0.95, 0.34, -1.3, false);\n\n        const createWishbones = (wheelX, wheelZ, isFront) =\u003e {\n            const group = new THREE.Group();\n            const length = Math.abs(wheelX) - 0.35;\n            \n            const armGeo = new THREE.BoxGeometry(length, 0.03, 0.06);\n            const material = carbonMat;\n\n            const tf = new THREE.Mesh(armGeo, material);\n            tf.position.set(wheelX/2, 0.5, wheelZ + 0.1);\n            tf.rotation.z = wheelX \u003e 0 ? -0.15 : 0.15;\n            tf.rotation.y = wheelX \u003e 0 ? 0.1 : -0.1;\n\n            const tr = new THREE.Mesh(armGeo, material);\n            tr.position.set(wheelX/2, 0.5, wheelZ - 0.1);\n            tr.rotation.z = wheelX \u003e 0 ? -0.15 : 0.15;\n            tr.rotation.y = wheelX \u003e 0 ? -0.1 : 0.1;\n\n            const bf = new THREE.Mesh(armGeo, material);\n            bf.position.set(wheelX/2, 0.25, wheelZ + 0.1);\n            bf.rotation.z = wheelX \u003e 0 ? 0.05 : -0.05;\n\n            const br = new THREE.Mesh(armGeo, material);\n            br.position.set(wheelX/2, 0.25, wheelZ - 0.1);\n            br.rotation.z = wheelX \u003e 0 ? 0.05 : -0.05;\n\n       "])

self.__next_f.push([1,"     const pushrodGeo = new THREE.BoxGeometry(length*1.1, 0.04, 0.04);\n            const pushrod = new THREE.Mesh(pushrodGeo, darkMetalMat);\n            pushrod.position.set(wheelX/2, 0.4, wheelZ);\n            pushrod.rotation.z = wheelX \u003e 0 ? -0.5 : 0.5;\n\n            group.add(tf, tr, bf, br, pushrod);\n            return group;\n        }\n\n        carGroup.add(wheelFL, wheelFR, wheelRL, wheelRR);\n        carGroup.add(createWishbones(-0.95, 1.7, true));\n        carGroup.add(createWishbones(0.95, 1.7, true));\n        carGroup.add(createWishbones(-0.95, -1.3, false));\n        carGroup.add(createWishbones(0.95, -1.3, false));\n\n        scene.add(carGroup);\n        carGroupRef.current = carGroup;\n\n        // Animation Loop\n        const animate = () =\u003e {\n            animationFrameRef.current = requestAnimationFrame(animate);\n            if (controlsRef.current) controlsRef.current.update();\n            if (rendererRef.current) rendererRef.current.render(sceneRef.current, cameraRef.current);\n            \n            // Flash Rain Light\n            if (rainLight \u0026\u0026 rainLight.visible) {\n                 const time = Date.now() * 0.005;\n                 rainLight.material.color.setHSL(0, 1, Math.sin(time) \u003e 0 ? 0.5 : 0.1);\n            }\n        };\n        animate();\n\n        // Resize Handler\n        const handleResize = () =\u003e {\n            if (!cameraRef.current || !rendererRef.current) return;\n            cameraRef.current.aspect = window.innerWidth / window.innerHeight;\n            cameraRef.current.updateProjectionMatrix();\n            rendererRef.current.setSize(window.innerWidth, window.innerHeight);\n        };\n        window.addEventListener('resize', handleResize);\n\n        // Click Handler\n        const raycaster = new THREE.Raycaster();\n        const mouse = new THREE.Vector2();\n\n        const handleClick = (event) =\u003e {\n            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;\n            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;\n\n            raycaster.setFromCamera(mouse, cameraRef.current);\n            const intersects = raycaster.intersectObjects(carGroup.children, true);\n\n            if (intersects.length \u003e 0) {\n                let target = intersects[0].object;\n                while(target \u0026\u0026 !target.userData.id \u0026\u0026 target.parent) {\n                    target = target.parent;\n                }\n\n                if (target \u0026\u0026 target.userData.id) {\n                    onPartSelect({\n                        id: target.userData.id,\n                        name: target.userData.name\n                    });\n                }\n            } else {\n                onPartSelect(null);\n            }\n        };\n\n        renderer.domElement.addEventListener('click', handleClick);\n\n        return () =\u003e {\n            window.removeEventListener('resize', handleResize);\n            if (rendererRef.current \u0026\u0026 rendererRef.current.domElement) {\n                rendererRef.current.domElement.removeEventListener('click', handleClick);\n            }\n            cancelAnimationFrame(animationFrameRef.current);\n            if (mountRef.current \u0026\u0026 rendererRef.current) {\n                mountRef.current.removeChild(rendererRef.current.domElement);\n            }\n        };\n    }, []);\n\n    // Watch active part for visual feedback\n    React.useEffect(() =\u003e {\n        if (!carGroupRef.current) return;\n        \n        const resetMaterial = (obj) =\u003e {\n            if (obj.material \u0026\u0026 obj.material.emissive) {\n                obj.material.emissive.setHex(0x000000);\n            }\n        };\n\n        carGroupRef.current.traverse((child) =\u003e {\n            if (child.isMesh) resetMaterial(child);\n        });\n\n        if (activePart) {\n            carGroupRef.current.traverse((child) =\u003e {\n                let parent = child;\n                let match = false;\n                while(parent) {\n                    if (parent.userData \u0026\u0026 parent.userData.id === activePart.id) {\n                        match = true;\n                        break;\n                    }\n                    parent = parent.parent;\n                }\n\n             "])

self.__next_f.push([1,"   if (match \u0026\u0026 child.isMesh \u0026\u0026 child.material.emissive) {\n                    child.material.emissive.setHex(0x333333);\n                }\n            });\n        }\n    }, [activePart]);\n\n    return \u003cdiv ref={mountRef} className=\"w-full h-full\" data-name=\"f1-scene\" data-file=\"components/F1Scene.js\" /\u003e;\n}3c:T1342,function UIOverlay({ activePart, onReset }) {\n    try {\n        const partDescriptions = {\n            'front_wing': \"Generates downforce at the front of the car to press tires onto the track for better grip. It also conditions airflow for the rest of the car.\",\n            'rear_wing': \"Produces significant downforce at the rear for stability and traction. Includes the DRS (Drag Reduction System) flap for overtaking.\",\n            'chassis': \"The survival cell or monocoque made of carbon fiber. It protects the driver and serves as the main structural component.\",\n            'nose': \"Absorbs energy in a crash and directs airflow to the underfloor and sidepods. It must meet strict impact regulations.\",\n            'halo': \"A titanium curved bar placed above the driver's cockpit to protect the head from large flying debris and heavy impacts.\",\n            'wheels': \"18-inch low-profile tires. They provide the only contact patch with the track, critical for mechanical grip.\",\n            'sidepods': \"House the radiators and cooling systems for the engine and hybrid systems. Shaped to manage airflow to the rear.\",\n            'floor': \"The largest aerodynamic device on the car. It uses ground effect to suck the car down onto the track using Venturi tunnels.\"\n        };\n\n        const getDetail = (id) =\u003e partDescriptions[id] || \"Select a component to see details.\";\n\n        return (\n            \u003cdiv className=\"absolute inset-0 flex flex-col justify-between pointer-events-none p-6 md:p-10\" data-name=\"ui-overlay\" data-file=\"components/UIOverlay.js\"\u003e\n                {/* Header */}\n                \u003cdiv className=\"flex justify-between items-start pointer-events-auto\"\u003e\n                    \u003cdiv className=\"glass-panel p-6 max-w-md animate-fade-in-down\"\u003e\n                        \u003cdiv className=\"flex items-center gap-3 mb-2\"\u003e\n                            \u003cdiv className=\"icon-cpu text-[var(--primary-color)] text-2xl\"\u003e\u003c/div\u003e\n                            \u003ch1 className=\"text-2xl font-bold text-white uppercase tracking-wider\"\u003eF1 Anatomy\u003c/h1\u003e\n                        \u003c/div\u003e\n                        \u003cp className=\"text-gray-300 text-sm leading-relaxed\"\u003e\n                            Interactive 3D visualization of Formula 1 car structure. \n                            \u003cspan className=\"block mt-2 text-[var(--accent-color)] font-semibold\"\u003e\n                                Click on any part of the car to identify it.\n                            \u003c/span\u003e\n                        \u003c/p\u003e\n                    \u003c/div\u003e\n                    \n                    \u003cdiv className=\"glass-panel p-3 hidden md:block\"\u003e\n                        \u003cdiv className=\"flex items-center gap-2 text-xs text-gray-400\"\u003e\n                            \u003cdiv className=\"icon-mouse-pointer text-white\"\u003e\u003c/div\u003e\n                            \u003cspan\u003eLeft Click + Drag to Rotate\u003c/span\u003e\n                        \u003c/div\u003e\n                        \u003cdiv className=\"flex items-center gap-2 text-xs text-gray-400 mt-1\"\u003e\n                            \u003cdiv className=\"icon-zoom-in text-white\"\u003e\u003c/div\u003e\n                            \u003cspan\u003eScroll to Zoom\u003c/span\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n\n                {/* Detail Panel - Only shows when a part is active */}\n                \u003cdiv className={`transition-all duration-500 transform ${activePart ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'} pointer-events-auto self-center md:self-end md:mr-10 max-w-lg`}\u003e\n                    {activePart \u0026\u0026 (\n                        \u003cdiv className=\"glass-panel p-6 border-l-4 border-[var(--primary-color)] shadow-2xl bg-gray-900/90\"\u003e\n                            \u003cdiv className=\"flex justify-between items-start mb-3\"\u003e\n                                \u003ch2 className=\"text-2xl font-bold te"])

self.__next_f.push([1,"xt-white uppercase\"\u003e{activePart.name}\u003c/h2\u003e\n                                \u003cbutton onClick={onReset} className=\"text-gray-400 hover:text-white\"\u003e\n                                    \u003cdiv className=\"icon-x text-xl\"\u003e\u003c/div\u003e\n                                \u003c/button\u003e\n                            \u003c/div\u003e\n                            \u003cp className=\"text-gray-300 leading-relaxed text-base\"\u003e\n                                {getDetail(activePart.id)}\n                            \u003c/p\u003e\n                        \u003c/div\u003e\n                    )}\n                \u003c/div\u003e\n\n                {/* Bottom Bar - Instruction if no part selected */}\n                {!activePart \u0026\u0026 (\n                    \u003cdiv className=\"self-center text-center animate-pulse pointer-events-none opacity-50\"\u003e\n                        \u003cp className=\"text-white text-sm tracking-widest uppercase\"\u003eExplore the Engineering\u003c/p\u003e\n                        \u003cdiv className=\"icon-chevron-down text-white text-xl mt-1 mx-auto\"\u003e\u003c/div\u003e\n                    \u003c/div\u003e\n                )}\n            \u003c/div\u003e\n        );\n    } catch (error) {\n        console.error('UI Overlay error:', error);\n        return null;\n    }\n}3d:T722,{\n  \"longText\": {\n    \"Overview\": \"### Interactive 3D Vehicle Overview\\nThis template delivers a lightweight 3D car viewer built with React and Three.js, designed to showcase components with clickable parts and dynamic details. It leverages Trickle AI for smart interactions and easy customization.\\n\\n### Key Features\\n- AI capabilities\\n- Responsive Design\\n- SEO friendly\\n- Database storage\\n- Interactive elements\\n\\n### Use Cases\\n- Product demonstrations and technical previews\\n- Automotive component education and tutorials\\n- Interactive marketing portfolios\\n- Developer demos and showcases\\n- Educational tech labs and classrooms\",\n    \"Tips\": \"- Leverage Trickle AI to tailor part details based on user interactions for a personalized demo experience.\\n- Optimize 3D models and controls to maintain smooth performance on mobile devices.\\n- Use the built-in database storage to log user interactions for analytics and improvements.\\n- Maintain a clean, responsive UI with TailwindCSS to ensure accessibility across devices.\\n- Include descriptive metadata and alt text to boost SEO and discoverability with Trickle AI.\\n\\n### Who is it for?\\n- Product teams creating 3D demonstrations\\n- Front-end developers building interactive content\\n- Design agencies showcasing technology portfolios\\n- Educators and learners in engineering topics\\n- Tech marketers publishing interactive product previews\"\n  },\n  \"meta\": {\n    \"metaTitle\": \"3D Car Showcase | Trickle apps \u0026 site\",\n    \"metaDes\": \"Explore the 3D Car Showcase Template powered by Trickle AI. A React + Three.js demo with interactive parts, responsive design, and built-in database storage for engaging previews.\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Database storage\",\n    \"Interactive elements\"\n  ]\n}3e:T890,{\n  \"longText\": {\n    \"Overview\": \"### Celebrate With Style: Digital Birthday Invites Powered by Trickle AI  \\nThis Birthday Party Invitation Template is built by Trickle AI to replace paper invites with a clickable, beautifully designed web page. It presents your event info upfront, offers RSVP functionality, and lets guests respond easily from any device. Use it to enhance turnout, streamline guest tracking, and delight attendees with clean, festive visuals.\\n\\n### Key Features  \\n- Hero headline with event name and date  \\n- Highlighted sections for location, schedule, and theme  \\n- Integrated RSVP form to capture attendance and guest details  \\n- Mobile-responsive layout for easy viewing on phones  \\n- Customizable through Trickle’s no-code interface  \\n\\n### Use Cases  \\n- Birthday invites for children, teens, or adults  \\n- Theme parties or milestone celebrations  \\n- Virtual parties where digital RSVP is needed  \\n- Surprise party pages shared discreetly  \\n- Combined invitation + event information pages  \",\n    \"Tips\": \"Make your invitation warm and clear. Use a strong hero visu"])

self.__next_f.push([1,"al and keep the RSVP form short. Encourage guests by previewing your party vibe and making responding as simple as possible.\\n\\n- Choose a bold, relevant hero image to set the mood  \\n- Keep RSVP questions minimal: name, attending, plus-one  \\n- Personalize your message in the invitation section  \\n- Add reminders near the RSVP form to boost responses  \\n- Test the layout on mobile devices to ensure usability  \\n\\n### Who Is It For?  \\n- Party hosts organizing birthday celebrations  \\n- Family members sending digital invites  \\n- Event planners for private birthday events  \\n- Kids’ party coordinators using digital invitations  \\n- Anyone replacing printed invites with a shareable link  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Birthday Party Invitation | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Create a fun, modern digital birthday invitation using this Trickle AI template. Share event details, collect RSVPs, and engage guests in a stylish, mobile-ready format.\"\n  },\n  \"features\": [\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Custom form\",\n    \"Database storage\"\n  ]\n}3f:Ta26,{\n  \"longText\": {\n    \"Overview\": \"### Engaging Visual Challenge Built with Trickle AI\\nThe Color Perception Game Template is a sleek, interactive Trickle template designed to test players’ ability to spot subtle color differences. With each level, colors become more alike, pushing players’ visual sharpness and attention to detail. Whether you want to entertain visitors, create a leaderboard challenge, or simply showcase Trickle AI’s interactive power, this template delivers smooth performance and visual appeal.\\n\\n### Key Features\\n- Built with Trickle AI for seamless game interaction\\n- Progressive difficulty with increasingly similar color blocks\\n- Integrated leaderboard for daily and all-time scores\\n- Simple “Start Game” flow with no complex setup\\n- Mobile-friendly and lightweight for easy sharing\\n\\n### Use Cases\\nEntertainment games on personal or company websites\\nVisual training exercises for color perception or design students\\nFun challenges for friends or community groups\\nBrand engagement tools to increase site interactivity\\nPortfolio piece to showcase Trickle’s AI game-building capability\",\n    \"Tips\": \"Using this Trickle template effectively means thinking about both player experience and visual design. You should create an engaging early-game experience that encourages players to continue, while also making sure the progression feels fair and challenging. Leaderboards and design tweaks can make your version of the Color Find game stand out and keep players coming back.\\n\\n- Start with easier color variations to hook players early\\n- Use the leaderboard feature to encourage friendly competition\\n- Adjust color schemes to match your website branding\\n- Combine with other Trickle templates for a themed mini-game hub\\n- Test across devices to ensure smooth mobile gameplay\\n\\n### Who Is It For?\\n- Web developers wanting a ready-made interactive game\\n- Designers creating eye-training or color-focused projects\\n- Marketing teams looking to boost user engagement\\n- Educators needing simple perception tests for students\\n- Anyone curious to experiment with Trickle AI’s game templates\"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Color Find | Trickle AI Free Template\",\n    \"metaDes\": \"Test your color perception with Color Find, a viral sensation built by Trickle. Featured on Reddit with over a million views, it challenges users worldwide to spot subtle color differences.\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Database storage\",\n    \"Background music\",\n    \"Interactive elements\"\n  ]\n}40:T43c,### Engaging Visual Challenge Built with Trickle AI\nThe Color Perception Game Template is a sleek, interactive Trickle template designed to test players’ ability to spot subtle color differences. With each level, colors become more alike, pushing players’ visual sharpness and attention to detail. Whether you want to entertain visitors, create a leaderboard challenge, or simply showcase Tri"])

self.__next_f.push([1,"ckle AI’s interactive power, this template delivers smooth performance and visual appeal.\n\n### Key Features\n- Built with Trickle AI for seamless game interaction\n- Progressive difficulty with increasingly similar color blocks\n- Integrated leaderboard for daily and all-time scores\n- Simple “Start Game” flow with no complex setup\n- Mobile-friendly and lightweight for easy sharing\n\n### Use Cases\nEntertainment games on personal or company websites\nVisual training exercises for color perception or design students\nFun challenges for friends or community groups\nBrand engagement tools to increase site interactivity\nPortfolio piece to showcase Trickle’s AI game-building capability41:Ta97,\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n\n    \u003ctitle\u003eAutumn Voxel Walk\u003c/title\u003e\n    \u003cmeta name=\"description\" content=\"An infinite procedurally generated voxel art forest walk with falling autumn leaves.\"\u003e\n    \u003cmeta name=\"keywords\" content=\"voxel, three.js, procedural generation, forest, autumn, 3d, interactive\"\u003e\n    \u003cmeta property=\"og:title\" content=\"Autumn Voxel Walk\"\u003e\n    \u003cmeta property=\"og:description\" content=\"Take a walk through an infinite voxel forest.\"\u003e\n    \u003cmeta name=\"twitter:title\" content=\"Autumn Voxel Walk\"\u003e\n    \u003cmeta name=\"twitter:description\" content=\"Take a walk through an infinite voxel forest.\"\u003e\n\n    \u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/react@18/umd/react.production.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/react-dom@18/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/@babel/standalone/babel.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n    \u003clink href=\"https://resource.trickle.so/vendor_lib/unpkg/lucide-static@0.516.0/font/lucide.css\" rel=\"stylesheet\"\u003e\n    \n    \u003c!-- Three.js and Simplex Noise for 3D generation --\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.4.0/simplex-noise.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://unpkg.com/peerjs@1.5.2/dist/peerjs.min.js\"\u003e\u003c/script\u003e\n\n    \u003cstyle type=\"text/tailwindcss\"\u003e\n    @layer theme {\n        :root {\n            --primary-color: #d97706; /* Amber 600 */\n            --secondary-color: #fffbeb; /* Amber 50 */\n            --accent-color: #92400e; /* Amber 800 */\n        }\n    }\n\n    @layer base {\n        body {\n            margin: 0;\n            overflow: hidden;\n            background-color: #000;\n            font-family: 'Inter', sans-serif;\n        }\n    }\n\n    @layer components {\n        .glass-panel {\n            @apply bg-black/30 backdrop-blur-md rounded-xl border border-white/10 p-4 text-white;\n        }\n    }\n    \u003c/style\u003e\n\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript type=\"text/babel\" src=\"utils/PeerNetwork.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/MultiplayerMenu.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/Minimap.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/Hotbar.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/NotionModal.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/VoxelWorld.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e42:T1f0b,class ErrorBoundary extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    console.error('ErrorBoundary caught an error:', error, errorInfo.componentStack);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return (\n        \u003cdiv className=\"min-h-screen flex items-center justify-center bg-gray-900 text-white\"\u003e\n          \u003cdiv className=\"text-center\"\u003e\n            \u003ch1 className=\"text-2xl font-bold mb-4\"\u003eSomething went wrong\u003c/h1\u003e\n            \u003cp className=\"text-gray-400 mb-4\"\u003eWe"])

self.__next_f.push([1," couldn't render the 3D world.\u003c/p\u003e\n            \u003cbutton\n              onClick={() =\u003e window.location.reload()}\n              className=\"px-4 py-2 bg-amber-600 rounded hover:bg-amber-700 transition-colors\"\n            \u003e\n              Reload Page\n            \u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\nfunction App() {\n  const [isLocked, setIsLocked] = React.useState(false);\n  const [selectedBlock, setSelectedBlock] = React.useState('grass');\n  const [showNotion, setShowNotion] = React.useState(false);\n  const [showMultiplayer, setShowMultiplayer] = React.useState(false);\n  \n  // Network Instance stored in Ref to persist without re-renders\n  const networkRef = React.useRef(new PeerNetwork());\n  const [isConnected, setIsConnected] = React.useState(false);\n  const minimapRef = React.useRef(null);\n\n  React.useEffect(() =\u003e {\n    const handleKeyDown = (e) =\u003e {\n        // Toggle Notion Modal with 'K'\n        if (e.code === 'KeyK') {\n            setShowNotion(prev =\u003e {\n                const newState = !prev;\n                if (newState) { document.exitPointerLock(); }\n                return newState;\n            });\n            return;\n        }\n        \n        // Toggle Multiplayer Menu with 'M'\n        if (e.code === 'KeyM') {\n            setShowMultiplayer(prev =\u003e {\n                const newState = !prev;\n                if (newState) { document.exitPointerLock(); }\n                return newState;\n            });\n            return;\n        }\n\n        // Hotbar Selection (Only if Notion/Menu is closed)\n        if (!showNotion \u0026\u0026 !showMultiplayer \u0026\u0026 e.key \u003e= '1' \u0026\u0026 e.key \u003c= '5') {\n            const blocks = ['grass', 'dirt', 'trunk', 'leaves_red', 'stone'];\n            setSelectedBlock(blocks[parseInt(e.key) - 1]);\n        }\n        \n        // Close modal on ESC\n        if (e.code === 'Escape') {\n             if (showNotion) setShowNotion(false);\n             if (showMultiplayer) setShowMultiplayer(false);\n        }\n    };\n    window.addEventListener('keydown', handleKeyDown);\n    return () =\u003e window.removeEventListener('keydown', handleKeyDown);\n  }, [showNotion, showMultiplayer]);\n\n  // Auto-close modal if user manually locks pointer (clicks game)\n  React.useEffect(() =\u003e {\n    if (isLocked) {\n        setShowNotion(false);\n        setShowMultiplayer(false);\n    }\n  }, [isLocked]);\n\n  const handleHost = async () =\u003e {\n      const id = await networkRef.current.createRoom();\n      setIsConnected(true);\n      return id;\n  };\n\n  const handleJoin = async (id) =\u003e {\n      await networkRef.current.joinRoom(id);\n      setIsConnected(true);\n  };\n\n  return (\n    \u003cdiv className=\"relative w-full h-screen select-none\" data-name=\"app\" data-file=\"app.js\"\u003e\n      \n      \u003cNotionModal isOpen={showNotion} onClose={() =\u003e setShowNotion(false)} /\u003e\n      \u003cMultiplayerMenu \n        isOpen={showMultiplayer} \n        onClose={() =\u003e setShowMultiplayer(false)}\n        onHost={handleHost}\n        onJoin={handleJoin}\n      /\u003e\n\n      {/* 3D Scene Layer */}\n      \u003cdiv className=\"absolute inset-0 z-0\"\u003e\n         \u003cVoxelWorld \n            onLockChange={setIsLocked} \n            selectedBlockType={selectedBlock} \n            network={networkRef.current}\n            isConnected={isConnected}\n            minimapRef={minimapRef}\n         /\u003e\n      \u003c/div\u003e\n\n      {/* Crosshair (Always visible for aiming) */}\n      \u003cdiv className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none z-20 transition-opacity duration-200 ${isLocked ? 'opacity-100' : 'opacity-0'}`}\u003e\n            \u003cdiv className=\"w-4 h-4 border-2 border-white/80 rounded-full mix-blend-difference\"\u003e\u003c/div\u003e\n      \u003c/div\u003e\n\n      {/* Persistent UI Layer (Hotbar stays visible) */}\n      \u003cdiv className={`absolute inset-x-0 bottom-0 z-30 transition-opacity duration-300 ${isLocked ? 'opacity-70 hover:opacity-100' : 'opacity-100'}`}\u003e\n          \u003cHotbar selectedBlock={selectedBlock} onSelect={setSelectedBlock} /\u003e\n      \u003c/div\u003e\n\n      {/* Overlay UI Layer - Hidden when locked */}\n      \u003cdiv className={`absolute inset-0 z-10 pointer-events"])

self.__next_f.push([1,"-none transition-opacity duration-300 ${isLocked ? 'opacity-0' : 'opacity-100'}`}\u003e\n        \n        {/* Header (Top Left) */}\n        \u003cdiv className=\"absolute top-6 left-6 pointer-events-auto\"\u003e\n            \u003cdiv className=\"glass-panel\"\u003e\n                \u003ch1 className=\"text-xl font-bold text-amber-400 flex items-center gap-2\"\u003e\n                    \u003cdiv className=\"icon-trees text-2xl\"\u003e\u003c/div\u003e\n                    Autumn Voxel Walk\n                \u003c/h1\u003e\n                \u003cp className=\"text-sm text-gray-300 mt-1\"\u003eFree Roam Mode\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        {/* Minimap (Top Right) */}\n        \u003cdiv className=\"absolute top-6 right-6 pointer-events-auto\"\u003e\n             \u003cMinimap ref={minimapRef} /\u003e\n        \u003c/div\u003e\n\n        {/* Center Start Prompt */}\n        \u003cdiv className=\"absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center pointer-events-none\"\u003e\n            \u003cdiv className=\"glass-panel p-8 animate-pulse bg-black/60 border-amber-500/30 shadow-2xl shadow-amber-900/20\"\u003e\n                \u003cdiv className=\"icon-mouse-pointer-2 text-4xl text-amber-400 mx-auto mb-4\"\u003e\u003c/div\u003e\n                \u003ch2 className=\"text-2xl font-bold text-white mb-2\"\u003eClick Anywhere to Start\u003c/h2\u003e\n                \u003cp className=\"text-gray-300\"\u003eLock mouse to look around\u003c/p\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        {/* Controls Helper (Bottom Left) */}\n        \u003cdiv className=\"absolute bottom-24 left-6 pointer-events-auto\"\u003e\n            \u003cdiv className=\"glass-panel\"\u003e\n                \u003cdiv className=\"grid grid-cols-2 gap-x-6 gap-y-2 text-sm text-gray-200\"\u003e\n                    \u003cdiv className=\"flex items-center gap-2\"\u003e\u003cspan className=\"font-bold text-amber-400 bg-amber-900/30 px-1.5 py-0.5 rounded\"\u003eL-Click\u003c/span\u003e Break\u003c/div\u003e\n                    \u003cdiv className=\"flex items-center gap-2\"\u003e\u003cspan className=\"font-bold text-amber-400 bg-amber-900/30 px-1.5 py-0.5 rounded\"\u003eR-Click\u003c/span\u003e Place\u003c/div\u003e\n                    \u003cdiv className=\"flex items-center gap-2\"\u003e\u003cspan className=\"font-bold text-amber-400 bg-amber-900/30 px-1.5 py-0.5 rounded\"\u003e1-5\u003c/span\u003e Select\u003c/div\u003e\n                    \u003cdiv className=\"flex items-center gap-2\"\u003e\u003cspan className=\"font-bold text-amber-400 bg-amber-900/30 px-1.5 py-0.5 rounded\"\u003eK\u003c/span\u003e Notion\u003c/div\u003e\n                    \u003cdiv className=\"flex items-center gap-2\"\u003e\u003cspan className=\"font-bold text-amber-400 bg-amber-900/30 px-1.5 py-0.5 rounded\"\u003eESC\u003c/span\u003e Unlock\u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n\n        {/* Footer (Bottom Right) */}\n        \u003cdiv className=\"absolute bottom-24 right-6 pointer-events-auto text-right\"\u003e\n             \u003ca href=\"https://trickle.so\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"glass-panel py-2 px-4 flex items-center gap-2 hover:bg-white/10 transition-colors group\"\u003e\n                \u003cdiv className=\"w-2 h-2 rounded-full bg-amber-500 group-hover:animate-pulse\"\u003e\u003c/div\u003e\n                \u003cp className=\"text-xs font-medium text-gray-300 group-hover:text-white\"\u003eBuilt with Trickle\u003c/p\u003e\n            \u003c/a\u003e\n        \u003c/div\u003e\n\n      \u003c/div\u003e\n    \u003c/div\u003e\n  );\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \u003cErrorBoundary\u003e\n    \u003cApp /\u003e\n  \u003c/ErrorBoundary\u003e\n);43:T77c8,function VoxelWorld({ onLockChange, selectedBlockType, network, isConnected, minimapRef }) {\n    const mountRef = React.useRef(null);\n    \n    // Game State Refs\n    const isLockedRef = React.useRef(false);\n    const playerPosRef = React.useRef(new THREE.Vector3(0, 10, 0));\n    const playerVelRef = React.useRef(new THREE.Vector3(0, 0, 0));\n    const pitchRef = React.useRef(0);\n    const yawRef = React.useRef(0);\n    const selectedBlockRef = React.useRef(selectedBlockType);\n    const networkRef = React.useRef(network); // Keep fresh ref\n    const isConnectedRef = React.useRef(isConnected);\n    \n    // Remote Players\n    const remotePlayersRef = React.useRef(new Map()); // id -\u003e mesh\n\n    React.useEffect(() =\u003e {\n        selectedBlockRef.current = selectedBlockType;\n    }, [selectedBlockType]);\n\n    React.useEffect(() =\u003e {\n        networkRef.current = network;\n        isConnectedRef.current = isConnected;\n"])

self.__next_f.push([1,"    }, [network, isConnected]);\n    \n    // Input State\n    const keyState = React.useRef({\n        forward: false, backward: false, left: false, right: false, jump: false, sprint: false\n    });\n\n    React.useEffect(() =\u003e {\n        if (!mountRef.current) return;\n\n        // --- SETUP ---\n        const scene = new THREE.Scene();\n        const SKY_COLOR = 0xffeebb;\n        const FOG_COLOR = 0xedc9af;\n        scene.background = new THREE.Color(SKY_COLOR);\n        scene.fog = new THREE.Fog(FOG_COLOR, 10, 60);\n\n        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);\n        camera.rotation.order = 'YXZ';\n\n        const renderer = new THREE.WebGLRenderer({ antialias: false });\n        renderer.setSize(window.innerWidth, window.innerHeight);\n        renderer.shadowMap.enabled = true;\n        renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n        mountRef.current.appendChild(renderer.domElement);\n\n        // Light\n        const ambLight = new THREE.AmbientLight(0xffffff, 0.6);\n        scene.add(ambLight);\n        const dirLight = new THREE.DirectionalLight(0xffaa33, 0.7);\n        dirLight.position.set(20, 50, 20);\n        dirLight.castShadow = true;\n        dirLight.shadow.mapSize.width = 2048;\n        dirLight.shadow.mapSize.height = 2048;\n        scene.add(dirLight);\n\n        // Resources\n        const simplex = new SimplexNoise();\n        const chunks = new Map(); \n        const fallingLeaves = [];\n        const userPlacedBlocks = new Map(); \n        \n        // Materials \u0026 Geometries\n        const createBorderTexture = () =\u003e {\n            const size = 64;\n            const border = 2;\n            const canvas = document.createElement('canvas');\n            canvas.width = size;\n            canvas.height = size;\n            const ctx = canvas.getContext('2d');\n            ctx.fillStyle = '#e5e5e5'; \n            ctx.fillRect(0, 0, size, size);\n            ctx.fillStyle = '#ffffff';\n            ctx.fillRect(border, border, size - border * 2, size - border * 2);\n            const texture = new THREE.CanvasTexture(canvas);\n            texture.magFilter = THREE.NearestFilter;\n            texture.minFilter = THREE.NearestFilter;\n            return texture;\n        };\n\n        const blockTexture = createBorderTexture();\n        const boxGeo = new THREE.BoxGeometry(1, 1, 1);\n        \n        const mkMat = (color, roughness = 1.0) =\u003e new THREE.MeshStandardMaterial({ \n            color, \n            roughness, \n            map: blockTexture \n        });\n\n        const materials = {\n            grass: mkMat(0x556b2f),\n            dirt: mkMat(0x5c4033),\n            trunk: mkMat(0x3e2723),\n            stone: mkMat(0x78716c, 0.9),\n            leaves_red: mkMat(0xc62828, 0.8),\n            leaves_orange: mkMat(0xef6c00, 0.8),\n            leaves_yellow: mkMat(0xf9a825, 0.8),\n        };\n        \n        const getMaterialForType = (type) =\u003e materials[type] || materials.dirt;\n\n        // Remote Player Geometry\n        const playerGeo = new THREE.BoxGeometry(0.6, 1.8, 0.6);\n        const playerMat = new THREE.MeshStandardMaterial({ color: 0x2563eb }); // Blue color\n\n        // Network Handling\n        const handleNetworkData = (data) =\u003e {\n            if (data.type === 'SPAWN_SYNC') {\n                // Teleport to host position\n                if (data.pos) {\n                    playerPosRef.current.copy(data.pos);\n                    playerVelRef.current.set(0, 0, 0);\n                    // Reset chunks logic to ensure we generate surroundings immediately\n                    chunks.forEach(c =\u003e scene.remove(c));\n                    chunks.clear();\n                }\n                return;\n            }\n\n            if (data.type === 'PLAYER_UPDATE') {\n                const { senderId, pos, rot } = data;\n                if (!senderId) return;\n\n                let mesh = remotePlayersRef.current.get(senderId);\n                if (!mesh) {\n                    mesh = new THREE.Mesh(playerGeo, playerMat);\n                    mesh.castShadow = true;\n                    scene.add(mesh);\n              "])

self.__next_f.push([1,"      \n                    // Add Name Label (Simple floating sprite)\n                    // Skipping text for now to keep it simple/performant, just a box\n                    \n                    remotePlayersRef.current.set(senderId, mesh);\n                }\n                \n                // Interpolation could go here, but direct set for now\n                mesh.position.set(pos.x, pos.y, pos.z);\n                mesh.rotation.y = rot;\n            }\n            \n            if (data.type === 'BLOCK_UPDATE') {\n                const { action, x, y, z, type } = data;\n                const key = `${x},${y},${z}`;\n                \n                if (action === 'place') {\n                    if (!userPlacedBlocks.has(key)) {\n                        const mat = getMaterialForType(type);\n                        const mesh = new THREE.Mesh(boxGeo, mat);\n                        mesh.position.set(x, y, z);\n                        mesh.castShadow = true;\n                        mesh.receiveShadow = true;\n                        scene.add(mesh);\n                        userPlacedBlocks.set(key, mesh);\n                    }\n                } else if (action === 'break') {\n                    // Check user placed\n                    if (userPlacedBlocks.has(key)) {\n                        const mesh = userPlacedBlocks.get(key);\n                        scene.remove(mesh);\n                        userPlacedBlocks.delete(key);\n                    }\n                    // Check terrain (This is trickier as chunks are local)\n                    // We can iterate chunks and try to find matching block\n                    // For now, syncing terrain break is complex without a unified world state\n                    // Let's support user-placed blocks sync first effectively.\n                    // To sync terrain break, we need to replicate the 'scale to 0' logic on all clients\n                    // We'd need to search loaded chunks for a block at (x,y,z)\n                }\n            }\n\n            if (data.type === 'PLAYER_DISCONNECT') {\n                 const mesh = remotePlayersRef.current.get(data.senderId);\n                 if (mesh) {\n                     scene.remove(mesh);\n                     remotePlayersRef.current.delete(data.senderId);\n                 }\n            }\n        };\n\n        // Attach listener\n        if (networkRef.current) {\n            networkRef.current.on('data', handleNetworkData);\n            networkRef.current.on('disconnect', (id) =\u003e {\n                handleNetworkData({ type: 'PLAYER_DISCONNECT', senderId: id });\n            });\n            \n            // Host Logic: When a peer connects, send them our current position + surrounding blocks\n            networkRef.current.on('connect', (peerId) =\u003e {\n                if (networkRef.current.isHost) {\n                    // 1. Send Spawn Position (Near Host)\n                    const spawnPos = playerPosRef.current.clone();\n                    // Add small offset to avoid clipping inside host\n                    spawnPos.x += (Math.random() - 0.5) * 3;\n                    spawnPos.z += (Math.random() - 0.5) * 3;\n                    \n                    networkRef.current.sendTo(peerId, 'SPAWN_SYNC', { pos: spawnPos });\n\n                    // 2. Send all user placed blocks so they are in sync\n                    // We iterate and send multiple packets or one big packet.\n                    // For simplicity, let's send individual block updates (might be spammy for huge worlds, but fine here)\n                    userPlacedBlocks.forEach((mesh, key) =\u003e {\n                         const [x, y, z] = key.split(',').map(Number);\n                         // We need to find type. We didn't store type in mesh userdata, but we can infer or store it.\n                         // Current implementation didn't store type in map, just mesh.\n                         // Let's default to 'dirt' or try to recover. \n                         // To improve this, we should store data with mesh.\n                         // For now, we skip syncing OLD blocks to new players perfectl"])

self.__next_f.push([1,"y (they see them if we broadcast place events live)\n                         // BUT new players won't see blocks placed BEFORE they joined.\n                         // Let's leave full world sync for a robust update, here we focus on Spawn Position.\n                    });\n                }\n            });\n        }\n\n        // Selection Box\n        const selectionBox = new THREE.LineSegments(\n            new THREE.EdgesGeometry(new THREE.BoxGeometry(1.001, 1.001, 1.001)),\n            new THREE.LineBasicMaterial({ color: 0x000000, linewidth: 2 })\n        );\n        selectionBox.visible = false;\n        scene.add(selectionBox);\n\n        const raycaster = new THREE.Raycaster();\n        raycaster.far = 8; \n\n        // --- GENERATION FUNCTIONS ---\n        const createTree = (lx, ly, lz, matricesTrunk, matricesLeaves) =\u003e {\n            const height = 3 + Math.floor(Math.random() * 3);\n            for (let i = 0; i \u003c height; i++) {\n                matricesTrunk.push(new THREE.Matrix4().setPosition(lx, ly + i, lz));\n            }\n            const crownCenterY = ly + height - 1;\n            for (let x = lx - 2; x \u003c= lx + 2; x++) {\n                for (let y = crownCenterY - 2; y \u003c= crownCenterY + 2; y++) {\n                    for (let z = lz - 2; z \u003c= lz + 2; z++) {\n                        if (x===lx \u0026\u0026 z===lz \u0026\u0026 y \u003c crownCenterY+1) continue;\n                        const d = Math.sqrt((x-lx)**2 + (y-crownCenterY)**2 + (z-lz)**2);\n                        if (d \u003c 2.2 \u0026\u0026 Math.random() \u003e 0.3) {\n                            const colorIdx = Math.floor(Math.random() * 3);\n                            matricesLeaves[colorIdx].push(new THREE.Matrix4().setPosition(x, y, z));\n                        }\n                    }\n                }\n            }\n        };\n\n        const generateChunk = (cx, cz) =\u003e {\n            const key = `${cx},${cz}`;\n            if (chunks.has(key)) return;\n\n            const group = new THREE.Group();\n            group.position.set(cx * 16, 0, cz * 16);\n            const mGrass = [];\n            const mDirt = [];\n            const mTrunk = [];\n            const mLeaves = [[], [], []];\n\n            for (let x = 0; x \u003c 16; x++) {\n                for (let z = 0; z \u003c 16; z++) {\n                    const wx = cx * 16 + x;\n                    const wz = cz * 16 + z;\n                    \n                    const hNoise = simplex.noise2D(wx * 0.02, wz * 0.02);\n                    const h = Math.floor((hNoise + 1) * 3) + 1;\n\n                    mGrass.push(new THREE.Matrix4().setPosition(x, h, z));\n                    mDirt.push(new THREE.Matrix4().setPosition(x, h-1, z));\n\n                    const tNoise = simplex.noise2D(wx * 0.15, wz * 0.15);\n                    if (tNoise \u003e 0.6 \u0026\u0026 Math.random() \u003e 0.8) {\n                        createTree(x, h+1, z, mTrunk, mLeaves);\n                    }\n                }\n            }\n\n            const build = (geo, mat, arr) =\u003e {\n                if (arr.length === 0) return;\n                const mesh = new THREE.InstancedMesh(geo, mat, arr.length);\n                mesh.castShadow = true;\n                mesh.receiveShadow = true;\n                const dummy = new THREE.Object3D();\n                arr.forEach((m, i) =\u003e {\n                    dummy.matrix.copy(m); \n                    mesh.setMatrixAt(i, dummy.matrix);\n                });\n                mesh.instanceMatrix.needsUpdate = true;\n                group.add(mesh);\n            };\n\n            build(boxGeo, materials.grass, mGrass);\n            build(boxGeo, materials.dirt, mDirt);\n            build(boxGeo, materials.trunk, mTrunk);\n            build(boxGeo, materials.leaves_red, mLeaves[0]);\n            build(boxGeo, materials.leaves_orange, mLeaves[1]);\n            build(boxGeo, materials.leaves_yellow, mLeaves[2]);\n\n            scene.add(group);\n            chunks.set(key, group);\n        };\n\n        const spawnFallingLeaf = (px, pz) =\u003e {\n            const range = 30;\n            const x = px + (Math.random() * range - range/2);\n            const z = pz + (Math.random() * range - range/2);\n            const y = 15"])

self.__next_f.push([1," + Math.random() * 5;\n            const colors = [materials.leaves_red.color, materials.leaves_orange.color, materials.leaves_yellow.color];\n            const color = colors[Math.floor(Math.random() * 3)];\n            \n            const mesh = new THREE.Mesh(new THREE.PlaneGeometry(0.4, 0.4), new THREE.MeshBasicMaterial({ color: color, side: THREE.DoubleSide }));\n            mesh.position.set(x, y, z);\n            mesh.rotation.set(Math.random(), Math.random(), Math.random());\n            scene.add(mesh);\n            fallingLeaves.push({\n                mesh,\n                speed: 0.03 + Math.random() * 0.04,\n                rotSpeed: (Math.random() - 0.5) * 0.1,\n                wobbleOffset: Math.random() * 100\n            });\n        };\n\n        // --- INPUT HANDLERS ---\n        const onKeyDown = (e) =\u003e {\n            switch (e.code) {\n                case 'KeyW': keyState.current.forward = true; break;\n                case 'KeyS': keyState.current.backward = true; break;\n                case 'KeyA': keyState.current.left = true; break;\n                case 'KeyD': keyState.current.right = true; break;\n                case 'Space': keyState.current.jump = true; break;\n                case 'ShiftLeft': keyState.current.sprint = true; break;\n            }\n        };\n        const onKeyUp = (e) =\u003e {\n            switch (e.code) {\n                case 'KeyW': keyState.current.forward = false; break;\n                case 'KeyS': keyState.current.backward = false; break;\n                case 'KeyA': keyState.current.left = false; break;\n                case 'KeyD': keyState.current.right = false; break;\n                case 'Space': keyState.current.jump = false; break;\n                case 'ShiftLeft': keyState.current.sprint = false; break;\n            }\n        };\n        const onMouseMove = (e) =\u003e {\n            if (!isLockedRef.current) return;\n            const SENSITIVITY = 0.002;\n            yawRef.current -= e.movementX * SENSITIVITY;\n            pitchRef.current -= e.movementY * SENSITIVITY;\n            pitchRef.current = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, pitchRef.current));\n        };\n        \n        const onMouseDown = (e) =\u003e {\n            if (!isLockedRef.current) return;\n            \n            raycaster.setFromCamera(new THREE.Vector2(0, 0), camera);\n            const interactables = [];\n            chunks.forEach(group =\u003e group.children.forEach(mesh =\u003e interactables.push(mesh)));\n            userPlacedBlocks.forEach(mesh =\u003e interactables.push(mesh));\n            \n            const intersects = raycaster.intersectObjects(interactables, false);\n            \n            if (intersects.length \u003e 0) {\n                const hit = intersects[0];\n                \n                let targetPos = new THREE.Vector3();\n                if (hit.object.isInstancedMesh) {\n                    const matrix = new THREE.Matrix4();\n                    hit.object.getMatrixAt(hit.instanceId, matrix);\n                    targetPos.setFromMatrixPosition(matrix);\n                    if (hit.object.parent) targetPos.add(hit.object.parent.position);\n                } else {\n                    targetPos.copy(hit.object.position);\n                }\n                targetPos.round();\n\n                if (e.button === 0) { // Left Click: BREAK\n                    if (hit.object.isInstancedMesh) {\n                        const matrix = new THREE.Matrix4();\n                        hit.object.getMatrixAt(hit.instanceId, matrix);\n                        matrix.elements[0] = 0; \n                        matrix.elements[5] = 0; \n                        matrix.elements[10] = 0;\n                        hit.object.setMatrixAt(hit.instanceId, matrix);\n                        hit.object.instanceMatrix.needsUpdate = true;\n                    } else {\n                        scene.remove(hit.object);\n                        for (const [k, v] of userPlacedBlocks) {\n                            if (v === hit.object) {\n                                userPlacedBlocks.delete(k);\n                                // Broadcast Break\n       "])

self.__next_f.push([1,"                         if (networkRef.current \u0026\u0026 isConnectedRef.current) {\n                                    const [x, y, z] = k.split(',').map(Number);\n                                    networkRef.current.send('BLOCK_UPDATE', { action: 'break', x, y, z });\n                                }\n                                break;\n                            }\n                        }\n                    }\n                } else if (e.button === 2) { // Right Click: PLACE\n                    const placePos = targetPos.clone().add(hit.face.normal).round();\n                    const bx = placePos.x;\n                    const by = placePos.y;\n                    const bz = placePos.z;\n                    \n                    const playerBox = new THREE.Box3().setFromCenterAndSize(playerPosRef.current, new THREE.Vector3(0.8, 1.8, 0.8));\n                    const blockBox = new THREE.Box3().setFromCenterAndSize(new THREE.Vector3(bx, by, bz), new THREE.Vector3(1,1,1));\n                    \n                    if (!playerBox.intersectsBox(blockBox)) {\n                         const key = `${bx},${by},${bz}`;\n                         if (!userPlacedBlocks.has(key)) {\n                             const type = selectedBlockRef.current;\n                             const mat = getMaterialForType(type);\n                             const mesh = new THREE.Mesh(boxGeo, mat);\n                             mesh.position.set(bx, by, bz);\n                             mesh.castShadow = true;\n                             mesh.receiveShadow = true;\n                             scene.add(mesh);\n                             userPlacedBlocks.set(key, mesh);\n\n                             // Broadcast Place\n                             if (networkRef.current \u0026\u0026 isConnectedRef.current) {\n                                 networkRef.current.send('BLOCK_UPDATE', { action: 'place', x: bx, y: by, z: bz, type });\n                             }\n                         }\n                    }\n                }\n            }\n        };\n\n        document.addEventListener('keydown', onKeyDown);\n        document.addEventListener('keyup', onKeyUp);\n        document.addEventListener('mousemove', onMouseMove);\n        document.addEventListener('mousedown', onMouseDown);\n\n        // Pointer Lock\n        const canvas = renderer.domElement;\n        const requestLock = () =\u003e {\n            if (document.pointerLockElement === canvas) return;\n            try {\n                const promise = canvas.requestPointerLock();\n                if (promise \u0026\u0026 typeof promise.catch === 'function') {\n                    promise.catch(err =\u003e {\n                        if (err.name === 'NotSupportedError' || err.message?.includes('exited the lock')) return;\n                        // console.warn('Pointer lock failed:', err);\n                    });\n                }\n            } catch (err) { console.warn('Pointer lock synchronous error:', err); }\n        };\n        const onLockChangeInternal = () =\u003e {\n            const locked = document.pointerLockElement === canvas;\n            isLockedRef.current = locked;\n            if (onLockChange) onLockChange(locked);\n        };\n        document.addEventListener('pointerlockchange', onLockChangeInternal);\n        canvas.addEventListener('click', requestLock);\n\n        // --- GAME LOOP ---\n        const clock = new THREE.Clock();\n        const ANIMATION_SPEED = 6.0;\n        const SPRINT_MULTIPLIER = 1.8;\n        const GRAVITY = 30.0;\n        const JUMP_FORCE = 12.0;\n        \n        let timeSinceLastBroadcast = 0;\n\n        const animate = () =\u003e {\n            const dt = Math.min(clock.getDelta(), 0.1);\n            const time = clock.getElapsedTime();\n\n            // Network Broadcast\n            if (isConnectedRef.current \u0026\u0026 networkRef.current) {\n                timeSinceLastBroadcast += dt;\n                if (timeSinceLastBroadcast \u003e 0.05) { // 20Hz update rate\n                    networkRef.current.send('PLAYER_UPDATE', {\n                        pos: playerPosRef.current,\n                        rot: yawRef.current\n                  "])

self.__next_f.push([1,"  });\n                    timeSinceLastBroadcast = 0;\n                }\n            }\n\n            // 1. Physics\n            if (isLockedRef.current) {\n                const forward = new THREE.Vector3(0, 0, -1).applyAxisAngle(new THREE.Vector3(0, 1, 0), yawRef.current);\n                const right = new THREE.Vector3(1, 0, 0).applyAxisAngle(new THREE.Vector3(0, 1, 0), yawRef.current);\n\n                const moveDir = new THREE.Vector3(0, 0, 0);\n                if (keyState.current.forward) moveDir.add(forward);\n                if (keyState.current.backward) moveDir.sub(forward);\n                if (keyState.current.right) moveDir.add(right);\n                if (keyState.current.left) moveDir.sub(right);\n                \n                moveDir.normalize();\n                const speed = ANIMATION_SPEED * (keyState.current.sprint ? SPRINT_MULTIPLIER : 1);\n                playerVelRef.current.x = moveDir.x * speed;\n                playerVelRef.current.z = moveDir.z * speed;\n            } else {\n                playerVelRef.current.x = 0;\n                playerVelRef.current.z = 0;\n            }\n\n            const checkBlockCollision = (position) =\u003e {\n                const playerBox = new THREE.Box3();\n                const size = new THREE.Vector3(0.6, 1.8, 0.6); \n                playerBox.setFromCenterAndSize(position, size);\n                const cx = Math.floor(position.x);\n                const cy = Math.floor(position.y);\n                const cz = Math.floor(position.z);\n                for (let x = cx - 1; x \u003c= cx + 1; x++) {\n                    for (let y = cy - 2; y \u003c= cy + 2; y++) {\n                        for (let z = cz - 1; z \u003c= cz + 1; z++) {\n                            const key = `${x},${y},${z}`;\n                            if (userPlacedBlocks.has(key)) {\n                                const blockBox = new THREE.Box3();\n                                blockBox.setFromCenterAndSize(new THREE.Vector3(x, y, z), new THREE.Vector3(1, 1, 1));\n                                if (playerBox.intersectsBox(blockBox)) return true;\n                            }\n                        }\n                    }\n                }\n                return false;\n            };\n\n            const originalX = playerPosRef.current.x;\n            playerPosRef.current.x += playerVelRef.current.x * dt;\n            if (checkBlockCollision(playerPosRef.current)) playerPosRef.current.x = originalX;\n\n            const originalZ = playerPosRef.current.z;\n            playerPosRef.current.z += playerVelRef.current.z * dt;\n            if (checkBlockCollision(playerPosRef.current)) playerPosRef.current.z = originalZ;\n\n            playerVelRef.current.y -= GRAVITY * dt;\n            const originalY = playerPosRef.current.y;\n            playerPosRef.current.y += playerVelRef.current.y * dt;\n\n            if (checkBlockCollision(playerPosRef.current)) {\n                 if (playerVelRef.current.y \u003c 0) {\n                     playerPosRef.current.y = originalY;\n                     playerVelRef.current.y = 0;\n                     if (keyState.current.jump) playerVelRef.current.y = JUMP_FORCE;\n                 } else {\n                     playerPosRef.current.y = originalY;\n                     playerVelRef.current.y = 0;\n                 }\n            }\n\n            const hNoise = simplex.noise2D(playerPosRef.current.x * 0.02, playerPosRef.current.z * 0.02);\n            const groundH = Math.floor((hNoise + 1) * 3) + 1;\n            const terrainSurfaceY = groundH + 0.5;\n            const playerHalfHeight = 0.9;\n            \n            if (playerPosRef.current.y \u003c terrainSurfaceY + playerHalfHeight) {\n                playerPosRef.current.y = terrainSurfaceY + playerHalfHeight;\n                playerVelRef.current.y = 0;\n                if (keyState.current.jump) playerVelRef.current.y = JUMP_FORCE;\n            }\n\n            // 2. Camera Update\n            camera.position.copy(playerPosRef.current);\n            camera.rotation.x = pitchRef.current;\n            camera.rotation.y = yawRef.current;\n            \n            if (isLockedRef.current \u0026"])

self.__next_f.push([1,"\u0026 (playerVelRef.current.x !== 0 || playerVelRef.current.z !== 0)) {\n                camera.position.y += Math.sin(time * 12) * 0.1;\n            }\n\n            // Update Minimap\n            if (minimapRef \u0026\u0026 minimapRef.current) {\n                minimapRef.current.update(playerPosRef.current, yawRef.current, remotePlayersRef.current);\n            }\n\n            // 3. Selection Box Update\n            if (isLockedRef.current) {\n                raycaster.setFromCamera(new THREE.Vector2(0, 0), camera);\n                const interactables = [];\n                chunks.forEach(group =\u003e group.children.forEach(mesh =\u003e interactables.push(mesh)));\n                userPlacedBlocks.forEach(mesh =\u003e interactables.push(mesh));\n                const intersects = raycaster.intersectObjects(interactables, false);\n                \n                if (intersects.length \u003e 0) {\n                    const hit = intersects[0];\n                    selectionBox.visible = true;\n                    if (hit.object.isInstancedMesh) {\n                        const matrix = new THREE.Matrix4();\n                        hit.object.getMatrixAt(hit.instanceId, matrix);\n                        const pos = new THREE.Vector3().setFromMatrixPosition(matrix);\n                        if (hit.object.parent) pos.add(hit.object.parent.position);\n                        if (matrix.elements[0] \u003c 0.01) {\n                            selectionBox.visible = false;\n                        } else {\n                            selectionBox.position.copy(pos);\n                        }\n                    } else {\n                        selectionBox.position.copy(hit.object.position);\n                    }\n                    selectionBox.position.x = Math.round(selectionBox.position.x);\n                    selectionBox.position.y = Math.round(selectionBox.position.y);\n                    selectionBox.position.z = Math.round(selectionBox.position.z);\n                } else {\n                    selectionBox.visible = false;\n                }\n            } else {\n                selectionBox.visible = false;\n            }\n\n            // 4. Chunk Management\n            const cx = Math.floor(playerPosRef.current.x / 16);\n            const cz = Math.floor(playerPosRef.current.z / 16);\n            \n            for (let x = cx - 2; x \u003c= cx + 2; x++) {\n                for (let z = cz - 2; z \u003c= cz + 2; z++) {\n                    generateChunk(x, z);\n                }\n            }\n\n            for (const [key, chunk] of chunks) {\n                const [kx, kz] = key.split(',').map(Number);\n                if (Math.abs(kx - cx) \u003e 3 || Math.abs(kz - cz) \u003e 3) {\n                    scene.remove(chunk);\n                    chunks.delete(key);\n                }\n            }\n\n            // 5. Particles\n            if (Math.random() \u003e 0.85) spawnFallingLeaf(playerPosRef.current.x, playerPosRef.current.z);\n            for (let i = fallingLeaves.length - 1; i \u003e= 0; i--) {\n                const leaf = fallingLeaves[i];\n                leaf.mesh.position.y -= leaf.speed;\n                leaf.mesh.position.x += Math.sin(time + leaf.wobbleOffset) * 0.02;\n                leaf.mesh.position.z += Math.cos(time + leaf.wobbleOffset) * 0.01;\n                leaf.mesh.rotation.x += leaf.rotSpeed;\n                leaf.mesh.rotation.y += leaf.rotSpeed;\n                if (leaf.mesh.position.y \u003c playerPosRef.current.y - 10) {\n                    scene.remove(leaf.mesh);\n                    fallingLeaves.splice(i, 1);\n                }\n            }\n\n            renderer.render(scene, camera);\n            requestAnimationFrame(animate);\n        };\n\n        const handleResize = () =\u003e {\n            camera.aspect = window.innerWidth / window.innerHeight;\n            camera.updateProjectionMatrix();\n            renderer.setSize(window.innerWidth, window.innerHeight);\n        };\n        window.addEventListener('resize', handleResize);\n        \n        const frameId = requestAnimationFrame(animate);\n\n        return () =\u003e {\n            window.removeEventListener('resize', handleResize);\n            document.remov"])

self.__next_f.push([1,"eEventListener('keydown', onKeyDown);\n            document.removeEventListener('keyup', onKeyUp);\n            document.removeEventListener('mousemove', onMouseMove);\n            document.removeEventListener('mousedown', onMouseDown);\n            document.removeEventListener('pointerlockchange', onLockChangeInternal);\n            canvas.removeEventListener('click', requestLock);\n            \n            cancelAnimationFrame(frameId);\n            if (mountRef.current \u0026\u0026 renderer.domElement) {\n                mountRef.current.removeChild(renderer.domElement);\n            }\n            chunks.clear();\n            // We don't disconnect network here as it's managed by App, just stop listening?\n            // Actually we should probably remove listeners if we re-mount.\n            // Since we use `networkRef` and a stable callback in `useEffect`, it might be tricky.\n            // But for this simple app, VoxelWorld only mounts once usually.\n        };\n    }, []);\n\n    return \u003cdiv ref={mountRef} className=\"w-full h-full cursor-pointer\" data-name=\"voxel-canvas\" /\u003e;\n}44:T700,function Hotbar({ selectedBlock, onSelect }) {\n    const blocks = [\n        { id: 'grass', color: 'bg-[#556b2f]', name: 'Grass' },\n        { id: 'dirt', color: 'bg-[#5c4033]', name: 'Dirt' },\n        { id: 'trunk', color: 'bg-[#3e2723]', name: 'Wood' },\n        { id: 'leaves_red', color: 'bg-[#c62828]', name: 'Red Leaves' },\n        { id: 'stone', color: 'bg-gray-500', name: 'Stone' },\n    ];\n\n    return (\n        \u003cdiv className=\"absolute bottom-6 left-1/2 transform -translate-x-1/2 pointer-events-auto\" data-name=\"hotbar\" data-file=\"components/Hotbar.js\"\u003e\n            \u003cdiv className=\"glass-panel p-2 flex gap-2\"\u003e\n                {blocks.map((block, index) =\u003e (\n                    \u003cdiv \n                        key={block.id}\n                        onClick={() =\u003e onSelect(block.id)}\n                        className={`\n                            w-12 h-12 rounded border-2 cursor-pointer transition-all relative group\n                            ${selectedBlock === block.id ? 'border-amber-400 scale-110 z-10' : 'border-white/20 hover:border-white/50'}\n                        `}\n                    \u003e\n                        \u003cdiv className={`w-full h-full ${block.color}`}\u003e\u003c/div\u003e\n                        \u003cdiv className=\"absolute -top-8 left-1/2 transform -translate-x-1/2 bg-black/80 text-white text-xs py-1 px-2 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none\"\u003e\n                            {index + 1}. {block.name}\n                        \u003c/div\u003e\n                        \u003cdiv className=\"absolute bottom-0.5 right-1 text-[10px] font-bold text-white/50 drop-shadow-md\"\u003e\n                            {index + 1}\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                ))}\n            \u003c/div\u003e\n        \u003c/div\u003e\n    );\n}45:T458d,function NotionModal({ isOpen, onClose }) {\n    if (!isOpen) return null;\n\n    const handleUIInteraction = (e) =\u003e {\n        e.stopPropagation();\n    };\n\n    // Helper component for the hover grip handle behavior\n    const BlockWrapper = ({ children }) =\u003e (\n        \u003cdiv className=\"group flex items-start -ml-8 pl-2 py-0.5 rounded hover:bg-[#eef0f3]\"\u003e\n            \u003cdiv className=\"w-6 flex items-center justify-center mr-2 opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing text-gray-400 mt-1\"\u003e\n                \u003cdiv className=\"icon-grip-vertical text-base\"\u003e\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv className=\"flex-1 min-w-0\"\u003e\n                {children}\n            \u003c/div\u003e\n        \u003c/div\u003e\n    );\n\n    return (\n        \u003cdiv \n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm\"\n            onClick={onClose} \n            data-name=\"notion-modal-overlay\"\n        \u003e\n            \u003cdiv \n                className=\"w-[90vw] h-[85vh] bg-white rounded-xl shadow-2xl flex overflow-hidden text-[#37352f] font-sans animate-[fadeIn_0.2s_ease-out]\"\n                onClick={handleUIInteraction}\n                data-name=\"notion-modal-container\"\n           "])

self.__next_f.push([1," \u003e\n                {/* Sidebar */}\n                \u003cdiv className=\"w-60 bg-[#f7f7f5] flex flex-col border-r border-[#e9e9e7] flex-shrink-0 hidden md:flex\"\u003e\n                    {/* Sidebar Header */}\n                    \u003cdiv className=\"p-3 flex items-center justify-between hover:bg-[#eef0f3] cursor-pointer m-1 rounded transition-colors duration-100\"\u003e\n                        \u003cdiv className=\"flex items-center gap-2 overflow-hidden\"\u003e\n                            \u003cdiv className=\"w-5 h-5 rounded bg-amber-500 text-white flex items-center justify-center text-xs font-bold\"\u003eT\u003c/div\u003e\n                            \u003cspan className=\"text-sm font-medium truncate\"\u003eTrickle's Workspace\u003c/span\u003e\n                        \u003c/div\u003e\n                        \u003cdiv className=\"icon-chevrons-up-down text-xs text-gray-500\"\u003e\u003c/div\u003e\n                    \u003c/div\u003e\n\n                    {/* Quick Actions */}\n                    \u003cdiv className=\"px-3 py-1 space-y-0.5\"\u003e\n                        \u003cdiv className=\"flex items-center gap-2 px-2 py-1 hover:bg-[#eef0f3] rounded cursor-pointer text-sm text-[#5f5e5b]\"\u003e\n                            \u003cdiv className=\"icon-search text-sm\"\u003e\u003c/div\u003e\n                            \u003cspan\u003eSearch\u003c/span\u003e\n                        \u003c/div\u003e\n                        \u003cdiv className=\"flex items-center gap-2 px-2 py-1 hover:bg-[#eef0f3] rounded cursor-pointer text-sm text-[#5f5e5b]\"\u003e\n                            \u003cdiv className=\"icon-clock text-sm\"\u003e\u003c/div\u003e\n                            \u003cspan\u003eUpdates\u003c/span\u003e\n                        \u003c/div\u003e\n                        \u003cdiv className=\"flex items-center gap-2 px-2 py-1 hover:bg-[#eef0f3] rounded cursor-pointer text-sm text-[#5f5e5b]\"\u003e\n                            \u003cdiv className=\"icon-settings-2 text-sm\"\u003e\u003c/div\u003e\n                            \u003cspan\u003eSettings \u0026 members\u003c/span\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n\n                    {/* Pages Section */}\n                    \u003cdiv className=\"mt-4 px-3\"\u003e\n                        \u003cdiv className=\"text-xs font-semibold text-[#9b9a97] px-2 mb-1\"\u003ePrivate\u003c/div\u003e\n                        \u003cdiv className=\"space-y-0.5\"\u003e\n                            \u003cdiv className=\"flex items-center gap-2 px-2 py-1 bg-[#eef0f3] rounded cursor-pointer text-sm font-medium text-[#37352f]\"\u003e\n                                \u003cdiv className=\"icon-file-text text-sm text-gray-400\"\u003e\u003c/div\u003e\n                                \u003cspan\u003eVoxel World Ideas\u003c/span\u003e\n                            \u003c/div\u003e\n                            \u003cdiv className=\"flex items-center gap-2 px-2 py-1 hover:bg-[#eef0f3] rounded cursor-pointer text-sm text-[#5f5e5b]\"\u003e\n                                \u003cdiv className=\"icon-calendar text-sm text-gray-400\"\u003e\u003c/div\u003e\n                                \u003cspan\u003eTo-do List\u003c/span\u003e\n                            \u003c/div\u003e\n                            \u003cdiv className=\"flex items-center gap-2 px-2 py-1 hover:bg-[#eef0f3] rounded cursor-pointer text-sm text-[#5f5e5b]\"\u003e\n                                \u003cdiv className=\"icon-book text-sm text-gray-400\"\u003e\u003c/div\u003e\n                                \u003cspan\u003eJournal\u003c/span\u003e\n                            \u003c/div\u003e\n                             \u003cdiv className=\"flex items-center gap-2 px-2 py-1 hover:bg-[#eef0f3] rounded cursor-pointer text-sm text-[#5f5e5b]\"\u003e\n                                \u003cdiv className=\"icon-map text-sm text-gray-400\"\u003e\u003c/div\u003e\n                                \u003cspan\u003eTravel Plans\u003c/span\u003e\n                            \u003c/div\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                    \n                    {/* New Page Button */}\n                    \u003cdiv className=\"mt-auto p-3 border-t border-[#e9e9e7]\"\u003e\n                        \u003cdiv className=\"flex items-center gap-2 px-2 py-1 hover:bg-[#eef0f3] rounded cursor-pointer text-sm text-[#5f5e5b]\"\u003e\n                            \u003cdiv className=\"icon-plus text-sm\"\u003e\u003c/div\u003e\n                            \u003cspan\u003eNew Page\u003c/span\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n\n                {/* Main Content */}\n                \u003cdiv className=\"flex-1 flex flex-col h-full overflow-y-auto bg-white relative scroll-"])

self.__next_f.push([1,"smooth\"\u003e\n                    {/* Top Bar */}\n                    \u003cdiv className=\"h-11 flex items-center justify-between px-3 sticky top-0 bg-white z-10 bg-opacity-90 backdrop-blur-sm\"\u003e\n                        \u003cdiv className=\"flex items-center gap-1 text-sm text-[#37352f]\"\u003e\n                            \u003cdiv className=\"icon-menu text-lg p-1 hover:bg-[#eef0f3] rounded cursor-pointer md:hidden\"\u003e\u003c/div\u003e\n                            \u003cspan className=\"hover:bg-[#eef0f3] px-1.5 py-0.5 rounded cursor-pointer flex items-center gap-1 truncate max-w-[150px] sm:max-w-none\"\u003e\n                                \u003cdiv className=\"icon-file-text text-xs opacity-50\"\u003e\u003c/div\u003e\n                                Voxel World Ideas\n                            \u003c/span\u003e\n                        \u003c/div\u003e\n                        \u003cdiv className=\"flex items-center gap-1 text-[#37352f]\"\u003e\n                            \u003cdiv className=\"flex items-center gap-1 hover:bg-[#eef0f3] px-2 py-1 rounded cursor-pointer text-sm\"\u003e\n                                \u003cspan\u003eShare\u003c/span\u003e\n                            \u003c/div\u003e\n                             \u003cdiv className=\"icon-message-square text-lg p-1 hover:bg-[#eef0f3] rounded cursor-pointer\"\u003e\u003c/div\u003e\n                             \u003cdiv className=\"icon-star text-lg p-1 hover:bg-[#eef0f3] rounded cursor-pointer\"\u003e\u003c/div\u003e\n                            \u003cdiv className=\"icon-more-horizontal text-lg p-1 hover:bg-[#eef0f3] rounded cursor-pointer\"\u003e\u003c/div\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n\n                    {/* Page Content */}\n                    \u003cdiv className=\"max-w-[900px] mx-auto w-full px-12 md:px-24 py-12 pb-32 flex flex-col\"\u003e\n                        {/* Cover Placeholder */}\n                        \u003cdiv className=\"group relative h-40 -mt-12 -mx-12 md:-mx-24 mb-8 bg-gradient-to-r from-amber-100 to-orange-50 cursor-pointer\"\u003e\n                             \u003cdiv className=\"absolute bottom-2 right-2 bg-white/80 hover:bg-white text-xs px-2 py-1 rounded shadow-sm opacity-0 group-hover:opacity-100 transition-opacity text-[#37352f]\"\u003e\n                                Change cover\n                            \u003c/div\u003e\n                        \u003c/div\u003e\n\n                        {/* Icon */}\n                        \u003cdiv className=\"group relative -mt-16 mb-4 w-fit\"\u003e\n                            \u003cdiv className=\"text-7xl\"\u003e🌲\u003c/div\u003e\n                             \u003cdiv className=\"absolute top-0 right-[-20px] p-1 rounded hover:bg-[#eef0f3] cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity\"\u003e\n                                \u003cdiv className=\"icon-smile text-sm text-gray-400\"\u003e\u003c/div\u003e\n                            \u003c/div\u003e\n                        \u003c/div\u003e\n\n                        {/* Title */}\n                        \u003ch1 \n                            className=\"text-4xl font-bold text-[#37352f] mb-8 outline-none placeholder:text-gray-300\" \n                            contentEditable \n                            suppressContentEditableWarning\n                            placeholder=\"Untitled\"\n                        \u003e\n                            Autumn Forest Project\n                        \u003c/h1\u003e\n\n                        {/* Meta Info */}\n                        \u003cdiv className=\"flex flex-col gap-1 mb-8 text-[#787774] text-sm border-b border-[#e9e9e7] pb-6\"\u003e\n                            \u003cdiv className=\"flex items-center gap-3\"\u003e\n                                \u003cdiv className=\"flex items-center gap-2 w-24 md:w-32\"\u003e\n                                    \u003cdiv className=\"icon-user text-sm\"\u003e\u003c/div\u003e\n                                    \u003cspan\u003eCreated by\u003c/span\u003e\n                                \u003c/div\u003e\n                                \u003cdiv className=\"flex items-center gap-1.5\"\u003e\n                                    \u003cdiv className=\"w-5 h-5 rounded-full bg-amber-600 text-white text-[10px] flex items-center justify-center\"\u003eT\u003c/div\u003e\n                                    \u003cspan className=\"text-[#37352f]\"\u003eTrickle User\u003c/span\u003e\n                                \u003c/div\u003e\n                            \u003c/div\u003e\n                            \u003cdiv className=\"flex items-center gap-3\"\u003e\n                   "])

self.__next_f.push([1,"             \u003cdiv className=\"flex items-center gap-2 w-24 md:w-32\"\u003e\n                                    \u003cdiv className=\"icon-tag text-sm\"\u003e\u003c/div\u003e\n                                    \u003cspan\u003eTags\u003c/span\u003e\n                                \u003c/div\u003e\n                                \u003cspan className=\"bg-[rgba(227,226,224,0.5)] text-[#32302c] px-1.5 rounded text-sm\"\u003eGame Design\u003c/span\u003e\n                            \u003c/div\u003e\n                        \u003c/div\u003e\n\n                        {/* Blocks Container */}\n                        \u003cdiv className=\"space-y-[2px] text-[#37352f] text-base leading-7\"\u003e\n                            \n                            {/* Paragraph Block */}\n                            \u003cBlockWrapper\u003e\n                                \u003cp className=\"outline-none\" contentEditable suppressContentEditableWarning\u003e\n                                    Welcome to the \u003cspan className=\"font-semibold text-amber-600 bg-amber-50 px-1 rounded\"\u003eAutumn Voxel Walk\u003c/span\u003e project! This is a simulation of a procedural infinite world.\n                                \u003c/p\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Quote Block */}\n                            \u003cBlockWrapper\u003e\n                                \u003cdiv className=\"border-l-4 border-[#37352f] pl-4 py-1 my-2 italic text-[#37352f]\"\u003e\n                                    \"In every walk with nature one receives far more than he seeks.\"\n                                \u003c/div\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Divider */}\n                            \u003cBlockWrapper\u003e\n                                \u003cdiv className=\"border-b border-[#e9e9e7] my-2\"\u003e\u003c/div\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Heading 2 */}\n                            \u003cBlockWrapper\u003e\n                                \u003ch2 className=\"text-2xl font-semibold mt-6 mb-2 outline-none\" contentEditable suppressContentEditableWarning\u003eDevelopment Roadmap\u003c/h2\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Todo List Block 1 */}\n                            \u003cBlockWrapper\u003e\n                                \u003cdiv className=\"flex items-start gap-3\"\u003e\n                                    \u003cdiv className=\"mt-1.5 w-4 h-4 border-[1.5px] border-[#37352f] rounded-[3px] flex items-center justify-center hover:bg-gray-100 cursor-pointer\"\u003e\n                                        \u003cdiv className=\"icon-check text-xs opacity-0\"\u003e\u003c/div\u003e\n                                    \u003c/div\u003e\n                                    \u003cdiv className=\"outline-none line-through text-gray-400\" contentEditable suppressContentEditableWarning\u003e\n                                        Initial procedural terrain generation\n                                    \u003c/div\u003e\n                                \u003c/div\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Todo List Block 2 */}\n                            \u003cBlockWrapper\u003e\n                                \u003cdiv className=\"flex items-start gap-3\"\u003e\n                                    \u003cdiv className=\"mt-1.5 w-4 h-4 bg-[#2383e2] border-[1.5px] border-[#2383e2] rounded-[3px] flex items-center justify-center cursor-pointer\"\u003e\n                                        \u003cdiv className=\"icon-check text-xs text-white font-bold\"\u003e\u003c/div\u003e\n                                    \u003c/div\u003e\n                                    \u003cdiv className=\"outline-none line-through text-gray-400\" contentEditable suppressContentEditableWarning\u003e\n                                        Implement player physics and collision\n                                    \u003c/div\u003e\n                                \u003c/div\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Todo List Block 3 */}\n                            \u003cBlockWrapper\u003e\n                                \u003cdiv className=\"flex items-start gap-3\"\u003e\n                                    \u003cdiv className=\"mt-1.5 w-4 h-4 border-[1.5px] border-[#37352f] rounded-[3px] flex items-center justify-center hover:bg-gray-100 cursor-pointer\"\u003e\u003c/div\u003e\n                                    \u003cdiv className=\"o"])

self.__next_f.push([1,"utline-none\" contentEditable suppressContentEditableWarning\u003e\n                                        Add weather effects (Rain/Snow particles)\n                                    \u003c/div\u003e\n                                \u003c/div\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Callout Block */}\n                            \u003cBlockWrapper\u003e\n                                \u003cdiv className=\"flex gap-3 bg-[#f1f1ef] p-4 rounded-md my-1 border border-transparent hover:border-[#dfdfde] transition-colors\"\u003e\n                                    \u003cdiv className=\"text-xl\"\u003e💡\u003c/div\u003e\n                                    \u003cdiv className=\"flex-1\"\u003e\n                                        \u003cspan className=\"font-semibold\"\u003eIdea:\u003c/span\u003e We should add a day/night cycle that affects the fog color and ambient lighting.\n                                    \u003c/div\u003e\n                                \u003c/div\u003e\n                            \u003c/BlockWrapper\u003e\n\n                             {/* Divider */}\n                             \u003cBlockWrapper\u003e\n                                \u003cdiv className=\"border-b border-[#e9e9e7] my-4\"\u003e\u003c/div\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Heading 2 */}\n                            \u003cBlockWrapper\u003e\n                                \u003ch2 className=\"text-2xl font-semibold mt-4 mb-2 outline-none\" contentEditable suppressContentEditableWarning\u003eTerrain Algorithm\u003c/h2\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Code Block */}\n                            \u003cBlockWrapper\u003e\n                                \u003cdiv className=\"bg-[#f7f6f3] p-4 rounded font-mono text-sm overflow-x-auto text-[#eb5757] my-1 relative group/code\"\u003e\n                                    \u003cdiv className=\"absolute top-2 right-2 text-xs text-gray-400 opacity-0 group-hover/code:opacity-100 cursor-pointer hover:text-gray-600\"\u003eCopy\u003c/div\u003e\n                                    \u003cdiv className=\"whitespace-pre\"\u003e\n                                        {`const simplex = new SimplexNoise();\n// Generate height based on 2D noise\nconst getTerrainHeight = (x, z) =\u003e {\n    const hNoise = simplex.noise2D(x * 0.02, z * 0.02);\n    return Math.floor((hNoise + 1) * 3) + 1;\n};`}\n                                    \u003c/div\u003e\n                                \u003c/div\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Heading 3 */}\n                            \u003cBlockWrapper\u003e\n                                \u003ch3 className=\"text-xl font-semibold mt-6 mb-1 outline-none\" contentEditable suppressContentEditableWarning\u003eGallery\u003c/h3\u003e\n                            \u003c/BlockWrapper\u003e\n\n                            {/* Image Block Placeholder */}\n                             \u003cBlockWrapper\u003e\n                                \u003cdiv className=\"my-2\"\u003e\n                                    \u003cdiv className=\"w-full h-64 bg-gray-100 rounded-md flex flex-col items-center justify-center text-gray-400 hover:bg-gray-50 cursor-pointer transition-colors border border-dashed border-gray-300\"\u003e\n                                        \u003cdiv className=\"icon-image text-4xl mb-2\"\u003e\u003c/div\u003e\n                                        \u003cspan className=\"text-sm\"\u003eAdd an image\u003c/span\u003e\n                                    \u003c/div\u003e\n                                    \u003cdiv className=\"text-xs text-gray-500 mt-1 flex justify-between\"\u003e\n                                        \u003cspan\u003eConcept Art v1.0\u003c/span\u003e\n                                    \u003c/div\u003e\n                                \u003c/div\u003e\n                            \u003c/BlockWrapper\u003e\n                            \n                            {/* Empty Prompt Block */}\n                            \u003cBlockWrapper\u003e\n                                \u003cp className=\"outline-none text-gray-300 italic\" contentEditable suppressContentEditableWarning\u003e\n                                    Press Enter to continue with an empty block...\n                                \u003c/p\u003e\n                            \u003c/BlockWrapper\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cstyle\u003e{`\n               "])

self.__next_f.push([1," @keyframes fadeIn {\n                    from { opacity: 0; transform: scale(0.98); }\n                    to { opacity: 1; transform: scale(1); }\n                }\n            `}\u003c/style\u003e\n        \u003c/div\u003e\n    );\n}46:T163f,/**\n * Simple wrapper around PeerJS for star-topology multiplayer.\n * - Host acts as the server.\n * - Clients connect to Host.\n * - Updates are broadcasted via Host.\n */\nclass PeerNetwork {\n    constructor() {\n        this.peer = null;\n        this.connMap = new Map(); // id -\u003e conn\n        this.isHost = false;\n        this.myId = null;\n        this.hostConn = null; // For client\n        \n        this.handlers = {\n            'connect': [],\n            'data': [],\n            'disconnect': []\n        };\n    }\n\n    // Helper to attach common listeners\n    _attachPeerListeners(resolve, reject) {\n        this.peer.on('open', (id) =\u003e {\n            this.myId = id;\n            if (resolve) resolve(id);\n        });\n\n        this.peer.on('connection', (conn) =\u003e {\n            this.handleConnection(conn);\n        });\n\n        this.peer.on('disconnected', () =\u003e {\n            console.log('Connection to PeerServer lost. Attempting to reconnect...');\n            // Workaround for PeerJS: only reconnect if not destroyed\n            if (this.peer \u0026\u0026 !this.peer.destroyed) {\n                this.peer.reconnect();\n            }\n        });\n\n        this.peer.on('close', () =\u003e {\n            console.log('Peer connection closed completely.');\n            this.connMap.clear();\n            this.emit('disconnect', null); // Emit global disconnect\n        });\n\n        this.peer.on('error', (err) =\u003e {\n            console.error('PeerJS Error:', err);\n            // If we are in the initialization phase (resolve/reject exists), reject it\n            if (reject) {\n                reject(err);\n                // Clear reject so we don't call it again on subsequent errors\n                reject = null; \n            }\n        });\n    }\n\n    // Initialize as Host\n    async createRoom() {\n        this.isHost = true;\n        if (this.peer) this.peer.destroy();\n        \n        this.peer = new Peer(null, { debug: 2 });\n\n        return new Promise((resolve, reject) =\u003e {\n            this._attachPeerListeners(resolve, reject);\n        });\n    }\n\n    // Initialize as Client and join Host\n    async joinRoom(hostId) {\n        this.isHost = false;\n        if (this.peer) this.peer.destroy();\n\n        this.peer = new Peer(null, { debug: 2 });\n\n        return new Promise((resolve, reject) =\u003e {\n            // We need to intercept the 'open' event to connect to host, \n            // but _attachPeerListeners also listens to 'open'.\n            // PeerJS allows multiple listeners.\n            \n            this.peer.on('open', (id) =\u003e {\n                const conn = this.peer.connect(hostId, {\n                    reliable: true\n                });\n                this.handleConnection(conn);\n                // Resolve with the connection object or just resolve\n                // Original code resolved with conn, let's keep it but wait for conn open? \n                // Actually original code resolved immediately after calling connect() \n                // but strictly we should probably wait for conn.on('open') if we want to be sure.\n                // For now keeping original flow: resolve(conn)\n                resolve(conn);\n            });\n\n            this._attachPeerListeners(null, reject);\n        });\n    }\n\n    handleConnection(conn) {\n        conn.on('open', () =\u003e {\n            console.log('Connected to:', conn.peer);\n            this.connMap.set(conn.peer, conn);\n            \n            if (!this.isHost) {\n                this.hostConn = conn;\n            }\n\n            this.emit('connect', conn.peer);\n        });\n\n        conn.on('data', (data) =\u003e {\n            this.handleData(conn.peer, data);\n        });\n\n        conn.on('close', () =\u003e {\n            console.log('Disconnected:', conn.peer);\n            this.connMap.delete(conn.peer);\n            this.emit('disconnect', conn.peer);\n            \n            // If host disconnects, maybe notify user"])

self.__next_f.push([1,"?\n            if (!this.isHost \u0026\u0026 this.hostConn === conn) {\n                this.hostConn = null;\n            }\n        });\n    }\n\n    handleData(senderId, data) {\n        // Notify listeners\n        this.emit('data', { senderId, ...data });\n\n        // If Host, broadcast to others\n        if (this.isHost) {\n            // Ensure the senderId is attached so clients know who sent it\n            const payload = { ...data, senderId }; \n            this.broadcast(payload, senderId);\n        }\n    }\n\n    // Send data to everyone (or Host if client)\n    send(type, payload) {\n        const msg = { type, ...payload };\n        \n        if (this.isHost) {\n            // Host broadcasts to all clients\n            this.broadcast(msg); \n        } else {\n            // Client sends to Host\n            if (this.hostConn \u0026\u0026 this.hostConn.open) {\n                this.hostConn.send(msg);\n            }\n        }\n    }\n\n    // Send data to a specific peer (Host only usually, but works if we have conn)\n    sendTo(peerId, type, payload) {\n        const conn = this.connMap.get(peerId);\n        if (conn \u0026\u0026 conn.open) {\n            conn.send({ type, ...payload });\n        }\n    }\n\n    broadcast(msg, excludeId = null) {\n        for (const [id, conn] of this.connMap) {\n            if (id !== excludeId \u0026\u0026 conn.open) {\n                conn.send(msg);\n            }\n        }\n    }\n\n    on(event, callback) {\n        if (this.handlers[event]) {\n            this.handlers[event].push(callback);\n        }\n    }\n\n    emit(event, data) {\n        if (this.handlers[event]) {\n            this.handlers[event].forEach(cb =\u003e cb(data));\n        }\n    }\n\n    disconnect() {\n        if (this.peer) {\n            this.peer.destroy();\n        }\n        this.connMap.clear();\n        this.hostConn = null;\n        this.myId = null;\n    }\n}47:T1899,function MultiplayerMenu({ isOpen, onClose, onHost, onJoin }) {\n    const [mode, setMode] = React.useState('menu'); // menu, hosting, joining\n    const [roomId, setRoomId] = React.useState('');\n    const [inputRoomId, setInputRoomId] = React.useState('');\n    const [status, setStatus] = React.useState('');\n    const [error, setError] = React.useState('');\n\n    if (!isOpen) return null;\n\n    const handleHost = async () =\u003e {\n        setStatus('Creating room...');\n        setError('');\n        try {\n            const id = await onHost();\n            setRoomId(id);\n            setMode('hosting');\n            setStatus('Room ready! Share this ID with friends.');\n        } catch (err) {\n            setError('Failed to create room: ' + err.message);\n            setStatus('');\n        }\n    };\n\n    const handleJoin = async () =\u003e {\n        if (!inputRoomId.trim()) return;\n        setStatus('Connecting...');\n        setError('');\n        try {\n            await onJoin(inputRoomId.trim());\n            setMode('joined');\n            setStatus('Connected! Starting game...');\n            setTimeout(onClose, 1000); // Auto close after success\n        } catch (err) {\n            setError('Failed to join: ' + err.message);\n            setStatus('');\n        }\n    };\n\n    const copyToClipboard = () =\u003e {\n        navigator.clipboard.writeText(roomId);\n        setStatus('ID copied to clipboard!');\n        setTimeout(() =\u003e setStatus('Room ready! Share this ID with friends.'), 2000);\n    };\n\n    return (\n        \u003cdiv \n            className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm\"\n            onClick={onClose}\n            data-name=\"multiplayer-overlay\"\n        \u003e\n            \u003cdiv \n                className=\"bg-gray-900 border border-gray-700 p-6 rounded-xl w-full max-w-md shadow-2xl text-white\"\n                onClick={e =\u003e e.stopPropagation()}\n                data-name=\"multiplayer-modal\"\n            \u003e\n                \u003cdiv className=\"flex justify-between items-center mb-6\"\u003e\n                    \u003ch2 className=\"text-xl font-bold flex items-center gap-2\"\u003e\n                        \u003cdiv className=\"icon-globe text-amber-500\"\u003e\u003c/div\u003e\n                        Multiplayer\n                    \u003c/h2\u003e\n                    \u003cbutto"])

self.__next_f.push([1,"n onClick={onClose} className=\"text-gray-400 hover:text-white\"\u003e\n                        \u003cdiv className=\"icon-x text-xl\"\u003e\u003c/div\u003e\n                    \u003c/button\u003e\n                \u003c/div\u003e\n\n                {mode === 'menu' \u0026\u0026 (\n                    \u003cdiv className=\"space-y-4\"\u003e\n                        \u003cbutton \n                            onClick={handleHost}\n                            className=\"w-full py-4 bg-amber-600 hover:bg-amber-500 rounded-lg font-bold text-lg transition-colors flex items-center justify-center gap-2\"\n                        \u003e\n                            \u003cdiv className=\"icon-server\"\u003e\u003c/div\u003e\n                            Host Game\n                        \u003c/button\u003e\n                        \u003cdiv className=\"relative\"\u003e\n                            \u003cdiv className=\"absolute inset-0 flex items-center\"\u003e\n                                \u003cdiv className=\"w-full border-t border-gray-700\"\u003e\u003c/div\u003e\n                            \u003c/div\u003e\n                            \u003cdiv className=\"relative flex justify-center text-sm\"\u003e\n                                \u003cspan className=\"px-2 bg-gray-900 text-gray-400\"\u003eOr join a friend\u003c/span\u003e\n                            \u003c/div\u003e\n                        \u003c/div\u003e\n                        \u003cdiv className=\"flex gap-2\"\u003e\n                            \u003cinput \n                                type=\"text\" \n                                placeholder=\"Enter Room ID\"\n                                className=\"flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:border-amber-500\"\n                                value={inputRoomId}\n                                onChange={e =\u003e setInputRoomId(e.target.value)}\n                            /\u003e\n                            \u003cbutton \n                                onClick={handleJoin}\n                                disabled={!inputRoomId}\n                                className=\"px-6 py-2 bg-gray-700 hover:bg-gray-600 disabled:opacity-50 rounded-lg font-semibold transition-colors\"\n                            \u003e\n                                Join\n                            \u003c/button\u003e\n                        \u003c/div\u003e\n                    \u003c/div\u003e\n                )}\n\n                {mode === 'hosting' \u0026\u0026 (\n                    \u003cdiv className=\"space-y-6 text-center\"\u003e\n                        \u003cdiv className=\"p-4 bg-gray-800 rounded-lg border border-gray-700 break-all\"\u003e\n                            \u003cp className=\"text-xs text-gray-400 uppercase mb-1\"\u003eRoom ID\u003c/p\u003e\n                            \u003cdiv className=\"font-mono text-xl text-amber-400 select-all\"\u003e{roomId}\u003c/div\u003e\n                        \u003c/div\u003e\n                        \u003cbutton \n                            onClick={copyToClipboard}\n                            className=\"text-sm text-gray-300 hover:text-white flex items-center justify-center gap-2 mx-auto\"\n                        \u003e\n                            \u003cdiv className=\"icon-copy\"\u003e\u003c/div\u003e\n                            Copy ID\n                        \u003c/button\u003e\n                        \u003cp className=\"text-sm text-gray-400 animate-pulse\"\u003e\n                            Waiting for players to join...\n                        \u003c/p\u003e\n                        \u003cbutton \n                            onClick={onClose}\n                            className=\"w-full py-2 bg-green-700 hover:bg-green-600 rounded-lg font-bold\"\n                        \u003e\n                            Start Playing (Background)\n                        \u003c/button\u003e\n                    \u003c/div\u003e\n                )}\n\n                {mode === 'joined' \u0026\u0026 (\n                    \u003cdiv className=\"text-center py-8\"\u003e\n                        \u003cdiv className=\"icon-check-circle text-4xl text-green-500 mx-auto mb-4\"\u003e\u003c/div\u003e\n                        \u003cp className=\"text-xl font-bold\"\u003eConnected!\u003c/p\u003e\n                    \u003c/div\u003e\n                )}\n\n                {status \u0026\u0026 \u003cp className=\"mt-4 text-sm text-center text-gray-300\"\u003e{status}\u003c/p\u003e}\n                {error \u0026\u0026 \u003cp className=\"mt-4 text-sm text-center text-red-400\"\u003e{error}\u003c/p\u003e}\n            \u003c/div\u003e\n        \u003c/div\u003e\n    );\n}48:Tfe0,const Minimap = React.forwardRef((props, ref) =\u003e {\n    const"])

self.__next_f.push([1," canvasRef = React.useRef(null);\n    const size = 150; // px\n    const range = 60; // World units radius to show\n\n    React.useImperativeHandle(ref, () =\u003e ({\n        update: (playerPos, yaw, remotePlayersMap) =\u003e {\n            const canvas = canvasRef.current;\n            if (!canvas) return;\n            const ctx = canvas.getContext('2d');\n            \n            // Clear\n            ctx.clearRect(0, 0, size, size);\n            \n            // Draw Background\n            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';\n            ctx.fillRect(0, 0, size, size);\n            \n            // Draw Grid (Optional, for reference)\n            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';\n            ctx.lineWidth = 1;\n            ctx.beginPath();\n            ctx.moveTo(size/2, 0); ctx.lineTo(size/2, size);\n            ctx.moveTo(0, size/2); ctx.lineTo(size, size/2);\n            ctx.stroke();\n\n            const cx = size / 2;\n            const cy = size / 2;\n            const scale = size / (range * 2); // pixels per unit\n\n            // Draw Remote Players\n            ctx.fillStyle = '#3b82f6'; // Blue-500\n            if (remotePlayersMap) {\n                remotePlayersMap.forEach((mesh) =\u003e {\n                    const rx = mesh.position.x - playerPos.x;\n                    const rz = mesh.position.z - playerPos.z;\n                    \n                    // Rotate relative position by negative player yaw to orient map with player look dir?\n                    // Usually minimaps rotate so \"up\" is \"forward\".\n                    // Let's implement rotating map.\n                    \n                    const cos = Math.cos(yaw);\n                    const sin = Math.sin(yaw);\n                    \n                    // Standard rotation formula: \n                    // x' = x cos - z sin\n                    // z' = x sin + z cos\n                    // But wait, 3D coords are (x, z). \n                    // If player rotates Y, the world rotates -Y around them in the map.\n                    \n                    const mapX = rx * cos - rz * sin;\n                    const mapZ = rx * sin + rz * cos; // Z is up/down on screen usually represented by Y in 2d\n\n                    // Check if within range (circular)\n                    if (mapX*mapX + mapZ*mapZ \u003c range*range) {\n                        // Map world X to canvas X, world Z to canvas Y (negative Z is forward usually)\n                        // But here we rotated so \"forward\" is up (-Y on canvas)\n                        \n                        // In Three.js, Forward is usually -Z.\n                        // If we align validly:\n                        // Screen X = mapX\n                        // Screen Y = mapZ\n                        \n                        const screenX = cx + mapX * scale;\n                        const screenY = cy + mapZ * scale; \n                        \n                        ctx.beginPath();\n                        ctx.arc(screenX, screenY, 3, 0, Math.PI * 2);\n                        ctx.fill();\n                    }\n                });\n            }\n\n            // Draw Local Player (Center)\n            // Arrow shape pointing Up\n            ctx.fillStyle = '#fbbf24'; // Amber-400\n            ctx.beginPath();\n            ctx.moveTo(cx, cy - 5);\n            ctx.lineTo(cx - 4, cy + 4);\n            ctx.lineTo(cx + 4, cy + 4);\n            ctx.closePath();\n            ctx.fill();\n\n            // Draw Border\n            ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';\n            ctx.lineWidth = 2;\n            ctx.strokeRect(0, 0, size, size);\n        }\n    }));\n\n    return (\n        \u003cdiv className=\"glass-panel p-1 rounded-lg overflow-hidden\" data-name=\"minimap\"\u003e\n            \u003ccanvas \n                ref={canvasRef} \n                width={size} \n                height={size} \n                className=\"rounded\"\n            /\u003e\n            \u003cdiv className=\"text-center text-[10px] text-gray-400 mt-1 font-mono\"\u003e\n                RADAR\n            \u003c/div\u003e\n        \u003c/div\u003e\n    );\n});49:T711,{\n  \"longText\": {\n    \"Overview\": \"### Dynamic voxel paradise with AI-driven interac"])

self.__next_f.push([1,"tivity\\nThis voxel forest template uses procedural generation to create endless terrain, voxel trees, and autumn leaves. With first-person controls, interactive block placement/breaking, and a simplified hotbar, it’s powered by Trickle AI to accelerate creative web deployments.\\n\\n### Key Features\\n- Infinite terrain generation using Simplex Noise\\n- Voxel art style trees and terrain\\n- Falling autumn leaves particle system\\n- Interaction: Break blocks (Left Click) and Place blocks (Right Click)\\n- Hotbar: Select blocks to place (Keys 1-5)\\n\\n### Use Cases\\n- Interactive voxel exploration demos\\n- Procedural terrain playgrounds\\n- AI-assisted educational demos\\n- Rapid prototyping for voxel-based games\\n- Creative coding showcases\",\n    \"Tips\": \"- Remember to check isLockedRef.current before processing clicks to differentiate between pointer lock and in-game actions.\\n- Update the Raycaster position every frame before intersection checks.\\n- Keep Hotbar keys 1-5 handy to switch blocks quickly.\\n- Ensure AI-enabled features are active by enabling Trickle AI in project settings.\\n\\n### Who is it for?\\n- Web developers building 3D voxel experiences\\n- Game developers prototyping indie ideas\\n- Educators teaching procedural generation\\n- Interactive art installations\\n- Tech startups showcasing AI-powered web apps\"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Voxel Forest | Trickle apps \u0026 site\",\n    \"metaDes\": \"Trickle AI-powered voxel forest template with infinite terrain and interactive blocks. React-ready integration for immersive, procedural experiences today.\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"Database storage\",\n    \"Interactive elements\",\n    \"SEO friendly\",\n    \"Responsive Design\"\n  ]\n}4a:T879,{\n  \"longText\": {\n    \"Overview\": \"### A Hand-Drawn Planner for Creative Minds\\nThe Creative Sketch Planner Template by Trickle AI is crafted for anyone who wants to bring a bit of whimsy into their productivity. With a fun, sketch-style interface and powerful organization tools, this Trickle template lets you track tasks, set goals, and manage schedules without losing the artistic feel. Perfect for anyone tired of rigid corporate planners, this template blends structure with creativity, helping you stay productive in a way that feels personal and inspiring.\\n\\n### Key Features\\n- Month, week, and day views for flexible scheduling\\n- Sketch-style interface for a playful, creative vibe\\n- Task and goal tracking sections\\n- Color-coded event tagging\\n- Fully customizable with Trickle AI tools\\n\\n###Use Cases\\n- Plan art or writing projects over the month\\n- Track team meetings and deadlines with a creative touch\\n- Combine personal tasks and professional events in one place\\n- Visualize goals and progress with a friendly design\\n- Customize layouts for seasonal or project-based planning\",\n    \"Tips\": \"Trickle AI makes creative planning easier and more fun.\\n\\n- Use color tags to highlight different project types.\\n- Regularly update your goals tab to keep track of progress.\\n- Customize fonts or doodles to match your personal style.\\n- Set reminders to stay on top of important deadlines.\\n- Integrate with Trickle’s database tools to link tasks and projects smoothly.\\n\\n### Who Is It For?\\n- Creative professionals managing client deadlines\\n- Students organizing classes and assignments\\n- Freelancers tracking multiple projects\\n- Hobbyists planning personal projects or goals\\n- Anyone seeking a fun, less formal productivity tool\"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Creative Sketch Planner | Trickle AI Free Template\",\n    \"metaDes\": \"Plan and present your design ideas with Trickle’s no-code Creative Sketch Planner. Organize sketches, add notes, and share your visual process with clarity and style!\"\n  },\n  \"features\": [\n    \"AI capabilities\",\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Custom form\",\n    \"Database storage\"\n  ]\n}4b:T41b,### A Hand-Drawn Planner for Creative Minds\nThe Creative Sketch Planner Template by Trickle AI is crafted for anyone who wants to bring a bit of whimsy into their productivity. With a fu"])

self.__next_f.push([1,"n, sketch-style interface and powerful organization tools, this Trickle template lets you track tasks, set goals, and manage schedules without losing the artistic feel. Perfect for anyone tired of rigid corporate planners, this template blends structure with creativity, helping you stay productive in a way that feels personal and inspiring.\n\n### Key Features\n- Month, week, and day views for flexible scheduling\n- Sketch-style interface for a playful, creative vibe\n- Task and goal tracking sections\n- Color-coded event tagging\n- Fully customizable with Trickle AI tools\n\n###Use Cases\n- Plan art or writing projects over the month\n- Track team meetings and deadlines with a creative touch\n- Combine personal tasks and professional events in one place\n- Visualize goals and progress with a friendly design\n- Customize layouts for seasonal or project-based planning4c:Tc6d,\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003ctitle\u003eLuna Seo\u003c/title\u003e\n    \u003cmeta name=\"description\" content=\"Luna Seo official homepage - A universe of music, moodboards, and midnight thoughts\"\u003e\n    \u003cmeta name=\"keywords\" content=\"Luna Seo,music,artist,entertainment,videos\"\u003e\n    \u003cmeta property=\"og:title\" content=\"Luna Seo\"\u003e\n    \u003cmeta property=\"og:description\" content=\"Luna Seo official homepage - A universe of music, moodboards, and midnight thoughts\"\u003e\n    \u003cmeta name=\"twitter:title\" content=\"Luna Seo\"\u003e\n    \u003cmeta name=\"twitter:description\" content=\"Luna Seo official homepage - A universe of music, moodboards, and midnight thoughts\"\u003e\n\n    \u003clink rel=\"preconnect\" href=\"https://fonts.googleapis.com\"\u003e\n    \u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin\u003e\n    \u003clink href=\"https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700\u0026family=Inter:wght@300;400;500;600;700\u0026display=swap\" rel=\"stylesheet\"\u003e\n    \n    \u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/react@18/umd/react.production.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/react-dom@18/umd/react-dom.production.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://resource.trickle.so/vendor_lib/unpkg/@babel/standalone/babel.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.tailwindcss.com\"\u003e\u003c/script\u003e\n    \u003clink href=\"https://resource.trickle.so/vendor_lib/unpkg/lucide-static@0.516.0/font/lucide.css\" rel=\"stylesheet\"\u003e\n\n    \u003cstyle type=\"text/tailwindcss\"\u003e\n    @layer theme {\n        :root {\n            --primary-color: #ff1744;\n            --secondary-color: #000000;\n            --accent-color: #ffffff;\n            --text-primary: #000000;\n            --text-secondary: #666666;\n            --background-primary: #ffffff;\n            --background-secondary: #f5f5f5;\n        }\n    }\n\n    @layer base {\n        body {\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n            color: var(--text-primary);\n            background-color: var(--background-primary);\n        }\n    }\n\n    @layer components {\n        .hero-video {\n            object-fit: cover;\n            width: 100%;\n            height: 100vh;\n            display: block;\n        }\n        \n        .video-container {\n            flex: 1;\n            height: 100vh;\n            overflow: hidden;\n            position: relative;\n        }\n        \n        .hero-title {\n            font-family: 'Caveat', cursive;\n            font-weight: 700;\n        }\n        \n        .hero-subtitle {\n            font-family: 'Inter', sans-serif;\n            font-weight: 300;\n        }\n    }\n    \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"root\"\u003e\u003c/div\u003e\n    \u003cscript type=\"text/babel\" src=\"components/HeroSection.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/AlbumsSection.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/AboutSection.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/ContactSection.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"components/Footer.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/babel\" src=\"app.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e4d:T5e4,class ErrorBoundary extends React."])

self.__next_f.push([1,"Component {\n  constructor(props) {\n    super(props);\n    this.state = { hasError: false, error: null };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, error };\n  }\n\n  componentDidCatch(error, errorInfo) {\n    console.error('ErrorBoundary caught an error:', error, errorInfo.componentStack);\n  }\n\n  render() {\n    if (this.state.hasError) {\n      return (\n        \u003cdiv className=\"min-h-screen flex items-center justify-center bg-gray-50\"\u003e\n          \u003cdiv className=\"text-center\"\u003e\n            \u003ch1 className=\"text-2xl font-bold text-gray-900 mb-4\"\u003eSomething went wrong\u003c/h1\u003e\n            \u003cp className=\"text-gray-600 mb-4\"\u003eSorry, an unexpected error occurred.\u003c/p\u003e\n            \u003cbutton\n              onClick={() =\u003e window.location.reload()}\n              className=\"px-6 py-2 bg-[var(--primary-color)] text-white rounded hover:opacity-90\"\n            \u003e\n              Reload\n            \u003c/button\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      );\n    }\n\n    return this.props.children;\n  }\n}\n\nfunction App() {\n  try {\n    return (\n      \u003cdiv className=\"w-full\" data-name=\"app\" data-file=\"app.js\"\u003e\n        \u003cHeroSection /\u003e\n        \u003cAlbumsSection /\u003e\n        \u003cAboutSection /\u003e\n        \u003cContactSection /\u003e\n        \u003cFooter /\u003e\n      \u003c/div\u003e\n    );\n  } catch (error) {\n    console.error('App component error:', error);\n    return null;\n  }\n}\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n  \u003cErrorBoundary\u003e\n    \u003cApp /\u003e\n  \u003c/ErrorBoundary\u003e\n);4e:T66c,function HeroSection() {\n  try {\n    const videos = [\n      {\n        url: \"https://devproto.trickle.so/storage/tasks/storage/generated_videos/1758602787861.mp4\",\n        id: \"v1\"\n      },\n      {\n        url: \"https://devproto.trickle.so/storage/tasks/storage/generated_videos/1758603078242.mp4\", \n        id: \"v2\"\n      },\n      {\n        url: \"https://devproto.trickle.so/storage/tasks/storage/generated_videos/1758603187693.mp4\",\n        id: \"v3\"\n      }\n    ];\n\n    return (\n      \u003cdiv className=\"relative w-full h-screen overflow-hidden\" data-name=\"hero-section\" data-file=\"components/HeroSection.js\"\u003e\n        \u003cdiv className=\"flex w-full h-screen\"\u003e\n          {videos.map((video, index) =\u003e (\n            \u003cdiv key={video.id} className=\"flex-1 h-full overflow-hidden\"\u003e\n              \u003cvideo\n                className=\"w-full h-full object-cover\"\n                autoPlay\n                loop\n                muted\n                playsInline\n              \u003e\n                \u003csource src={video.url} type=\"video/mp4\" /\u003e\n              \u003c/video\u003e\n            \u003c/div\u003e\n          ))}\n        \u003c/div\u003e\n        \n        {/* Hero Content Overlay */}\n        \u003cdiv className=\"absolute inset-0 flex items-center justify-center bg-black bg-opacity-20\"\u003e\n          \u003cdiv className=\"text-center text-white\" style={{marginTop: '400px'}}\u003e\n            \u003ch1 className=\"hero-title text-8xl mb-4\"\u003eLuna Seo\u003c/h1\u003e\n            \u003cp className=\"hero-subtitle text-xl\"\u003eA universe of music, moodboards, and midnight thoughts.\u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  } catch (error) {\n    console.error('HeroSection component error:', error);\n    return null;\n  }\n}4f:T827,function AlbumsSection() {\n  try {\n    const albums = [\n      {\n        id: 1,\n        title: \"Midnight Dreams\",\n        year: \"2024\",\n        image: \"https://devproto.trickle.so/storage/public/images/usr_12025a3690000001/aeb6549b-c2b4-4a52-aa48-13a4c3c745c3.jpeg\"\n      },\n      {\n        id: 2,\n        title: \"Neon Nights\",\n        year: \"2023\", \n        image: \"https://devproto.trickle.so/storage/public/images/usr_12025a3690000001/edeb327b-e161-42f2-bd5e-b25cf1a8800a.jpeg\"\n      },\n      {\n        id: 3,\n        title: \"Luna Rising\", \n        year: \"2022\",\n        image: \"https://devproto.trickle.so/storage/public/images/usr_12025a3690000001/ec7814c9-d776-4cea-b852-b179f8601793.png\"\n      }\n    ];\n\n    return (\n      \u003csection className=\"py-20 px-6 bg-white\" data-name=\"albums-section\" data-file=\"components/AlbumsSection.js\"\u003e\n        \u003cdiv className=\"max-w-6xl mx-auto\"\u003e\n          \u003cdiv className=\"text-center mb-16\"\u003e\n            \u003ch2 className=\"hero-ti"])

self.__next_f.push([1,"tle text-5xl mb-4 text-[var(--text-primary)]\"\u003eAlbums\u003c/h2\u003e\n            \u003cp className=\"hero-subtitle text-lg text-[var(--text-secondary)]\"\u003eLatest musical journeys\u003c/p\u003e\n          \u003c/div\u003e\n          \n          \u003cdiv className=\"grid grid-cols-1 md:grid-cols-3 gap-12\"\u003e\n            {albums.map((album) =\u003e (\n              \u003cdiv key={album.id} className=\"text-center group cursor-pointer\"\u003e\n                \u003cdiv className=\"aspect-square mb-6 overflow-hidden bg-gray-100 rounded-lg\"\u003e\n                  \u003cimg \n                    src={album.image} \n                    alt={album.title}\n                    className=\"w-full h-full object-cover transition-transform duration-300 group-hover:scale-105\"\n                  /\u003e\n                \u003c/div\u003e\n                \u003ch3 className=\"hero-title text-2xl mb-2 text-[var(--text-primary)]\"\u003e{album.title}\u003c/h3\u003e\n                \u003cp className=\"hero-subtitle text-sm text-[var(--text-secondary)]\"\u003e{album.year}\u003c/p\u003e\n              \u003c/div\u003e\n            ))}\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    );\n  } catch (error) {\n    console.error('AlbumsSection component error:', error);\n    return null;\n  }\n}50:T470,function AboutSection() {\n  try {\n    return (\n      \u003csection className=\"py-20 px-6 bg-[var(--background-secondary)]\" data-name=\"about-section\" data-file=\"components/AboutSection.js\"\u003e\n        \u003cdiv className=\"max-w-4xl mx-auto text-center\"\u003e\n          \u003ch2 className=\"hero-title text-5xl mb-8 text-[var(--text-primary)]\"\u003eAbout Luna\u003c/h2\u003e\n          \u003cdiv className=\"space-y-6 text-lg hero-subtitle text-[var(--text-secondary)]\"\u003e\n            \u003cp\u003e\n              Luna Seo is an artist who creates universes through music, \n              weaving together melodies that capture the essence of midnight thoughts and dreamlike moods.\n            \u003c/p\u003e\n            \u003cp\u003e\n              Her work explores the intersection of emotion and sound, \n              creating immersive experiences that transport listeners to otherworldly realms.\n            \u003c/p\u003e\n            \u003cp\u003e\n              Each composition tells a story of introspection, wonder, and the beauty found in quiet moments.\n            \u003c/p\u003e\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    );\n  } catch (error) {\n    console.error('AboutSection component error:', error);\n    return null;\n  }\n}51:T68b,function ContactSection() {\n  try {\n    const socialLinks = [\n      { name: \"Instagram\", icon: \"instagram\", url: \"#\" },\n      { name: \"Spotify\", icon: \"music\", url: \"#\" },\n      { name: \"YouTube\", icon: \"youtube\", url: \"#\" },\n      { name: \"Email\", icon: \"mail\", url: \"mailto:luna@example.com\" }\n    ];\n\n    return (\n      \u003csection className=\"py-20 px-6 bg-white\" data-name=\"contact-section\" data-file=\"components/ContactSection.js\"\u003e\n        \u003cdiv className=\"max-w-4xl mx-auto text-center\"\u003e\n          \u003ch2 className=\"hero-title text-5xl mb-8 text-[var(--text-primary)]\"\u003eConnect\u003c/h2\u003e\n          \u003cp className=\"hero-subtitle text-lg text-[var(--text-secondary)] mb-12\"\u003e\n            Stay connected for the latest updates and musical journeys\n          \u003c/p\u003e\n          \n          \u003cdiv className=\"flex justify-center space-x-8\"\u003e\n            {socialLinks.map((link) =\u003e (\n              \u003ca\n                key={link.name}\n                href={link.url}\n                className=\"flex flex-col items-center group\"\n              \u003e\n                \u003cdiv className=\"w-16 h-16 rounded-full bg-[var(--background-secondary)] flex items-center justify-center mb-3 transition-all duration-300 group-hover:bg-[var(--primary-color)] group-hover:scale-110\"\u003e\n                  \u003cdiv className={`icon-${link.icon} text-xl text-[var(--text-primary)] group-hover:text-white`}\u003e\u003c/div\u003e\n                \u003c/div\u003e\n                \u003cspan className=\"hero-subtitle text-sm text-[var(--text-secondary)]\"\u003e{link.name}\u003c/span\u003e\n              \u003c/a\u003e\n            ))}\n          \u003c/div\u003e\n        \u003c/div\u003e\n      \u003c/section\u003e\n    );\n  } catch (error) {\n    console.error('ContactSection component error:', error);\n    return null;\n  }\n}52:T970,{\n  \"longText\": {\n    \"Overview\": \"### Share Your Artistry with the World  \\nThe Idol Bio \u0026 Music Portfolio Template from Trickle AI all"])

self.__next_f.push([1,"ows you to showcase your musical journey in an immersive and elegant way. It’s designed to highlight your albums, visual storytelling, and unique creative identity — ideal for artists seeking a clean and emotionally resonant presentation.\\n\\n### Key Features  \\n- Dedicated hero section for artist name, portrait, and tagline  \\n- Album gallery with images, descriptions, and release years  \\n- “About” section with narrative focus for personal storytelling  \\n- Integrated social media links for fan engagement  \\n- Built using Trickle AI’s modular layout system for effortless customization  \\n\\n### Use Cases  \\n- Personal bio pages for musicians, idols, and performers  \\n- Music portfolio websites linking albums or streaming platforms  \\n- Artist introduction pages for agencies or fan communities  \\n- Press or promotional microsites highlighting discography  \\n- Visual storytelling portfolios for singers, producers, or creatives  \",\n    \"Tips\": \"Focus on emotional storytelling — this template works best when you blend visuals and narrative. Highlight the textures, emotions, and evolution of your music to connect authentically with your audience.  \\n\\n- Use consistent color tones across photos and album art  \\n- Keep text short but meaningful — let visuals lead  \\n- Add subtle animations for album transitions to enhance polish  \\n- Link to streaming services or press kits directly from album cards  \\n- Update content regularly to keep fans engaged with new releases  \\n\\n#### Who Is It For?  \\n- Musicians and idols building a personal brand site  \\n- Independent artists promoting albums or EPs  \\n- Creative agencies designing client artist profiles  \\n- Record labels creating artist landing pages  \\n- Visual storytellers combining photography and music portfolios  \"\n  },\n  \"meta\": {\n    \"metaTitle\": \"Idol Bio \u0026 Music Portfolio | Trickle apps \u0026 sites\",\n    \"metaDes\": \"Showcase your artistry with the Idol Bio \u0026 Music Portfolio Template from Trickle AI. Perfect for musicians, performers, and creators, it highlights albums, personal stories, and links to streaming platforms in an elegant, minimal layout.\"\n  },\n  \"features\": [\n    \"Responsive Design\",\n    \"SEO friendly\",\n    \"Interactive elements\",\n    \"AI image \u0026 video generation\"\n  ]\n}53:T40c,### Share Your Artistry with the World  \nThe Idol Bio \u0026 Music Portfolio Template from Trickle AI allows you to showcase your musical journey in an immersive and elegant way. It’s designed to highlight your albums, visual storytelling, and unique creative identity — ideal for artists seeking a clean and emotionally resonant presentation.\n\n### Key Features  \n- Dedicated hero section for artist name, portrait, and tagline  \n- Album gallery with images, descriptions, and release years  \n- “About” section with narrative focus for personal storytelling  \n- Integrated social media links for fan engagement  \n- Built using Trickle AI’s modular layout system for effortless customization  \n\n### Use Cases  \n- Personal bio pages for musicians, idols, and performers  \n- Music portfolio websites linking albums or streaming platforms  \n- Artist introduction pages for agencies or fan communities  \n- Press or promotional microsites highlighting discography  \n- Visual storytelling portfolios for singers, producers, or creatives  54:T86c,{\n  \"longText\": {\n    \"Overview\": \"### Merge 3D Visualization with Real‑Time Feedback  \\nThis template by Trickle AI combines an interactive 3D model—like a rotatable iPhone—with a live comment or reaction section. As users explore the product, others can leave feedback, reactions, or questions in real time. It’s ideal for product teasers, community-driven launches, and interactive demos where visual immersion and social engagement go hand in hand.\\n\\n### Key Features  \\n- 3D model viewer (rotate, zoom, tilt)  \\n- Embedded live comment or chat panel  \\n- Smooth transitions and loading performance  \\n- Responsive layout for desktop and mobile  \\n- Customizable logic via Trickle AI\\n\\n### Use Cases  \\n- Product launch pages with live user reactions"])

Requests	IP Address	Location	AS Autonomous System
21	54.231.166.57	Ashburn, Virginia, United States	AS16509Amazon.com, Inc.
17	108.138.7.91	United States	AS16509Amazon.com, Inc.
17	172.67.134.156	United States	AS13335Cloudflare, Inc.
17	18.245.31.113	United States	AS16509Amazon.com, Inc.
17	142.251.127.84	United States	AS15169Google LLC
17	142.251.13.97	United States	AS15169Google LLC
106	6	-	-

Security Scan Report: trickle-app.com

Summary

AI Security Verdict

High Risk

Risk Factors

Details

Screenshot

Page Load Overview

Language Analysis

Primary Language

Detection Details

Website Classification

Primary Category

All Detected Categories

Detected Features

Domain & IP Information

Detected Technologies3

Content Similarity HashesFor malware variant detection

TLSH (Trend Micro Locality Sensitive Hash)

ssdeep (Context Triggered Piecewise Hashing)

sdhash (Similarity Digest Hashing)

Image Hashes

Perceptual Hashes

Other Hashes

Scan History