loopwind 0.9.1

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 (245) hide show
  1. package/FONTS.md +156 -0
  2. package/HELPERS_DEMO.md +134 -0
  3. package/PROJECT_STRUCTURE.md +286 -0
  4. package/PUBLISHING.md +171 -0
  5. package/README.md +1020 -0
  6. package/REGISTRY_SETUP.md +427 -0
  7. package/SHADCN_INTEGRATION.md +269 -0
  8. package/TAILWIND.md +228 -0
  9. package/TEMPLATE_SOURCES.md +363 -0
  10. package/_dsgn/templates/banner-hero/banner-hero.tsx +57 -0
  11. package/_dsgn/templates/banner-hero/meta.json +14 -0
  12. package/_dsgn/templates/composite-card/meta.json +16 -0
  13. package/_dsgn/templates/composite-card/template.tsx +44 -0
  14. package/_dsgn/templates/image/meta.json +13 -0
  15. package/_dsgn/templates/image/template.tsx +28 -0
  16. package/_dsgn/templates/kitchen-sink/meta.json +13 -0
  17. package/_dsgn/templates/kitchen-sink/template.tsx +72 -0
  18. package/_dsgn/templates/qr-card/meta.json +14 -0
  19. package/_dsgn/templates/qr-card/template.tsx +39 -0
  20. package/_dsgn/templates/test-parent/child/meta.json +11 -0
  21. package/_dsgn/templates/test-parent/child/template.tsx +27 -0
  22. package/_dsgn/templates/test-parent/meta.json +12 -0
  23. package/_dsgn/templates/test-parent/template.tsx +30 -0
  24. package/_dsgn/templates/test-sibling/meta.json +11 -0
  25. package/_dsgn/templates/test-sibling/template.tsx +20 -0
  26. package/_dsgn/templates/video/.tmp/template-1763421345296.mjs +43 -0
  27. package/_dsgn/templates/video/.tmp/template-1763421362228.mjs +43 -0
  28. package/_dsgn/templates/video/.tmp/template-1763421377706.mjs +43 -0
  29. package/_dsgn/templates/video/meta.json +17 -0
  30. package/_dsgn/templates/video/template.tsx +48 -0
  31. package/dist/cli.d.ts +3 -0
  32. package/dist/cli.d.ts.map +1 -0
  33. package/dist/cli.js +70 -0
  34. package/dist/cli.js.map +1 -0
  35. package/dist/commands/add.d.ts +6 -0
  36. package/dist/commands/add.d.ts.map +1 -0
  37. package/dist/commands/add.js +86 -0
  38. package/dist/commands/add.js.map +1 -0
  39. package/dist/commands/default.d.ts +2 -0
  40. package/dist/commands/default.d.ts.map +1 -0
  41. package/dist/commands/default.js +69 -0
  42. package/dist/commands/default.js.map +1 -0
  43. package/dist/commands/init.d.ts +2 -0
  44. package/dist/commands/init.d.ts.map +1 -0
  45. package/dist/commands/init.js +75 -0
  46. package/dist/commands/init.js.map +1 -0
  47. package/dist/commands/list.d.ts +2 -0
  48. package/dist/commands/list.d.ts.map +1 -0
  49. package/dist/commands/list.js +83 -0
  50. package/dist/commands/list.js.map +1 -0
  51. package/dist/commands/preview.d.ts +3 -0
  52. package/dist/commands/preview.d.ts.map +1 -0
  53. package/dist/commands/preview.js +296 -0
  54. package/dist/commands/preview.js.map +1 -0
  55. package/dist/commands/render.d.ts +10 -0
  56. package/dist/commands/render.d.ts.map +1 -0
  57. package/dist/commands/render.js +204 -0
  58. package/dist/commands/render.js.map +1 -0
  59. package/dist/commands/validate.d.ts +2 -0
  60. package/dist/commands/validate.d.ts.map +1 -0
  61. package/dist/commands/validate.js +107 -0
  62. package/dist/commands/validate.js.map +1 -0
  63. package/dist/default-templates/AGENTS.md +229 -0
  64. package/dist/default-templates/image/meta.json +13 -0
  65. package/dist/default-templates/image/template.d.ts +20 -0
  66. package/dist/default-templates/image/template.d.ts.map +1 -0
  67. package/dist/default-templates/image/template.js +18 -0
  68. package/dist/default-templates/image/template.js.map +1 -0
  69. package/dist/default-templates/image/template.tsx +20 -0
  70. package/dist/default-templates/image-template/meta.json +13 -0
  71. package/dist/default-templates/image-template/template.tsx +19 -0
  72. package/dist/default-templates/kitchen-sink/meta.json +13 -0
  73. package/dist/default-templates/kitchen-sink/template.tsx +64 -0
  74. package/dist/default-templates/page/meta.json +17 -0
  75. package/dist/default-templates/page/template.tsx +37 -0
  76. package/dist/default-templates/video/meta.json +17 -0
  77. package/dist/default-templates/video/template.d.ts +26 -0
  78. package/dist/default-templates/video/template.d.ts.map +1 -0
  79. package/dist/default-templates/video/template.js +33 -0
  80. package/dist/default-templates/video/template.js.map +1 -0
  81. package/dist/default-templates/video/template.tsx +37 -0
  82. package/dist/default-templates/video-template/meta.json +17 -0
  83. package/dist/default-templates/video-template/template.tsx +36 -0
  84. package/dist/default-templates/website/meta.json +16 -0
  85. package/dist/default-templates/website/pages/home.tsx +17 -0
  86. package/dist/default-templates/website/parts/footer.tsx +17 -0
  87. package/dist/default-templates/website/parts/header.tsx +17 -0
  88. package/dist/default-templates/website/template.tsx +17 -0
  89. package/dist/default-templates/website-template/meta.json +16 -0
  90. package/dist/default-templates/website-template/pages/home.tsx +16 -0
  91. package/dist/default-templates/website-template/parts/footer.tsx +16 -0
  92. package/dist/default-templates/website-template/parts/header.tsx +16 -0
  93. package/dist/default-templates/website-template/template.tsx +16 -0
  94. package/dist/lib/config.d.ts +34 -0
  95. package/dist/lib/config.d.ts.map +1 -0
  96. package/dist/lib/config.js +248 -0
  97. package/dist/lib/config.js.map +1 -0
  98. package/dist/lib/constants.d.ts +7 -0
  99. package/dist/lib/constants.d.ts.map +1 -0
  100. package/dist/lib/constants.js +12 -0
  101. package/dist/lib/constants.js.map +1 -0
  102. package/dist/lib/helpers.d.ts +29 -0
  103. package/dist/lib/helpers.d.ts.map +1 -0
  104. package/dist/lib/helpers.js +159 -0
  105. package/dist/lib/helpers.js.map +1 -0
  106. package/dist/lib/installer.d.ts +51 -0
  107. package/dist/lib/installer.d.ts.map +1 -0
  108. package/dist/lib/installer.js +215 -0
  109. package/dist/lib/installer.js.map +1 -0
  110. package/dist/lib/renderer.d.ts +51 -0
  111. package/dist/lib/renderer.d.ts.map +1 -0
  112. package/dist/lib/renderer.js +524 -0
  113. package/dist/lib/renderer.js.map +1 -0
  114. package/dist/lib/tailwind-config-loader.d.ts +47 -0
  115. package/dist/lib/tailwind-config-loader.d.ts.map +1 -0
  116. package/dist/lib/tailwind-config-loader.js +432 -0
  117. package/dist/lib/tailwind-config-loader.js.map +1 -0
  118. package/dist/lib/tailwind-detector.d.ts +36 -0
  119. package/dist/lib/tailwind-detector.d.ts.map +1 -0
  120. package/dist/lib/tailwind-detector.js +156 -0
  121. package/dist/lib/tailwind-detector.js.map +1 -0
  122. package/dist/lib/tailwind.d.ts +8 -0
  123. package/dist/lib/tailwind.d.ts.map +1 -0
  124. package/dist/lib/tailwind.js +994 -0
  125. package/dist/lib/tailwind.js.map +1 -0
  126. package/dist/lib/template-validator.d.ts +22 -0
  127. package/dist/lib/template-validator.d.ts.map +1 -0
  128. package/dist/lib/template-validator.js +174 -0
  129. package/dist/lib/template-validator.js.map +1 -0
  130. package/dist/lib/utils.d.ts +44 -0
  131. package/dist/lib/utils.d.ts.map +1 -0
  132. package/dist/lib/utils.js +207 -0
  133. package/dist/lib/utils.js.map +1 -0
  134. package/dist/lib/version-check.d.ts +16 -0
  135. package/dist/lib/version-check.d.ts.map +1 -0
  136. package/dist/lib/version-check.js +88 -0
  137. package/dist/lib/version-check.js.map +1 -0
  138. package/dist/lib/video-renderer.d.ts +32 -0
  139. package/dist/lib/video-renderer.d.ts.map +1 -0
  140. package/dist/lib/video-renderer.js +226 -0
  141. package/dist/lib/video-renderer.js.map +1 -0
  142. package/dist/sdk/index.d.ts +58 -0
  143. package/dist/sdk/index.d.ts.map +1 -0
  144. package/dist/sdk/index.js +119 -0
  145. package/dist/sdk/index.js.map +1 -0
  146. package/dist/sdk/template.d.ts +40 -0
  147. package/dist/sdk/template.d.ts.map +1 -0
  148. package/dist/sdk/template.js +60 -0
  149. package/dist/sdk/template.js.map +1 -0
  150. package/dist/types/config.d.ts +62 -0
  151. package/dist/types/config.d.ts.map +1 -0
  152. package/dist/types/config.js +47 -0
  153. package/dist/types/config.js.map +1 -0
  154. package/dist/types/template.d.ts +79 -0
  155. package/dist/types/template.d.ts.map +1 -0
  156. package/dist/types/template.js +2 -0
  157. package/dist/types/template.js.map +1 -0
  158. package/examples/nextjs-api/README.md +180 -0
  159. package/examples/nextjs-api/package.json +21 -0
  160. package/examples/nextjs-api/pages/api/intro-video.ts +53 -0
  161. package/examples/nextjs-api/pages/api/og-image.ts +50 -0
  162. package/netlify.toml +13 -0
  163. package/package.json +84 -0
  164. package/patches/satori+0.18.3.patch +13 -0
  165. package/test-templates/TESTS.md +63 -0
  166. package/test-templates/_dsgn/templates/absolute-spin/meta.json +7 -0
  167. package/test-templates/_dsgn/templates/absolute-spin/template.tsx +16 -0
  168. package/test-templates/_dsgn/templates/animated-intro/.tmp/template-1763468771640.mjs +7 -0
  169. package/test-templates/_dsgn/templates/animated-intro/meta.json +10 -0
  170. package/test-templates/_dsgn/templates/animated-intro/template.tsx +23 -0
  171. package/test-templates/_dsgn/templates/centered-spin/.tmp/template-1763468525386.mjs +7 -0
  172. package/test-templates/_dsgn/templates/centered-spin/meta.json +7 -0
  173. package/test-templates/_dsgn/templates/centered-spin/template.tsx +11 -0
  174. package/test-templates/_dsgn/templates/composite/.tmp/template-1763468815645.mjs +7 -0
  175. package/test-templates/_dsgn/templates/composite/meta.json +9 -0
  176. package/test-templates/_dsgn/templates/composite/template.tsx +23 -0
  177. package/test-templates/_dsgn/templates/easing-test/.tmp/template-1763468824501.mjs +7 -0
  178. package/test-templates/_dsgn/templates/easing-test/meta.json +7 -0
  179. package/test-templates/_dsgn/templates/easing-test/template.tsx +47 -0
  180. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466364336.mjs +10 -0
  181. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466584319.mjs +10 -0
  182. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466667797.mjs +10 -0
  183. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466746504.mjs +10 -0
  184. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466930225.mjs +10 -0
  185. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467004552.mjs +10 -0
  186. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467060334.mjs +10 -0
  187. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467124493.mjs +10 -0
  188. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467174690.mjs +10 -0
  189. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467359134.mjs +10 -0
  190. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467451928.mjs +10 -0
  191. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467758275.mjs +10 -0
  192. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467985201.mjs +10 -0
  193. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468020563.mjs +10 -0
  194. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468090428.mjs +10 -0
  195. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468211036.mjs +10 -0
  196. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468394057.mjs +10 -0
  197. package/test-templates/_dsgn/templates/minimal-spin/meta.json +7 -0
  198. package/test-templates/_dsgn/templates/minimal-spin/template.tsx +13 -0
  199. package/test-templates/_dsgn/templates/no-origin-spin/meta.json +7 -0
  200. package/test-templates/_dsgn/templates/no-origin-spin/template.tsx +10 -0
  201. package/test-templates/_dsgn/templates/opacity-test/meta.json +7 -0
  202. package/test-templates/_dsgn/templates/opacity-test/template.tsx +9 -0
  203. package/test-templates/_dsgn/templates/qr-code/.tmp/template-1763468758954.mjs +17 -0
  204. package/test-templates/_dsgn/templates/qr-code/.tmp/template-1763468815672.mjs +17 -0
  205. package/test-templates/_dsgn/templates/qr-code/meta.json +9 -0
  206. package/test-templates/_dsgn/templates/qr-code/template.tsx +20 -0
  207. package/test-templates/_dsgn/templates/rotation-abs-test/meta.json +7 -0
  208. package/test-templates/_dsgn/templates/rotation-abs-test/template.tsx +15 -0
  209. package/test-templates/_dsgn/templates/rotation-corner/meta.json +7 -0
  210. package/test-templates/_dsgn/templates/rotation-corner/template.tsx +12 -0
  211. package/test-templates/_dsgn/templates/rotation-test/meta.json +7 -0
  212. package/test-templates/_dsgn/templates/rotation-test/template.tsx +12 -0
  213. package/test-templates/_dsgn/templates/shake-test/meta.json +7 -0
  214. package/test-templates/_dsgn/templates/shake-test/template.tsx +12 -0
  215. package/test-templates/_dsgn/templates/static-image/.tmp/template-1763468746271.mjs +7 -0
  216. package/test-templates/_dsgn/templates/static-image/meta.json +9 -0
  217. package/test-templates/_dsgn/templates/static-image/template.tsx +19 -0
  218. package/test-templates/_dsgn/templates/translate-test/meta.json +7 -0
  219. package/test-templates/_dsgn/templates/translate-test/template.tsx +9 -0
  220. package/test-templates/_dsgn/templates/video-loops/.tmp/template-1763468793192.mjs +15 -0
  221. package/test-templates/_dsgn/templates/video-loops/meta.json +9 -0
  222. package/test-templates/_dsgn/templates/video-loops/template.tsx +39 -0
  223. package/test-templates/_dsgn/templates/wrapped-spin/meta.json +7 -0
  224. package/test-templates/_dsgn/templates/wrapped-spin/template.tsx +17 -0
  225. package/test-templates/compare-svgs.mjs +30 -0
  226. package/test-templates/convert-frames.mjs +15 -0
  227. package/test-templates/debug-rotation.mjs +25 -0
  228. package/test-templates/run-tests.sh +39 -0
  229. package/test-templates/test-sdk.mjs +115 -0
  230. package/website/.astro/settings.json +5 -0
  231. package/website/.astro/types.d.ts +1 -0
  232. package/website/README.md +112 -0
  233. package/website/astro.config.mjs +18 -0
  234. package/website/dist/_astro/fonts.DHdiHGBO.css +1 -0
  235. package/website/dist/fonts/index.html +193 -0
  236. package/website/dist/helpers/index.html +166 -0
  237. package/website/dist/images/index.html +314 -0
  238. package/website/dist/index.html +219 -0
  239. package/website/dist/llm.txt +2448 -0
  240. package/website/dist/styling/index.html +365 -0
  241. package/website/dist/templates/index.html +124 -0
  242. package/website/dist/video/index.html +636 -0
  243. package/website/package-lock.json +7606 -0
  244. package/website/package.json +23 -0
  245. package/website/public/robots.txt +5 -0
package/website/dist/_astro/fonts.DHdiHGBO.css ADDED
@@ -0,0 +1 @@
1
+ /*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-serif:ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-red-500:oklch(63.7% .237 25.331);--color-green-500:oklch(72.3% .219 149.579);--color-cyan-500:oklch(71.5% .143 215.221);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-indigo-500:oklch(58.5% .233 277.117);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-pink-500:oklch(65.6% .241 354.308);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--container-3xl:48rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-lg:1.125rem;--text-lg--line-height:calc(1.75/1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-3xl:1.875rem;--text-3xl--line-height: 1.2 ;--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--text-7xl:4.5rem;--text-7xl--line-height:1;--text-8xl:6rem;--text-8xl--line-height:1;--text-9xl:8rem;--text-9xl--line-height:1;--font-weight-thin:100;--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--leading-tight:1.25;--leading-normal:1.5;--leading-relaxed:1.625;--leading-loose:2;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--drop-shadow-lg:0 4px 4px #00000026;--drop-shadow-2xl:0 25px 25px #00000026;--animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--blur-sm:8px;--blur-md:12px;--blur-lg:16px;--blur-xl:24px;--blur-3xl:64px;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-background:#0a0a0a;--color-foreground:#fafafa;--color-card:#141414;--color-card-foreground:#fafafa;--color-primary:#fafafa;--color-primary-foreground:#18181b;--color-muted:#27272a;--color-muted-foreground:#a1a1aa;--color-accent:#27272a;--color-accent-foreground:#fafafa;--color-destructive:#ef4444;--color-border:#27272a;--color-input:#27272a;--color-brand-from:#6366f1;--color-brand-to:#8b5cf6}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing)*0)}.-top-1{top:calc(var(--spacing)*-1)}.top-0{top:calc(var(--spacing)*0)}.top-4{top:calc(var(--spacing)*4)}.top-8{top:calc(var(--spacing)*8)}.top-12{top:calc(var(--spacing)*12)}.top-20{top:calc(var(--spacing)*20)}.-right-1{right:calc(var(--spacing)*-1)}.right-0{right:calc(var(--spacing)*0)}.right-4{right:calc(var(--spacing)*4)}.right-8{right:calc(var(--spacing)*8)}.right-10{right:calc(var(--spacing)*10)}.right-12{right:calc(var(--spacing)*12)}.right-20{right:calc(var(--spacing)*20)}.bottom-0{bottom:calc(var(--spacing)*0)}.bottom-4{bottom:calc(var(--spacing)*4)}.bottom-8{bottom:calc(var(--spacing)*8)}.bottom-10{bottom:calc(var(--spacing)*10)}.bottom-20{bottom:calc(var(--spacing)*20)}.left-0{left:calc(var(--spacing)*0)}.left-4{left:calc(var(--spacing)*4)}.left-8{left:calc(var(--spacing)*8)}.left-12{left:calc(var(--spacing)*12)}.left-20{left:calc(var(--spacing)*20)}.-z-10{z-index:-10}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.z-50{z-index:50}.m-6{margin:calc(var(--spacing)*6)}.mt-4{margin-top:calc(var(--spacing)*4)}.mt-8{margin-top:calc(var(--spacing)*8)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-8{margin-bottom:calc(var(--spacing)*8)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.ml-64{margin-left:calc(var(--spacing)*64)}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-1\/3{height:33.3333%}.h-2\/3{height:66.6667%}.h-3\.5{height:calc(var(--spacing)*3.5)}.h-4{height:calc(var(--spacing)*4)}.h-6{height:calc(var(--spacing)*6)}.h-10{height:calc(var(--spacing)*10)}.h-12{height:calc(var(--spacing)*12)}.h-16{height:calc(var(--spacing)*16)}.h-24{height:calc(var(--spacing)*24)}.h-32{height:calc(var(--spacing)*32)}.h-64{height:calc(var(--spacing)*64)}.h-96{height:calc(var(--spacing)*96)}.h-full{height:100%}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-1\/2{width:50%}.w-1\/3{width:33.3333%}.w-2\/3{width:66.6667%}.w-3\.5{width:calc(var(--spacing)*3.5)}.w-6{width:calc(var(--spacing)*6)}.w-10{width:calc(var(--spacing)*10)}.w-24{width:calc(var(--spacing)*24)}.w-32{width:calc(var(--spacing)*32)}.w-64{width:calc(var(--spacing)*64)}.w-96{width:calc(var(--spacing)*96)}.w-auto{width:auto}.w-full{width:100%}.w-screen{width:100vw}.max-w-2xl{max-width:var(--container-2xl)}.max-w-3xl{max-width:var(--container-3xl)}.max-w-4xl{max-width:var(--container-4xl)}.flex-1{flex:1}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.animate-pulse{animation:var(--animate-pulse)}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-baseline{align-items:baseline}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-around{justify-content:space-around}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing)*2)}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*1)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*1)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-blue-500{border-color:var(--color-blue-500)}.border-border{border-color:var(--color-border)}.border-border\/30{border-color:#27272a4d}@supports (color:color-mix(in lab,red,red)){.border-border\/30{border-color:color-mix(in oklab,var(--color-border)30%,transparent)}}.border-input{border-color:var(--color-input)}.border-white{border-color:var(--color-white)}.bg-accent{background-color:var(--color-accent)}.bg-accent\/5{background-color:#27272a0d}@supports (color:color-mix(in lab,red,red)){.bg-accent\/5{background-color:color-mix(in oklab,var(--color-accent)5%,transparent)}}.bg-background{background-color:var(--color-background)}.bg-black{background-color:var(--color-black)}.bg-black\/40{background-color:#0006}@supports (color:color-mix(in lab,red,red)){.bg-black\/40{background-color:color-mix(in oklab,var(--color-black)40%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black)50%,transparent)}}.bg-black\/80{background-color:#000c}@supports (color:color-mix(in lab,red,red)){.bg-black\/80{background-color:color-mix(in oklab,var(--color-black)80%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.bg-card{background-color:var(--color-card)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-700{background-color:var(--color-gray-700)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-muted{background-color:var(--color-muted)}.bg-primary{background-color:var(--color-primary)}.bg-primary\/5{background-color:#fafafa0d}@supports (color:color-mix(in lab,red,red)){.bg-primary\/5{background-color:color-mix(in oklab,var(--color-primary)5%,transparent)}}.bg-primary\/50{background-color:#fafafa80}@supports (color:color-mix(in lab,red,red)){.bg-primary\/50{background-color:color-mix(in oklab,var(--color-primary)50%,transparent)}}.bg-primary\/90{background-color:#fafafae6}@supports (color:color-mix(in lab,red,red)){.bg-primary\/90{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.bg-purple-600{background-color:var(--color-purple-600)}.bg-red-500{background-color:var(--color-red-500)}.bg-white{background-color:var(--color-white)}.bg-white\/50{background-color:#ffffff80}@supports (color:color-mix(in lab,red,red)){.bg-white\/50{background-color:color-mix(in oklab,var(--color-white)50%,transparent)}}.bg-gradient-to-br{--tw-gradient-position:to bottom right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-t{--tw-gradient-position:to top in oklab;background-image:linear-gradient(var(--tw-gradient-stops))}.from-\[var\(--color-brand-from\)\]{--tw-gradient-from:var(--color-brand-from);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-background{--tw-gradient-from:var(--color-background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-black\/80{--tw-gradient-from:#000c}@supports (color:color-mix(in lab,red,red)){.from-black\/80{--tw-gradient-from:color-mix(in oklab,var(--color-black)80%,transparent)}}.from-black\/80{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-500{--tw-gradient-from:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-blue-600{--tw-gradient-from:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-cyan-500{--tw-gradient-from:var(--color-cyan-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-indigo-500{--tw-gradient-from:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-pink-500{--tw-gradient-from:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.from-purple-600{--tw-gradient-from:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.via-muted\/30{--tw-gradient-via:#27272a4d}@supports (color:color-mix(in lab,red,red)){.via-muted\/30{--tw-gradient-via:color-mix(in oklab,var(--color-muted)30%,transparent)}}.via-muted\/30{--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.via-purple-500{--tw-gradient-via:var(--color-purple-500);--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-via)var(--tw-gradient-via-position),var(--tw-gradient-to)var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-\[var\(--color-brand-to\)\]{--tw-gradient-to:var(--color-brand-to);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-background{--tw-gradient-to:var(--color-background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-blue-500{--tw-gradient-to:var(--color-blue-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-blue-600{--tw-gradient-to:var(--color-blue-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-green-500{--tw-gradient-to:var(--color-green-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-pink-500{--tw-gradient-to:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-purple-700{--tw-gradient-to:var(--color-purple-700);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from)var(--tw-gradient-from-position),var(--tw-gradient-to)var(--tw-gradient-to-position))}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.object-contain{object-fit:contain}.object-cover{object-fit:cover}.object-fill{object-fit:fill}.p-4{padding:calc(var(--spacing)*4)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-10{padding:calc(var(--spacing)*10)}.p-12{padding:calc(var(--spacing)*12)}.p-16{padding:calc(var(--spacing)*16)}.p-20{padding:calc(var(--spacing)*20)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.py-4{padding-block:calc(var(--spacing)*4)}.py-12{padding-block:calc(var(--spacing)*12)}.pt-0{padding-top:calc(var(--spacing)*0)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.font-serif{font-family:var(--font-serif)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.text-6xl{font-size:var(--text-6xl);line-height:var(--tw-leading,var(--text-6xl--line-height))}.text-7xl{font-size:var(--text-7xl);line-height:var(--tw-leading,var(--text-7xl--line-height))}.text-8xl{font-size:var(--text-8xl);line-height:var(--tw-leading,var(--text-8xl--line-height))}.text-9xl{font-size:var(--text-9xl);line-height:var(--tw-leading,var(--text-9xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[200px\]{font-size:200px}.leading-loose{--tw-leading:var(--leading-loose);line-height:var(--leading-loose)}.leading-none{--tw-leading:1;line-height:1}.leading-normal{--tw-leading:var(--leading-normal);line-height:var(--leading-normal)}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-light{--tw-font-weight:var(--font-weight-light);font-weight:var(--font-weight-light)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.font-thin{--tw-font-weight:var(--font-weight-thin);font-weight:var(--font-weight-thin)}.text-balance{text-wrap:balance}.text-accent-foreground{color:var(--color-accent-foreground)}.text-black{color:var(--color-black)}.text-blue-400{color:var(--color-blue-400)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-card-foreground{color:var(--color-card-foreground)}.text-destructive{color:var(--color-destructive)}.text-foreground{color:var(--color-foreground)}.text-gray-400{color:var(--color-gray-400)}.text-gray-600{color:var(--color-gray-600)}.text-gray-900{color:var(--color-gray-900)}.text-muted-foreground{color:var(--color-muted-foreground)}.text-muted-foreground\/75{color:#a1a1aabf}@supports (color:color-mix(in lab,red,red)){.text-muted-foreground\/75{color:color-mix(in oklab,var(--color-muted-foreground)75%,transparent)}}.text-primary{color:var(--color-primary)}.text-primary-foreground{color:var(--color-primary-foreground)}.text-transparent{color:#0000}.text-white{color:var(--color-white)}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab,red,red)){.text-white\/80{color:color-mix(in oklab,var(--color-white)80%,transparent)}}.no-underline{text-decoration-line:none}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-foreground{accent-color:var(--color-foreground)}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a),0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a),0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a),0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a),0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(1px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-3xl{--tw-blur:blur(var(--blur-3xl));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-lg{--tw-blur:blur(var(--blur-lg));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-md{--tw-blur:blur(var(--blur-md));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-none{--tw-blur: ;filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-sm{--tw-blur:blur(var(--blur-sm));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.blur-xl{--tw-blur:blur(var(--blur-xl));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-0{--tw-brightness:brightness(0%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-50{--tw-brightness:brightness(50%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-100{--tw-brightness:brightness(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-150{--tw-brightness:brightness(150%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.brightness-200{--tw-brightness:brightness(200%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-0{--tw-contrast:contrast(0%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-50{--tw-contrast:contrast(50%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-100{--tw-contrast:contrast(100%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-150{--tw-contrast:contrast(150%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.contrast-200{--tw-contrast:contrast(200%);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-2xl{--tw-drop-shadow-size:drop-shadow(0 25px 25px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-2xl));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-lg{--tw-drop-shadow-size:drop-shadow(0 4px 4px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-lg));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.hover\:bg-accent\/50:hover{background-color:#27272a80}@supports (color:color-mix(in lab,red,red)){.hover\:bg-accent\/50:hover{background-color:color-mix(in oklab,var(--color-accent)50%,transparent)}}.hover\:bg-muted\/80:hover{background-color:#27272acc}@supports (color:color-mix(in lab,red,red)){.hover\:bg-muted\/80:hover{background-color:color-mix(in oklab,var(--color-muted)80%,transparent)}}.hover\:bg-primary\/90:hover{background-color:#fafafae6}@supports (color:color-mix(in lab,red,red)){.hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--color-primary)90%,transparent)}}.hover\:text-foreground:hover{color:var(--color-foreground)}}@media (min-width:48rem){.md\:px-12{padding-inline:calc(var(--spacing)*12)}.md\:py-16{padding-block:calc(var(--spacing)*16)}.md\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.md\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}}*{border-color:var(--color-border)}body{background-color:var(--color-background);color:var(--color-foreground);font-feature-settings:"rlig" 1,"calt" 1}pre{border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-muted);padding:calc(var(--spacing)*6);overflow-x:auto}code{background-color:var(--color-muted);padding-inline:calc(var(--spacing)*1.5);padding-block:calc(var(--spacing)*.5);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-foreground);border-radius:.25rem}pre code{padding:calc(var(--spacing)*0);background-color:#0000}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background-color:var(--color-background)}::-webkit-scrollbar-thumb{background-color:var(--color-muted);border-radius:.25rem}::-webkit-scrollbar-thumb:hover{background-color:#a1a1aa4d}@supports (color:color-mix(in lab,red,red)){::-webkit-scrollbar-thumb:hover{background-color:color-mix(in oklab,var(--color-muted-foreground)30%,transparent)}}.prose :is(h1){margin-bottom:calc(var(--spacing)*6);font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height));--tw-leading:var(--leading-tight);line-height:var(--leading-tight);--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-foreground)}.prose :is(h2){margin-top:calc(var(--spacing)*10);margin-bottom:calc(var(--spacing)*4);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border);padding-bottom:calc(var(--spacing)*2);font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(h3){margin-top:calc(var(--spacing)*8);margin-bottom:calc(var(--spacing)*3);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(h4){margin-top:calc(var(--spacing)*6);margin-bottom:calc(var(--spacing)*2);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(p){margin-bottom:calc(var(--spacing)*4);--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7);color:var(--color-muted-foreground)}.prose :is(a){--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-primary);text-decoration-line:underline;text-decoration-color:#fafafa4d}@supports (color:color-mix(in lab,red,red)){.prose :is(a){-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)30%,transparent);text-decoration-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}.prose :is(a){transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.prose :is(a):hover{color:#fafafacc}@supports (color:color-mix(in lab,red,red)){.prose :is(a):hover{color:color-mix(in oklab,var(--color-primary)80%,transparent)}}.prose :is(a):hover{text-decoration-color:#fafafa99}@supports (color:color-mix(in lab,red,red)){.prose :is(a):hover{-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)60%,transparent);text-decoration-color:color-mix(in oklab,var(--color-primary)60%,transparent)}}}.prose :is(ul,ol){margin-bottom:calc(var(--spacing)*4)}:where(.prose :is(ul,ol)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.prose :is(ul,ol){padding-left:calc(var(--spacing)*6);color:var(--color-muted-foreground)}.prose :is(li){--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.prose :is(strong){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(blockquote){margin-block:calc(var(--spacing)*6);border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--color-primary);padding-left:calc(var(--spacing)*4);color:var(--color-muted-foreground);font-style:italic}.prose :is(table){margin-block:calc(var(--spacing)*6);border-collapse:collapse;width:100%}.prose :is(th){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-muted);padding-inline:calc(var(--spacing)*3);padding-block:calc(var(--spacing)*2);text-align:left;--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.prose :is(td){border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);padding-inline:calc(var(--spacing)*3);padding-block:calc(var(--spacing)*2);color:var(--color-muted-foreground)}.prose :is(hr){margin-block:calc(var(--spacing)*8);border-color:var(--color-border)}@media (max-width:768px){.prose{padding-inline:calc(var(--spacing)*4)}}.home-prose :is(h2){margin-top:calc(var(--spacing)*16);margin-bottom:calc(var(--spacing)*6);font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height));--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold);color:var(--color-foreground)}.home-prose :is(h3){margin-top:calc(var(--spacing)*12);margin-bottom:calc(var(--spacing)*4);font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.home-prose :is(h4){margin-top:calc(var(--spacing)*8);margin-bottom:calc(var(--spacing)*3);font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height));--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.home-prose :is(p){margin-bottom:calc(var(--spacing)*4);--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7);color:var(--color-muted-foreground)}.home-prose :is(ul,ol){margin-bottom:calc(var(--spacing)*6)}:where(.home-prose :is(ul,ol)>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*2)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*2)*calc(1 - var(--tw-space-y-reverse)))}.home-prose :is(ul,ol){padding-left:calc(var(--spacing)*6);color:var(--color-muted-foreground)}.home-prose :is(li){--tw-leading:calc(var(--spacing)*7);line-height:calc(var(--spacing)*7)}.home-prose :is(a){--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--color-primary);text-decoration-line:underline;text-decoration-color:#fafafa4d}@supports (color:color-mix(in lab,red,red)){.home-prose :is(a){-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)30%,transparent);text-decoration-color:color-mix(in oklab,var(--color-primary)30%,transparent)}}.home-prose :is(a){transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media (hover:hover){.home-prose :is(a):hover{color:#fafafacc}@supports (color:color-mix(in lab,red,red)){.home-prose :is(a):hover{color:color-mix(in oklab,var(--color-primary)80%,transparent)}}.home-prose :is(a):hover{text-decoration-color:#fafafa99}@supports (color:color-mix(in lab,red,red)){.home-prose :is(a):hover{-webkit-text-decoration-color:color-mix(in oklab,var(--color-primary)60%,transparent);text-decoration-color:color-mix(in oklab,var(--color-primary)60%,transparent)}}}.home-prose :is(strong){--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold);color:var(--color-foreground)}.home-prose :is(code){background-color:var(--color-muted);padding-inline:calc(var(--spacing)*1.5);padding-block:calc(var(--spacing)*.5);font-family:var(--font-mono);font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height));color:var(--color-foreground);border-radius:.25rem}.home-prose :is(pre){margin-block:calc(var(--spacing)*6);border-radius:var(--radius-lg);border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-border);background-color:var(--color-muted);padding:calc(var(--spacing)*6);overflow-x:auto}.home-prose :is(pre code){padding:calc(var(--spacing)*0);background-color:#0000}.home-prose :is(blockquote){margin-block:calc(var(--spacing)*6);border-left-style:var(--tw-border-style);border-left-width:4px;border-color:var(--color-primary);padding-left:calc(var(--spacing)*4);color:var(--color-muted-foreground);font-style:italic}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@keyframes pulse{50%{opacity:.5}}.hero[data-astro-cid-bbe6dxrz]{position:relative}@media (max-width: 768px){aside[data-astro-cid-mw7aashj]{display:none}main[data-astro-cid-mw7aashj]{margin-left:0;padding:1.5rem}}
package/website/dist/fonts/index.html ADDED
@@ -0,0 +1,193 @@
1
+ <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="dsgn - Generate beautiful images from React components"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><title></title><link rel="stylesheet" href="/_astro/fonts.DHdiHGBO.css"></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="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> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl font-bold bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj>
2
+ _dsgn
3
+ </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="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="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="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="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="/helpers" class="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="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="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="/llm.txt" class="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 Docs </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="font-handling-in-dsgn">Font Handling in dsgn</h1>
4
+ <p>The recommended way to use fonts is through <code>dsgn.json</code> - configure fonts once, use everywhere.</p>
5
+ <h2 id="using-fonts-from-dsgnjson-recommended">Using Fonts from dsgn.json (Recommended)</h2>
6
+ <p>Configure fonts in your <code>dsgn.json</code> and use Tailwind classes in templates.</p>
7
+ <h3 id="simple-setup-css-only">Simple Setup (CSS Only)</h3>
8
+ <p>Define font families without loading custom fonts (uses system fonts):</p>
9
+ <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>
10
+ <span class="line"><span style="color:#79B8FF"> &quot;fonts&quot;</span><span style="color:#E1E4E8">: {</span></span>
11
+ <span class="line"><span style="color:#79B8FF"> &quot;sans&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Inter&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;system-ui&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;-apple-system&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;sans-serif&quot;</span><span style="color:#E1E4E8">],</span></span>
12
+ <span class="line"><span style="color:#79B8FF"> &quot;serif&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Georgia&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;serif&quot;</span><span style="color:#E1E4E8">],</span></span>
13
+ <span class="line"><span style="color:#79B8FF"> &quot;mono&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Courier New&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;monospace&quot;</span><span style="color:#E1E4E8">]</span></span>
14
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
15
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
16
+ <span class="line"></span></code></pre>
17
+ <p><strong>Template usage:</strong></p>
18
+ <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:#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>
19
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
20
+ <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&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
21
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses fonts.sans from dsgn.json */</span><span style="color:#E1E4E8">}</span></span>
22
+ <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;font-sans text-6xl font-bold&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
23
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
24
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
25
+ <span class="line"></span>
26
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses fonts.mono from dsgn.json */</span><span style="color:#E1E4E8">}</span></span>
27
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">code</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;font-mono text-sm&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
28
+ <span class="line"><span style="color:#E1E4E8"> {code}</span></span>
29
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">code</span><span style="color:#E1E4E8">&gt;</span></span>
30
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
31
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
32
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
33
+ <span class="line"></span></code></pre>
34
+ <p><strong>Result:</strong> Uses system fonts, falls back to Noto Sans for rendering.</p>
35
+ <h3 id="complete-setup-with-font-files">Complete Setup (With Font Files)</h3>
36
+ <p>Load custom font files for brand-specific typography:</p>
37
+ <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>
38
+ <span class="line"><span style="color:#79B8FF"> &quot;fonts&quot;</span><span style="color:#E1E4E8">: {</span></span>
39
+ <span class="line"><span style="color:#79B8FF"> &quot;sans&quot;</span><span style="color:#E1E4E8">: {</span></span>
40
+ <span class="line"><span style="color:#79B8FF"> &quot;family&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Inter&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;system-ui&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;sans-serif&quot;</span><span style="color:#E1E4E8">],</span></span>
41
+ <span class="line"><span style="color:#79B8FF"> &quot;files&quot;</span><span style="color:#E1E4E8">: [</span></span>
42
+ <span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">&quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./fonts/Inter-Regular.woff&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
43
+ <span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">&quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./fonts/Inter-Bold.woff&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span><span style="color:#E1E4E8"> }</span></span>
44
+ <span class="line"><span style="color:#E1E4E8"> ]</span></span>
45
+ <span class="line"><span style="color:#E1E4E8"> },</span></span>
46
+ <span class="line"><span style="color:#79B8FF"> &quot;mono&quot;</span><span style="color:#E1E4E8">: {</span></span>
47
+ <span class="line"><span style="color:#79B8FF"> &quot;family&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;JetBrains Mono&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;monospace&quot;</span><span style="color:#E1E4E8">],</span></span>
48
+ <span class="line"><span style="color:#79B8FF"> &quot;files&quot;</span><span style="color:#E1E4E8">: [</span></span>
49
+ <span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">&quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./fonts/JetBrainsMono-Regular.woff&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }</span></span>
50
+ <span class="line"><span style="color:#E1E4E8"> ]</span></span>
51
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
52
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
53
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
54
+ <span class="line"></span></code></pre>
55
+ <p><strong>Project structure:</strong></p>
56
+ <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>
57
+ <span class="line"><span>├── dsgn.json</span></span>
58
+ <span class="line"><span>├── fonts/</span></span>
59
+ <span class="line"><span>│ ├── Inter-Regular.woff</span></span>
60
+ <span class="line"><span>│ ├── Inter-Bold.woff</span></span>
61
+ <span class="line"><span>│ └── JetBrainsMono-Regular.woff</span></span>
62
+ <span class="line"><span>└── _dsgn/</span></span>
63
+ <span class="line"><span> └── templates/</span></span>
64
+ <span class="line"><span></span></span></code></pre>
65
+ <p><strong>Template usage (same as before):</strong></p>
66
+ <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:#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;font-sans font-bold&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
67
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses Inter Bold from dsgn.json */</span><span style="color:#E1E4E8">}</span></span>
68
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
69
+ <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
70
+ <span class="line"></span></code></pre>
71
+ <p><strong>Available classes:</strong></p>
72
+ <ul>
73
+ <li><code>font-sans</code> - Uses <code>fonts.sans</code> from dsgn.json</li>
74
+ <li><code>font-serif</code> - Uses <code>fonts.serif</code> from dsgn.json</li>
75
+ <li><code>font-mono</code> - Uses <code>fonts.mono</code> from dsgn.json</li>
76
+ </ul>
77
+ <p><strong>Supported formats:</strong></p>
78
+ <ul>
79
+ <li>✅ <strong>WOFF</strong> (<code>.woff</code>) - Recommended</li>
80
+ <li>✅ <strong>WOFF2</strong> (<code>.woff2</code>) - Best compression</li>
81
+ <li>✅ <strong>TTF</strong> (<code>.ttf</code>) - Also supported</li>
82
+ <li>✅ <strong>OTF</strong> (<code>.otf</code>) - Also supported</li>
83
+ </ul>
84
+ <h2 id="template-specific-fonts-advanced">Template-Specific Fonts (Advanced)</h2>
85
+ <p>For templates that need unique fonts not shared across the project:</p>
86
+ <p><strong>Template structure:</strong></p>
87
+ <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>_dsgn/templates/my-template/</span></span>
88
+ <span class="line"><span>├── my-template.tsx</span></span>
89
+ <span class="line"><span>├── meta.json</span></span>
90
+ <span class="line"><span>└── fonts/</span></span>
91
+ <span class="line"><span> └── SpecialFont.woff</span></span>
92
+ <span class="line"><span></span></span></code></pre>
93
+ <p><strong>meta.json:</strong></p>
94
+ <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>
95
+ <span class="line"><span style="color:#79B8FF"> &quot;name&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;my-template&quot;</span><span style="color:#E1E4E8">,</span></span>
96
+ <span class="line"><span style="color:#79B8FF"> &quot;type&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;image&quot;</span><span style="color:#E1E4E8">,</span></span>
97
+ <span class="line"><span style="color:#79B8FF"> &quot;size&quot;</span><span style="color:#E1E4E8">: { </span><span style="color:#79B8FF">&quot;width&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1200</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;height&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">630</span><span style="color:#E1E4E8"> },</span></span>
98
+ <span class="line"><span style="color:#79B8FF"> &quot;fonts&quot;</span><span style="color:#E1E4E8">: [</span></span>
99
+ <span class="line"><span style="color:#E1E4E8"> {</span></span>
100
+ <span class="line"><span style="color:#79B8FF"> &quot;name&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;Special Font&quot;</span><span style="color:#E1E4E8">,</span></span>
101
+ <span class="line"><span style="color:#79B8FF"> &quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;fonts/SpecialFont.woff&quot;</span><span style="color:#E1E4E8">,</span></span>
102
+ <span class="line"><span style="color:#79B8FF"> &quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8">,</span></span>
103
+ <span class="line"><span style="color:#79B8FF"> &quot;style&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;normal&quot;</span></span>
104
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
105
+ <span class="line"><span style="color:#E1E4E8"> ]</span></span>
106
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
107
+ <span class="line"></span></code></pre>
108
+ <p><strong>Template usage:</strong></p>
109
+ <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:#E1E4E8">&lt;</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ fontFamily: </span><span style="color:#9ECBFF">&#39;Special Font&#39;</span><span style="color:#E1E4E8">, fontWeight: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }}&gt;</span></span>
110
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
111
+ <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
112
+ <span class="line"></span></code></pre>
113
+ <h2 id="font-loading-priority">Font Loading Priority</h2>
114
+ <p>dsgn loads fonts in this order:</p>
115
+ <ol>
116
+ <li><strong>dsgn.json fonts</strong> (if configured with <code>files</code>)</li>
117
+ <li><strong>Template meta.json fonts</strong> (if specified)</li>
118
+ <li><strong>Default Noto Sans</strong> (from CDN)</li>
119
+ </ol>
120
+ <p>This means dsgn.json fonts override template fonts, ensuring consistency.</p>
121
+ <h2 id="default-fonts">Default Fonts</h2>
122
+ <p>If no fonts are configured, dsgn automatically fetches <strong>Noto Sans</strong> from jsDelivr CDN.</p>
123
+ <h2 id="best-practices">Best Practices</h2>
124
+ <ol>
125
+ <li>✅ <strong>Use dsgn.json for project-wide fonts</strong> - Configure once, use everywhere</li>
126
+ <li>✅ <strong>Use font classes</strong> - <code>tw(&#39;font-sans&#39;)</code> instead of <code>fontFamily: &#39;Inter&#39;</code></li>
127
+ <li>✅ <strong>Include fallbacks</strong> - Always add system fonts: <code>[&quot;Inter&quot;, &quot;system-ui&quot;, &quot;sans-serif&quot;]</code></li>
128
+ <li>✅ <strong>Match names</strong> - First font in <code>family</code> array is used as the loaded font name</li>
129
+ <li>✅ <strong>Relative paths</strong> - Font paths are relative to <code>dsgn.json</code> location</li>
130
+ <li>⚠️ <strong>Template fonts for special cases</strong> - Only use meta.json fonts for template-specific typography</li>
131
+ </ol>
132
+ <h2 id="examples">Examples</h2>
133
+ <h3 id="minimal-setup-system-fonts">Minimal Setup (System Fonts)</h3>
134
+ <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>
135
+ <span class="line"><span style="color:#79B8FF"> &quot;fonts&quot;</span><span style="color:#E1E4E8">: {</span></span>
136
+ <span class="line"><span style="color:#79B8FF"> &quot;sans&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Inter&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;-apple-system&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;sans-serif&quot;</span><span style="color:#E1E4E8">]</span></span>
137
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
138
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
139
+ <span class="line"></span></code></pre>
140
+ <p>Uses system Inter if available, falls back to Noto Sans for rendering.</p>
141
+ <h3 id="brand-fonts-setup">Brand Fonts Setup</h3>
142
+ <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>
143
+ <span class="line"><span style="color:#79B8FF"> &quot;fonts&quot;</span><span style="color:#E1E4E8">: {</span></span>
144
+ <span class="line"><span style="color:#79B8FF"> &quot;sans&quot;</span><span style="color:#E1E4E8">: {</span></span>
145
+ <span class="line"><span style="color:#79B8FF"> &quot;family&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Montserrat&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;sans-serif&quot;</span><span style="color:#E1E4E8">],</span></span>
146
+ <span class="line"><span style="color:#79B8FF"> &quot;files&quot;</span><span style="color:#E1E4E8">: [</span></span>
147
+ <span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">&quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./fonts/Montserrat-Regular.woff&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
148
+ <span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">&quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./fonts/Montserrat-Bold.woff&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span><span style="color:#E1E4E8"> }</span></span>
149
+ <span class="line"><span style="color:#E1E4E8"> ]</span></span>
150
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
151
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
152
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
153
+ <span class="line"></span></code></pre>
154
+ <p>Loads and uses Montserrat for all templates.</p>
155
+ <h3 id="multi-font-setup">Multi-Font Setup</h3>
156
+ <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>
157
+ <span class="line"><span style="color:#79B8FF"> &quot;fonts&quot;</span><span style="color:#E1E4E8">: {</span></span>
158
+ <span class="line"><span style="color:#79B8FF"> &quot;sans&quot;</span><span style="color:#E1E4E8">: {</span></span>
159
+ <span class="line"><span style="color:#79B8FF"> &quot;family&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Inter&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;sans-serif&quot;</span><span style="color:#E1E4E8">],</span></span>
160
+ <span class="line"><span style="color:#79B8FF"> &quot;files&quot;</span><span style="color:#E1E4E8">: [</span></span>
161
+ <span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">&quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./fonts/Inter-Regular.woff&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
162
+ <span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">&quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./fonts/Inter-Bold.woff&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span><span style="color:#E1E4E8"> }</span></span>
163
+ <span class="line"><span style="color:#E1E4E8"> ]</span></span>
164
+ <span class="line"><span style="color:#E1E4E8"> },</span></span>
165
+ <span class="line"><span style="color:#79B8FF"> &quot;serif&quot;</span><span style="color:#E1E4E8">: {</span></span>
166
+ <span class="line"><span style="color:#79B8FF"> &quot;family&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Playfair Display&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;serif&quot;</span><span style="color:#E1E4E8">],</span></span>
167
+ <span class="line"><span style="color:#79B8FF"> &quot;files&quot;</span><span style="color:#E1E4E8">: [</span></span>
168
+ <span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">&quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./fonts/Playfair-Regular.woff&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }</span></span>
169
+ <span class="line"><span style="color:#E1E4E8"> ]</span></span>
170
+ <span class="line"><span style="color:#E1E4E8"> },</span></span>
171
+ <span class="line"><span style="color:#79B8FF"> &quot;mono&quot;</span><span style="color:#E1E4E8">: {</span></span>
172
+ <span class="line"><span style="color:#79B8FF"> &quot;family&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Fira Code&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;monospace&quot;</span><span style="color:#E1E4E8">],</span></span>
173
+ <span class="line"><span style="color:#79B8FF"> &quot;files&quot;</span><span style="color:#E1E4E8">: [</span></span>
174
+ <span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">&quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./fonts/FiraCode-Regular.woff&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">&quot;weight&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }</span></span>
175
+ <span class="line"><span style="color:#E1E4E8"> ]</span></span>
176
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
177
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
178
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
179
+ <span class="line"></span></code></pre>
180
+ <p>Loads different fonts for each style class.</p>
181
+ <h2 id="performance">Performance</h2>
182
+ <ul>
183
+ <li>✅ <strong>Font caching</strong> - Fonts load once and are cached for all renders</li>
184
+ <li>✅ <strong>Video optimization</strong> - 90-frame video loads fonts once, not 90 times</li>
185
+ <li>✅ <strong>No CDN delays</strong> - Local fonts load instantly</li>
186
+ </ul>
187
+ <h2 id="next-steps">Next Steps</h2>
188
+ <ul>
189
+ <li><a href="/styling">Styling with Tailwind &amp; shadcn/ui</a></li>
190
+ <li><a href="/helpers">Built-in Helpers</a></li>
191
+ <li><a href="/images">Image Rendering</a></li>
192
+ <li><a href="/video">Video Rendering</a></li>
193
+ </ul> </article> </div> </main> </div> </body></html>
package/website/dist/helpers/index.html ADDED
@@ -0,0 +1,166 @@
1
+ <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="dsgn - Generate beautiful images from React components"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><title></title><link rel="stylesheet" href="/_astro/fonts.DHdiHGBO.css"></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="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> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl font-bold bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj>
2
+ _dsgn
3
+ </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="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="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="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="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="/helpers" class="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="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="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="/llm.txt" class="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 Docs </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="template-helpers">Template Helpers</h1>
4
+ <p>Additional helpers for creating powerful, composable templates.</p>
5
+ <h2 id="overview">Overview</h2>
6
+ <p>Beyond the basics, dsgn provides:</p>
7
+ <ul>
8
+ <li><code>template()</code> - Compose templates together</li>
9
+ <li><code>qr()</code> - Generate QR codes on the fly</li>
10
+ <li><code>config</code> - Access user configuration</li>
11
+ </ul>
12
+ <p>For image and video embedding, see the <a href="/images">Images</a> and <a href="/video">Video</a> pages.</p>
13
+ <h2 id="template-composition">Template Composition</h2>
14
+ <p>Compose multiple templates together to create complex designs.</p>
15
+ <h3 id="usage">Usage</h3>
16
+ <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"> CompositeCard</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">template</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">author</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">avatar</span><span style="color:#E1E4E8"> }) {</span></span>
17
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
18
+ <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-purple-600 to-blue-500 p-12&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
19
+ <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-white rounded-2xl p-8 shadow-xl&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
20
+ <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-4xl font-bold text-gray-900 mb-6&#39;</span><span style="color:#E1E4E8">)}&gt;{title}&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
21
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
22
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Embed another template */</span><span style="color:#E1E4E8">}</span></span>
23
+ <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;mb-6&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
24
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#B392F0">template</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;user-badge&#39;</span><span style="color:#E1E4E8">, {</span></span>
25
+ <span class="line"><span style="color:#E1E4E8"> name: author,</span></span>
26
+ <span class="line"><span style="color:#E1E4E8"> avatar: avatar</span></span>
27
+ <span class="line"><span style="color:#E1E4E8"> })}</span></span>
28
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
29
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
30
+ <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-gray-600&#39;</span><span style="color:#E1E4E8">)}&gt;Published by {author}&lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
31
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
32
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
33
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
34
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
35
+ <span class="line"></span></code></pre>
36
+ <p><strong>How it works:</strong></p>
37
+ <ol>
38
+ <li><code>template(name, props)</code> renders another installed template</li>
39
+ <li>The embedded template is rendered at its specified size</li>
40
+ <li>You can embed multiple templates in one design</li>
41
+ <li>Templates can be nested (template within a template)</li>
42
+ </ol>
43
+ <h3 id="use-cases">Use Cases</h3>
44
+ <p><strong>1. Reusable components:</strong></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:#6A737D">// Create a logo template once, use it everywhere</span></span>
46
+ <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;{</span><span style="color:#B392F0">template</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;company-logo&#39;</span><span style="color:#E1E4E8">, { variant: </span><span style="color:#9ECBFF">&#39;dark&#39;</span><span style="color:#E1E4E8"> })}&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
47
+ <span class="line"></span></code></pre>
48
+ <p><strong>2. Complex layouts:</strong></p>
49
+ <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">// Combine multiple templates into one design</span></span>
50
+ <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;grid grid-cols-2 gap-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
51
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#B392F0">template</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;product-card&#39;</span><span style="color:#E1E4E8">, { product: product1 })}</span></span>
52
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#B392F0">template</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;product-card&#39;</span><span style="color:#E1E4E8">, { product: product2 })}</span></span>
53
+ <span class="line"><span style="color:#E1E4E8">&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
54
+ <span class="line"></span></code></pre>
55
+ <p><strong>3. Dynamic content:</strong></p>
56
+ <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">// Render templates based on data</span></span>
57
+ <span class="line"><span style="color:#E1E4E8">{users.</span><span style="color:#B392F0">map</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">user</span><span style="color:#F97583"> =&gt;</span><span style="color:#E1E4E8"> </span></span>
58
+ <span class="line"><span style="color:#B392F0"> template</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;user-avatar&#39;</span><span style="color:#E1E4E8">, { name: user.name, image: user.avatar })</span></span>
59
+ <span class="line"><span style="color:#E1E4E8">)}</span></span>
60
+ <span class="line"></span></code></pre>
61
+ <h3 id="best-practices">Best Practices</h3>
62
+ <ol>
63
+ <li><strong>Keep templates focused</strong> - Each template should do one thing well</li>
64
+ <li><strong>Pass minimal props</strong> - Only pass what the embedded template needs</li>
65
+ <li><strong>Document dependencies</strong> - Note which templates are required in your README</li>
66
+ <li><strong>Avoid deep nesting</strong> - Too many nested templates can be hard to debug</li>
67
+ </ol>
68
+ <h2 id="qr-codes">QR Codes</h2>
69
+ <p>Generate QR codes dynamically in your templates.</p>
70
+ <h3 id="usage-1">Usage</h3>
71
+ <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"> QRCard</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">qr</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">url</span><span style="color:#E1E4E8"> }) {</span></span>
72
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
73
+ <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 flex-col items-center justify-center w-full h-full bg-white p-10&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
74
+ <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-4xl font-bold text-black mb-8&#39;</span><span style="color:#E1E4E8">)}&gt;{title}&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
75
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
76
+ <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Generate QR code for the URL */</span><span style="color:#E1E4E8">}</span></span>
77
+ <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">qr</span><span style="color:#E1E4E8">(url)} </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-64 h-64&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
78
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
79
+ <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-gray-600 mt-4&#39;</span><span style="color:#E1E4E8">)}&gt;{url}&lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
80
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
81
+ <span class="line"><span style="color:#E1E4E8"> );</span></span>
82
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
83
+ <span class="line"></span></code></pre>
84
+ <p><strong>Props format:</strong></p>
85
+ <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>
86
+ <span class="line"><span style="color:#79B8FF"> &quot;title&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;Scan Me&quot;</span><span style="color:#E1E4E8">,</span></span>
87
+ <span class="line"><span style="color:#79B8FF"> &quot;url&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;https://example.com&quot;</span></span>
88
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
89
+ <span class="line"></span></code></pre>
90
+ <h3 id="qr-options">QR Options</h3>
91
+ <p>You can customize QR code appearance:</p>
92
+ <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">// Basic QR code</span></span>
93
+ <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">qr</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;https://example.com&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
94
+ <span class="line"></span>
95
+ <span class="line"><span style="color:#6A737D">// With error correction level</span></span>
96
+ <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">qr</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;https://example.com&#39;</span><span style="color:#E1E4E8">, { errorCorrectionLevel: </span><span style="color:#9ECBFF">&#39;H&#39;</span><span style="color:#E1E4E8"> })} /&gt;</span></span>
97
+ <span class="line"></span>
98
+ <span class="line"><span style="color:#6A737D">// With custom size</span></span>
99
+ <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">qr</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;https://example.com&#39;</span><span style="color:#E1E4E8">, { width: </span><span style="color:#79B8FF">512</span><span style="color:#E1E4E8"> })} /&gt;</span></span>
100
+ <span class="line"></span></code></pre>
101
+ <p><strong>Error correction levels:</strong></p>
102
+ <ul>
103
+ <li><code>L</code> - Low (~7% correction)</li>
104
+ <li><code>M</code> - Medium (~15% correction) - default</li>
105
+ <li><code>Q</code> - Quartile (~25% correction)</li>
106
+ <li><code>H</code> - High (~30% correction)</li>
107
+ </ul>
108
+ <h2 id="user-configuration">User Configuration</h2>
109
+ <p>Access user settings from <code>dsgn.json</code> using the <code>config</code> prop:</p>
110
+ <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"> BrandedTemplate</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">config</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8"> }) {</span></span>
111
+ <span class="line"><span style="color:#6A737D"> // Access custom colors from dsgn.json</span></span>
112
+ <span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> primaryColor</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> config?.colors?.brand </span><span style="color:#F97583">||</span><span style="color:#9ECBFF"> &#39;#6366f1&#39;</span><span style="color:#E1E4E8">;</span></span>
113
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
114
+ <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
115
+ <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&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
116
+ <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>
117
+ <span class="line"><span style="color:#F97583"> ...</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;text-6xl font-bold&#39;</span><span style="color:#E1E4E8">),</span></span>
118
+ <span class="line"><span style="color:#E1E4E8"> color: primaryColor </span></span>
119
+ <span class="line"><span style="color:#E1E4E8"> }}&gt;</span></span>
120
+ <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
121
+ <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</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"> );</span></span>
124
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
125
+ <span class="line"></span></code></pre>
126
+ <p><strong>User’s dsgn.json:</strong></p>
127
+ <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>
128
+ <span class="line"><span style="color:#79B8FF"> &quot;colors&quot;</span><span style="color:#E1E4E8">: {</span></span>
129
+ <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>
130
+ <span class="line"><span style="color:#E1E4E8"> },</span></span>
131
+ <span class="line"><span style="color:#79B8FF"> &quot;fonts&quot;</span><span style="color:#E1E4E8">: {</span></span>
132
+ <span class="line"><span style="color:#79B8FF"> &quot;sans&quot;</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">&quot;Inter&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;system-ui&quot;</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">&quot;sans-serif&quot;</span><span style="color:#E1E4E8">]</span></span>
133
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
134
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
135
+ <span class="line"></span></code></pre>
136
+ <p>This allows templates to adapt to user preferences and brand guidelines.</p>
137
+ <h2 id="all-props-reference">All Props Reference</h2>
138
+ <p>Every template receives these props:</p>
139
+ <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>
140
+ <span class="line"><span style="color:#6A737D"> // Core helpers</span></span>
141
+ <span class="line"><span style="color:#FFAB70"> tw</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Tailwind class converter</span></span>
142
+ <span class="line"><span style="color:#FFAB70"> qr</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// QR code generator (this page)</span></span>
143
+ <span class="line"><span style="color:#FFAB70"> template</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Template composer (this page)</span></span>
144
+ <span class="line"><span style="color:#FFAB70"> config</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// User config from dsgn.json (this page)</span></span>
145
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
146
+ <span class="line"><span style="color:#6A737D"> // Media helpers (see dedicated pages)</span></span>
147
+ <span class="line"><span style="color:#FFAB70"> image</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Image embedder → see /images</span></span>
148
+ <span class="line"><span style="color:#FFAB70"> video</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Video frame getter → see /video</span></span>
149
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
150
+ <span class="line"><span style="color:#6A737D"> // Video-specific (only in video templates)</span></span>
151
+ <span class="line"><span style="color:#FFAB70"> frame</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Current frame number → see /video</span></span>
152
+ <span class="line"><span style="color:#FFAB70"> progress</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Animation progress 0-1 → see /video</span></span>
153
+ <span class="line"><span style="color:#E1E4E8"> </span></span>
154
+ <span class="line"><span style="color:#6A737D"> // Your custom props</span></span>
155
+ <span class="line"><span style="color:#F97583"> ...</span><span style="color:#FFAB70">props</span><span style="color:#6A737D"> // Any props from your props.json</span></span>
156
+ <span class="line"><span style="color:#E1E4E8">}) {</span></span>
157
+ <span class="line"><span style="color:#6A737D"> // Your template code</span></span>
158
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
159
+ <span class="line"></span></code></pre>
160
+ <h2 id="next-steps">Next Steps</h2>
161
+ <ul>
162
+ <li><a href="/images">Image Rendering and Embedding</a></li>
163
+ <li><a href="/video">Video Rendering and Animation</a></li>
164
+ <li><a href="/styling">Styling with Tailwind &amp; shadcn/ui</a></li>
165
+ <li><a href="/fonts">Custom Fonts</a></li>
166
+ </ul> </article> </div> </main> </div> </body></html>