loopwind 0.22.0 → 0.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (486) hide show
  1. package/README.md +13 -117
  2. package/dist/cli.js +16 -10
  3. package/dist/cli.js.map +1 -1
  4. package/dist/commands/add.d.ts.map +1 -1
  5. package/dist/commands/add.js +6 -10
  6. package/dist/commands/add.js.map +1 -1
  7. package/dist/commands/agent.d.ts +8 -0
  8. package/dist/commands/agent.d.ts.map +1 -0
  9. package/dist/commands/agent.js +101 -0
  10. package/dist/commands/agent.js.map +1 -0
  11. package/dist/commands/init.d.ts.map +1 -1
  12. package/dist/commands/init.js +17 -7
  13. package/dist/commands/init.js.map +1 -1
  14. package/dist/commands/render.d.ts.map +1 -1
  15. package/dist/commands/render.js +17 -19
  16. package/dist/commands/render.js.map +1 -1
  17. package/dist/default-templates/AGENTS.md +10 -24
  18. package/dist/lib/config.d.ts +2 -3
  19. package/dist/lib/config.d.ts.map +1 -1
  20. package/dist/lib/config.js +4 -9
  21. package/dist/lib/config.js.map +1 -1
  22. package/dist/lib/constants.d.ts +1 -3
  23. package/dist/lib/constants.d.ts.map +1 -1
  24. package/dist/lib/constants.js +2 -4
  25. package/dist/lib/constants.js.map +1 -1
  26. package/dist/lib/installer.d.ts +2 -0
  27. package/dist/lib/installer.d.ts.map +1 -1
  28. package/dist/lib/installer.js +6 -7
  29. package/dist/lib/installer.js.map +1 -1
  30. package/dist/lib/renderer.d.ts.map +1 -1
  31. package/dist/lib/renderer.js +14 -8
  32. package/dist/lib/renderer.js.map +1 -1
  33. package/dist/lib/resvg-init.d.ts +15 -0
  34. package/dist/lib/resvg-init.d.ts.map +1 -0
  35. package/dist/lib/resvg-init.js +55 -0
  36. package/dist/lib/resvg-init.js.map +1 -0
  37. package/dist/lib/tailwind/colors.d.ts +8 -0
  38. package/dist/lib/tailwind/colors.d.ts.map +1 -0
  39. package/dist/lib/tailwind/colors.js +102 -0
  40. package/dist/lib/tailwind/colors.js.map +1 -0
  41. package/dist/lib/tailwind/index.d.ts +10 -0
  42. package/dist/lib/tailwind/index.d.ts.map +1 -0
  43. package/dist/lib/tailwind/index.js +9 -0
  44. package/dist/lib/tailwind/index.js.map +1 -0
  45. package/dist/lib/tailwind/resolvers.d.ts +28 -0
  46. package/dist/lib/tailwind/resolvers.d.ts.map +1 -0
  47. package/dist/lib/tailwind/resolvers.js +94 -0
  48. package/dist/lib/tailwind/resolvers.js.map +1 -0
  49. package/dist/lib/tailwind/types.d.ts +29 -0
  50. package/dist/lib/tailwind/types.d.ts.map +1 -0
  51. package/dist/lib/tailwind/types.js +8 -0
  52. package/dist/lib/tailwind/types.js.map +1 -0
  53. package/dist/lib/tailwind-config-loader.d.ts +8 -45
  54. package/dist/lib/tailwind-config-loader.d.ts.map +1 -1
  55. package/dist/lib/tailwind-config-loader.js +6 -429
  56. package/dist/lib/tailwind-config-loader.js.map +1 -1
  57. package/dist/lib/tailwind.d.ts +1 -1
  58. package/dist/lib/tailwind.d.ts.map +1 -1
  59. package/dist/lib/tailwind.js +1 -1
  60. package/dist/lib/tailwind.js.map +1 -1
  61. package/dist/lib/utils.d.ts +13 -29
  62. package/dist/lib/utils.d.ts.map +1 -1
  63. package/dist/lib/utils.js +45 -155
  64. package/dist/lib/utils.js.map +1 -1
  65. package/dist/lib/video-renderer.d.ts.map +1 -1
  66. package/dist/lib/video-renderer.js +6 -5
  67. package/dist/lib/video-renderer.js.map +1 -1
  68. package/dist/types/config.d.ts +0 -2
  69. package/dist/types/config.d.ts.map +1 -1
  70. package/dist/types/config.js.map +1 -1
  71. package/package.json +2 -12
  72. package/REGISTRY_SETUP.md +0 -363
  73. package/_dsgn/templates/dashed-stroke-test/template.tsx +0 -73
  74. package/_dsgn/templates/path-follow-test/template.tsx +0 -176
  75. package/_dsgn/templates/path-simple-test/template.tsx +0 -98
  76. package/_dsgn/templates/stroke-dash-test/meta.json +0 -12
  77. package/_dsgn/templates/stroke-dash-test/template.tsx +0 -53
  78. package/dist/default-templates/image/template.d.ts +0 -20
  79. package/dist/default-templates/image/template.d.ts.map +0 -1
  80. package/dist/default-templates/image/template.js +0 -18
  81. package/dist/default-templates/image/template.js.map +0 -1
  82. package/dist/default-templates/image/template.tsx +0 -20
  83. package/dist/default-templates/kitchen-sink/template.tsx +0 -64
  84. package/dist/default-templates/page/template.tsx +0 -37
  85. package/dist/default-templates/video/template.d.ts +0 -26
  86. package/dist/default-templates/video/template.d.ts.map +0 -1
  87. package/dist/default-templates/video/template.js +0 -33
  88. package/dist/default-templates/video/template.js.map +0 -1
  89. package/dist/default-templates/video/template.tsx +0 -37
  90. package/dist/default-templates/website/pages/home.tsx +0 -17
  91. package/dist/default-templates/website/parts/footer.tsx +0 -17
  92. package/dist/default-templates/website/parts/header.tsx +0 -17
  93. package/dist/default-templates/website/template.tsx +0 -17
  94. package/dist/default-templates/website-template/pages/home.tsx +0 -13
  95. package/dist/default-templates/website-template/parts/footer.tsx +0 -15
  96. package/dist/default-templates/website-template/parts/header.tsx +0 -15
  97. package/dist/default-templates/website-template/template.tsx +0 -32
  98. package/dist/lib/encode-worker.d.ts +0 -2
  99. package/dist/lib/encode-worker.d.ts.map +0 -1
  100. package/dist/lib/encode-worker.js +0 -29
  101. package/dist/lib/encode-worker.js.map +0 -1
  102. package/dist/lib/mjpeg-muxer.d.ts +0 -46
  103. package/dist/lib/mjpeg-muxer.d.ts.map +0 -1
  104. package/dist/lib/mjpeg-muxer.js +0 -513
  105. package/dist/lib/mjpeg-muxer.js.map +0 -1
  106. package/dist/lib/tailwind-browser.d.ts +0 -27
  107. package/dist/lib/tailwind-browser.d.ts.map +0 -1
  108. package/dist/lib/tailwind-browser.js +0 -853
  109. package/dist/lib/tailwind-browser.js.map +0 -1
  110. package/dist/lib/video-player.d.ts +0 -25
  111. package/dist/lib/video-player.d.ts.map +0 -1
  112. package/dist/lib/video-player.js +0 -392
  113. package/dist/lib/video-player.js.map +0 -1
  114. package/dist/sdk/compiler.d.ts +0 -94
  115. package/dist/sdk/compiler.d.ts.map +0 -1
  116. package/dist/sdk/compiler.js +0 -122
  117. package/dist/sdk/compiler.js.map +0 -1
  118. package/dist/sdk/index.d.ts +0 -62
  119. package/dist/sdk/index.d.ts.map +0 -1
  120. package/dist/sdk/index.js +0 -141
  121. package/dist/sdk/index.js.map +0 -1
  122. package/dist/sdk/preview.d.ts +0 -65
  123. package/dist/sdk/preview.d.ts.map +0 -1
  124. package/dist/sdk/preview.js +0 -262
  125. package/dist/sdk/preview.js.map +0 -1
  126. package/dist/sdk/template.d.ts +0 -162
  127. package/dist/sdk/template.d.ts.map +0 -1
  128. package/dist/sdk/template.js +0 -231
  129. package/dist/sdk/template.js.map +0 -1
  130. package/examples/code-editor-templates.ts +0 -173
  131. package/examples/nextjs-api/README.md +0 -180
  132. package/examples/nextjs-api/package.json +0 -21
  133. package/examples/nextjs-api/pages/api/intro-video.ts +0 -53
  134. package/examples/nextjs-api/pages/api/og-image.ts +0 -50
  135. package/examples/nextjs-template-import.ts +0 -58
  136. package/examples/sdk-video-preview.tsx +0 -120
  137. package/examples/template-compiler-workflow.ts +0 -251
  138. package/examples/visual-builder-templates.ts +0 -336
  139. package/render-examples-600x400.mjs +0 -161
  140. package/render-spring-variants-fixed.mjs +0 -60
  141. package/render-staggered-text.mjs +0 -56
  142. package/test-font-files.mjs +0 -72
  143. package/test-jsx-support.mjs +0 -146
  144. package/test-sdk-config.mjs +0 -454
  145. package/test-sdk-source-config.mjs +0 -427
  146. package/test-sdk-user-templates.mjs +0 -469
  147. package/test-static-debug.tsx +0 -19
  148. package/test-templates/TESTS.md +0 -63
  149. package/test-templates/config-test.mjs +0 -17
  150. package/test-templates/demo-intro-props.json +0 -4
  151. package/test-templates/run-tests.sh +0 -44
  152. package/test-templates/test-sdk.mjs +0 -139
  153. package/test-video-props.json +0 -3
  154. package/website/.astro/content.db +0 -0
  155. package/website/.astro/integrations/_inox-tools_astro-when/types.d.ts +0 -1
  156. package/website/.astro/integrations/astro_db/db.d.ts +0 -15
  157. package/website/.astro/settings.json +0 -5
  158. package/website/.astro/types.d.ts +0 -2
  159. package/website/DEPLOYMENT.md +0 -143
  160. package/website/OG_IMAGES.md +0 -142
  161. package/website/README.md +0 -158
  162. package/website/astro.config.mjs +0 -46
  163. package/website/dist/.gitkeep +0 -5
  164. package/website/dist/_astro/agents.Yx-L_igG.css +0 -1
  165. package/website/dist/_routes.json +0 -30
  166. package/website/dist/_worker.js/_@astrojs-ssr-adapter.mjs +0 -1033
  167. package/website/dist/_worker.js/_astro-internal_middleware.mjs +0 -40
  168. package/website/dist/_worker.js/chunks/abap_BTmsHiP5.mjs +0 -1
  169. package/website/dist/_worker.js/chunks/actionscript-3_DmBelb1E.mjs +0 -1
  170. package/website/dist/_worker.js/chunks/ada_8-E0ahCN.mjs +0 -1
  171. package/website/dist/_worker.js/chunks/andromeeda_XI-CXx50.mjs +0 -1
  172. package/website/dist/_worker.js/chunks/angular-html_DKGh3gGH.mjs +0 -1
  173. package/website/dist/_worker.js/chunks/angular-ts_-qZGsJoA.mjs +0 -1
  174. package/website/dist/_worker.js/chunks/apache_ijTUt0Ee.mjs +0 -1
  175. package/website/dist/_worker.js/chunks/apex_agu1c6Sh.mjs +0 -1
  176. package/website/dist/_worker.js/chunks/apl_Bj2f7Art.mjs +0 -1
  177. package/website/dist/_worker.js/chunks/applescript_B_vXrOh3.mjs +0 -1
  178. package/website/dist/_worker.js/chunks/ara_DCEQ2rnh.mjs +0 -1
  179. package/website/dist/_worker.js/chunks/asciidoc_CGN_EkYS.mjs +0 -1
  180. package/website/dist/_worker.js/chunks/asm_BBWZgnDp.mjs +0 -1
  181. package/website/dist/_worker.js/chunks/astro/assets-service_j52rQLzU.mjs +0 -721
  182. package/website/dist/_worker.js/chunks/astro/server_Y5_QHO8v.mjs +0 -2401
  183. package/website/dist/_worker.js/chunks/astro-designed-error-pages_BNTLO-TA.mjs +0 -542
  184. package/website/dist/_worker.js/chunks/astro_Dr_hht3h.mjs +0 -1
  185. package/website/dist/_worker.js/chunks/aurora-x_9GHG8nSq.mjs +0 -1
  186. package/website/dist/_worker.js/chunks/awk_DHRvhXot.mjs +0 -1
  187. package/website/dist/_worker.js/chunks/ayu-dark_CcvqmEHE.mjs +0 -1
  188. package/website/dist/_worker.js/chunks/ballerina_C7SdeSZb.mjs +0 -1
  189. package/website/dist/_worker.js/chunks/bat_Dv4A3u45.mjs +0 -1
  190. package/website/dist/_worker.js/chunks/beancount_BfPf9Luv.mjs +0 -1
  191. package/website/dist/_worker.js/chunks/berry_B8rfM3lL.mjs +0 -1
  192. package/website/dist/_worker.js/chunks/bibtex_TcjYgtJM.mjs +0 -1
  193. package/website/dist/_worker.js/chunks/bicep_CrlFWCdN.mjs +0 -1
  194. package/website/dist/_worker.js/chunks/blade_lanKVYID.mjs +0 -1
  195. package/website/dist/_worker.js/chunks/bsl_BhppzXMB.mjs +0 -1
  196. package/website/dist/_worker.js/chunks/c_6FBALJTK.mjs +0 -1
  197. package/website/dist/_worker.js/chunks/cadence_2txU9LVE.mjs +0 -1
  198. package/website/dist/_worker.js/chunks/cairo_BkrFAIlP.mjs +0 -1
  199. package/website/dist/_worker.js/chunks/catppuccin-frappe_CkEqIYhU.mjs +0 -1
  200. package/website/dist/_worker.js/chunks/catppuccin-latte_DG4Gx_-v.mjs +0 -1
  201. package/website/dist/_worker.js/chunks/catppuccin-macchiato_Cwi3vCXf.mjs +0 -1
  202. package/website/dist/_worker.js/chunks/catppuccin-mocha_L9_OPlFX.mjs +0 -1
  203. package/website/dist/_worker.js/chunks/clarity_BEAe4Ulu.mjs +0 -1
  204. package/website/dist/_worker.js/chunks/clojure_VnUX6p2g.mjs +0 -1
  205. package/website/dist/_worker.js/chunks/cmake_0-SGkZEj.mjs +0 -1
  206. package/website/dist/_worker.js/chunks/cobol_92M_KGaE.mjs +0 -1
  207. package/website/dist/_worker.js/chunks/codeowners_CzMwskBv.mjs +0 -1
  208. package/website/dist/_worker.js/chunks/codeql_DWJZNHv1.mjs +0 -1
  209. package/website/dist/_worker.js/chunks/coffee_CQjKU2fh.mjs +0 -1
  210. package/website/dist/_worker.js/chunks/common-lisp_BBLWDpS5.mjs +0 -1
  211. package/website/dist/_worker.js/chunks/coq_hedRFV3D.mjs +0 -1
  212. package/website/dist/_worker.js/chunks/cpp_DlS1i6Zs.mjs +0 -1
  213. package/website/dist/_worker.js/chunks/crystal_D6n65fKV.mjs +0 -1
  214. package/website/dist/_worker.js/chunks/csharp_C6FCVFzc.mjs +0 -1
  215. package/website/dist/_worker.js/chunks/css_C5uJEgmJ.mjs +0 -1
  216. package/website/dist/_worker.js/chunks/csv_CtMYuuJl.mjs +0 -1
  217. package/website/dist/_worker.js/chunks/cue_BsPexqx6.mjs +0 -1
  218. package/website/dist/_worker.js/chunks/cypher_apzf6OBi.mjs +0 -1
  219. package/website/dist/_worker.js/chunks/d_DcvIRcgm.mjs +0 -1
  220. package/website/dist/_worker.js/chunks/dark-plus_C01ONtzj.mjs +0 -1
  221. package/website/dist/_worker.js/chunks/dart_WkzM5WrV.mjs +0 -1
  222. package/website/dist/_worker.js/chunks/dax_DjXAO5V4.mjs +0 -1
  223. package/website/dist/_worker.js/chunks/desktop_C92LCxdc.mjs +0 -1
  224. package/website/dist/_worker.js/chunks/diff_CVwM_9XJ.mjs +0 -1
  225. package/website/dist/_worker.js/chunks/docker_DPzgJf6Z.mjs +0 -1
  226. package/website/dist/_worker.js/chunks/dotenv_D_vgANvA.mjs +0 -1
  227. package/website/dist/_worker.js/chunks/dracula-soft_CLnUBwFm.mjs +0 -1
  228. package/website/dist/_worker.js/chunks/dracula_lBVpb6Lb.mjs +0 -1
  229. package/website/dist/_worker.js/chunks/dream-maker_DTLbzd_J.mjs +0 -1
  230. package/website/dist/_worker.js/chunks/edge_i54JYm3_.mjs +0 -1
  231. package/website/dist/_worker.js/chunks/elixir_BJCIjTu4.mjs +0 -1
  232. package/website/dist/_worker.js/chunks/elm_BbXD39-_.mjs +0 -1
  233. package/website/dist/_worker.js/chunks/emacs-lisp_pxa5cXaN.mjs +0 -1
  234. package/website/dist/_worker.js/chunks/erb_Ccjijeee.mjs +0 -1
  235. package/website/dist/_worker.js/chunks/erlang_B2VM_hi7.mjs +0 -1
  236. package/website/dist/_worker.js/chunks/everforest-dark_BxvIPBim.mjs +0 -1
  237. package/website/dist/_worker.js/chunks/everforest-light_B7VoyaJM.mjs +0 -1
  238. package/website/dist/_worker.js/chunks/fennel_D-uo7X6c.mjs +0 -1
  239. package/website/dist/_worker.js/chunks/fish_BjePoK3m.mjs +0 -1
  240. package/website/dist/_worker.js/chunks/fluent_C8fgkzLX.mjs +0 -1
  241. package/website/dist/_worker.js/chunks/fortran-fixed-form_D1pu5zrc.mjs +0 -1
  242. package/website/dist/_worker.js/chunks/fortran-free-form_CSGOhJD6.mjs +0 -1
  243. package/website/dist/_worker.js/chunks/fsharp_B0xy-A4Y.mjs +0 -1
  244. package/website/dist/_worker.js/chunks/gdresource_CWppjlHq.mjs +0 -1
  245. package/website/dist/_worker.js/chunks/gdscript_eQCHchcS.mjs +0 -1
  246. package/website/dist/_worker.js/chunks/gdshader_C4kxepX7.mjs +0 -1
  247. package/website/dist/_worker.js/chunks/genie_ACtQLcDW.mjs +0 -1
  248. package/website/dist/_worker.js/chunks/gherkin_BFp2uKUd.mjs +0 -1
  249. package/website/dist/_worker.js/chunks/git-commit_CLg9ZwMV.mjs +0 -1
  250. package/website/dist/_worker.js/chunks/git-rebase_DG8A80Nt.mjs +0 -1
  251. package/website/dist/_worker.js/chunks/github-dark-default_BI0EP2Kv.mjs +0 -1
  252. package/website/dist/_worker.js/chunks/github-dark-dimmed_a_NIC0Xb.mjs +0 -1
  253. package/website/dist/_worker.js/chunks/github-dark-high-contrast_jZGqT7hk.mjs +0 -1
  254. package/website/dist/_worker.js/chunks/github-dark_CHCDNd2O.mjs +0 -1
  255. package/website/dist/_worker.js/chunks/github-light-default_DRbOW5RG.mjs +0 -1
  256. package/website/dist/_worker.js/chunks/github-light-high-contrast_tn_kWutM.mjs +0 -1
  257. package/website/dist/_worker.js/chunks/github-light_D9brYzot.mjs +0 -1
  258. package/website/dist/_worker.js/chunks/gleam_Dmhu1oxW.mjs +0 -1
  259. package/website/dist/_worker.js/chunks/glimmer-js_BfZbXy8A.mjs +0 -1
  260. package/website/dist/_worker.js/chunks/glimmer-ts_B9QVICrD.mjs +0 -1
  261. package/website/dist/_worker.js/chunks/glsl_DD2PPwOs.mjs +0 -1
  262. package/website/dist/_worker.js/chunks/gnuplot_D2OYChUX.mjs +0 -1
  263. package/website/dist/_worker.js/chunks/go_DYGFTe3h.mjs +0 -1
  264. package/website/dist/_worker.js/chunks/graphql_B7XsT3nH.mjs +0 -1
  265. package/website/dist/_worker.js/chunks/groovy_BO12Uwkl.mjs +0 -1
  266. package/website/dist/_worker.js/chunks/hack_CB2_ztCP.mjs +0 -1
  267. package/website/dist/_worker.js/chunks/haml_CyfDcDD3.mjs +0 -1
  268. package/website/dist/_worker.js/chunks/handlebars_CfpxpWm2.mjs +0 -1
  269. package/website/dist/_worker.js/chunks/haskell_jUeC5uN5.mjs +0 -1
  270. package/website/dist/_worker.js/chunks/haxe_B6GxP1WB.mjs +0 -1
  271. package/website/dist/_worker.js/chunks/hcl_DwoHV2oh.mjs +0 -1
  272. package/website/dist/_worker.js/chunks/hjson_DV7cJRk4.mjs +0 -1
  273. package/website/dist/_worker.js/chunks/hlsl_BlFCscPI.mjs +0 -1
  274. package/website/dist/_worker.js/chunks/houston_COBFG1Mx.mjs +0 -1
  275. package/website/dist/_worker.js/chunks/html-derivative_C9pJ337h.mjs +0 -1
  276. package/website/dist/_worker.js/chunks/html_D1OkrZS5.mjs +0 -1
  277. package/website/dist/_worker.js/chunks/http_DIGXRqvJ.mjs +0 -1
  278. package/website/dist/_worker.js/chunks/hxml_DEwh9i-c.mjs +0 -1
  279. package/website/dist/_worker.js/chunks/hy_DDoIgW1K.mjs +0 -1
  280. package/website/dist/_worker.js/chunks/imba_B00zbHo4.mjs +0 -1
  281. package/website/dist/_worker.js/chunks/index_C1UTDwYg.mjs +0 -1861
  282. package/website/dist/_worker.js/chunks/ini_D7XQA_p8.mjs +0 -1
  283. package/website/dist/_worker.js/chunks/java_B9wdFd8K.mjs +0 -1
  284. package/website/dist/_worker.js/chunks/javascript_CLsPGOON.mjs +0 -1
  285. package/website/dist/_worker.js/chunks/jinja_jarBCAN1.mjs +0 -1
  286. package/website/dist/_worker.js/chunks/jison_oGg3J708.mjs +0 -1
  287. package/website/dist/_worker.js/chunks/json5_DlZ1Kyaa.mjs +0 -1
  288. package/website/dist/_worker.js/chunks/json_DaYk_FMp.mjs +0 -1
  289. package/website/dist/_worker.js/chunks/jsonc_DlwgfSDs.mjs +0 -1
  290. package/website/dist/_worker.js/chunks/jsonl_BbCCVaZF.mjs +0 -1
  291. package/website/dist/_worker.js/chunks/jsonnet_Dt-G75xe.mjs +0 -1
  292. package/website/dist/_worker.js/chunks/jssm_BtKFTj2A.mjs +0 -1
  293. package/website/dist/_worker.js/chunks/jsx_DDx_xAZ8.mjs +0 -1
  294. package/website/dist/_worker.js/chunks/julia_CK0lv68l.mjs +0 -1
  295. package/website/dist/_worker.js/chunks/kanagawa-dragon_BldAK3Oo.mjs +0 -1
  296. package/website/dist/_worker.js/chunks/kanagawa-lotus_DVM8FX9_.mjs +0 -1
  297. package/website/dist/_worker.js/chunks/kanagawa-wave_Dpih0AKP.mjs +0 -1
  298. package/website/dist/_worker.js/chunks/kotlin_kWneB9V_.mjs +0 -1
  299. package/website/dist/_worker.js/chunks/kusto_BKVATd95.mjs +0 -1
  300. package/website/dist/_worker.js/chunks/laserwave_BqatxsVl.mjs +0 -1
  301. package/website/dist/_worker.js/chunks/latex_LVDcGBbc.mjs +0 -1
  302. package/website/dist/_worker.js/chunks/lean_W7qo-5M2.mjs +0 -1
  303. package/website/dist/_worker.js/chunks/less_DFNwJnBH.mjs +0 -1
  304. package/website/dist/_worker.js/chunks/light-plus_Dp0AoWsO.mjs +0 -1
  305. package/website/dist/_worker.js/chunks/liquid_D24qs0pc.mjs +0 -1
  306. package/website/dist/_worker.js/chunks/log_IPWMXriF.mjs +0 -1
  307. package/website/dist/_worker.js/chunks/logo_C6KaatrQ.mjs +0 -1
  308. package/website/dist/_worker.js/chunks/lua_CwnEf-T7.mjs +0 -1
  309. package/website/dist/_worker.js/chunks/luau_Br3-CXjS.mjs +0 -1
  310. package/website/dist/_worker.js/chunks/make_UBNG-kOo.mjs +0 -1
  311. package/website/dist/_worker.js/chunks/markdown_C7mhJFCm.mjs +0 -1
  312. package/website/dist/_worker.js/chunks/marko_4tchUvI7.mjs +0 -1
  313. package/website/dist/_worker.js/chunks/material-theme-darker_SKtaNEPn.mjs +0 -1
  314. package/website/dist/_worker.js/chunks/material-theme-lighter_zOX_DZCH.mjs +0 -1
  315. package/website/dist/_worker.js/chunks/material-theme-ocean_BN9WbhdC.mjs +0 -1
  316. package/website/dist/_worker.js/chunks/material-theme-palenight_DT_covjH.mjs +0 -1
  317. package/website/dist/_worker.js/chunks/material-theme_6RpeM3kc.mjs +0 -1
  318. package/website/dist/_worker.js/chunks/matlab_DCOXsPKR.mjs +0 -1
  319. package/website/dist/_worker.js/chunks/mdc_B9gb2UFP.mjs +0 -1
  320. package/website/dist/_worker.js/chunks/mdx_DGU7Nu9u.mjs +0 -1
  321. package/website/dist/_worker.js/chunks/mermaid_B69URzsZ.mjs +0 -1
  322. package/website/dist/_worker.js/chunks/min-dark_BgxifOMI.mjs +0 -1
  323. package/website/dist/_worker.js/chunks/min-light_BrPjXxUp.mjs +0 -1
  324. package/website/dist/_worker.js/chunks/mipsasm_9U-4_t7k.mjs +0 -1
  325. package/website/dist/_worker.js/chunks/mojo_B0wt7ug3.mjs +0 -1
  326. package/website/dist/_worker.js/chunks/monokai_B6Pxpoyi.mjs +0 -1
  327. package/website/dist/_worker.js/chunks/move_1eid4CyR.mjs +0 -1
  328. package/website/dist/_worker.js/chunks/narrat_Ds6-p5JZ.mjs +0 -1
  329. package/website/dist/_worker.js/chunks/nextflow_v2N1Qlqa.mjs +0 -1
  330. package/website/dist/_worker.js/chunks/nginx_Bp9Ab2NH.mjs +0 -1
  331. package/website/dist/_worker.js/chunks/night-owl_CdwOw_sc.mjs +0 -1
  332. package/website/dist/_worker.js/chunks/nim_BXGDUe53.mjs +0 -1
  333. package/website/dist/_worker.js/chunks/nix_CUig1nJH.mjs +0 -1
  334. package/website/dist/_worker.js/chunks/noop-middleware_DlWGj5t5.mjs +0 -10
  335. package/website/dist/_worker.js/chunks/nord_SPoG1iae.mjs +0 -1
  336. package/website/dist/_worker.js/chunks/nushell_DJw1Lca8.mjs +0 -1
  337. package/website/dist/_worker.js/chunks/objective-c_Bktzl_CO.mjs +0 -1
  338. package/website/dist/_worker.js/chunks/objective-cpp_CP4DWdDp.mjs +0 -1
  339. package/website/dist/_worker.js/chunks/ocaml_CeEAs7bZ.mjs +0 -1
  340. package/website/dist/_worker.js/chunks/one-dark-pro_-hIwCNMi.mjs +0 -1
  341. package/website/dist/_worker.js/chunks/one-light_DSmYvJ05.mjs +0 -1
  342. package/website/dist/_worker.js/chunks/pascal_C-S_Ms_o.mjs +0 -1
  343. package/website/dist/_worker.js/chunks/perl_CKamvo15.mjs +0 -1
  344. package/website/dist/_worker.js/chunks/php_BlmcX_F3.mjs +0 -1
  345. package/website/dist/_worker.js/chunks/plastic_Ryt8tVoA.mjs +0 -1
  346. package/website/dist/_worker.js/chunks/plsql_Cb3v7cBj.mjs +0 -1
  347. package/website/dist/_worker.js/chunks/po_DZbdNRlo.mjs +0 -1
  348. package/website/dist/_worker.js/chunks/poimandres_bYmE3_5d.mjs +0 -1
  349. package/website/dist/_worker.js/chunks/polar_pJkMGwoW.mjs +0 -1
  350. package/website/dist/_worker.js/chunks/postcss_BAXSOKgk.mjs +0 -1
  351. package/website/dist/_worker.js/chunks/powerquery_oITMGN4x.mjs +0 -1
  352. package/website/dist/_worker.js/chunks/powershell_6306-xIF.mjs +0 -1
  353. package/website/dist/_worker.js/chunks/prisma_DSDxnZGz.mjs +0 -1
  354. package/website/dist/_worker.js/chunks/prolog_CxG7tjZR.mjs +0 -1
  355. package/website/dist/_worker.js/chunks/proto_CS9ByXm1.mjs +0 -1
  356. package/website/dist/_worker.js/chunks/pug_BMtLJo6U.mjs +0 -1
  357. package/website/dist/_worker.js/chunks/puppet_BfeeSzee.mjs +0 -1
  358. package/website/dist/_worker.js/chunks/purescript_BFfueNaH.mjs +0 -1
  359. package/website/dist/_worker.js/chunks/python_Cc4Faapv.mjs +0 -1
  360. package/website/dist/_worker.js/chunks/qml_C1CTJTK8.mjs +0 -1
  361. package/website/dist/_worker.js/chunks/qmldir_nG1KaqKR.mjs +0 -1
  362. package/website/dist/_worker.js/chunks/qss_Cncxk263.mjs +0 -1
  363. package/website/dist/_worker.js/chunks/r_ChR54Ihi.mjs +0 -1
  364. package/website/dist/_worker.js/chunks/racket_BDrhptDs.mjs +0 -1
  365. package/website/dist/_worker.js/chunks/raku_07OUHa0P.mjs +0 -1
  366. package/website/dist/_worker.js/chunks/razor_DIP3INLa.mjs +0 -1
  367. package/website/dist/_worker.js/chunks/red_DOPXfj-6.mjs +0 -1
  368. package/website/dist/_worker.js/chunks/reg_B64SwEDj.mjs +0 -1
  369. package/website/dist/_worker.js/chunks/regexp_ButFGoB5.mjs +0 -1
  370. package/website/dist/_worker.js/chunks/rel_BWJAWqZD.mjs +0 -1
  371. package/website/dist/_worker.js/chunks/riscv_79gXlbsF.mjs +0 -1
  372. package/website/dist/_worker.js/chunks/rose-pine-dawn_DHIjVGd3.mjs +0 -1
  373. package/website/dist/_worker.js/chunks/rose-pine-moon_t86aEbs0.mjs +0 -1
  374. package/website/dist/_worker.js/chunks/rose-pine_BHgrcDCs.mjs +0 -1
  375. package/website/dist/_worker.js/chunks/rst_D3F4Fcpj.mjs +0 -1
  376. package/website/dist/_worker.js/chunks/ruby_Cs7vM9iv.mjs +0 -1
  377. package/website/dist/_worker.js/chunks/rust_DpyRVatH.mjs +0 -1
  378. package/website/dist/_worker.js/chunks/sas_DW45xZXN.mjs +0 -1
  379. package/website/dist/_worker.js/chunks/sass_C6SiMwN_.mjs +0 -1
  380. package/website/dist/_worker.js/chunks/scala_DlZOjNZk.mjs +0 -1
  381. package/website/dist/_worker.js/chunks/scheme_D2ezSJXu.mjs +0 -1
  382. package/website/dist/_worker.js/chunks/scss_DG5Spjqu.mjs +0 -1
  383. package/website/dist/_worker.js/chunks/sdbl_ZCYaj4VN.mjs +0 -1
  384. package/website/dist/_worker.js/chunks/shaderlab_CAcRkg1_.mjs +0 -1
  385. package/website/dist/_worker.js/chunks/shellscript_BWwhkDVh.mjs +0 -1
  386. package/website/dist/_worker.js/chunks/shellsession_BfEA3juK.mjs +0 -1
  387. package/website/dist/_worker.js/chunks/slack-dark_CL3lSpCc.mjs +0 -1
  388. package/website/dist/_worker.js/chunks/slack-ochin_DdZKOQVh.mjs +0 -1
  389. package/website/dist/_worker.js/chunks/smalltalk_DgilzSui.mjs +0 -1
  390. package/website/dist/_worker.js/chunks/snazzy-light_eJU08Pz_.mjs +0 -1
  391. package/website/dist/_worker.js/chunks/solarized-dark_Dg_YQywx.mjs +0 -1
  392. package/website/dist/_worker.js/chunks/solarized-light_BnIsrA6p.mjs +0 -1
  393. package/website/dist/_worker.js/chunks/solidity_DkseH8pQ.mjs +0 -1
  394. package/website/dist/_worker.js/chunks/soy_DU7bOYoG.mjs +0 -1
  395. package/website/dist/_worker.js/chunks/sparql_BuI1DBDH.mjs +0 -1
  396. package/website/dist/_worker.js/chunks/splunk_B8Ha9Pkg.mjs +0 -1
  397. package/website/dist/_worker.js/chunks/sql_BniHwea5.mjs +0 -1
  398. package/website/dist/_worker.js/chunks/ssh-config_CkE1GuVe.mjs +0 -1
  399. package/website/dist/_worker.js/chunks/stata_Dtqpbd_l.mjs +0 -1
  400. package/website/dist/_worker.js/chunks/stylus_CXTtglzO.mjs +0 -1
  401. package/website/dist/_worker.js/chunks/svelte_BjWYcUCN.mjs +0 -1
  402. package/website/dist/_worker.js/chunks/swift_BzHql_rM.mjs +0 -1
  403. package/website/dist/_worker.js/chunks/synthwave-84_DLRNhxNA.mjs +0 -1
  404. package/website/dist/_worker.js/chunks/system-verilog_ChyInPph.mjs +0 -1
  405. package/website/dist/_worker.js/chunks/systemd_Bi9Qa2qD.mjs +0 -1
  406. package/website/dist/_worker.js/chunks/talonscript_B3sH_Y-V.mjs +0 -1
  407. package/website/dist/_worker.js/chunks/tasl_BJ5yipRs.mjs +0 -1
  408. package/website/dist/_worker.js/chunks/tcl_CoJQjNoP.mjs +0 -1
  409. package/website/dist/_worker.js/chunks/templ_CrU7Ffil.mjs +0 -1
  410. package/website/dist/_worker.js/chunks/terraform_DT9JSFpC.mjs +0 -1
  411. package/website/dist/_worker.js/chunks/tex_5PKu2yA0.mjs +0 -1
  412. package/website/dist/_worker.js/chunks/tokyo-night_Buo8OK7-.mjs +0 -1
  413. package/website/dist/_worker.js/chunks/toml_CPuXX3oc.mjs +0 -1
  414. package/website/dist/_worker.js/chunks/ts-tags_D0M_1VSH.mjs +0 -1
  415. package/website/dist/_worker.js/chunks/tsv_CuivVNot.mjs +0 -1
  416. package/website/dist/_worker.js/chunks/tsx_MkuGr8MY.mjs +0 -1
  417. package/website/dist/_worker.js/chunks/turtle_BqgEPK7f.mjs +0 -1
  418. package/website/dist/_worker.js/chunks/twig_r1G9rpYJ.mjs +0 -1
  419. package/website/dist/_worker.js/chunks/typescript_Au5buqzM.mjs +0 -1
  420. package/website/dist/_worker.js/chunks/typespec_47rhBK_z.mjs +0 -1
  421. package/website/dist/_worker.js/chunks/typst_BAtuQLh-.mjs +0 -1
  422. package/website/dist/_worker.js/chunks/v_BIvWImHg.mjs +0 -1
  423. package/website/dist/_worker.js/chunks/vala_DYEacj30.mjs +0 -1
  424. package/website/dist/_worker.js/chunks/vb_CikQuqGJ.mjs +0 -1
  425. package/website/dist/_worker.js/chunks/verilog_BQRENwI-.mjs +0 -1
  426. package/website/dist/_worker.js/chunks/vesper_DA0kvTmj.mjs +0 -1
  427. package/website/dist/_worker.js/chunks/vhdl_DHscJIyg.mjs +0 -1
  428. package/website/dist/_worker.js/chunks/viml_F2pvMwvG.mjs +0 -1
  429. package/website/dist/_worker.js/chunks/vitesse-black_D9tjNzd0.mjs +0 -1
  430. package/website/dist/_worker.js/chunks/vitesse-dark_Bnm5d0hd.mjs +0 -1
  431. package/website/dist/_worker.js/chunks/vitesse-light_CHwbyjNR.mjs +0 -1
  432. package/website/dist/_worker.js/chunks/vue-html_DyYtbbMK.mjs +0 -1
  433. package/website/dist/_worker.js/chunks/vue_DofN6juy.mjs +0 -1
  434. package/website/dist/_worker.js/chunks/vyper_CiR0m-OV.mjs +0 -1
  435. package/website/dist/_worker.js/chunks/wasm_CwIGgRGf.mjs +0 -1
  436. package/website/dist/_worker.js/chunks/wasm_jKWhg0J0.mjs +0 -1
  437. package/website/dist/_worker.js/chunks/wenyan_DKvVZKXW.mjs +0 -1
  438. package/website/dist/_worker.js/chunks/wgsl_BOWZY7yw.mjs +0 -1
  439. package/website/dist/_worker.js/chunks/wikitext_CXDhhHPy.mjs +0 -1
  440. package/website/dist/_worker.js/chunks/wolfram_ChkmGnW0.mjs +0 -1
  441. package/website/dist/_worker.js/chunks/xml_DXH3hHIu.mjs +0 -1
  442. package/website/dist/_worker.js/chunks/xsl_DuP2mFjg.mjs +0 -1
  443. package/website/dist/_worker.js/chunks/yaml_IGiEkTge.mjs +0 -1
  444. package/website/dist/_worker.js/chunks/zenscript_59iXGyNw.mjs +0 -1
  445. package/website/dist/_worker.js/chunks/zig_DKzb0zdT.mjs +0 -1
  446. package/website/dist/_worker.js/index.js +0 -53
  447. package/website/dist/_worker.js/manifest_CT_D-YDe.mjs +0 -98
  448. package/website/dist/_worker.js/pages/_image.astro.mjs +0 -24
  449. package/website/dist/_worker.js/pages/agents.astro.mjs +0 -1
  450. package/website/dist/_worker.js/pages/animation.astro.mjs +0 -1
  451. package/website/dist/_worker.js/pages/api/raw-markdown/_---path_.astro.mjs +0 -44
  452. package/website/dist/_worker.js/pages/config.astro.mjs +0 -1
  453. package/website/dist/_worker.js/pages/fonts.astro.mjs +0 -1
  454. package/website/dist/_worker.js/pages/getting-started.astro.mjs +0 -1
  455. package/website/dist/_worker.js/pages/helpers.astro.mjs +0 -1
  456. package/website/dist/_worker.js/pages/images.astro.mjs +0 -1
  457. package/website/dist/_worker.js/pages/index.astro.mjs +0 -1
  458. package/website/dist/_worker.js/pages/llm.txt.astro.mjs +0 -1
  459. package/website/dist/_worker.js/pages/preview.astro.mjs +0 -1
  460. package/website/dist/_worker.js/pages/sdk.astro.mjs +0 -1
  461. package/website/dist/_worker.js/pages/sitemap.xml.astro.mjs +0 -1
  462. package/website/dist/_worker.js/pages/styling.astro.mjs +0 -1
  463. package/website/dist/_worker.js/pages/templates.astro.mjs +0 -1
  464. package/website/dist/_worker.js/pages/video.astro.mjs +0 -1
  465. package/website/dist/_worker.js/renderers.mjs +0 -57
  466. package/website/dist/agents/index.html +0 -52
  467. package/website/dist/animation/index.html +0 -879
  468. package/website/dist/config/index.html +0 -184
  469. package/website/dist/fonts/index.html +0 -198
  470. package/website/dist/getting-started/index.html +0 -107
  471. package/website/dist/helpers/index.html +0 -164
  472. package/website/dist/images/index.html +0 -335
  473. package/website/dist/index.html +0 -140
  474. package/website/dist/llm.txt +0 -2776
  475. package/website/dist/preview/index.html +0 -111
  476. package/website/dist/robots.txt +0 -40
  477. package/website/dist/sdk/index.html +0 -1076
  478. package/website/dist/sitemap.xml +0 -76
  479. package/website/dist/styling/index.html +0 -366
  480. package/website/dist/templates/index.html +0 -74
  481. package/website/dist/video/index.html +0 -319
  482. package/website/package-lock.json +0 -8089
  483. package/website/package.json +0 -41
  484. package/website/public/.gitkeep +0 -5
  485. package/website/public/robots.txt +0 -40
  486. package/website/templates/og-image.tsx +0 -60
package/website/dist/sitemap.xml DELETED
@@ -1,76 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3
-
4
- <url>
5
- <loc>https://loopwind.dev</loc>
6
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
7
- <changefreq>weekly</changefreq>
8
- <priority>1.0</priority>
9
- </url>
10
- <url>
11
- <loc>https://loopwind.dev/getting-started</loc>
12
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
13
- <changefreq>weekly</changefreq>
14
- <priority>0.9</priority>
15
- </url>
16
- <url>
17
- <loc>https://loopwind.dev/templates</loc>
18
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
19
- <changefreq>weekly</changefreq>
20
- <priority>0.8</priority>
21
- </url>
22
- <url>
23
- <loc>https://loopwind.dev/images</loc>
24
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
25
- <changefreq>weekly</changefreq>
26
- <priority>0.8</priority>
27
- </url>
28
- <url>
29
- <loc>https://loopwind.dev/video</loc>
30
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
31
- <changefreq>weekly</changefreq>
32
- <priority>0.8</priority>
33
- </url>
34
- <url>
35
- <loc>https://loopwind.dev/animation</loc>
36
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
37
- <changefreq>monthly</changefreq>
38
- <priority>0.7</priority>
39
- </url>
40
- <url>
41
- <loc>https://loopwind.dev/helpers</loc>
42
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
43
- <changefreq>monthly</changefreq>
44
- <priority>0.7</priority>
45
- </url>
46
- <url>
47
- <loc>https://loopwind.dev/styling</loc>
48
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
49
- <changefreq>monthly</changefreq>
50
- <priority>0.7</priority>
51
- </url>
52
- <url>
53
- <loc>https://loopwind.dev/fonts</loc>
54
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
55
- <changefreq>monthly</changefreq>
56
- <priority>0.6</priority>
57
- </url>
58
- <url>
59
- <loc>https://loopwind.dev/agents</loc>
60
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
61
- <changefreq>monthly</changefreq>
62
- <priority>0.7</priority>
63
- </url>
64
- <url>
65
- <loc>https://loopwind.dev/sdk</loc>
66
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
67
- <changefreq>monthly</changefreq>
68
- <priority>0.7</priority>
69
- </url>
70
- <url>
71
- <loc>https://loopwind.dev/llm.txt</loc>
72
- <lastmod>2025-11-20T11:24:11.539Z</lastmod>
73
- <changefreq>monthly</changefreq>
74
- <priority>0.5</priority>
75
- </url>
76
- </urlset>
package/website/dist/styling/index.html DELETED
@@ -1,366 +0,0 @@
1
- <!DOCTYPE html><html lang="en" data-astro-cid-mw7aashj> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><link rel="canonical" href="https://loopwind.dev/styling/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="keywords" content="loopwind, image generation, video generation, React, Tailwind CSS, Satori, CLI tool, templates, shadcn/ui, AI agents, Cursor, automation, serverless, WASM, Open Graph, social media, marketing automation"><meta name="author" content="loopwind"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://loopwind.dev/styling/"><meta property="og:title"><meta property="og:description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/api/og/styling"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt"><meta property="og:site_name" content="loopwind"><meta property="og:locale" content="en_US"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://loopwind.dev/styling/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/api/og/styling"><meta name="twitter:image:alt"><meta name="twitter:creator" content="@loopwind"><meta name="twitter:site" content="@loopwind"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="language" content="English"><meta name="revisit-after" content="7 days"><meta name="rating" content="general"><!-- Mobile Web App --><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="loopwind"><!-- Structured Data (JSON-LD) --><script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"loopwind","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","description":"CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates.","url":"https://loopwind.dev/","author":{"@type":"Organization","name":"loopwind","url":"https://loopwind.dev/"},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"softwareVersion":"0.11.0","releaseNotes":"https://github.com/loopwind/loopwind/releases","screenshot":"https://loopwind.dev/api/og/styling","featureList":["Image generation from React templates","Video generation with animations","Tailwind CSS support","shadcn/ui design system","CLI-based workflow","Serverless rendering","TypeScript support","AI Agent friendly"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"loopwind","url":"https://loopwind.dev/","logo":"https://loopwind.dev/favicon.svg","sameAs":["https://github.com/loopwind/loopwind","https://www.npmjs.com/package/loopwind"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://loopwind.dev/"},{"@type":"ListItem","position":2,"name":"Styling","item":"https://loopwind.dev/styling"}]}</script><link rel="stylesheet" href="/_astro/agents.Yx-L_igG.css"><script type="module">const p=document.getElementById("mobile-menu-button"),l=document.getElementById("mobile-menu"),g=document.querySelectorAll(".mobile-menu-link");p?.addEventListener("click",()=>{l?.classList.toggle("hidden")});l?.addEventListener("click",o=>{o.target===l&&l.classList.add("hidden")});g.forEach(o=>{o.addEventListener("click",()=>{l?.classList.add("hidden")})});function m(){const o=document.getElementById("toc-nav");if(!o){console.log("TOC: No toc-nav element found");return}const n=document.querySelector("article");if(!n){console.log("TOC: No article element found");return}const c=n.querySelectorAll("h2, h3");if(c.length===0){console.log("TOC: No headings found");return}console.log(`TOC: Found ${c.length} headings`);const a=document.createElement("ul");a.className="space-y-0 text-sm border-l border-border/50",c.forEach(e=>{const t=e.tagName==="H2"?2:3,r=e.id||e.textContent?.toLowerCase().replace(/[^\w]+/g,"-");!e.id&&r&&(e.id=r);const s=document.createElement("li"),d=document.createElement("a");d.href=`#${r}`,d.textContent=e.textContent,d.className=`toc-link block py-1 px-3 -ml-px border-l-2 border-transparent transition-all no-underline ${t===3?"pl-6 text-xs text-muted-foreground/70":"text-sm text-muted-foreground"} hover:text-foreground hover:border-muted-foreground/50`,s.appendChild(d),a.appendChild(s)}),o.appendChild(a);const i=new IntersectionObserver(e=>{e.forEach(t=>{const r=t.target.id,s=o.querySelector(`a[href="#${r}"]`);t.isIntersecting&&(document.querySelectorAll(".toc-link").forEach(d=>{d.classList.remove("text-foreground","border-accent","font-medium")}),s?.classList.add("text-foreground","border-accent","font-medium"))})},{rootMargin:"-100px 0px -66%",threshold:0});c.forEach(e=>{i.observe(e)})}document.addEventListener("DOMContentLoaded",m);document.addEventListener("astro:page-load",m);function u(){const o=document.getElementById("copy-to-llm-btn"),n=document.getElementById("copy-btn-text");if(!o||!n){console.log("Copy to LLM: Button not found on this page");return}console.log("Copy to LLM: Initialized"),o.addEventListener("click",async()=>{const c=window.location.pathname,a=c.replace(/^\//,"").replace(/\/$/,""),e=`/api/raw-markdown/${a===""?"index":a}`;console.log("Copy to LLM clicked: pathname=",c,"apiUrl=",e);try{n.textContent="Copying...";const t=await fetch(e);if(console.log("Response status:",t.status),!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const r=await t.text();console.log("Got markdown, length:",r.length),await navigator.clipboard.writeText(r),n.textContent="Copied!",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}catch(t){console.error("Copy failed:",t),n.textContent="Failed",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}})}document.addEventListener("DOMContentLoaded",u);document.addEventListener("astro:page-load",u);
2
- </script></head> <body class="antialiased" data-astro-cid-mw7aashj> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Mobile Header --> <header class="mobile-header fixed top-0 left-0 right-0 h-16 bg-card border-b border-border z-50 md:hidden" data-astro-cid-mw7aashj> <div class="flex items-center justify-between h-full px-4" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-2xl">➰</span> <span>loopwind</span> </h1> </a> <button id="mobile-menu-button" class="p-2 text-foreground hover:bg-accent rounded-md transition-colors" aria-label="Toggle menu" data-astro-cid-mw7aashj> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-mw7aashj></path> </svg> </button> </div> </header> <!-- Mobile Menu Overlay --> <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden hidden" data-astro-cid-mw7aashj> <div class="fixed top-0 left-0 h-screen w-64 bg-card border-r border-border overflow-y-auto" data-astro-cid-mw7aashj> <div class="p-6 pt-20" data-astro-cid-mw7aashj> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/preview" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/config" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="mobile-menu-link block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt ⇱ </a> </li> </ul> </nav> </div> </div> </div> <!-- Desktop Sidebar --> <aside class="desktop-sidebar fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <div class="block mb-3" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-3xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-4xl">➰</span> <span>loopwind</span> </h1> </a> </div> <nav data-astro-cid-mw7aashj> <ul class="space-y-0" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/preview" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/config" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt ⇱ </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64 mr-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <button id="copy-to-llm-btn" class="mb-6 px-4 py-2 bg-accent hover:bg-accent/80 text-accent-foreground rounded-md text-sm font-medium transition-colors flex items-center gap-2" aria-label="Copy raw markdown to clipboard" data-astro-cid-mw7aashj> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" data-astro-cid-mw7aashj></path> </svg> <span id="copy-btn-text" data-astro-cid-mw7aashj>Copy to LLM</span> </button> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="styling-templates">Styling Templates</h1>
3
- <p>Style your templates with Tailwind utility classes and shadcn/ui’s beautiful design system.</p>
4
- <h2 id="quick-start">Quick Start</h2>
5
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> MyTemplate</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
6
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
7
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex items-center justify-center w-full h-full bg-gradient-to-br from-blue-600 to-purple-700&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
8
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-7xl font-bold text-white&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
9
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
10
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
11
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
12
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
13
- <span class="line"><span style="color:#E1E4E8">}</span></span>
14
- <span class="line"></span></code></pre>
15
- <h2 id="the-tw-function">The <code>tw()</code> Function</h2>
16
- <p>Every template receives a <code>tw()</code> function that converts Tailwind classes to inline styles compatible with Satori:</p>
17
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Tailwind classes</span></span>
18
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex items-center justify-center p-8 bg-blue-500&#39;</span><span style="color:#E1E4E8">)</span></span>
19
- <span class="line"></span>
20
- <span class="line"><span style="color:#6A737D">// Converts to inline styles:</span></span>
21
- <span class="line"><span style="color:#E1E4E8">{</span></span>
22
- <span class="line"><span style="color:#B392F0"> display</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;flex&#39;</span><span style="color:#E1E4E8">,</span></span>
23
- <span class="line"><span style="color:#B392F0"> alignItems</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;center&#39;</span><span style="color:#E1E4E8">,</span></span>
24
- <span class="line"><span style="color:#B392F0"> justifyContent</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;center&#39;</span><span style="color:#E1E4E8">,</span></span>
25
- <span class="line"><span style="color:#B392F0"> padding</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;2rem&#39;</span><span style="color:#E1E4E8">,</span></span>
26
- <span class="line"><span style="color:#B392F0"> backgroundColor</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#3b82f6&#39;</span></span>
27
- <span class="line"><span style="color:#E1E4E8">}</span></span>
28
- <span class="line"></span></code></pre>
29
- <h3 id="basic-usage">Basic Usage</h3>
30
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> Banner</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">subtitle</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
31
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
32
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-full h-full p-12 bg-gray-50&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
33
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-6xl font-bold text-gray-900 mb-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
34
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
35
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
36
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-2xl text-gray-600&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
37
- <span class="line"><span style="color:#E1E4E8"> {subtitle}</span></span>
38
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
39
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
40
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
41
- <span class="line"><span style="color:#E1E4E8">}</span></span>
42
- <span class="line"></span></code></pre>
43
- <h3 id="combining-with-custom-styles">Combining with Custom Styles</h3>
44
- <p>Mix Tailwind classes with custom styles using the spread operator:</p>
45
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> CustomGradient</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
46
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
47
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span></span>
48
- <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{</span></span>
49
- <span class="line"><span style="color:#F97583"> ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex flex-col items-center justify-center w-full h-full p-20&#39;</span><span style="color:#E1E4E8">),</span></span>
50
- <span class="line"><span style="color:#E1E4E8"> background: </span><span style="color:#9ECBFF">&#39;linear-gradient(135deg, #667eea 0%, #764ba2 100%)&#39;</span><span style="color:#E1E4E8">,</span></span>
51
- <span class="line"><span style="color:#E1E4E8"> }}</span></span>
52
- <span class="line"><span style="color:#E1E4E8"> &gt;</span></span>
53
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-8xl font-bold text-white&#39;</span><span style="color:#E1E4E8">)}&gt;{title}&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
54
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
55
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
56
- <span class="line"><span style="color:#E1E4E8">}</span></span>
57
- <span class="line"></span></code></pre>
58
- <h2 id="shadcnui-design-system">shadcn/ui Design System</h2>
59
- <p>loopwind uses <strong>shadcn/ui’s design system</strong> by default, providing semantic color tokens for beautiful, consistent designs.</p>
60
- <h3 id="default-color-palette">Default Color Palette</h3>
61
- <p>All templates automatically have access to these semantic colors defined in <code>_loopwind/loopwind.json</code>:</p>
62
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#B392F0">colors</span><span style="color:#E1E4E8">: {</span></span>
63
- <span class="line"><span style="color:#6A737D"> // Primary colors</span></span>
64
- <span class="line"><span style="color:#B392F0"> primary</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#18181b&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Main brand color</span></span>
65
- <span class="line"><span style="color:#9ECBFF"> &#39;primary-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#fafafa&#39;</span><span style="color:#E1E4E8">,</span></span>
66
- <span class="line"></span>
67
- <span class="line"><span style="color:#6A737D"> // Secondary colors</span></span>
68
- <span class="line"><span style="color:#B392F0"> secondary</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#f4f4f5&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Subtle accents</span></span>
69
- <span class="line"><span style="color:#9ECBFF"> &#39;secondary-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#18181b&#39;</span><span style="color:#E1E4E8">,</span></span>
70
- <span class="line"></span>
71
- <span class="line"><span style="color:#6A737D"> // Background</span></span>
72
- <span class="line"><span style="color:#B392F0"> background</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#ffffff&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Page background</span></span>
73
- <span class="line"><span style="color:#B392F0"> foreground</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#09090b&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Main text color</span></span>
74
- <span class="line"></span>
75
- <span class="line"><span style="color:#6A737D"> // Muted</span></span>
76
- <span class="line"><span style="color:#B392F0"> muted</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#f4f4f5&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Subtle backgrounds</span></span>
77
- <span class="line"><span style="color:#9ECBFF"> &#39;muted-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#71717a&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Muted text</span></span>
78
- <span class="line"></span>
79
- <span class="line"><span style="color:#6A737D"> // Accent</span></span>
80
- <span class="line"><span style="color:#B392F0"> accent</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#f4f4f5&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Highlight color</span></span>
81
- <span class="line"><span style="color:#9ECBFF"> &#39;accent-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#18181b&#39;</span><span style="color:#E1E4E8">,</span></span>
82
- <span class="line"></span>
83
- <span class="line"><span style="color:#6A737D"> // Destructive</span></span>
84
- <span class="line"><span style="color:#B392F0"> destructive</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#ef4444&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Error/danger states</span></span>
85
- <span class="line"><span style="color:#9ECBFF"> &#39;destructive-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#fafafa&#39;</span><span style="color:#E1E4E8">,</span></span>
86
- <span class="line"></span>
87
- <span class="line"><span style="color:#6A737D"> // UI Elements</span></span>
88
- <span class="line"><span style="color:#B392F0"> border</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#e4e4e7&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Border color</span></span>
89
- <span class="line"><span style="color:#B392F0"> input</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#e4e4e7&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Input borders</span></span>
90
- <span class="line"><span style="color:#B392F0"> ring</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#18181b&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Focus rings</span></span>
91
- <span class="line"><span style="color:#B392F0"> card</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#ffffff&#39;</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Card background</span></span>
92
- <span class="line"><span style="color:#9ECBFF"> &#39;card-foreground&#39;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&#39;#09090b&#39;</span><span style="color:#E1E4E8">,</span></span>
93
- <span class="line"><span style="color:#E1E4E8">}</span></span>
94
- <span class="line"></span></code></pre>
95
- <h3 id="using-semantic-colors">Using Semantic Colors</h3>
96
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> SemanticCard</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">description</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">price</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
97
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
98
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-card border border-border rounded-lg p-6&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
99
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h2</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-card-foreground text-2xl font-bold mb-2&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
100
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
101
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">&gt;</span></span>
102
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-muted-foreground mb-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
103
- <span class="line"><span style="color:#E1E4E8"> {description}</span></span>
104
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
105
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-primary text-3xl font-bold&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
106
- <span class="line"><span style="color:#E1E4E8"> ${price}</span></span>
107
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
108
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
109
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
110
- <span class="line"><span style="color:#E1E4E8">}</span></span>
111
- <span class="line"></span></code></pre>
112
- <h3 id="opacity-modifiers">Opacity Modifiers</h3>
113
- <p>Use Tailwind’s slash syntax for opacity with any color:</p>
114
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> OpacityExample</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
115
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
116
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-primary/50&#39;</span><span style="color:#E1E4E8">)}&gt; {</span><span style="color:#6A737D">/* 50% opacity */</span><span style="color:#E1E4E8">}</span></span>
117
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-muted-foreground/75&#39;</span><span style="color:#E1E4E8">)}&gt; {</span><span style="color:#6A737D">/* 75% opacity */</span><span style="color:#E1E4E8">}</span></span>
118
- <span class="line"><span style="color:#E1E4E8"> Subtle text</span></span>
119
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
120
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;border border-border/30&#39;</span><span style="color:#E1E4E8">)}&gt; {</span><span style="color:#6A737D">/* 30% opacity */</span><span style="color:#E1E4E8">}</span></span>
121
- <span class="line"><span style="color:#E1E4E8"> Faint border</span></span>
122
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
123
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
124
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
125
- <span class="line"><span style="color:#E1E4E8">}</span></span>
126
- <span class="line"></span></code></pre>
127
- <p><strong>Supported syntax:</strong></p>
128
- <ul>
129
- <li><code>bg-{color}/{opacity}</code> - Background with opacity</li>
130
- <li><code>text-{color}/{opacity}</code> - Text with opacity</li>
131
- <li><code>border-{color}/{opacity}</code> - Border with opacity</li>
132
- </ul>
133
- <h3 id="text-hierarchy">Text Hierarchy</h3>
134
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Primary text</span></span>
135
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-foreground&#39;</span><span style="color:#E1E4E8">)</span></span>
136
- <span class="line"></span>
137
- <span class="line"><span style="color:#6A737D">// Secondary/muted text</span></span>
138
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-muted-foreground&#39;</span><span style="color:#E1E4E8">)</span></span>
139
- <span class="line"></span>
140
- <span class="line"><span style="color:#6A737D">// Accent/brand text</span></span>
141
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-primary&#39;</span><span style="color:#E1E4E8">)</span></span>
142
- <span class="line"></span>
143
- <span class="line"><span style="color:#6A737D">// Destructive/error text</span></span>
144
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-destructive&#39;</span><span style="color:#E1E4E8">)</span></span>
145
- <span class="line"></span></code></pre>
146
- <h3 id="backgrounds">Backgrounds</h3>
147
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Page background</span></span>
148
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-background&#39;</span><span style="color:#E1E4E8">)</span></span>
149
- <span class="line"></span>
150
- <span class="line"><span style="color:#6A737D">// Card/elevated surfaces</span></span>
151
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-card&#39;</span><span style="color:#E1E4E8">)</span></span>
152
- <span class="line"></span>
153
- <span class="line"><span style="color:#6A737D">// Subtle backgrounds</span></span>
154
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-muted&#39;</span><span style="color:#E1E4E8">)</span></span>
155
- <span class="line"></span>
156
- <span class="line"><span style="color:#6A737D">// Accent backgrounds</span></span>
157
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-accent&#39;</span><span style="color:#E1E4E8">)</span></span>
158
- <span class="line"></span></code></pre>
159
- <h2 id="supported-tailwind-classes">Supported Tailwind Classes</h2>
160
- <h3 id="layout">Layout</h3>
161
- <ul>
162
- <li><strong>Display</strong>: <code>flex</code>, <code>inline-flex</code>, <code>block</code>, <code>inline-block</code>, <code>hidden</code></li>
163
- <li><strong>Flex Direction</strong>: <code>flex-row</code>, <code>flex-col</code>, <code>flex-row-reverse</code>, <code>flex-col-reverse</code></li>
164
- <li><strong>Justify</strong>: <code>justify-start</code>, <code>justify-end</code>, <code>justify-center</code>, <code>justify-between</code>, <code>justify-around</code></li>
165
- <li><strong>Align</strong>: <code>items-start</code>, <code>items-end</code>, <code>items-center</code>, <code>items-baseline</code>, <code>items-stretch</code></li>
166
- </ul>
167
- <h3 id="spacing">Spacing</h3>
168
- <ul>
169
- <li><strong>Padding</strong>: <code>p-{n}</code>, <code>px-{n}</code>, <code>py-{n}</code>, <code>pt-{n}</code>, <code>pb-{n}</code>, <code>pl-{n}</code>, <code>pr-{n}</code></li>
170
- <li><strong>Margin</strong>: <code>m-{n}</code>, <code>mx-{n}</code>, <code>my-{n}</code>, <code>mt-{n}</code>, <code>mb-{n}</code>, <code>ml-{n}</code>, <code>mr-{n}</code></li>
171
- <li><strong>Gap</strong>: <code>gap-{n}</code>, <code>gap-x-{n}</code>, <code>gap-y-{n}</code></li>
172
- <li><strong>Sizes</strong>: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 56, 64</li>
173
- </ul>
174
- <p>Examples:</p>
175
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;p-4&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// padding: 1rem</span></span>
176
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;px-8&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// paddingLeft: 2rem, paddingRight: 2rem</span></span>
177
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;m-6&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// margin: 1.5rem</span></span>
178
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;gap-4&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// gap: 1rem</span></span>
179
- <span class="line"></span></code></pre>
180
- <h3 id="sizing">Sizing</h3>
181
- <ul>
182
- <li><strong>Width</strong>: <code>w-{n}</code>, <code>w-full</code>, <code>w-screen</code>, <code>w-1/2</code>, <code>w-1/3</code>, <code>w-2/3</code></li>
183
- <li><strong>Height</strong>: <code>h-{n}</code>, <code>h-full</code>, <code>h-screen</code></li>
184
- </ul>
185
- <p>Examples:</p>
186
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-full&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// width: 100%</span></span>
187
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;h-64&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// height: 16rem</span></span>
188
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-1/2&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// width: 50%</span></span>
189
- <span class="line"></span></code></pre>
190
- <h3 id="typography">Typography</h3>
191
- <ul>
192
- <li><strong>Font Size</strong>: <code>text-xs</code>, <code>text-sm</code>, <code>text-base</code>, <code>text-lg</code>, <code>text-xl</code>, <code>text-2xl</code>, <code>text-3xl</code>, <code>text-4xl</code>, <code>text-5xl</code>, <code>text-6xl</code>, <code>text-7xl</code>, <code>text-8xl</code>, <code>text-9xl</code></li>
193
- <li><strong>Font Weight</strong>: <code>font-thin</code>, <code>font-light</code>, <code>font-normal</code>, <code>font-medium</code>, <code>font-semibold</code>, <code>font-bold</code>, <code>font-extrabold</code>, <code>font-black</code></li>
194
- <li><strong>Text Align</strong>: <code>text-left</code>, <code>text-center</code>, <code>text-right</code></li>
195
- <li><strong>Line Height</strong>: <code>leading-none</code>, <code>leading-tight</code>, <code>leading-normal</code>, <code>leading-relaxed</code>, <code>leading-loose</code></li>
196
- </ul>
197
- <h3 id="colors">Colors</h3>
198
- <p>All standard Tailwind colors plus shadcn semantic colors:</p>
199
- <p><strong>Standard colors:</strong></p>
200
- <ul>
201
- <li><code>text-{color}-{shade}</code>, <code>bg-{color}-{shade}</code>, <code>border-{color}-{shade}</code></li>
202
- <li>Colors: <code>red</code>, <code>blue</code>, <code>green</code>, <code>yellow</code>, <code>purple</code>, <code>pink</code>, <code>gray</code>, <code>indigo</code>, <code>teal</code>, <code>orange</code></li>
203
- <li>Shades: <code>50</code>, <code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></li>
204
- </ul>
205
- <p><strong>shadcn semantic colors:</strong></p>
206
- <ul>
207
- <li><code>text-foreground</code>, <code>text-primary</code>, <code>text-muted-foreground</code>, <code>text-destructive</code></li>
208
- <li><code>bg-background</code>, <code>bg-card</code>, <code>bg-muted</code>, <code>bg-accent</code>, <code>bg-primary</code></li>
209
- <li><code>border-border</code>, <code>border-input</code></li>
210
- </ul>
211
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-blue-500&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// Standard Tailwind color</span></span>
212
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-purple-600&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// Standard Tailwind color</span></span>
213
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-primary&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// shadcn semantic color</span></span>
214
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-card&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// shadcn semantic color</span></span>
215
- <span class="line"></span></code></pre>
216
- <h3 id="position--layout">Position &amp; Layout</h3>
217
- <ul>
218
- <li><strong>Position</strong>: <code>relative</code>, <code>absolute</code>, <code>fixed</code>, <code>sticky</code></li>
219
- <li><strong>Inset</strong>: <code>inset-0</code>, <code>top-0</code>, <code>bottom-0</code>, <code>left-0</code>, <code>right-0</code></li>
220
- <li><strong>Z-Index</strong>: <code>z-0</code>, <code>z-10</code>, <code>z-20</code>, <code>z-30</code>, <code>z-40</code>, <code>z-50</code></li>
221
- </ul>
222
- <h3 id="borders">Borders</h3>
223
- <ul>
224
- <li><strong>Border Width</strong>: <code>border</code>, <code>border-{n}</code>, <code>border-t</code>, <code>border-b</code>, <code>border-l</code>, <code>border-r</code></li>
225
- <li><strong>Border Radius</strong>: <code>rounded</code>, <code>rounded-sm</code>, <code>rounded-md</code>, <code>rounded-lg</code>, <code>rounded-xl</code>, <code>rounded-2xl</code>, <code>rounded-3xl</code>, <code>rounded-full</code></li>
226
- <li><strong>Border Color</strong>: <code>border-{color}-{shade}</code>, <code>border-border</code>, <code>border-input</code></li>
227
- </ul>
228
- <h3 id="effects">Effects</h3>
229
- <ul>
230
- <li><strong>Shadow</strong>: <code>shadow-sm</code>, <code>shadow</code>, <code>shadow-md</code>, <code>shadow-lg</code>, <code>shadow-xl</code>, <code>shadow-2xl</code></li>
231
- <li><strong>Opacity</strong>: <code>opacity-0</code>, <code>opacity-25</code>, <code>opacity-50</code>, <code>opacity-75</code>, <code>opacity-100</code></li>
232
- </ul>
233
- <h3 id="filters">Filters</h3>
234
- <ul>
235
- <li><strong>Blur</strong>: <code>blur-none</code>, <code>blur-sm</code>, <code>blur</code>, <code>blur-md</code>, <code>blur-lg</code>, <code>blur-xl</code></li>
236
- <li><strong>Brightness</strong>: <code>brightness-0</code>, <code>brightness-50</code>, <code>brightness-100</code>, <code>brightness-150</code>, <code>brightness-200</code></li>
237
- <li><strong>Contrast</strong>: <code>contrast-0</code>, <code>contrast-50</code>, <code>contrast-100</code>, <code>contrast-150</code>, <code>contrast-200</code></li>
238
- </ul>
239
- <h2 id="gradients">Gradients</h2>
240
- <h3 id="linear-gradients">Linear Gradients</h3>
241
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// Gradient direction</span></span>
242
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-gradient-to-r&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// left to right</span></span>
243
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-gradient-to-br&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// top-left to bottom-right</span></span>
244
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-gradient-to-t&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// bottom to top</span></span>
245
- <span class="line"></span>
246
- <span class="line"><span style="color:#6A737D">// Gradient colors</span></span>
247
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;from-blue-500&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// Start color</span></span>
248
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;via-purple-500&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// Middle color</span></span>
249
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;to-pink-500&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// End color</span></span>
250
- <span class="line"></span>
251
- <span class="line"><span style="color:#6A737D">// Complete gradient</span></span>
252
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500&#39;</span><span style="color:#E1E4E8">)</span></span>
253
- <span class="line"></span></code></pre>
254
- <h3 id="gradient-examples">Gradient Examples</h3>
255
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> GradientCard</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
256
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
257
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-full h-full bg-gradient-to-br from-cyan-500 to-blue-600 p-12&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
258
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-white text-6xl font-bold&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
259
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
260
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
261
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
262
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
263
- <span class="line"><span style="color:#E1E4E8">}</span></span>
264
- <span class="line"></span></code></pre>
265
- <h2 id="custom-theme-colors">Custom Theme Colors</h2>
266
- <p>You can override the default shadcn colors or add your own custom colors in <code>_loopwind/loopwind.json</code>:</p>
267
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="json"><code><span class="line"><span style="color:#E1E4E8">{</span></span>
268
- <span class="line"><span style="color:#79B8FF"> &quot;theme&quot;</span><span style="color:#E1E4E8">: {</span></span>
269
- <span class="line"><span style="color:#79B8FF"> &quot;colors&quot;</span><span style="color:#E1E4E8">: {</span></span>
270
- <span class="line"><span style="color:#79B8FF"> &quot;primary&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;#3b82f6&quot;</span><span style="color:#E1E4E8">,</span></span>
271
- <span class="line"><span style="color:#79B8FF"> &quot;primary-foreground&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;#ffffff&quot;</span><span style="color:#E1E4E8">,</span></span>
272
- <span class="line"><span style="color:#79B8FF"> &quot;accent&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;#10b981&quot;</span><span style="color:#E1E4E8">,</span></span>
273
- <span class="line"><span style="color:#79B8FF"> &quot;brand&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;#ff6b6b&quot;</span></span>
274
- <span class="line"><span style="color:#E1E4E8"> }</span></span>
275
- <span class="line"><span style="color:#E1E4E8"> }</span></span>
276
- <span class="line"><span style="color:#E1E4E8">}</span></span>
277
- <span class="line"></span></code></pre>
278
- <p>Then use these custom colors in your templates:</p>
279
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-brand&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// Uses your custom brand color</span></span>
280
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-primary&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// Uses your custom primary color</span></span>
281
- <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-accent&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// Uses your custom accent color</span></span>
282
- <span class="line"></span></code></pre>
283
- <h2 id="auto-detection-from-tailwindconfigjs">Auto-Detection from tailwind.config.js</h2>
284
- <p>loopwind automatically detects and loads your project’s Tailwind configuration:</p>
285
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>your-project/</span></span>
286
- <span class="line"><span>├── tailwind.config.js ← Automatically detected</span></span>
287
- <span class="line"><span>└── _loopwind/</span></span>
288
- <span class="line"><span> ├── loopwind.json</span></span>
289
- <span class="line"><span> └── templates/</span></span>
290
- <span class="line"><span></span></span></code></pre>
291
- <p>This includes:</p>
292
- <ul>
293
- <li>Custom colors</li>
294
- <li>Custom spacing values</li>
295
- <li>Custom fonts</li>
296
- <li>Theme extensions</li>
297
- <li>Custom utilities</li>
298
- </ul>
299
- <h2 id="complete-example">Complete Example</h2>
300
- <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> ModernCard</span><span style="color:#E1E4E8">({ </span></span>
301
- <span class="line"><span style="color:#FFAB70"> tw</span><span style="color:#E1E4E8">, </span></span>
302
- <span class="line"><span style="color:#FFAB70"> image</span><span style="color:#E1E4E8">,</span></span>
303
- <span class="line"><span style="color:#FFAB70"> title</span><span style="color:#E1E4E8">, </span></span>
304
- <span class="line"><span style="color:#FFAB70"> description</span><span style="color:#E1E4E8">, </span></span>
305
- <span class="line"><span style="color:#FFAB70"> category</span><span style="color:#E1E4E8">,</span></span>
306
- <span class="line"><span style="color:#FFAB70"> author</span><span style="color:#E1E4E8">,</span></span>
307
- <span class="line"><span style="color:#FFAB70"> avatar</span><span style="color:#E1E4E8"> </span></span>
308
- <span class="line"><span style="color:#E1E4E8">}) {</span></span>
309
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
310
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-full h-full bg-card&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
311
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Hero image */</span><span style="color:#E1E4E8">}</span></span>
312
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;relative h-2/3&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
313
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
314
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(hero)} </span></span>
315
- <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-full h-full object-cover&#39;</span><span style="color:#E1E4E8">)}</span></span>
316
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
317
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Category badge */</span><span style="color:#E1E4E8">}</span></span>
318
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;absolute top-4 left-4 bg-primary/90 backdrop-blur px-4 py-2 rounded-full&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
319
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-sm font-semibold text-primary-foreground&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
320
- <span class="line"><span style="color:#E1E4E8"> {category}</span></span>
321
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">&gt;</span></span>
322
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
323
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
324
- <span class="line"><span style="color:#E1E4E8"> </span></span>
325
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Content */</span><span style="color:#E1E4E8">}</span></span>
326
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;h-1/3 p-8 flex flex-col justify-between&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
327
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
328
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h2</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-3xl font-bold text-foreground mb-2&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
329
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
330
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">&gt;</span></span>
331
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-muted-foreground line-clamp-2&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
332
- <span class="line"><span style="color:#E1E4E8"> {description}</span></span>
333
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
334
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
335
- <span class="line"><span style="color:#E1E4E8"> </span></span>
336
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Author */</span><span style="color:#E1E4E8">}</span></span>
337
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;flex items-center gap-3&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
338
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
339
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(avatar)} </span></span>
340
- <span class="line"><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;w-10 h-10 rounded-full border-2 border-border&#39;</span><span style="color:#E1E4E8">)}</span></span>
341
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
342
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">span</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-sm text-muted-foreground&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
343
- <span class="line"><span style="color:#E1E4E8"> {author}</span></span>
344
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">&gt;</span></span>
345
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
346
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
347
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
348
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
349
- <span class="line"><span style="color:#E1E4E8">}</span></span>
350
- <span class="line"></span></code></pre>
351
- <h2 id="why-this-approach">Why This Approach?</h2>
352
- <ul>
353
- <li><strong>Semantic naming</strong>: <code>text-primary</code> instead of <code>text-blue-600</code></li>
354
- <li><strong>Consistency</strong>: All templates use the same design language</li>
355
- <li><strong>Flexibility</strong>: Easy to customize entire theme</li>
356
- <li><strong>Accessibility</strong>: Pre-tested color contrasts</li>
357
- <li><strong>Modern</strong>: Same system as shadcn/ui components</li>
358
- <li><strong>Familiar</strong>: Standard Tailwind syntax</li>
359
- </ul>
360
- <h2 id="next-steps">Next Steps</h2>
361
- <ul>
362
- <li><a href="/fonts">Custom Fonts</a></li>
363
- <li><a href="/helpers">Built-in Helpers</a></li>
364
- <li><a href="/images">Image Rendering</a></li>
365
- <li><a href="/video">Video Rendering</a></li>
366
- </ul> </article> </div> </main> <!-- Table of Contents Sidebar (Desktop only) --> <aside id="toc-sidebar" class="toc-sidebar fixed top-0 right-0 h-screen w-64 overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="px-6 py-8" data-astro-cid-mw7aashj> <h3 class="text-xs font-semibold text-muted-foreground mb-4 uppercase tracking-wider" data-astro-cid-mw7aashj>On this page</h3> <nav id="toc-nav" data-astro-cid-mw7aashj> <!-- TOC will be populated by JavaScript --> </nav> </div> </aside> </div> </body></html>