@sonicjs-cms/core 2.19.0 → 3.0.0-beta.10

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 (230) hide show
  1. package/README.md +52 -52
  2. package/dist/admin-documents-form.template-DDSH6ROU.js +6 -0
  3. package/dist/{admin-layout-catalyst.template-UMTIN66R.js.map → admin-documents-form.template-DDSH6ROU.js.map} +1 -1
  4. package/dist/admin-documents-form.template-LSZKGA5J.cjs +19 -0
  5. package/dist/{admin-layout-catalyst.template-HFD37TY5.cjs.map → admin-documents-form.template-LSZKGA5J.cjs.map} +1 -1
  6. package/dist/{filter-bar.template-DlVYMk-T.d.cts → admin-layout-catalyst.template-DrwDUfsE.d.cts} +25 -1
  7. package/dist/{filter-bar.template-DlVYMk-T.d.ts → admin-layout-catalyst.template-DrwDUfsE.d.ts} +25 -1
  8. package/dist/admin-layout-catalyst.template-KDHKVLXR.cjs +21 -0
  9. package/dist/admin-layout-catalyst.template-KDHKVLXR.cjs.map +1 -0
  10. package/dist/admin-layout-catalyst.template-YQ4EMF2J.js +7 -0
  11. package/dist/admin-layout-catalyst.template-YQ4EMF2J.js.map +1 -0
  12. package/dist/app-Bo0X1OWX.d.ts +1268 -0
  13. package/dist/app-Do66yCcV.d.cts +1268 -0
  14. package/dist/cache-DDARE4QE.js +4 -0
  15. package/dist/cache-DDARE4QE.js.map +1 -0
  16. package/dist/cache-LVYS4BPL.cjs +33 -0
  17. package/dist/cache-LVYS4BPL.cjs.map +1 -0
  18. package/dist/chunk-2CB4KY7I.cjs +771 -0
  19. package/dist/chunk-2CB4KY7I.cjs.map +1 -0
  20. package/dist/{chunk-ABB34XUS.cjs → chunk-3KYKEXV7.cjs} +667 -19
  21. package/dist/chunk-3KYKEXV7.cjs.map +1 -0
  22. package/dist/chunk-4BTBSXMR.cjs +912 -0
  23. package/dist/chunk-4BTBSXMR.cjs.map +1 -0
  24. package/dist/{chunk-55RDMDOP.js → chunk-5V62WT6M.js} +181 -57
  25. package/dist/chunk-5V62WT6M.js.map +1 -0
  26. package/dist/{chunk-OCL3HMEG.js → chunk-6OC6MF3C.js} +7004 -9807
  27. package/dist/chunk-6OC6MF3C.js.map +1 -0
  28. package/dist/chunk-AI663NBO.js +821 -0
  29. package/dist/chunk-AI663NBO.js.map +1 -0
  30. package/dist/chunk-ALDRXTUO.js +273 -0
  31. package/dist/chunk-ALDRXTUO.js.map +1 -0
  32. package/dist/{chunk-TFNTM3OA.js → chunk-ATUPB6MN.js} +645 -15
  33. package/dist/chunk-ATUPB6MN.js.map +1 -0
  34. package/dist/chunk-BLMTL57B.js +767 -0
  35. package/dist/chunk-BLMTL57B.js.map +1 -0
  36. package/dist/{chunk-4ZSNJDLS.cjs → chunk-CRGUD4KC.cjs} +9 -9
  37. package/dist/chunk-CRGUD4KC.cjs.map +1 -0
  38. package/dist/chunk-F67UK75A.cjs +158 -0
  39. package/dist/chunk-F67UK75A.cjs.map +1 -0
  40. package/dist/chunk-GCDZZNIN.js +192 -0
  41. package/dist/chunk-GCDZZNIN.js.map +1 -0
  42. package/dist/chunk-HIKBY7MS.cjs +70 -0
  43. package/dist/chunk-HIKBY7MS.cjs.map +1 -0
  44. package/dist/{chunk-4NPCDK6B.js → chunk-IDCZBF35.js} +557 -90
  45. package/dist/chunk-IDCZBF35.js.map +1 -0
  46. package/dist/chunk-IESEVHXL.js +66 -0
  47. package/dist/chunk-IESEVHXL.js.map +1 -0
  48. package/dist/chunk-IGADDMXH.js +387 -0
  49. package/dist/chunk-IGADDMXH.js.map +1 -0
  50. package/dist/chunk-IHTXB7AT.cjs +276 -0
  51. package/dist/chunk-IHTXB7AT.cjs.map +1 -0
  52. package/dist/chunk-IVPRUGTY.js +242 -0
  53. package/dist/chunk-IVPRUGTY.js.map +1 -0
  54. package/dist/{chunk-JZVHLLSI.cjs → chunk-IXUHXTHW.cjs} +2 -151
  55. package/dist/chunk-IXUHXTHW.cjs.map +1 -0
  56. package/dist/chunk-J6JTWD2A.cjs +100 -0
  57. package/dist/chunk-J6JTWD2A.cjs.map +1 -0
  58. package/dist/chunk-JEQ7FLOD.cjs +199 -0
  59. package/dist/chunk-JEQ7FLOD.cjs.map +1 -0
  60. package/dist/{chunk-ON5ZMSU4.js → chunk-JQISFW6U.js} +3 -3
  61. package/dist/chunk-JQISFW6U.js.map +1 -0
  62. package/dist/chunk-K25XHMM3.js +566 -0
  63. package/dist/chunk-K25XHMM3.js.map +1 -0
  64. package/dist/{chunk-UYJ6TJHX.cjs → chunk-K623Q6WD.cjs} +181 -56
  65. package/dist/chunk-K623Q6WD.cjs.map +1 -0
  66. package/dist/{chunk-7A4CB7T3.cjs → chunk-MUNO67TT.cjs} +561 -91
  67. package/dist/chunk-MUNO67TT.cjs.map +1 -0
  68. package/dist/chunk-N32OWET6.cjs +327 -0
  69. package/dist/chunk-N32OWET6.cjs.map +1 -0
  70. package/dist/chunk-NUKJ54GA.cjs +245 -0
  71. package/dist/chunk-NUKJ54GA.cjs.map +1 -0
  72. package/dist/{chunk-XWIA3HVX.js → chunk-OBA2RYZN.js} +6 -1249
  73. package/dist/chunk-OBA2RYZN.js.map +1 -0
  74. package/dist/chunk-PMGOBS6X.cjs +408 -0
  75. package/dist/chunk-PMGOBS6X.cjs.map +1 -0
  76. package/dist/{chunk-OHYBNCVL.cjs → chunk-PXNTCCPE.cjs} +10 -1256
  77. package/dist/chunk-PXNTCCPE.cjs.map +1 -0
  78. package/dist/chunk-PYVFXCSD.js +1828 -0
  79. package/dist/chunk-PYVFXCSD.js.map +1 -0
  80. package/dist/{chunk-BU7SFHGP.js → chunk-QZGABF2M.js} +3 -149
  81. package/dist/chunk-QZGABF2M.js.map +1 -0
  82. package/dist/{chunk-E4YFJBM2.cjs → chunk-R4ILO3W6.cjs} +876 -829
  83. package/dist/chunk-R4ILO3W6.cjs.map +1 -0
  84. package/dist/chunk-RMRJGMDE.js +323 -0
  85. package/dist/chunk-RMRJGMDE.js.map +1 -0
  86. package/dist/chunk-RNZFGN4R.js +88 -0
  87. package/dist/chunk-RNZFGN4R.js.map +1 -0
  88. package/dist/chunk-RQ6N3FTV.js +900 -0
  89. package/dist/chunk-RQ6N3FTV.js.map +1 -0
  90. package/dist/{chunk-R4FOLLFB.cjs → chunk-TO6EY4P7.cjs} +8730 -11520
  91. package/dist/chunk-TO6EY4P7.cjs.map +1 -0
  92. package/dist/chunk-V464XBYS.js +154 -0
  93. package/dist/chunk-V464XBYS.js.map +1 -0
  94. package/dist/chunk-YA3TJ65D.cjs +575 -0
  95. package/dist/chunk-YA3TJ65D.cjs.map +1 -0
  96. package/dist/chunk-YP7GW2G5.cjs +866 -0
  97. package/dist/chunk-YP7GW2G5.cjs.map +1 -0
  98. package/dist/{collection-config-B4PG-AaF.d.cts → collection-config-JgHOpFCG.d.cts} +30 -2
  99. package/dist/{collection-config-B4PG-AaF.d.ts → collection-config-JgHOpFCG.d.ts} +30 -2
  100. package/dist/config-HFXANXCC.js +6 -0
  101. package/dist/config-HFXANXCC.js.map +1 -0
  102. package/dist/config-ON6FNMYX.cjs +19 -0
  103. package/dist/config-ON6FNMYX.cjs.map +1 -0
  104. package/dist/define-plugin-BzNHc1ZI.d.ts +1321 -0
  105. package/dist/define-plugin-IWDKYaVm.d.cts +1321 -0
  106. package/dist/document-projection-TDWRJX3Z.cjs +13 -0
  107. package/dist/document-projection-TDWRJX3Z.cjs.map +1 -0
  108. package/dist/document-projection-YYMC6I4U.js +4 -0
  109. package/dist/document-projection-YYMC6I4U.js.map +1 -0
  110. package/dist/index.cjs +13736 -4326
  111. package/dist/index.cjs.map +1 -1
  112. package/dist/index.d.cts +331 -493
  113. package/dist/index.d.ts +331 -493
  114. package/dist/index.js +13455 -4067
  115. package/dist/index.js.map +1 -1
  116. package/dist/middleware.cjs +38 -32
  117. package/dist/middleware.d.cts +50 -7
  118. package/dist/middleware.d.ts +50 -7
  119. package/dist/middleware.js +9 -3
  120. package/dist/migrations-2XHQEGOQ.cjs +13 -0
  121. package/dist/{migrations-566IIPS2.cjs.map → migrations-2XHQEGOQ.cjs.map} +1 -1
  122. package/dist/migrations-PE3CDVSM.js +4 -0
  123. package/dist/{migrations-H5IXZNCO.js.map → migrations-PE3CDVSM.js.map} +1 -1
  124. package/dist/{plugin-bootstrap-DfVerYV4.d.cts → plugin-bootstrap-B8ThJU21.d.cts} +4315 -1661
  125. package/dist/{plugin-bootstrap-P_ciLp_C.d.ts → plugin-bootstrap-qu8hJgUt.d.ts} +4315 -1661
  126. package/dist/plugins.cjs +171 -12
  127. package/dist/plugins.d.cts +36 -2
  128. package/dist/plugins.d.ts +36 -2
  129. package/dist/plugins.js +5 -2
  130. package/dist/rbac-O73MFKDA.js +5 -0
  131. package/dist/rbac-O73MFKDA.js.map +1 -0
  132. package/dist/rbac-VONLJJKB.cjs +14 -0
  133. package/dist/rbac-VONLJJKB.cjs.map +1 -0
  134. package/dist/routes.cjs +42 -46
  135. package/dist/routes.d.cts +56 -146
  136. package/dist/routes.d.ts +56 -146
  137. package/dist/routes.js +18 -10
  138. package/dist/services.cjs +43 -76
  139. package/dist/services.d.cts +93 -55
  140. package/dist/services.d.ts +93 -55
  141. package/dist/services.js +6 -3
  142. package/dist/{telemetry-B9vIV4wh.d.cts → telemetry-Cku1ax74.d.cts} +1 -1
  143. package/dist/{telemetry-B9vIV4wh.d.ts → telemetry-Cku1ax74.d.ts} +1 -1
  144. package/dist/templates.cjs +17 -29
  145. package/dist/templates.d.cts +2 -89
  146. package/dist/templates.d.ts +2 -89
  147. package/dist/templates.js +3 -3
  148. package/dist/types-Dea1eNxU.d.cts +286 -0
  149. package/dist/types-Dea1eNxU.d.ts +286 -0
  150. package/dist/types.d.cts +2 -2
  151. package/dist/types.d.ts +2 -2
  152. package/dist/utils.cjs +21 -20
  153. package/dist/utils.d.cts +2 -2
  154. package/dist/utils.d.ts +2 -2
  155. package/dist/utils.js +3 -2
  156. package/migrations/0001_core.sql +184 -0
  157. package/migrations/0002_documents.sql +163 -0
  158. package/package.json +12 -7
  159. package/dist/admin-layout-catalyst.template-HFD37TY5.cjs +0 -17
  160. package/dist/admin-layout-catalyst.template-UMTIN66R.js +0 -7
  161. package/dist/app-C9esKLmh.d.cts +0 -112
  162. package/dist/app-C9esKLmh.d.ts +0 -112
  163. package/dist/chunk-4NPCDK6B.js.map +0 -1
  164. package/dist/chunk-4ZSNJDLS.cjs.map +0 -1
  165. package/dist/chunk-55RDMDOP.js.map +0 -1
  166. package/dist/chunk-635JAMSE.cjs +0 -653
  167. package/dist/chunk-635JAMSE.cjs.map +0 -1
  168. package/dist/chunk-7A4CB7T3.cjs.map +0 -1
  169. package/dist/chunk-ABB34XUS.cjs.map +0 -1
  170. package/dist/chunk-BU7SFHGP.js.map +0 -1
  171. package/dist/chunk-E4YFJBM2.cjs.map +0 -1
  172. package/dist/chunk-EXNEW5US.js +0 -648
  173. package/dist/chunk-EXNEW5US.js.map +0 -1
  174. package/dist/chunk-JZV22DEV.js +0 -1783
  175. package/dist/chunk-JZV22DEV.js.map +0 -1
  176. package/dist/chunk-JZVHLLSI.cjs.map +0 -1
  177. package/dist/chunk-OCL3HMEG.js.map +0 -1
  178. package/dist/chunk-OHYBNCVL.cjs.map +0 -1
  179. package/dist/chunk-ON5ZMSU4.js.map +0 -1
  180. package/dist/chunk-QFWHAFEO.js +0 -1843
  181. package/dist/chunk-QFWHAFEO.js.map +0 -1
  182. package/dist/chunk-R4FOLLFB.cjs.map +0 -1
  183. package/dist/chunk-RLMUFFUD.cjs +0 -2219
  184. package/dist/chunk-RLMUFFUD.cjs.map +0 -1
  185. package/dist/chunk-TFNTM3OA.js.map +0 -1
  186. package/dist/chunk-UYJ6TJHX.cjs.map +0 -1
  187. package/dist/chunk-WAEQXGCX.cjs +0 -1898
  188. package/dist/chunk-WAEQXGCX.cjs.map +0 -1
  189. package/dist/chunk-XWIA3HVX.js.map +0 -1
  190. package/dist/chunk-ZYAYUIZE.js +0 -2217
  191. package/dist/chunk-ZYAYUIZE.js.map +0 -1
  192. package/dist/migrations-566IIPS2.cjs +0 -13
  193. package/dist/migrations-H5IXZNCO.js +0 -4
  194. package/dist/plugin-manager-BoM3Q7o7.d.cts +0 -328
  195. package/dist/plugin-manager-Efx9RyDX.d.ts +0 -328
  196. package/migrations/001_initial_schema.sql +0 -170
  197. package/migrations/002_faq_plugin.sql +0 -86
  198. package/migrations/003_stage5_enhancements.sql +0 -121
  199. package/migrations/004_stage6_user_management.sql +0 -183
  200. package/migrations/005_stage7_workflow_automation.sql +0 -294
  201. package/migrations/006_plugin_system.sql +0 -155
  202. package/migrations/007_demo_login_plugin.sql +0 -23
  203. package/migrations/008_fix_slug_validation.sql +0 -22
  204. package/migrations/009_system_logging.sql +0 -57
  205. package/migrations/011_config_managed_collections.sql +0 -15
  206. package/migrations/012_testimonials_plugin.sql +0 -80
  207. package/migrations/013_code_examples_plugin.sql +0 -177
  208. package/migrations/014_fix_plugin_registry.sql +0 -88
  209. package/migrations/015_add_remaining_plugins.sql +0 -89
  210. package/migrations/016_remove_duplicate_cache_plugin.sql +0 -17
  211. package/migrations/017_auth_configurable_fields.sql +0 -49
  212. package/migrations/018_settings_table.sql +0 -23
  213. package/migrations/019_remove_blog_posts_collection.sql +0 -15
  214. package/migrations/020_add_email_plugin.sql +0 -22
  215. package/migrations/021_add_magic_link_auth_plugin.sql +0 -42
  216. package/migrations/022_add_tinymce_plugin.sql +0 -25
  217. package/migrations/023_add_easy_mdx_plugin.sql +0 -25
  218. package/migrations/024_add_quill_editor_plugin.sql +0 -25
  219. package/migrations/025_add_easymde_plugin.sql +0 -25
  220. package/migrations/026_add_otp_login.sql +0 -42
  221. package/migrations/027_fix_slug_field_type.sql +0 -18
  222. package/migrations/028_fix_slug_field_type_in_schemas.sql +0 -30
  223. package/migrations/029_add_forms_system.sql +0 -184
  224. package/migrations/030_add_turnstile_to_forms.sql +0 -14
  225. package/migrations/031_ai_search_plugin.sql +0 -45
  226. package/migrations/032_user_profiles.sql +0 -37
  227. package/migrations/033_form_content_integration.sql +0 -19
  228. package/migrations/034_security_audit_plugin.sql +0 -27
  229. package/migrations/035_user_profiles_data_column.sql +0 -16
  230. package/migrations/036_analytics_events.sql +0 -22
package/dist/chunk-4ZSNJDLS.cjs.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/templates/filter-bar.template.ts","../src/templates/index.ts","../src/templates/pages/admin-forms-docs.template.ts","../src/templates/pages/admin-forms-examples.template.ts"],"names":["init_admin_layout_catalyst_template","init_logo_template","renderAdminLayoutCatalyst"],"mappings":";;;;;AA8BO,SAAS,gBAAgB,IAAA,EAA6B;AAC3D,EAAA,OAAO;AAAA;AAAA;AAAA,QAAA,EAGC,IAAA,CAAK,OAAA,CAAQ,GAAA,CAAI,CAAA,MAAA,KAAU;AAAA;AAAA,gFAAA,EAE6C,OAAO,KAAK,CAAA;AAAA;AAAA,oBAAA,EAExE,OAAO,IAAI,CAAA;AAAA;AAAA;AAAA;AAAA,cAAA,EAIjB,MAAA,CAAO,OAAA,CAAQ,GAAA,CAAI,CAAA,MAAA,KAAU;AAAA,+BAAA,EACZ,OAAO,KAAK,CAAA,EAAA,EAAK,MAAA,CAAO,QAAA,GAAW,aAAa,EAAE,CAAA;AAAA,kBAAA,EAC/D,OAAO,KAAK;AAAA;AAAA,cAAA,CAEjB,CAAA,CAAE,IAAA,CAAK,EAAE,CAAC;AAAA;AAAA;AAAA,QAAA,CAGhB,CAAA,CAAE,IAAA,CAAK,EAAE,CAAC;;AAAA,QAAA,EAET,IAAA,CAAK,OAAA,IAAW,IAAA,CAAK,OAAA,CAAQ,SAAS,CAAA,GAAI;AAAA;AAAA,YAAA,EAEtC,IAAA,CAAK,OAAA,CAAQ,GAAA,CAAI,CAAA,MAAA,KAAU;AAAA;AAAA;AAAA;AAAA,gBAAA,EAIvB,OAAO,OAAA,GAAU,CAAA,SAAA,EAAY,MAAA,CAAO,OAAO,MAAM,EAAE;AAAA,gBAAA,EACnD,OAAO,KAAA,GAAQ,CAAA,QAAA,EAAW,MAAA,CAAO,KAAK,MAAM,EAAE;AAAA,gBAAA,EAC9C,OAAO,QAAA,GAAW,CAAA,WAAA,EAAc,MAAA,CAAO,QAAQ,MAAM,EAAE;AAAA;AAAA,gBAAA,EAEvD,OAAO,KAAK;AAAA;AAAA,YAAA,CAEjB,CAAA,CAAE,IAAA,CAAK,EAAE,CAAC;AAAA;AAAA,QAAA,CAAA,GAEX,EAAE;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AA2Bd;;;AC5DAA,qDAAA,EAAA;AAKAC,oCAAA,EAAA;;;ACrCAD,qDAAA,EAAA;AAWO,SAAS,oBAAoB,IAAA,EAAiC;AACnE,EAAA,MAAM,WAAA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAyvCpB,EAAA,MAAM,UAAA,GAAsC;AAAA,IAC1C,KAAA,EAAO,uBAAA;AAAA,IACP,SAAA,EAAW,uBAAA;AAAA,IACX,OAAA,EAAS,WAAA;AAAA,IACT,MAAM,IAAA,CAAK,IAAA;AAAA,IACX,SAAS,IAAA,CAAK;AAAA,GAChB;AAEA,EAAA,OAAOE,4CAA0B,UAAU,CAAA;AAC7C;;;AC9wCAF,qDAAA,EAAA;AAWO,SAAS,wBAAwB,IAAA,EAAqC;AAC3E,EAAA,MAAM,WAAA,GAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAukCpB,EAAA,MAAM,UAAA,GAAsC;AAAA,IAC1C,KAAA,EAAO,gBAAA;AAAA,IACP,SAAA,EAAW,gBAAA;AAAA,IACX,OAAA,EAAS,WAAA;AAAA,IACT,MAAM,IAAA,CAAK,IAAA;AAAA,IACX,SAAS,IAAA,CAAK;AAAA,GAChB;AAEA,EAAA,OAAOE,4CAA0B,UAAU,CAAA;AAC7C","file":"chunk-4ZSNJDLS.cjs","sourcesContent":["export interface FilterOption {\n value: string\n label: string\n selected?: boolean\n color?: string\n}\n\nexport interface Filter {\n name: string\n label: string\n options: FilterOption[]\n}\n\nexport interface FilterBarData {\n filters: Filter[]\n actions?: Array<{\n label: string\n className?: string\n onclick?: string\n hxGet?: string\n hxTarget?: string\n }>\n bulkActions?: Array<{\n label: string\n value: string\n icon?: string\n className?: string\n }>\n}\n\nexport function renderFilterBar(data: FilterBarData): string {\n return `\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-6 mb-6\">\n <form id=\"filter-form\" class=\"flex flex-wrap gap-4 items-center\">\n ${data.filters.map(filter => `\n <div class=\"flex items-center space-x-2\">\n <label class=\"text-sm font-medium text-zinc-500 dark:text-zinc-400\">${filter.label}:</label>\n <select\n name=\"${filter.name}\"\n class=\"rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500 focus:outline-none transition-colors\"\n onchange=\"updateFilters()\"\n >\n ${filter.options.map(option => `\n <option value=\"${option.value}\" ${option.selected ? 'selected' : ''}>\n ${option.label}\n </option>\n `).join('')}\n </select>\n </div>\n `).join('')}\n\n ${data.actions && data.actions.length > 0 ? `\n <div class=\"flex items-center space-x-2 ml-auto\">\n ${data.actions.map(action => `\n <button\n type=\"button\"\n class=\"inline-flex items-center rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\"\n ${action.onclick ? `onclick=\"${action.onclick}\"` : ''}\n ${action.hxGet ? `hx-get=\"${action.hxGet}\"` : ''}\n ${action.hxTarget ? `hx-target=\"${action.hxTarget}\"` : ''}\n >\n ${action.label}\n </button>\n `).join('')}\n </div>\n ` : ''}\n </form>\n\n <script>\n function updateFilters() {\n const form = document.getElementById('filter-form');\n const formData = new FormData(form);\n const params = new URLSearchParams(window.location.search);\n\n // Update params with form values\n for (const [key, value] of formData.entries()) {\n if (value) {\n params.set(key, value);\n } else {\n params.delete(key);\n }\n }\n\n // Reset to page 1 when filters change\n params.set('page', '1');\n\n // Update URL and reload\n window.location.href = window.location.pathname + '?' + params.toString();\n }\n </script>\n </div>\n `\n}","/**\n * Templates Module Exports\n *\n * Reusable HTML template components for SonicJS\n */\n\n// Form templates\nexport { renderForm, renderFormField } from './form.template'\nexport type { FormField, FormData } from './form.template'\n\n// Table templates\nexport { renderTable } from './table.template'\nexport type { TableColumn, TableData } from './table.template'\n\n// Pagination templates\nexport { renderPagination } from './pagination.template'\nexport type { PaginationData } from './pagination.template'\n\n// Alert templates\nexport { renderAlert } from './alert.template'\nexport type { AlertData } from './alert.template'\n\n// Confirmation dialog templates\nexport { renderConfirmationDialog, getConfirmationDialogScript } from './confirmation-dialog.template'\nexport type { ConfirmationDialogOptions } from './confirmation-dialog.template'\n\n// Filter bar templates\nexport { renderFilterBar } from './filter-bar.template'\nexport type { FilterBarData, Filter, FilterOption } from './filter-bar.template'\n\n// Layout templates\nexport { renderAdminLayout } from './layouts/admin-layout-v2.template'\nexport { renderAdminLayoutCatalyst } from './layouts/admin-layout-catalyst.template'\nexport type { AdminLayoutData } from './layouts/admin-layout-v2.template'\nexport type { AdminLayoutCatalystData } from './layouts/admin-layout-catalyst.template'\n\n// Component templates\nexport { renderLogo } from './components/logo.template'\n\n// Page templates - Admin\nexport { renderDesignPage } from './pages/admin-design.template'\nexport type { DesignPageData } from './pages/admin-design.template'\nexport { renderCheckboxPage } from './pages/admin-checkboxes.template'\nexport type { CheckboxPageData } from './pages/admin-checkboxes.template'\nexport { renderTestimonialsList } from './pages/admin-testimonials-list.template'\nexport { renderCodeExamplesList } from './pages/admin-code-examples-list.template'\nexport { renderFormsDocsPage } from './pages/admin-forms-docs.template'\nexport type { FormsDocsPageData } from './pages/admin-forms-docs.template'\nexport { renderFormsExamplesPage } from './pages/admin-forms-examples.template'\nexport type { FormsExamplesPageData } from './pages/admin-forms-examples.template'","import { renderAdminLayoutCatalyst, AdminLayoutCatalystData } from '../layouts/admin-layout-catalyst.template'\n\nexport interface FormsDocsPageData {\n user?: {\n name: string\n email: string\n role: string\n }\n version?: string\n}\n\nexport function renderFormsDocsPage(data: FormsDocsPageData): string {\n const pageContent = `\n <style>\n /* Light theme matching examples page */\n .docs-container {\n display: flex;\n gap: 0;\n min-height: calc(100vh - 200px);\n background: #ffffff;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n }\n \n .docs-sidebar {\n width: 280px;\n background: #f8f9fa;\n border-right: 1px solid #e0e0e0;\n padding: 1.5rem 0;\n overflow-y: auto;\n }\n \n .docs-sidebar h3 {\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #6b7280;\n padding: 0 1.5rem;\n margin-bottom: 0.75rem;\n }\n \n .docs-nav {\n list-style: none;\n padding: 0;\n margin: 0 0 2rem 0;\n }\n \n .docs-nav li {\n margin: 0;\n }\n \n .docs-nav a {\n display: block;\n padding: 0.75rem 1.5rem;\n color: #374151;\n text-decoration: none;\n font-size: 0.875rem;\n transition: all 0.2s;\n border-left: 3px solid transparent;\n }\n \n .docs-nav a:hover {\n background: #e9ecef;\n color: #1f2937;\n }\n \n .docs-nav a.active {\n background: #e3f2fd;\n color: #1976d2;\n border-left-color: #1976d2;\n font-weight: 500;\n }\n \n .docs-content {\n flex: 1;\n padding: 2rem;\n background: #ffffff;\n overflow-y: auto;\n }\n \n .doc-section {\n display: none;\n }\n \n .doc-section.active {\n display: block;\n }\n \n .doc-header {\n margin-bottom: 2rem;\n padding-bottom: 1rem;\n border-bottom: 2px solid #e0e0e0;\n }\n \n .doc-header h2 {\n font-size: 1.875rem;\n font-weight: 700;\n color: #1f2937;\n margin-bottom: 0.5rem;\n }\n \n .doc-header p {\n color: #6b7280;\n font-size: 1rem;\n }\n \n .field-example {\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n }\n \n .field-example h3 {\n font-size: 1.125rem;\n font-weight: 600;\n color: #1f2937;\n margin-bottom: 0.75rem;\n }\n \n .field-example p {\n color: #6b7280;\n font-size: 0.875rem;\n margin-bottom: 1rem;\n }\n \n .code-block {\n background: #1e1e1e;\n color: #d4d4d4;\n padding: 1rem;\n border-radius: 6px;\n overflow-x: auto;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.875rem;\n line-height: 1.6;\n }\n \n .info-box {\n background: #e3f2fd;\n border: 1px solid #90caf9;\n border-radius: 8px;\n padding: 1rem;\n margin-bottom: 1.5rem;\n color: #1565c0;\n font-size: 0.875rem;\n }\n \n .info-box strong {\n font-weight: 600;\n }\n </style>\n\n <div class=\"mb-6\">\n <div class=\"flex items-center gap-3 mb-4\">\n <a href=\"/admin/forms\" class=\"inline-flex items-center text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors\">\n <svg class=\"w-4 h-4 mr-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"/>\n </svg>\n Back to Forms\n </a>\n </div>\n <h1 class=\"text-3xl font-bold text-zinc-950 dark:text-white\">Forms Quick Reference</h1>\n <p class=\"mt-2 text-zinc-600 dark:text-zinc-400\">Comprehensive guide to all Form.io field types and features</p>\n </div>\n\n <div class=\"docs-container\">\n <!-- Sidebar Navigation -->\n <aside class=\"docs-sidebar\">\n <h3>Quick Start</h3>\n <ul class=\"docs-nav\">\n <li><a href=\"#overview\" class=\"doc-link active\">Overview</a></li>\n <li><a href=\"#getting-started\" class=\"doc-link\">Getting Started</a></li>\n </ul>\n \n <h3>Basic Fields</h3>\n <ul class=\"docs-nav\">\n <li><a href=\"#textfield\" class=\"doc-link\">Text Field</a></li>\n <li><a href=\"#textarea\" class=\"doc-link\">Text Area</a></li>\n <li><a href=\"#number\" class=\"doc-link\">Number</a></li>\n <li><a href=\"#password\" class=\"doc-link\">Password</a></li>\n <li><a href=\"#email\" class=\"doc-link\">Email</a></li>\n <li><a href=\"#url\" class=\"doc-link\">URL</a></li>\n <li><a href=\"#phonenumber\" class=\"doc-link\">Phone Number</a></li>\n </ul>\n \n <h3>Date & Time</h3>\n <ul class=\"docs-nav\">\n <li><a href=\"#datetime\" class=\"doc-link\">Date/Time</a></li>\n <li><a href=\"#day\" class=\"doc-link\">Day</a></li>\n <li><a href=\"#time\" class=\"doc-link\">Time</a></li>\n </ul>\n \n <h3>Selection Fields</h3>\n <ul class=\"docs-nav\">\n <li><a href=\"#select\" class=\"doc-link\">Select Dropdown</a></li>\n <li><a href=\"#selectboxes\" class=\"doc-link\">Select Boxes</a></li>\n <li><a href=\"#radio\" class=\"doc-link\">Radio</a></li>\n <li><a href=\"#checkbox\" class=\"doc-link\">Checkbox</a></li>\n </ul>\n \n <h3>Advanced Fields</h3>\n <ul class=\"docs-nav\">\n <li><a href=\"#currency\" class=\"doc-link\">Currency</a></li>\n <li><a href=\"#tags\" class=\"doc-link\">Tags</a></li>\n <li><a href=\"#survey\" class=\"doc-link\">Survey</a></li>\n <li><a href=\"#signature\" class=\"doc-link\">Signature</a></li>\n <li><a href=\"#file\" class=\"doc-link\">File Upload</a></li>\n <li><a href=\"#address\" class=\"doc-link\">Address</a></li>\n <li><a href=\"#turnstile\" class=\"doc-link\">🛡️ Turnstile</a></li>\n </ul>\n \n <h3>Layout Components</h3>\n <ul class=\"docs-nav\">\n <li><a href=\"#panel\" class=\"doc-link\">Panel</a></li>\n <li><a href=\"#columns\" class=\"doc-link\">Columns</a></li>\n <li><a href=\"#tabs\" class=\"doc-link\">Tabs</a></li>\n <li><a href=\"#table\" class=\"doc-link\">Table</a></li>\n <li><a href=\"#fieldset\" class=\"doc-link\">Fieldset</a></li>\n </ul>\n \n <h3>Data Components</h3>\n <ul class=\"docs-nav\">\n <li><a href=\"#datagrid\" class=\"doc-link\">Data Grid</a></li>\n <li><a href=\"#editgrid\" class=\"doc-link\">Edit Grid</a></li>\n </ul>\n \n <h3>Guides</h3>\n <ul class=\"docs-nav\">\n <li><a href=\"#wizard\" class=\"doc-link\">Multi-Page Wizards</a></li>\n <li><a href=\"#embedding\" class=\"doc-link\">Embedding Forms</a></li>\n <li><a href=\"#validation\" class=\"doc-link\">Validation</a></li>\n <li><a href=\"#conditional\" class=\"doc-link\">Conditional Logic</a></li>\n </ul>\n </aside>\n\n <!-- Main Content Area -->\n <main class=\"docs-content\">\n \n <!-- Overview Section -->\n <section id=\"overview\" class=\"doc-section active\">\n <div class=\"doc-header\">\n <h2>📚 Overview</h2>\n <p>Complete reference for SonicJS Forms powered by Form.io</p>\n </div>\n \n <div class=\"info-box\">\n <strong>💡 New to SonicJS Forms?</strong> Start with \"Getting Started\" in the sidebar, then explore the field types you need.\n </div>\n \n <h3 style=\"font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #1f2937;\">Key Features</h3>\n <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem;\">\n <div style=\"padding: 1rem; background: #f0fdf4; border-radius: 8px;\">\n <strong style=\"color: #16a34a;\">✓ Visual Builder</strong>\n <p style=\"font-size: 0.875rem; color: #15803d; margin-top: 0.25rem;\">Drag-and-drop interface</p>\n </div>\n <div style=\"padding: 1rem; background: #f0fdf4; border-radius: 8px;\">\n <strong style=\"color: #16a34a;\">✓ 40+ Field Types</strong>\n <p style=\"font-size: 0.875rem; color: #15803d; margin-top: 0.25rem;\">Text, date, file, signature, etc.</p>\n </div>\n <div style=\"padding: 1rem; background: #f0fdf4; border-radius: 8px;\">\n <strong style=\"color: #16a34a;\">✓ Multi-Page Wizards</strong>\n <p style=\"font-size: 0.875rem; color: #15803d; margin-top: 0.25rem;\">Step-by-step forms</p>\n </div>\n <div style=\"padding: 1rem; background: #f0fdf4; border-radius: 8px;\">\n <strong style=\"color: #16a34a;\">✓ Headless API</strong>\n <p style=\"font-size: 0.875rem; color: #15803d; margin-top: 0.25rem;\">JSON schema & REST API</p>\n </div>\n <div style=\"padding: 1rem; background: #f0fdf4; border-radius: 8px;\">\n <strong style=\"color: #16a34a;\">✓ File Uploads</strong>\n <p style=\"font-size: 0.875rem; color: #15803d; margin-top: 0.25rem;\">Cloudflare R2 storage</p>\n </div>\n <div style=\"padding: 1rem; background: #f0fdf4; border-radius: 8px;\">\n <strong style=\"color: #16a34a;\">✓ 100% Open Source</strong>\n <p style=\"font-size: 0.875rem; color: #15803d; margin-top: 0.25rem;\">No vendor lock-in</p>\n </div>\n </div>\n \n <h3 style=\"font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #1f2937;\">Quick Links</h3>\n <div style=\"display: flex; gap: 1rem; flex-wrap: wrap;\">\n <a href=\"/admin/forms/examples\" style=\"display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; background: #3b82f6; color: white; border-radius: 6px; text-decoration: none; font-size: 0.875rem; font-weight: 500;\">\n <svg style=\"width: 1rem; height: 1rem; margin-right: 0.5rem;\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"/>\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z\"/>\n </svg>\n View Examples\n </a>\n <a href=\"/admin/forms/new\" style=\"display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; background: #10b981; color: white; border-radius: 6px; text-decoration: none; font-size: 0.875rem; font-weight: 500;\">\n <svg style=\"width: 1rem; height: 1rem; margin-right: 0.5rem;\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z\" clip-rule=\"evenodd\"/>\n </svg>\n Create New Form\n </a>\n <a href=\"/admin/forms\" style=\"display: inline-flex; align-items: center; padding: 0.625rem 1.25rem; background: #6b7280; color: white; border-radius: 6px; text-decoration: none; font-size: 0.875rem; font-weight: 500;\">\n <svg style=\"width: 1rem; height: 1rem; margin-right: 0.5rem;\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 10h16M4 14h16M4 18h16\"/>\n </svg>\n View All Forms\n </a>\n </div>\n </section>\n\n <!-- Getting Started Section -->\n <section id=\"getting-started\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🚀 Getting Started</h2>\n <p>Create your first form in 3 easy steps</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Step 1: Create a Form</h3>\n <p>Navigate to <code>/admin/forms</code> and click \"Create Form\"</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Step 2: Build Your Form</h3>\n <p>Drag and drop field types from the sidebar to build your form visually</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Step 3: Publish & Embed</h3>\n <p>Save your form and access it via:</p>\n <ul style=\"margin-left: 1.5rem; margin-top: 0.5rem; list-style-type: disc;\">\n <li><code>/forms/your-form-name</code> - Public form page</li>\n <li><code>/forms/your-form-name/schema</code> - JSON schema API</li>\n <li><code>/api/forms/:id/submit</code> - Submission endpoint</li>\n </ul>\n </div>\n </section>\n\n <!-- Text Field -->\n <section id=\"textfield\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📝 Text Field</h2>\n <p>Single-line text input for short text values</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Most common field type for names, titles, and short text</p>\n <pre class=\"code-block\">{\n \"type\": \"textfield\",\n \"key\": \"firstName\",\n \"label\": \"First Name\",\n \"placeholder\": \"Enter your first name\",\n \"validate\": {\n \"required\": true,\n \"minLength\": 2,\n \"maxLength\": 50\n }\n}</pre>\n </div>\n \n <div class=\"info-box\">\n <strong>💡 Pro Tip:</strong> Use <code>inputMask</code> for formatted input like SSN or custom patterns.\n </div>\n </section>\n\n <!-- Text Area -->\n <section id=\"textarea\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📄 Text Area</h2>\n <p>Multi-line text input for longer text content</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Perfect for comments, descriptions, and multi-line text</p>\n <pre class=\"code-block\">{\n \"type\": \"textarea\",\n \"key\": \"comments\",\n \"label\": \"Additional Comments\",\n \"placeholder\": \"Enter your comments here...\",\n \"rows\": 5,\n \"validate\": {\n \"required\": false,\n \"maxLength\": 1000\n }\n}</pre>\n </div>\n </section>\n\n <!-- Number Field -->\n <section id=\"number\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🔢 Number</h2>\n <p>Numeric input with validation</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>For ages, quantities, scores, and any numeric value</p>\n <pre class=\"code-block\">{\n \"type\": \"number\",\n \"key\": \"age\",\n \"label\": \"Age\",\n \"placeholder\": \"18\",\n \"validate\": {\n \"required\": true,\n \"min\": 18,\n \"max\": 120\n }\n}</pre>\n </div>\n </section>\n\n <!-- Password Field -->\n <section id=\"password\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🔒 Password</h2>\n <p>Masked text input for sensitive data</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Automatically masks input for security</p>\n <pre class=\"code-block\">{\n \"type\": \"password\",\n \"key\": \"password\",\n \"label\": \"Password\",\n \"placeholder\": \"Enter password\",\n \"validate\": {\n \"required\": true,\n \"minLength\": 8,\n \"pattern\": \"^(?=.*[A-Za-z])(?=.*\\\\d)[A-Za-z\\\\d]{8,}$\"\n }\n}</pre>\n </div>\n </section>\n\n <!-- Email Field -->\n <section id=\"email\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📧 Email</h2>\n <p>Email input with automatic validation</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Validates email format automatically</p>\n <pre class=\"code-block\">{\n \"type\": \"email\",\n \"key\": \"email\",\n \"label\": \"Email Address\",\n \"placeholder\": \"you@example.com\",\n \"validate\": {\n \"required\": true\n }\n}</pre>\n </div>\n </section>\n\n <!-- URL Field -->\n <section id=\"url\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🌐 URL</h2>\n <p>URL input with validation</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Validates URL format (http/https)</p>\n <pre class=\"code-block\">{\n \"type\": \"url\",\n \"key\": \"website\",\n \"label\": \"Website\",\n \"placeholder\": \"https://example.com\",\n \"validate\": {\n \"required\": false\n }\n}</pre>\n </div>\n </section>\n\n <!-- Phone Number Field -->\n <section id=\"phonenumber\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📞 Phone Number</h2>\n <p>Phone number input with formatting</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Automatically formats phone numbers</p>\n <pre class=\"code-block\">{\n \"type\": \"phoneNumber\",\n \"key\": \"phone\",\n \"label\": \"Phone Number\",\n \"placeholder\": \"(555) 555-5555\",\n \"validate\": {\n \"required\": true\n }\n}</pre>\n </div>\n </section>\n\n <!-- DateTime Field -->\n <section id=\"datetime\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📅 Date/Time</h2>\n <p>Date and time picker</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Interactive date/time picker with format control</p>\n <pre class=\"code-block\">{\n \"type\": \"datetime\",\n \"key\": \"appointmentDateTime\",\n \"label\": \"Appointment Date & Time\",\n \"format\": \"yyyy-MM-dd hh:mm a\",\n \"enableTime\": true,\n \"validate\": {\n \"required\": true\n }\n}</pre>\n </div>\n </section>\n\n <!-- Day Field -->\n <section id=\"day\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📆 Day</h2>\n <p>Day/Month/Year selector</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Separate dropdowns for day, month, and year</p>\n <pre class=\"code-block\">{\n \"type\": \"day\",\n \"key\": \"birthDate\",\n \"label\": \"Date of Birth\",\n \"fields\": {\n \"day\": { \"placeholder\": \"Day\" },\n \"month\": { \"placeholder\": \"Month\" },\n \"year\": { \"placeholder\": \"Year\" }\n },\n \"validate\": {\n \"required\": true\n }\n}</pre>\n </div>\n </section>\n\n <!-- Time Field -->\n <section id=\"time\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🕐 Time</h2>\n <p>Time picker (hours and minutes)</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Select time in HH:MM format</p>\n <pre class=\"code-block\">{\n \"type\": \"time\",\n \"key\": \"preferredTime\",\n \"label\": \"Preferred Contact Time\",\n \"validate\": {\n \"required\": false\n }\n}</pre>\n </div>\n </section>\n\n <!-- Select Field -->\n <section id=\"select\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🔽 Select Dropdown</h2>\n <p>Single selection dropdown</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Choose one option from a list</p>\n <pre class=\"code-block\">{\n \"type\": \"select\",\n \"key\": \"country\",\n \"label\": \"Country\",\n \"placeholder\": \"Select your country\",\n \"data\": {\n \"values\": [\n { \"label\": \"United States\", \"value\": \"us\" },\n { \"label\": \"Canada\", \"value\": \"ca\" },\n { \"label\": \"United Kingdom\", \"value\": \"uk\" },\n { \"label\": \"Australia\", \"value\": \"au\" }\n ]\n },\n \"validate\": {\n \"required\": true\n }\n}</pre>\n </div>\n </section>\n\n <!-- Select Boxes Field -->\n <section id=\"selectboxes\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>☑️ Select Boxes</h2>\n <p>Multiple checkbox selections</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Select multiple options with checkboxes</p>\n <pre class=\"code-block\">{\n \"type\": \"selectboxes\",\n \"key\": \"interests\",\n \"label\": \"Areas of Interest\",\n \"values\": [\n { \"label\": \"Sports\", \"value\": \"sports\" },\n { \"label\": \"Music\", \"value\": \"music\" },\n { \"label\": \"Technology\", \"value\": \"tech\" },\n { \"label\": \"Travel\", \"value\": \"travel\" }\n ]\n}</pre>\n </div>\n </section>\n\n <!-- Radio Field -->\n <section id=\"radio\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🔘 Radio</h2>\n <p>Single selection with radio buttons</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Choose one option from radio buttons</p>\n <pre class=\"code-block\">{\n \"type\": \"radio\",\n \"key\": \"gender\",\n \"label\": \"Gender\",\n \"values\": [\n { \"label\": \"Male\", \"value\": \"male\" },\n { \"label\": \"Female\", \"value\": \"female\" },\n { \"label\": \"Non-binary\", \"value\": \"nonbinary\" },\n { \"label\": \"Prefer not to say\", \"value\": \"other\" }\n ],\n \"validate\": {\n \"required\": true\n }\n}</pre>\n </div>\n </section>\n\n <!-- Checkbox Field -->\n <section id=\"checkbox\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>✅ Checkbox</h2>\n <p>Single checkbox for boolean values</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>For agreements, subscriptions, and yes/no options</p>\n <pre class=\"code-block\">{\n \"type\": \"checkbox\",\n \"key\": \"newsletter\",\n \"label\": \"Subscribe to newsletter\",\n \"validate\": {\n \"required\": false\n }\n}\n\n// Required checkbox (terms agreement)\n{\n \"type\": \"checkbox\",\n \"key\": \"terms\",\n \"label\": \"I agree to the terms and conditions\",\n \"validate\": {\n \"required\": true\n }\n}</pre>\n </div>\n </section>\n\n <!-- Currency Field -->\n <section id=\"currency\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>💰 Currency</h2>\n <p>Formatted currency input</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Automatically formats with currency symbol</p>\n <pre class=\"code-block\">{\n \"type\": \"currency\",\n \"key\": \"salary\",\n \"label\": \"Expected Salary\",\n \"currency\": \"USD\",\n \"placeholder\": \"$50,000\",\n \"validate\": {\n \"required\": true,\n \"min\": 0\n }\n}</pre>\n </div>\n </section>\n\n <!-- Tags Field -->\n <section id=\"tags\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🏷️ Tags</h2>\n <p>Multi-value tag input</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Type and press Enter to add tags</p>\n <pre class=\"code-block\">{\n \"type\": \"tags\",\n \"key\": \"skills\",\n \"label\": \"Skills\",\n \"placeholder\": \"Type and press Enter (e.g. JavaScript, Python)\",\n \"validate\": {\n \"required\": false\n }\n}</pre>\n </div>\n </section>\n\n <!-- Survey Field -->\n <section id=\"survey\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📊 Survey</h2>\n <p>Matrix-style rating questions</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Multiple questions with rating scale</p>\n <pre class=\"code-block\">{\n \"type\": \"survey\",\n \"key\": \"satisfaction\",\n \"label\": \"Customer Satisfaction Survey\",\n \"questions\": [\n { \"label\": \"Product Quality\", \"value\": \"quality\" },\n { \"label\": \"Customer Service\", \"value\": \"service\" },\n { \"label\": \"Value for Money\", \"value\": \"value\" }\n ],\n \"values\": [\n { \"label\": \"Poor\", \"value\": \"1\" },\n { \"label\": \"Fair\", \"value\": \"2\" },\n { \"label\": \"Good\", \"value\": \"3\" },\n { \"label\": \"Excellent\", \"value\": \"4\" }\n ]\n}</pre>\n </div>\n </section>\n\n <!-- Signature Field -->\n <section id=\"signature\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>✍️ Signature</h2>\n <p>Digital signature pad</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Capture signatures with mouse or touch</p>\n <pre class=\"code-block\">{\n \"type\": \"signature\",\n \"key\": \"signature\",\n \"label\": \"Signature\",\n \"footer\": \"Sign above\",\n \"width\": \"100%\",\n \"height\": \"150px\",\n \"validate\": {\n \"required\": true\n }\n}</pre>\n </div>\n </section>\n\n <!-- File Upload Field -->\n <section id=\"file\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📁 File Upload</h2>\n <p>File upload with storage options</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Upload files to Cloudflare R2 or base64 encode</p>\n <pre class=\"code-block\">{\n \"type\": \"file\",\n \"key\": \"resume\",\n \"label\": \"Upload Resume\",\n \"storage\": \"r2\",\n \"filePattern\": \".pdf,.doc,.docx\",\n \"fileMaxSize\": \"5MB\",\n \"multiple\": false,\n \"validate\": {\n \"required\": true\n }\n}\n\n// Multiple files\n{\n \"type\": \"file\",\n \"key\": \"attachments\",\n \"label\": \"Attachments\",\n \"storage\": \"base64\",\n \"multiple\": true,\n \"fileMaxSize\": \"10MB\"\n}</pre>\n </div>\n \n <div class=\"info-box\">\n <strong>💡 Storage Options:</strong> Use <code>storage: \"r2\"</code> for Cloudflare R2 (recommended) or <code>storage: \"base64\"</code> to encode in submission data.\n </div>\n </section>\n\n <!-- Address Field -->\n <section id=\"address\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📍 Address</h2>\n <p>Address autocomplete with Google Maps</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Google Maps API-powered address autocomplete</p>\n <pre class=\"code-block\">{\n \"type\": \"address\",\n \"key\": \"address\",\n \"label\": \"Address\",\n \"provider\": \"google\",\n \"map\": {\n \"key\": \"YOUR_GOOGLE_MAPS_API_KEY\"\n },\n \"validate\": {\n \"required\": true\n }\n}</pre>\n </div>\n \n <div class=\"info-box\">\n <strong>⚠️ API Key Required:</strong> Enable Google Maps Places API and Maps JavaScript API in Google Cloud Console.\n </div>\n </section>\n\n <!-- Turnstile Component -->\n <section id=\"turnstile\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🛡️ Turnstile</h2>\n <p>CAPTCHA-free bot protection by Cloudflare</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Add invisible bot protection to your forms</p>\n <pre class=\"code-block\">{\n \"type\": \"turnstile\",\n \"key\": \"turnstile\",\n \"label\": \"Turnstile Verification\",\n \"theme\": \"auto\",\n \"size\": \"normal\",\n \"appearance\": \"always\",\n \"persistent\": false,\n \"protected\": true\n}</pre>\n </div>\n \n <div class=\"field-example\">\n <h3>Configuration Options</h3>\n <pre class=\"code-block\">{\n \"type\": \"turnstile\",\n \"key\": \"turnstile\",\n \"label\": \"Security Check\",\n \"theme\": \"light\", // \"light\", \"dark\", \"auto\"\n \"size\": \"compact\", // \"normal\", \"compact\"\n \"appearance\": \"always\", // \"always\", \"execute\", \"interaction-only\"\n \"action\": \"submit-form\", // Optional: action name for analytics\n \"errorMessage\": \"Please complete the security verification\"\n}</pre>\n </div>\n \n <div class=\"info-box\">\n <strong>🔧 Setup Required:</strong> Enable the Turnstile plugin in Settings → Plugins and configure your site key and secret key from Cloudflare Dashboard.\n </div>\n \n <div class=\"info-box\">\n <strong>💡 Usage Tips:</strong>\n <ul style=\"margin: 10px 0 0 20px; padding: 0;\">\n <li><strong>Invisible Mode:</strong> Use <code>\"appearance\": \"interaction-only\"</code> for seamless UX</li>\n <li><strong>Dark Mode:</strong> Use <code>\"theme\": \"auto\"</code> to match user preferences</li>\n <li><strong>Compact Size:</strong> Use <code>\"size\": \"compact\"</code> for mobile forms</li>\n <li><strong>Backend Validation:</strong> Tokens are automatically validated server-side</li>\n </ul>\n </div>\n </section>\n\n <!-- Panel Component -->\n <section id=\"panel\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📦 Panel</h2>\n <p>Group fields in collapsible panels</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Used for wizards and grouping related fields</p>\n <pre class=\"code-block\">{\n \"type\": \"panel\",\n \"key\": \"personalInfo\",\n \"title\": \"Personal Information\",\n \"collapsible\": true,\n \"collapsed\": false,\n \"components\": [\n { \"type\": \"textfield\", \"key\": \"firstName\", \"label\": \"First Name\" },\n { \"type\": \"textfield\", \"key\": \"lastName\", \"label\": \"Last Name\" },\n { \"type\": \"email\", \"key\": \"email\", \"label\": \"Email\" }\n ]\n}</pre>\n </div>\n </section>\n\n <!-- Columns Component -->\n <section id=\"columns\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📊 Columns</h2>\n <p>Multi-column layout</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Create side-by-side fields (responsive)</p>\n <pre class=\"code-block\">{\n \"type\": \"columns\",\n \"columns\": [\n {\n \"components\": [\n { \"type\": \"textfield\", \"key\": \"firstName\", \"label\": \"First Name\" }\n ],\n \"width\": 6\n },\n {\n \"components\": [\n { \"type\": \"textfield\", \"key\": \"lastName\", \"label\": \"Last Name\" }\n ],\n \"width\": 6\n }\n ]\n}</pre>\n </div>\n \n <div class=\"info-box\">\n <strong>💡 Width System:</strong> Width is based on 12-column grid. Use 6 for 50%, 4 for 33%, 3 for 25%, etc.\n </div>\n </section>\n\n <!-- Tabs Component -->\n <section id=\"tabs\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📑 Tabs</h2>\n <p>Organize fields in tabs</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Create tabbed interface for complex forms</p>\n <pre class=\"code-block\">{\n \"type\": \"tabs\",\n \"components\": [\n {\n \"label\": \"Personal Info\",\n \"key\": \"tab1\",\n \"components\": [...]\n },\n {\n \"label\": \"Contact Info\",\n \"key\": \"tab2\",\n \"components\": [...]\n }\n ]\n}</pre>\n </div>\n </section>\n\n <!-- Table Component -->\n <section id=\"table\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📋 Table</h2>\n <p>Table layout for forms</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Create table-based layouts</p>\n <pre class=\"code-block\">{\n \"type\": \"table\",\n \"numRows\": 3,\n \"numCols\": 2,\n \"rows\": [\n [\n { \"components\": [{ \"type\": \"textfield\", \"key\": \"cell1\" }] },\n { \"components\": [{ \"type\": \"textfield\", \"key\": \"cell2\" }] }\n ]\n ]\n}</pre>\n </div>\n </section>\n\n <!-- Fieldset Component -->\n <section id=\"fieldset\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>📦 Fieldset</h2>\n <p>Group fields with border and legend</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>HTML fieldset with legend label</p>\n <pre class=\"code-block\">{\n \"type\": \"fieldset\",\n \"legend\": \"Contact Information\",\n \"components\": [\n { \"type\": \"email\", \"key\": \"email\", \"label\": \"Email\" },\n { \"type\": \"phoneNumber\", \"key\": \"phone\", \"label\": \"Phone\" }\n ]\n}</pre>\n </div>\n </section>\n\n <!-- Data Grid Component -->\n <section id=\"datagrid\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🗃️ Data Grid</h2>\n <p>Repeatable row data entry</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Add/remove rows of structured data</p>\n <pre class=\"code-block\">{\n \"type\": \"datagrid\",\n \"key\": \"items\",\n \"label\": \"Items\",\n \"addAnother\": \"Add Item\",\n \"components\": [\n { \"type\": \"textfield\", \"key\": \"name\", \"label\": \"Item Name\" },\n { \"type\": \"number\", \"key\": \"quantity\", \"label\": \"Quantity\" },\n { \"type\": \"currency\", \"key\": \"price\", \"label\": \"Price\" }\n ]\n}</pre>\n </div>\n </section>\n\n <!-- Edit Grid Component -->\n <section id=\"editgrid\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>✏️ Edit Grid</h2>\n <p>Editable table with modal editing</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Basic Usage</h3>\n <p>Similar to Data Grid but with modal editing</p>\n <pre class=\"code-block\">{\n \"type\": \"editgrid\",\n \"key\": \"contacts\",\n \"label\": \"Contacts\",\n \"components\": [\n { \"type\": \"textfield\", \"key\": \"name\", \"label\": \"Name\" },\n { \"type\": \"email\", \"key\": \"email\", \"label\": \"Email\" },\n { \"type\": \"phoneNumber\", \"key\": \"phone\", \"label\": \"Phone\" }\n ]\n}</pre>\n </div>\n </section>\n\n <!-- Multi-Page Wizards Guide -->\n <section id=\"wizard\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🧙 Multi-Page Wizards</h2>\n <p>Create step-by-step forms with progress tracking</p>\n </div>\n \n <div class=\"info-box\">\n <strong>💡 How It Works:</strong> Set <code>display: \"wizard\"</code> and use Panel components for each step. Form.io automatically adds navigation buttons.\n </div>\n \n <div class=\"field-example\">\n <h3>Complete Wizard Example</h3>\n <pre class=\"code-block\">{\n \"display\": \"wizard\",\n \"components\": [\n {\n \"type\": \"panel\",\n \"key\": \"step1\",\n \"title\": \"Step 1: Personal Info\",\n \"components\": [\n { \"type\": \"textfield\", \"key\": \"firstName\", \"label\": \"First Name\" },\n { \"type\": \"textfield\", \"key\": \"lastName\", \"label\": \"Last Name\" }\n ]\n },\n {\n \"type\": \"panel\",\n \"key\": \"step2\",\n \"title\": \"Step 2: Contact Info\",\n \"components\": [\n { \"type\": \"email\", \"key\": \"email\", \"label\": \"Email\" },\n { \"type\": \"phoneNumber\", \"key\": \"phone\", \"label\": \"Phone\" }\n ]\n },\n {\n \"type\": \"panel\",\n \"key\": \"step3\",\n \"title\": \"Step 3: Review\",\n \"components\": [\n { \"type\": \"checkbox\", \"key\": \"terms\", \"label\": \"I agree\" }\n ]\n }\n ]\n}</pre>\n </div>\n </section>\n\n <!-- Embedding Forms Guide -->\n <section id=\"embedding\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🌐 Embedding Forms</h2>\n <p>Multiple ways to embed forms on your website</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Method 1: JavaScript (Recommended)</h3>\n <p>Load form schema via API and render with Form.io</p>\n <pre class=\"code-block\">&lt;div id=\"form\"&gt;&lt;/div&gt;\n&lt;script src=\"https://cdn.form.io/formiojs/formio.full.min.js\"&gt;&lt;/script&gt;\n&lt;script&gt;\n fetch('/forms/contact_form/schema')\n .then(r => r.json())\n .then(data => {\n Formio.createForm(\n document.getElementById('form'),\n data.schema\n ).then(form => {\n // Handle submission\n form.on('submitDone', (submission) => {\n console.log('Submitted:', submission);\n });\n });\n });\n&lt;/script&gt;</pre>\n </div>\n \n <div class=\"field-example\">\n <h3>Method 2: iFrame</h3>\n <p>Simple iframe embed (less flexible)</p>\n <pre class=\"code-block\">&lt;iframe \n src=\"/forms/contact_form\"\n width=\"100%\"\n height=\"600\"\n frameborder=\"0\"\n&gt;&lt;/iframe&gt;</pre>\n </div>\n \n <div class=\"field-example\">\n <h3>Method 3: React Component</h3>\n <p>Use Form.io React library</p>\n <pre class=\"code-block\">import { Form } from '@formio/react';\n\nfunction MyForm() {\n const [schema, setSchema] = useState(null);\n \n useEffect(() => {\n fetch('/forms/contact_form/schema')\n .then(r => r.json())\n .then(data => setSchema(data.schema));\n }, []);\n \n const handleSubmit = (submission) => {\n fetch('/api/forms/123/submit', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(submission.data)\n });\n };\n \n return schema ? (\n &lt;Form form={schema} onSubmit={handleSubmit} /&gt;\n ) : null;\n}</pre>\n </div>\n </section>\n\n <!-- Validation Guide -->\n <section id=\"validation\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>✅ Validation</h2>\n <p>Built-in validation rules</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Common Validation Rules</h3>\n <pre class=\"code-block\">{\n \"validate\": {\n \"required\": true, // Field must have value\n \"minLength\": 2, // Minimum characters\n \"maxLength\": 50, // Maximum characters\n \"min\": 0, // Minimum number value\n \"max\": 100, // Maximum number value\n \"pattern\": \"^[A-Za-z]+$\", // Regular expression\n \"custom\": \"valid = (input === 'yes');\" // Custom validation\n }\n}</pre>\n </div>\n \n <div class=\"field-example\">\n <h3>Custom Error Messages</h3>\n <pre class=\"code-block\">{\n \"validate\": {\n \"required\": true,\n \"customMessage\": \"Please provide your full name\"\n }\n}</pre>\n </div>\n </section>\n\n <!-- Conditional Logic Guide -->\n <section id=\"conditional\" class=\"doc-section\">\n <div class=\"doc-header\">\n <h2>🔀 Conditional Logic</h2>\n <p>Show/hide fields based on conditions</p>\n </div>\n \n <div class=\"field-example\">\n <h3>Simple Conditional</h3>\n <p>Show field only when condition is met</p>\n <pre class=\"code-block\">{\n \"type\": \"textfield\",\n \"key\": \"companyName\",\n \"label\": \"Company Name\",\n \"conditional\": {\n \"show\": true,\n \"when\": \"hasCompany\",\n \"eq\": true\n }\n}</pre>\n </div>\n \n <div class=\"field-example\">\n <h3>Advanced Conditional (JavaScript)</h3>\n <p>Complex conditions using custom JavaScript</p>\n <pre class=\"code-block\">{\n \"type\": \"textfield\",\n \"key\": \"discount\",\n \"label\": \"Discount Code\",\n \"customConditional\": \"show = (data.total > 100 && data.memberType === 'premium');\"\n}</pre>\n </div>\n </section>\n\n </main>\n </div>\n\n <script>\n // Navigation\n document.querySelectorAll('.doc-link').forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n const targetId = this.getAttribute('href').substring(1);\n \n // Update active link\n document.querySelectorAll('.doc-link').forEach(l => l.classList.remove('active'));\n this.classList.add('active');\n \n // Update active section\n document.querySelectorAll('.doc-section').forEach(s => s.classList.remove('active'));\n document.getElementById(targetId).classList.add('active');\n \n // Scroll to top\n document.querySelector('.docs-content').scrollTop = 0;\n });\n });\n </script>\n `\n\n const layoutData: AdminLayoutCatalystData = {\n title: 'Forms Quick Reference',\n pageTitle: 'Forms Quick Reference',\n content: pageContent,\n user: data.user,\n version: data.version\n }\n\n return renderAdminLayoutCatalyst(layoutData)\n}\n","import { renderAdminLayoutCatalyst, AdminLayoutCatalystData } from '../layouts/admin-layout-catalyst.template'\n\nexport interface FormsExamplesPageData {\n user?: {\n name: string\n email: string\n role: string\n }\n version?: string\n}\n\nexport function renderFormsExamplesPage(data: FormsExamplesPageData): string {\n const pageContent = `\n <style>\n /* Light theme for examples page */\n .examples-container {\n display: flex;\n gap: 0;\n min-height: calc(100vh - 200px);\n background: #ffffff;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n }\n \n .examples-sidebar {\n width: 280px;\n background: #f8f9fa;\n border-right: 1px solid #e0e0e0;\n padding: 1.5rem 0;\n overflow-y: auto;\n }\n \n .examples-sidebar h3 {\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: #6b7280;\n padding: 0 1.5rem;\n margin-bottom: 0.75rem;\n }\n \n .examples-nav {\n list-style: none;\n padding: 0;\n margin: 0 0 2rem 0;\n }\n \n .examples-nav li {\n margin: 0;\n }\n \n .examples-nav a {\n display: block;\n padding: 0.75rem 1.5rem;\n color: #374151;\n text-decoration: none;\n font-size: 0.875rem;\n transition: all 0.2s;\n border-left: 3px solid transparent;\n }\n \n .examples-nav a:hover {\n background: #e9ecef;\n color: #1f2937;\n }\n \n .examples-nav a.active {\n background: #e3f2fd;\n color: #1976d2;\n border-left-color: #1976d2;\n font-weight: 500;\n }\n \n .examples-content {\n flex: 1;\n padding: 2rem;\n background: #ffffff;\n overflow-y: auto;\n }\n \n .example-section {\n display: none;\n }\n \n .example-section.active {\n display: block;\n }\n \n .example-header {\n margin-bottom: 2rem;\n padding-bottom: 1rem;\n border-bottom: 2px solid #e0e0e0;\n }\n \n .example-header h2 {\n font-size: 1.875rem;\n font-weight: 700;\n color: #1f2937;\n margin-bottom: 0.5rem;\n }\n \n .example-header p {\n color: #6b7280;\n font-size: 1rem;\n }\n \n .example-demo {\n background: #f8f9fa;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 2rem;\n margin-bottom: 2rem;\n }\n \n .example-code {\n background: #1e1e1e;\n color: #d4d4d4;\n padding: 1.5rem;\n border-radius: 8px;\n overflow-x: auto;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.875rem;\n line-height: 1.6;\n }\n \n .code-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1rem;\n }\n \n .code-header h3 {\n font-size: 0.875rem;\n font-weight: 600;\n color: #374151;\n }\n \n .copy-btn {\n padding: 0.375rem 0.75rem;\n font-size: 0.75rem;\n background: #f3f4f6;\n border: 1px solid #d1d5db;\n border-radius: 4px;\n cursor: pointer;\n transition: all 0.2s;\n }\n \n .copy-btn:hover {\n background: #e5e7eb;\n }\n \n /* Form.io overrides for lighter theme */\n .formio-component {\n margin-bottom: 1.25rem;\n }\n \n .formio-component label {\n color: #374151;\n font-weight: 500;\n margin-bottom: 0.5rem;\n }\n \n .formio-component input,\n .formio-component textarea,\n .formio-component select {\n border: 1px solid #d1d5db;\n border-radius: 6px;\n padding: 0.625rem 0.875rem;\n }\n \n .formio-component input:focus,\n .formio-component textarea:focus,\n .formio-component select:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n }\n \n .btn-primary {\n background: #3b82f6 !important;\n border-color: #3b82f6 !important;\n padding: 0.625rem 1.25rem !important;\n border-radius: 6px !important;\n }\n \n .btn-primary:hover {\n background: #2563eb !important;\n border-color: #2563eb !important;\n }\n \n .alert-success {\n background: #10b981 !important;\n color: white !important;\n border: none !important;\n border-radius: 6px !important;\n }\n </style>\n\n <div class=\"mb-6\">\n <div class=\"flex items-center gap-3 mb-4\">\n <a href=\"/admin/forms\" class=\"inline-flex items-center text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors\">\n <svg class=\"w-4 h-4 mr-1\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"/>\n </svg>\n Back to Forms\n </a>\n </div>\n <h1 class=\"text-3xl font-bold text-zinc-950 dark:text-white\">Form Examples</h1>\n <p class=\"mt-2 text-zinc-600 dark:text-zinc-400\">Interactive examples showcasing Form.io capabilities</p>\n </div>\n\n <div class=\"examples-container\">\n <!-- Sidebar Navigation -->\n <aside class=\"examples-sidebar\">\n <h3>Getting Started</h3>\n <ul class=\"examples-nav\">\n <li><a href=\"#kitchen-sink\" class=\"example-link active\">Kitchen Sink</a></li>\n <li><a href=\"#simple-contact\" class=\"example-link\">Simple Contact Form</a></li>\n <li><a href=\"#thank-you\" class=\"example-link\">Thank You Page</a></li>\n </ul>\n \n <h3>Advanced Forms</h3>\n <ul class=\"examples-nav\">\n <li><a href=\"#wizard-form\" class=\"example-link\">Multi-Page Wizard</a></li>\n <li><a href=\"#conditional-logic\" class=\"example-link\">Conditional Logic</a></li>\n <li><a href=\"#file-upload\" class=\"example-link\">File Upload</a></li>\n </ul>\n \n <h3>Components</h3>\n <ul class=\"examples-nav\">\n <li><a href=\"#address-maps\" class=\"example-link\">Address with Maps</a></li>\n <li><a href=\"#signature\" class=\"example-link\">Signature Pad</a></li>\n <li><a href=\"#data-grid\" class=\"example-link\">Data Grid</a></li>\n <li><a href=\"#turnstile-protection\" class=\"example-link\">🛡️ Turnstile Protection</a></li>\n </ul>\n </aside>\n\n <!-- Main Content Area -->\n <main class=\"examples-content\">\n \n <!-- Kitchen Sink Example -->\n <section id=\"kitchen-sink\" class=\"example-section active\">\n <div class=\"example-header\">\n <h2>🍳 Kitchen Sink</h2>\n <p>A comprehensive form showcasing all major field types and configurations.</p>\n </div>\n \n <div class=\"example-demo\">\n <div id=\"form-kitchen-sink\"></div>\n </div>\n \n <div class=\"code-header\">\n <h3>Form Schema (JSON)</h3>\n <button class=\"copy-btn\" onclick=\"copyCode('kitchen-sink-code')\">Copy Code</button>\n </div>\n <pre class=\"example-code\" id=\"kitchen-sink-code\">{\n \"display\": \"form\",\n \"components\": [\n // Basic Text Fields\n { \"type\": \"textfield\", \"key\": \"firstName\", \"label\": \"First Name\" },\n { \"type\": \"email\", \"key\": \"email\", \"label\": \"Email\" },\n { \"type\": \"phoneNumber\", \"key\": \"phone\", \"label\": \"Phone\" },\n { \"type\": \"password\", \"key\": \"password\", \"label\": \"Password\" },\n { \"type\": \"url\", \"key\": \"website\", \"label\": \"Website\" },\n { \"type\": \"textarea\", \"key\": \"bio\", \"label\": \"Biography\" },\n \n // Date & Time\n { \"type\": \"datetime\", \"key\": \"appointmentDateTime\", \"label\": \"Appointment\" },\n { \"type\": \"day\", \"key\": \"birthDate\", \"label\": \"Birth Date\" },\n { \"type\": \"time\", \"key\": \"preferredTime\", \"label\": \"Time\" },\n \n // Selections\n { \"type\": \"select\", \"key\": \"country\", \"label\": \"Country\", \n \"data\": { \"values\": [{ \"label\": \"USA\", \"value\": \"us\" }] }},\n { \"type\": \"selectboxes\", \"key\": \"interests\", \"label\": \"Interests\",\n \"values\": [{ \"label\": \"Sports\", \"value\": \"sports\" }] },\n { \"type\": \"radio\", \"key\": \"gender\", \"label\": \"Gender\",\n \"values\": [{ \"label\": \"Male\", \"value\": \"male\" }] },\n { \"type\": \"checkbox\", \"key\": \"newsletter\", \"label\": \"Newsletter\" },\n \n // Advanced\n { \"type\": \"currency\", \"key\": \"salary\", \"label\": \"Salary\" },\n { \"type\": \"tags\", \"key\": \"skills\", \"label\": \"Skills\" },\n { \"type\": \"survey\", \"key\": \"satisfaction\", \"label\": \"Satisfaction\" },\n { \"type\": \"signature\", \"key\": \"signature\", \"label\": \"Signature\" },\n { \"type\": \"file\", \"key\": \"resume\", \"label\": \"Resume\", \"storage\": \"base64\" }\n ]\n}</pre>\n </section>\n\n <!-- Simple Contact Form Example -->\n <section id=\"simple-contact\" class=\"example-section\">\n <div class=\"example-header\">\n <h2>📧 Simple Contact Form</h2>\n <p>A minimal contact form with validation.</p>\n </div>\n \n <div class=\"example-demo\">\n <div id=\"form-simple-contact\"></div>\n </div>\n \n <div class=\"code-header\">\n <h3>Form Schema (JSON)</h3>\n <button class=\"copy-btn\" onclick=\"copyCode('contact-code')\">Copy Code</button>\n </div>\n <pre class=\"example-code\" id=\"contact-code\">{\n \"display\": \"form\",\n \"components\": [\n {\n \"type\": \"textfield\",\n \"key\": \"name\",\n \"label\": \"Full Name\",\n \"validate\": { \"required\": true }\n },\n {\n \"type\": \"email\",\n \"key\": \"email\",\n \"label\": \"Email Address\",\n \"validate\": { \"required\": true }\n },\n {\n \"type\": \"textarea\",\n \"key\": \"message\",\n \"label\": \"Message\",\n \"rows\": 5,\n \"validate\": { \"required\": true }\n }\n ]\n}</pre>\n </section>\n\n <!-- Thank You Page Example -->\n <section id=\"thank-you\" class=\"example-section\">\n <div class=\"example-header\">\n <h2>🎉 Thank You Page</h2>\n <p>Handle form submission and redirect to a thank you message.</p>\n </div>\n \n <div class=\"example-demo\">\n <div id=\"form-thank-you\"></div>\n <div id=\"thank-you-message\" style=\"display: none; padding: 2rem; background: #10b981; color: white; border-radius: 8px; text-align: center;\">\n <h3 style=\"font-size: 1.5rem; margin-bottom: 0.5rem;\">✅ Thank You!</h3>\n <p>Your form has been submitted successfully.</p>\n </div>\n </div>\n \n <div class=\"code-header\">\n <h3>Form Schema (JSON)</h3>\n <button class=\"copy-btn\" onclick=\"copyCode('thankyou-schema-code')\">Copy Code</button>\n </div>\n <pre class=\"example-code\" id=\"thankyou-schema-code\">{\n \"display\": \"form\",\n \"components\": [\n { \"type\": \"textfield\", \"key\": \"firstName\", \"label\": \"First Name\", \n \"validate\": { \"required\": true }},\n { \"type\": \"textfield\", \"key\": \"lastName\", \"label\": \"Last Name\", \n \"validate\": { \"required\": true }},\n { \"type\": \"email\", \"key\": \"email\", \"label\": \"Email Address\", \n \"validate\": { \"required\": true }},\n { \"type\": \"phoneNumber\", \"key\": \"phone\", \"label\": \"Phone Number\" },\n { \"type\": \"textarea\", \"key\": \"message\", \"label\": \"Message\", \n \"validate\": { \"required\": true }},\n { \"type\": \"button\", \"action\": \"submit\", \"label\": \"Submit Form\" }\n ]\n}</pre>\n \n <div class=\"code-header\">\n <h3>JavaScript Code</h3>\n <button class=\"copy-btn\" onclick=\"copyCode('thankyou-code')\">Copy Code</button>\n </div>\n <pre class=\"example-code\" id=\"thankyou-code\">Formio.createForm(document.getElementById('formio'), formSchema)\n .then(function(form) {\n // Handle successful submission\n form.on('submitDone', function(submission) {\n console.log('Form submitted:', submission);\n \n // Hide form and show thank you message\n form.element.style.display = 'none';\n document.getElementById('thank-you-message').style.display = 'block';\n \n // Or redirect to another page:\n // window.location = '/thank-you';\n });\n });</pre>\n </section>\n\n <!-- Wizard Form Example -->\n <section id=\"wizard-form\" class=\"example-section\">\n <div class=\"example-header\">\n <h2>🧙 Multi-Page Wizard</h2>\n <p>Step-by-step form with multiple pages and progress indicator.</p>\n </div>\n \n <div class=\"example-demo\">\n <div id=\"form-wizard\"></div>\n </div>\n \n <div class=\"code-header\">\n <h3>Form Schema (JSON)</h3>\n <button class=\"copy-btn\" onclick=\"copyCode('wizard-code')\">Copy Code</button>\n </div>\n <pre class=\"example-code\" id=\"wizard-code\">{\n \"display\": \"wizard\",\n \"components\": [\n {\n \"type\": \"panel\",\n \"key\": \"step1PersonalInfo\",\n \"title\": \"Step 1: Personal Information\",\n \"components\": [\n { \"type\": \"textfield\", \"key\": \"firstName\", \"label\": \"First Name\" },\n { \"type\": \"textfield\", \"key\": \"lastName\", \"label\": \"Last Name\" },\n { \"type\": \"datetime\", \"key\": \"birthDate\", \"label\": \"Date of Birth\" },\n { \"type\": \"select\", \"key\": \"gender\", \"label\": \"Gender\" }\n ]\n },\n {\n \"type\": \"panel\",\n \"key\": \"step2ContactInfo\",\n \"title\": \"Step 2: Contact Information\",\n \"components\": [\n { \"type\": \"email\", \"key\": \"email\", \"label\": \"Email\" },\n { \"type\": \"phoneNumber\", \"key\": \"phone\", \"label\": \"Phone\" },\n { \"type\": \"textfield\", \"key\": \"address\", \"label\": \"Address\" },\n { \"type\": \"select\", \"key\": \"country\", \"label\": \"Country\" }\n ]\n },\n {\n \"type\": \"panel\",\n \"key\": \"step3Preferences\",\n \"title\": \"Step 3: Preferences & Review\",\n \"components\": [\n { \"type\": \"selectboxes\", \"key\": \"interests\", \"label\": \"Interests\" },\n { \"type\": \"radio\", \"key\": \"contactMethod\", \"label\": \"Contact Method\" },\n { \"type\": \"textarea\", \"key\": \"comments\", \"label\": \"Comments\" },\n { \"type\": \"checkbox\", \"key\": \"terms\", \"label\": \"I agree to terms\" }\n ]\n }\n ]\n}</pre>\n </section>\n\n <!-- More examples... -->\n <section id=\"conditional-logic\" class=\"example-section\">\n <div class=\"example-header\">\n <h2>🔀 Conditional Logic</h2>\n <p>Show/hide fields based on user input.</p>\n </div>\n <div class=\"example-demo\">\n <div id=\"form-conditional\"></div>\n </div>\n </section>\n\n <section id=\"file-upload\" class=\"example-section\">\n <div class=\"example-header\">\n <h2>📁 File Upload</h2>\n <p>Upload files to Cloudflare R2 storage.</p>\n </div>\n <div class=\"example-demo\">\n <div id=\"form-file-upload\"></div>\n </div>\n </section>\n\n <section id=\"address-maps\" class=\"example-section\">\n <div class=\"example-header\">\n <h2>📍 Address with Maps</h2>\n <p>Google Maps autocomplete for address input.</p>\n </div>\n <div class=\"example-demo\">\n <div id=\"form-address\"></div>\n </div>\n </section>\n\n <section id=\"signature\" class=\"example-section\">\n <div class=\"example-header\">\n <h2>✍️ Signature Pad</h2>\n <p>Capture digital signatures.</p>\n </div>\n <div class=\"example-demo\">\n <div id=\"form-signature\"></div>\n </div>\n </section>\n\n <section id=\"data-grid\" class=\"example-section\">\n <div class=\"example-header\">\n <h2>📊 Data Grid</h2>\n <p>Repeatable data entry with add/remove rows.</p>\n </div>\n <div class=\"example-demo\">\n <div id=\"form-data-grid\"></div>\n </div>\n </section>\n\n <section id=\"turnstile-protection\" class=\"example-section\">\n <div class=\"example-header\">\n <h2>🛡️ Turnstile Protection</h2>\n <p>CAPTCHA-free bot protection by Cloudflare - drag and drop from the Premium section in the form builder.</p>\n </div>\n \n <div class=\"info-box\" style=\"background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px;\">\n <h3 style=\"margin: 0 0 10px 0; font-size: 18px;\">✨ Key Features</h3>\n <ul style=\"margin: 0; padding-left: 20px;\">\n <li><strong>No CAPTCHA puzzles</strong> - Seamless user experience</li>\n <li><strong>Invisible protection</strong> - Works in the background</li>\n <li><strong>Auto-validated</strong> - Server-side token verification</li>\n <li><strong>Privacy-first</strong> - Cloudflare's secure infrastructure</li>\n </ul>\n </div>\n \n <div class=\"example-demo\">\n <div id=\"form-turnstile\"></div>\n </div>\n \n <div class=\"info-box\" style=\"margin-top: 20px;\">\n <strong>🔧 Setup Instructions:</strong>\n <ol style=\"margin: 10px 0 0 20px; padding: 0;\">\n <li>Go to <strong>Settings → Plugins</strong> and enable Turnstile plugin</li>\n <li>Get free API keys from <a href=\"https://dash.cloudflare.com/?to=/:account/turnstile\" target=\"_blank\" style=\"color: #3b82f6;\">Cloudflare Dashboard</a></li>\n <li>Configure site key and secret key in plugin settings</li>\n <li>Drag Turnstile component from <strong>Premium</strong> section in form builder</li>\n </ol>\n </div>\n \n <div class=\"info-box\" style=\"margin-top: 15px; background: #fef3c7; border: 1px solid #fbbf24;\">\n <strong>💡 Pro Tip:</strong> Use <code>\"appearance\": \"interaction-only\"</code> for invisible mode - the widget only appears when suspicious activity is detected!\n </div>\n </section>\n\n </main>\n </div>\n\n <!-- Load Form.io -->\n <script src=\"https://cdn.form.io/formiojs/formio.full.min.js\"></script>\n \n <!-- Register Turnstile Component -->\n <script>\n // Register custom Turnstile component (same as public forms)\n (function() {\n // Will register when Form.io loads\n function registerTurnstile() {\n if (!window.Formio || !window.Formio.Components) {\n return false;\n }\n\n const FieldComponent = Formio.Components.components.field;\n\n class TurnstileComponent extends FieldComponent {\n static schema(...extend) {\n return FieldComponent.schema({\n type: 'turnstile',\n label: 'Turnstile Verification',\n key: 'turnstile',\n input: true,\n persistent: false,\n protected: true\n }, ...extend);\n }\n\n render() {\n return super.render(\\`\n <div ref=\"turnstileContainer\" class=\"formio-component-turnstile\">\n <div ref=\"turnstileWidget\" style=\"margin: 15px 0; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px; text-align: center; color: white;\">\n <div style=\"font-size: 32px; margin-bottom: 10px;\">🛡️</div>\n <div style=\"font-weight: 600; font-size: 16px; margin-bottom: 5px;\">Turnstile Verification</div>\n <div style=\"font-size: 13px; opacity: 0.9;\">CAPTCHA-free bot protection by Cloudflare</div>\n <div style=\"font-size: 12px; margin-top: 10px; opacity: 0.8;\">Enable Turnstile plugin in Settings → Plugins to activate</div>\n </div>\n </div>\n \\`);\n }\n\n attach(element) {\n this.loadRefs(element, { turnstileContainer: 'single', turnstileWidget: 'single' });\n return super.attach(element);\n }\n }\n\n Formio.Components.addComponent('turnstile', TurnstileComponent);\n console.log('✅ Turnstile component registered on examples page');\n return true;\n }\n \n // Try to register immediately\n if (!registerTurnstile()) {\n // If Form.io not loaded yet, try again after a delay\n setTimeout(registerTurnstile, 100);\n }\n })();\n </script>\n \n <script>\n // Debug: Check if elements exist\n console.log('Script loaded');\n \n // Navigation function\n function setupNavigation() {\n console.log('Setting up navigation...');\n const links = document.querySelectorAll('.example-link');\n console.log('Found', links.length, 'navigation links');\n \n // Navigation\n links.forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n const targetId = this.getAttribute('href').substring(1);\n console.log('Navigating to:', targetId);\n \n // Update active link\n document.querySelectorAll('.example-link').forEach(l => l.classList.remove('active'));\n this.classList.add('active');\n \n // Update active section\n document.querySelectorAll('.example-section').forEach(s => s.classList.remove('active'));\n const targetSection = document.getElementById(targetId);\n if (targetSection) {\n targetSection.classList.add('active');\n console.log('Activated section:', targetId);\n } else {\n console.error('Section not found:', targetId);\n }\n \n // Scroll to top\n const content = document.querySelector('.examples-content');\n if (content) {\n content.scrollTop = 0;\n }\n \n // Update URL hash\n window.location.hash = targetId;\n });\n });\n \n // Handle initial hash on page load\n function handleHash() {\n const hash = window.location.hash.substring(1);\n console.log('Handling hash:', hash);\n if (hash) {\n const link = document.querySelector('.example-link[href=\"#' + hash + '\"]');\n if (link) {\n link.click();\n }\n }\n }\n \n // Call on load and hash change\n handleHash();\n window.addEventListener('hashchange', handleHash);\n }\n\n // Copy code function\n window.copyCode = function(elementId) {\n const code = document.getElementById(elementId).textContent;\n navigator.clipboard.writeText(code).then(() => {\n const btn = event.target;\n const originalText = btn.textContent;\n btn.textContent = 'Copied!';\n setTimeout(() => btn.textContent = originalText, 2000);\n });\n };\n\n // Initialize forms\n function initForms() {\n const kitchenSinkSchema = {\n display: 'form',\n components: [\n { \n type: 'htmlelement', \n tag: 'h3', \n content: 'Basic Fields',\n className: 'mb-3 text-lg font-semibold'\n },\n { type: 'textfield', key: 'firstName', label: 'First Name', placeholder: 'Enter your first name', validate: { required: true } },\n { type: 'textfield', key: 'lastName', label: 'Last Name', placeholder: 'Enter your last name', validate: { required: true } },\n { type: 'email', key: 'email', label: 'Email Address', placeholder: 'you@example.com', validate: { required: true } },\n { type: 'phoneNumber', key: 'phone', label: 'Phone Number', placeholder: '(555) 555-5555' },\n { type: 'number', key: 'age', label: 'Age', placeholder: '18', validate: { min: 18, max: 120 } },\n { type: 'password', key: 'password', label: 'Password', placeholder: 'Enter password', validate: { required: true } },\n { type: 'url', key: 'website', label: 'Website', placeholder: 'https://example.com' },\n { type: 'textarea', key: 'bio', label: 'Biography', rows: 4, placeholder: 'Tell us about yourself' },\n \n { \n type: 'htmlelement', \n tag: 'h3', \n content: 'Date & Time Fields',\n className: 'mt-4 mb-3 text-lg font-semibold'\n },\n { type: 'datetime', key: 'appointmentDateTime', label: 'Appointment Date & Time', format: 'yyyy-MM-dd hh:mm a', enableTime: true },\n { type: 'day', key: 'birthDate', label: 'Birth Date (Day/Month/Year)' },\n { type: 'time', key: 'preferredTime', label: 'Preferred Contact Time' },\n \n { \n type: 'htmlelement', \n tag: 'h3', \n content: 'Selection Fields',\n className: 'mt-4 mb-3 text-lg font-semibold'\n },\n { \n type: 'select', \n key: 'country', \n label: 'Country', \n placeholder: 'Select your country',\n data: { \n values: [\n { label: 'United States', value: 'us' },\n { label: 'Canada', value: 'ca' },\n { label: 'United Kingdom', value: 'uk' },\n { label: 'Australia', value: 'au' },\n { label: 'Germany', value: 'de' },\n { label: 'France', value: 'fr' }\n ] \n }\n },\n { \n type: 'selectboxes', \n key: 'interests', \n label: 'Interests (Multiple Selection)', \n values: [\n { label: 'Sports', value: 'sports' },\n { label: 'Music', value: 'music' },\n { label: 'Technology', value: 'tech' },\n { label: 'Travel', value: 'travel' },\n { label: 'Reading', value: 'reading' }\n ]\n },\n { \n type: 'radio', \n key: 'gender', \n label: 'Gender', \n values: [\n { label: 'Male', value: 'male' },\n { label: 'Female', value: 'female' },\n { label: 'Non-binary', value: 'nonbinary' },\n { label: 'Prefer not to say', value: 'prefer_not_to_say' }\n ]\n },\n { type: 'checkbox', key: 'newsletter', label: 'Subscribe to newsletter' },\n { type: 'checkbox', key: 'terms', label: 'I agree to the terms and conditions', validate: { required: true } },\n \n { \n type: 'htmlelement', \n tag: 'h3', \n content: 'Advanced Fields',\n className: 'mt-4 mb-3 text-lg font-semibold'\n },\n { \n type: 'currency', \n key: 'salary', \n label: 'Expected Salary', \n currency: 'USD',\n placeholder: '$50,000'\n },\n { \n type: 'tags', \n key: 'skills', \n label: 'Skills (Type and press Enter)', \n placeholder: 'e.g. JavaScript, Python, React'\n },\n { \n type: 'survey', \n key: 'satisfaction', \n label: 'Satisfaction Survey',\n questions: [\n { label: 'Product Quality', value: 'quality' },\n { label: 'Customer Service', value: 'service' },\n { label: 'Value for Money', value: 'value' }\n ],\n values: [\n { label: 'Poor', value: '1' },\n { label: 'Fair', value: '2' },\n { label: 'Good', value: '3' },\n { label: 'Excellent', value: '4' }\n ]\n },\n { \n type: 'signature', \n key: 'signature', \n label: 'Signature', \n footer: 'Sign above',\n width: '100%',\n height: '150px'\n },\n { \n type: 'file', \n key: 'resume', \n label: 'Upload Resume (PDF, DOC)', \n storage: 'base64',\n filePattern: '.pdf,.doc,.docx',\n fileMaxSize: '5MB'\n },\n \n { type: 'button', action: 'submit', label: 'Submit Kitchen Sink Form', theme: 'primary', className: 'mt-4' }\n ]\n };\n Formio.createForm(document.getElementById('form-kitchen-sink'), kitchenSinkSchema);\n\n // Simple Contact\n const contactSchema = {\n display: 'form',\n components: [\n { type: 'textfield', key: 'name', label: 'Full Name', validate: { required: true } },\n { type: 'email', key: 'email', label: 'Email Address', validate: { required: true } },\n { type: 'textarea', key: 'message', label: 'Message', rows: 5, validate: { required: true } },\n { type: 'button', action: 'submit', label: 'Send Message', theme: 'primary' }\n ]\n };\n Formio.createForm(document.getElementById('form-simple-contact'), contactSchema);\n\n // Thank You Page - Match Form.io's official example\n const thankYouSchema = {\n display: 'form',\n components: [\n { \n type: 'htmlelement', \n tag: 'p', \n content: 'Fill out this form and watch it redirect to a thank you page after submission.',\n className: 'mb-4 text-gray-600'\n },\n { type: 'textfield', key: 'firstName', label: 'First Name', placeholder: 'Enter your first name', validate: { required: true } },\n { type: 'textfield', key: 'lastName', label: 'Last Name', placeholder: 'Enter your last name', validate: { required: true } },\n { type: 'email', key: 'email', label: 'Email Address', placeholder: 'you@example.com', validate: { required: true } },\n { type: 'phoneNumber', key: 'phone', label: 'Phone Number', placeholder: '(555) 555-5555' },\n { type: 'textarea', key: 'message', label: 'Message', rows: 4, placeholder: 'Your message here...', validate: { required: true } },\n { type: 'button', action: 'submit', label: 'Submit Form', theme: 'primary' }\n ]\n };\n Formio.createForm(document.getElementById('form-thank-you'), thankYouSchema)\n .then(function(form) {\n form.on('submitDone', function(submission) {\n console.log('Form submitted:', submission);\n form.element.style.display = 'none';\n const thankYouMsg = document.getElementById('thank-you-message');\n thankYouMsg.style.display = 'block';\n // In a real application, you would redirect:\n // window.location = '/thank-you-page';\n });\n });\n\n // Wizard - Proper 3-step multi-page wizard\n const wizardSchema = {\n display: 'wizard',\n components: [\n {\n type: 'panel',\n key: 'step1PersonalInfo',\n title: 'Step 1: Personal Information',\n components: [\n { \n type: 'htmlelement', \n tag: 'p', \n content: 'Please provide your personal information.',\n className: 'mb-3 text-gray-600'\n },\n { type: 'textfield', key: 'firstName', label: 'First Name', placeholder: 'John', validate: { required: true } },\n { type: 'textfield', key: 'lastName', label: 'Last Name', placeholder: 'Doe', validate: { required: true } },\n { type: 'datetime', key: 'birthDate', label: 'Date of Birth', format: 'yyyy-MM-dd', validate: { required: true } },\n { \n type: 'select', \n key: 'gender', \n label: 'Gender',\n data: { \n values: [\n { label: 'Male', value: 'male' },\n { label: 'Female', value: 'female' },\n { label: 'Non-binary', value: 'nonbinary' },\n { label: 'Prefer not to say', value: 'other' }\n ]\n }\n }\n ]\n },\n {\n type: 'panel',\n key: 'step2ContactInfo',\n title: 'Step 2: Contact Information',\n components: [\n { \n type: 'htmlelement', \n tag: 'p', \n content: 'How can we reach you?',\n className: 'mb-3 text-gray-600'\n },\n { type: 'email', key: 'email', label: 'Email Address', placeholder: 'john.doe@example.com', validate: { required: true } },\n { type: 'phoneNumber', key: 'phone', label: 'Phone Number', placeholder: '(555) 555-5555', validate: { required: true } },\n { type: 'textfield', key: 'address', label: 'Street Address', placeholder: '123 Main St' },\n { type: 'textfield', key: 'city', label: 'City', placeholder: 'New York' },\n { \n type: 'select', \n key: 'country', \n label: 'Country',\n data: { \n values: [\n { label: 'United States', value: 'us' },\n { label: 'Canada', value: 'ca' },\n { label: 'United Kingdom', value: 'uk' },\n { label: 'Australia', value: 'au' }\n ]\n },\n validate: { required: true }\n }\n ]\n },\n {\n type: 'panel',\n key: 'step3Preferences',\n title: 'Step 3: Preferences & Review',\n components: [\n { \n type: 'htmlelement', \n tag: 'p', \n content: 'Almost done! Tell us your preferences.',\n className: 'mb-3 text-gray-600'\n },\n { \n type: 'selectboxes', \n key: 'interests', \n label: 'Areas of Interest', \n values: [\n { label: 'Product Updates', value: 'products' },\n { label: 'Newsletter', value: 'newsletter' },\n { label: 'Special Offers', value: 'offers' },\n { label: 'Events & Webinars', value: 'events' }\n ]\n },\n { \n type: 'radio', \n key: 'contactMethod', \n label: 'Preferred Contact Method',\n values: [\n { label: 'Email', value: 'email' },\n { label: 'Phone', value: 'phone' },\n { label: 'SMS', value: 'sms' }\n ],\n validate: { required: true }\n },\n { type: 'textarea', key: 'comments', label: 'Additional Comments', rows: 3, placeholder: 'Any other information you would like to share...' },\n { type: 'checkbox', key: 'terms', label: 'I agree to the terms and conditions', validate: { required: true } }\n ]\n }\n ]\n };\n Formio.createForm(document.getElementById('form-wizard'), wizardSchema);\n\n // Conditional Logic\n const conditionalSchema = {\n display: 'form',\n components: [\n { type: 'checkbox', key: 'hasCompany', label: 'I am registering on behalf of a company' },\n { type: 'textfield', key: 'companyName', label: 'Company Name', \n conditional: { show: true, when: 'hasCompany', eq: true }\n },\n { type: 'button', action: 'submit', label: 'Submit', theme: 'primary' }\n ]\n };\n Formio.createForm(document.getElementById('form-conditional'), conditionalSchema);\n\n // File Upload - Proper example with actual file field\n const fileSchema = {\n display: 'form',\n components: [\n { \n type: 'htmlelement', \n tag: 'p', \n content: 'Upload files to Cloudflare R2 storage (or base64 encoding for demo).',\n className: 'mb-4 text-gray-600'\n },\n { type: 'textfield', key: 'name', label: 'Your Name', placeholder: 'John Doe', validate: { required: true } },\n { type: 'email', key: 'email', label: 'Email Address', placeholder: 'john@example.com', validate: { required: true } },\n { \n type: 'file', \n key: 'resume', \n label: 'Upload Resume (PDF, DOC, DOCX)', \n storage: 'base64',\n filePattern: '.pdf,.doc,.docx',\n fileMaxSize: '5MB',\n validate: { required: true }\n },\n { \n type: 'file', \n key: 'portfolio', \n label: 'Portfolio/Work Samples (Optional)', \n storage: 'base64',\n filePattern: '.pdf,.zip,.jpg,.png',\n fileMaxSize: '10MB',\n multiple: false\n },\n { \n type: 'file', \n key: 'attachments', \n label: 'Additional Attachments (Multiple files allowed)', \n storage: 'base64',\n multiple: true,\n fileMaxSize: '5MB'\n },\n { type: 'textarea', key: 'coverLetter', label: 'Cover Letter', rows: 5, placeholder: 'Tell us why you are a great fit...' },\n { type: 'button', action: 'submit', label: 'Upload & Submit', theme: 'primary' }\n ]\n };\n Formio.createForm(document.getElementById('form-file-upload'), fileSchema);\n\n // Address (without API key for demo)\n const addressSchema = {\n display: 'form',\n components: [\n { type: 'textfield', key: 'street', label: 'Street Address' },\n { type: 'textfield', key: 'city', label: 'City' },\n { type: 'textfield', key: 'state', label: 'State' },\n { type: 'textfield', key: 'zip', label: 'ZIP Code' },\n { type: 'button', action: 'submit', label: 'Submit', theme: 'primary' }\n ]\n };\n Formio.createForm(document.getElementById('form-address'), addressSchema);\n\n // Signature\n const signatureSchema = {\n display: 'form',\n components: [\n { type: 'textfield', key: 'name', label: 'Your Name' },\n { type: 'signature', key: 'signature', label: 'Sign Here', width: '100%', height: '150px' },\n { type: 'button', action: 'submit', label: 'Submit', theme: 'primary' }\n ]\n };\n Formio.createForm(document.getElementById('form-signature'), signatureSchema);\n\n // Data Grid\n const dataGridSchema = {\n display: 'form',\n components: [\n { \n type: 'datagrid', \n key: 'items', \n label: 'Items',\n components: [\n { type: 'textfield', key: 'item', label: 'Item' },\n { type: 'number', key: 'quantity', label: 'Quantity' }\n ]\n },\n { type: 'button', action: 'submit', label: 'Submit', theme: 'primary' }\n ]\n };\n Formio.createForm(document.getElementById('form-data-grid'), dataGridSchema);\n \n // Turnstile Protection Form\n const turnstileSchema = {\n components: [\n { \n type: 'textfield', \n key: 'fullName', \n label: 'Full Name',\n placeholder: 'Enter your full name',\n validate: { required: true }\n },\n { \n type: 'email', \n key: 'email', \n label: 'Email Address',\n placeholder: 'you@example.com',\n validate: { required: true }\n },\n { \n type: 'textarea', \n key: 'message', \n label: 'Message',\n placeholder: 'Tell us what you are thinking...',\n rows: 4,\n validate: { required: true }\n },\n {\n type: 'turnstile',\n key: 'turnstile',\n label: 'Security Verification',\n theme: 'auto',\n size: 'normal',\n appearance: 'always',\n persistent: false,\n protected: true\n },\n { \n type: 'button', \n action: 'submit', \n label: 'Send Secure Message', \n theme: 'primary',\n block: true\n }\n ]\n };\n Formio.createForm(document.getElementById('form-turnstile'), turnstileSchema);\n }\n\n // Wait for Form.io to load\n if (typeof Formio !== 'undefined') {\n initForms();\n setupNavigation();\n } else {\n setTimeout(function checkFormio() {\n if (typeof Formio !== 'undefined') {\n initForms();\n setupNavigation();\n } else {\n setTimeout(checkFormio, 100);\n }\n }, 100);\n }\n </script>\n `\n\n const layoutData: AdminLayoutCatalystData = {\n title: 'Forms Examples',\n pageTitle: 'Forms Examples',\n content: pageContent,\n user: data.user,\n version: data.version\n }\n\n return renderAdminLayoutCatalyst(layoutData)\n}\n"]}
package/dist/chunk-55RDMDOP.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/templates/components/logo.template.ts","../src/templates/layouts/admin-layout-catalyst.template.ts"],"names":[],"mappings":"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","file":"chunk-55RDMDOP.js","sourcesContent":["export interface LogoData {\n size?: 'sm' | 'md' | 'lg' | 'xl'\n variant?: 'default' | 'white' | 'dark'\n showText?: boolean\n showVersion?: boolean\n version?: string\n className?: string\n href?: string // Optional link URL\n}\n\nconst sizeClasses = {\n sm: 'h-6 w-auto',\n md: 'h-8 w-auto',\n lg: 'h-12 w-auto',\n xl: 'h-16 w-auto'\n}\n\n\nexport function renderLogo(data: LogoData = {}): string {\n const {\n size = 'md',\n variant = 'default',\n showText = true,\n showVersion = true,\n version,\n className = '',\n href\n } = data\n\n const sizeClass = sizeClasses[size]\n\n // Official SonicJS logo SVG from sonicjs.com\n const logoSvg = `\n <svg class=\"${sizeClass} ${className}\" viewBox=\"380 1300 2250 400\" aria-hidden=\"true\">\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M476.851,1404.673h168.536c4.714,0,8.695-1.618,11.944-4.866c3.241-3.241,4.866-7.222,4.866-11.943 c0-2.357-0.443-4.569-1.327-6.636c-0.885-2.06-2.067-3.829-3.539-5.308c-1.479-1.472-3.249-2.654-5.308-3.538 c-2.067-0.885-4.279-1.327-6.635-1.327H476.851c-20.057,0-37.158,7.154-51.313,21.454c-14.155,14.308-21.233,31.483-21.233,51.534 c0,20.058,7.078,37.234,21.233,51.534c14.155,14.308,31.255,21.454,51.313,21.454h112.357c10.907,0,20.196,3.837,27.868,11.502 c7.666,7.672,11.502,16.885,11.502,27.646c0,10.769-3.836,19.982-11.502,27.647c-7.672,7.673-16.961,11.502-27.868,11.502H421.115 c-4.721,0-8.702,1.624-11.944,4.865c-3.248,3.249-4.866,7.23-4.866,11.944c0,3.248,0.733,6.123,2.212,8.626 c1.472,2.509,3.462,4.499,5.971,5.972c2.502,1.472,5.378,2.212,8.626,2.212h168.094c20.052,0,37.227-7.078,51.534-21.234 c14.3-14.155,21.454-31.331,21.454-51.534c0-20.196-7.154-37.379-21.454-51.534c-14.308-14.156-31.483-21.234-51.534-21.234 H476.851c-10.616,0-19.76-3.905-27.426-11.721c-7.672-7.811-11.501-17.101-11.501-27.87c0-10.761,3.829-19.975,11.501-27.647 C457.091,1408.508,466.235,1404.673,476.851,1404.673z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M974.78,1398.211c-5.016,6.574-10.034,13.146-15.048,19.721c-1.828,2.398-3.657,4.796-5.487,7.194 c1.994,1.719,3.958,3.51,5.873,5.424c18.724,18.731,28.089,41.216,28.089,67.459c0,26.251-9.366,48.658-28.089,67.237 c-18.731,18.579-41.215,27.868-67.459,27.868c-9.848,0-19.156-1.308-27.923-3.923l-4.185,3.354 c-8.587,6.885-17.154,13.796-25.725,20.702c17.52,8.967,36.86,13.487,58.054,13.487c35.533,0,65.91-12.608,91.124-37.821 c25.214-25.215,37.821-55.584,37.821-91.125c0-35.534-12.607-65.911-37.821-91.126 C981.004,1403.663,977.926,1400.854,974.78,1398.211z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M1364.644,1439.619c-4.72,0-8.702,1.624-11.943,4.865c-3.249,3.249-4.866,7.23-4.866,11.944v138.014 l-167.651-211.003c-0.297-0.586-0.74-1.03-1.327-1.326c-4.721-4.714-10.249-7.742-16.588-9.069 c-6.346-1.326-12.608-0.732-18.801,1.77c-6.192,2.509-11.059,6.49-14.598,11.944c-3.539,5.46-5.308,11.577-5.308,18.357v208.348 c0,4.721,1.618,8.703,4.866,11.944c3.241,3.241,7.222,4.865,11.943,4.865c2.945,0,5.751-0.738,8.405-2.211 c2.654-1.472,4.713-3.463,6.193-5.971c1.473-2.503,2.212-5.378,2.212-8.627v-205.251l166.325,209.675 c2.06,2.654,4.423,4.865,7.078,6.635c5.308,3.829,11.349,5.75,18.137,5.75c5.308,0,10.464-1.182,15.482-3.538 c3.539-1.769,6.56-4.127,9.069-7.078c2.502-2.945,4.491-6.338,5.971-10.175c1.473-3.829,2.212-7.664,2.212-11.501v-141.552 c0-4.714-1.624-8.695-4.865-11.944C1373.339,1441.243,1369.359,1439.619,1364.644,1439.619z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M1508.406,1432.983c-2.654-1.472-5.46-2.212-8.404-2.212c-4.721,0-8.703,1.7-11.944,5.087 c-3.249,3.395-4.865,7.3-4.865,11.723v163.228c0,4.721,1.616,8.702,4.865,11.943c3.241,3.249,7.223,4.866,11.944,4.866 c2.944,0,5.751-0.732,8.404-2.212c2.655-1.472,4.714-3.539,6.193-6.194c1.473-2.654,2.213-5.453,2.213-8.404V1447.58 c0-2.945-0.74-5.75-2.213-8.405C1513.12,1436.522,1511.06,1434.462,1508.406,1432.983z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M1499.78,1367.957c-4.575,0-8.481,1.625-11.722,4.866c-3.249,3.249-4.865,7.23-4.865,11.943 c0,2.951,0.732,5.75,2.212,8.405c1.472,2.654,3.463,4.721,5.971,6.193c2.503,1.479,5.378,2.212,8.627,2.212 c4.423,0,8.328-1.618,11.721-4.865c3.387-3.243,5.088-7.224,5.088-11.944c0-4.713-1.701-8.694-5.088-11.943 C1508.33,1369.582,1504.349,1367.957,1499.78,1367.957z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M1859.627,1369.727H1747.27c-35.388,0-65.69,12.607-90.904,37.821 c-25.213,25.215-37.82,55.591-37.82,91.125c0,35.54,12.607,65.911,37.82,91.125c25.215,25.215,55.516,37.821,90.904,37.821h56.178 c4.714,0,8.695-1.618,11.944-4.866c3.241-3.241,4.865-7.222,4.865-11.943c0-4.714-1.624-8.695-4.865-11.943 c-3.249-3.243-7.23-4.866-11.944-4.866h-56.178c-26.251,0-48.659-9.359-67.237-28.09c-18.579-18.723-27.868-41.207-27.868-67.459 c0-26.243,9.29-48.659,27.868-67.237c18.579-18.579,40.987-27.868,67.237-27.868h112.357c4.714,0,8.696-1.693,11.944-5.087 c3.241-3.387,4.865-7.368,4.865-11.943c0-4.569-1.624-8.475-4.865-11.723C1868.322,1371.351,1864.341,1369.727,1859.627,1369.727z \"></path>\n <path fill=\"#06b6d4\" d=\"M2219.256,1371.054h-112.357c-4.423,0-8.336,1.624-11.723,4.865c-3.393,3.249-5.087,7.23-5.087,11.944 c0,4.721,1.694,8.702,5.087,11.943c3.387,3.249,7.3,4.866,11.723,4.866h95.547v95.105c0,26.251-9.365,48.659-28.088,67.237 c-18.731,18.579-41.215,27.868-67.459,27.868c-26.251,0-48.659-9.289-67.237-27.868c-18.579-18.579-27.868-40.987-27.868-67.237 c0-4.713-1.701-8.771-5.088-12.165c-3.393-3.387-7.374-5.087-11.943-5.087c-4.575,0-8.481,1.7-11.722,5.087 c-3.249,3.393-4.865,7.451-4.865,12.165c0,35.388,12.607,65.69,37.82,90.904c25.215,25.213,55.584,37.82,91.126,37.82 c35.532,0,65.91-12.607,91.125-37.82c25.214-25.215,37.82-55.516,37.82-90.904v-111.915c0-4.714-1.624-8.695-4.865-11.944 C2227.951,1372.678,2223.971,1371.054,2219.256,1371.054z\"></path>\n <path fill=\"#06b6d4\" d=\"M2574.24,1502.875c-14.306-14.156-31.483-21.234-51.533-21.234H2410.35 c-10.617,0-19.762-3.829-27.426-11.501c-7.672-7.664-11.501-16.954-11.501-27.868c0-10.907,3.829-20.196,11.501-27.868 c7.664-7.664,16.809-11.501,27.426-11.501h112.357c4.714,0,8.695-1.617,11.944-4.866c3.241-3.241,4.865-7.222,4.865-11.943 c0-4.714-1.624-8.695-4.865-11.944c-3.249-3.241-7.23-4.865-11.944-4.865H2410.35c-20.058,0-37.158,7.154-51.313,21.454 c-14.156,14.308-21.232,31.483-21.232,51.534c0,20.058,7.077,37.234,21.232,51.534c14.156,14.308,31.255,21.454,51.313,21.454 h112.357c7.078,0,13.637,1.77,19.684,5.308c6.042,3.539,10.838,8.336,14.377,14.377c3.538,6.047,5.307,12.607,5.307,19.685 c0,10.616-3.835,19.76-11.501,27.425c-7.672,7.673-16.961,11.502-27.868,11.502h-168.094c-4.721,0-8.703,1.7-11.944,5.087 c-3.249,3.393-4.865,7.374-4.865,11.943c0,4.576,1.616,8.481,4.865,11.723c3.241,3.249,7.223,4.866,11.944,4.866h168.094 c20.051,0,37.227-7.078,51.533-21.234c14.302-14.155,21.454-31.331,21.454-51.534 C2595.695,1534.213,2588.542,1517.03,2574.24,1502.875z\"></path>\n <path fill=\"#06b6d4\" d=\"M854.024,1585.195l20.001-16.028c16.616-13.507,33.04-27.265,50.086-40.251 c1.13-0.861,2.9-1.686,2.003-3.516c-0.843-1.716-2.481-2.302-4.484-2.123c-8.514,0.765-17.016-0.538-25.537-0.353 c-1.124,0.024-2.768,0.221-3.163-1.25c-0.371-1.369,1.088-2.063,1.919-2.894c6.26-6.242,12.574-12.43,18.816-18.691 c9.303-9.327,18.565-18.714,27.851-28.066c1.848-1.859,3.701-3.713,5.549-5.572c2.655-2.661,5.309-5.315,7.958-7.982 c0.574-0.579,1.259-1.141,1.246-1.94c-0.004-0.257-0.078-0.538-0.254-0.853c-0.556-0.981-1.441-1.1-2.469-0.957 c-0.658,0.096-1.315,0.185-1.973,0.275c-3.844,0.538-7.689,1.076-11.533,1.608c-3.641,0.505-7.281,1.02-10.922,1.529 c-4.162,0.582-8.324,1.158-12.486,1.748c-1.142,0.161-2.409,1.662-3.354,0.508c-0.419-0.508-0.431-1.028-0.251-1.531 c0.269-0.741,0.957-1.441,1.387-2.021c3.414-4.58,6.882-9.124,10.356-13.662c1.74-2.272,3.48-4.544,5.214-6.822 c4.682-6.141,9.369-12.281,14.051-18.422c0.09-0.119,0.181-0.237,0.271-0.355c6.848-8.98,13.7-17.958,20.553-26.936 c0.488-0.64,0.977-1.28,1.465-1.92c2.159-2.828,4.315-5.658,6.476-8.486c4.197-5.501,8.454-10.954,12.67-16.442 c0.263-0.347,0.538-0.718,0.717-1.106c0.269-0.586,0.299-1.196-0.335-1.776c-0.825-0.753-1.8-0.15-2.595,0.419 c-0.67,0.472-1.333,0.957-1.955,1.489c-2.206,1.889-4.401,3.797-6.595,5.698c-3.958,3.438-7.922,6.876-11.976,10.194 c-2.443,2.003-4.865,4.028-7.301,6.038c-18.689-10.581-39.53-15.906-62.549-15.906c-35.54,0-65.911,12.607-91.125,37.82 c-25.214,25.215-37.821,55.592-37.821,91.126c0,35.54,12.607,65.91,37.821,91.125c4.146,4.146,8.445,7.916,12.87,11.381 c-9.015,11.14-18.036,22.277-27.034,33.429c-1.208,1.489-3.755,3.151-2.745,4.891c0.078,0.144,0.173,0.281,0.305,0.425 c1.321,1.429,3.492-1.303,4.933-2.457c6.673-5.333,13.333-10.685,19.982-16.042c3.707-2.984,7.417-5.965,11.124-8.952 c1.474-1.188,2.951-2.373,4.425-3.561c6.41-5.164,12.816-10.333,19.238-15.481L854.024,1585.195z M797.552,1498.009 c0-26.243,9.29-48.728,27.868-67.459c18.579-18.723,40.987-28.089,67.238-28.089c12.273,0,23.712,2.075,34.34,6.171 c-3.37,2.905-6.734,5.816-10.069,8.762c-6.075,5.351-12.365,10.469-18.667,15.564c-4.179,3.378-8.371,6.744-12.514,10.164 c-7.54,6.23-15.037,12.52-22.529,18.804c-7.091,5.955-14.182,11.904-21.19,17.949c-1.136,0.974-3.055,1.907-2.135,3.94 c0.831,1.836,2.774,1.417,4.341,1.578l12.145-0.599l14.151-0.698c1.031-0.102,2.192-0.257,2.89,0.632 c0.034,0.044,0.073,0.078,0.106,0.127c1.017,1.561-0.67,2.105-1.387,2.942c-6.308,7.318-12.616,14.637-18.978,21.907 c-8.161,9.339-16.353,18.649-24.544,27.958c-2.146,2.433-4.275,4.879-6.422,7.312c-1.034,1.172-2.129,2.272-1.238,3.922 c0.933,1.728,2.685,1.752,4.323,1.602c4.134-0.367,8.263-0.489,12.396-0.492c0.242,0,0.485-0.005,0.728-0.004 c2.711,0.009,5.422,0.068,8.134,0.145c2.582,0.074,5.166,0.165,7.752,0.249c0.275,1.62-0.879,2.356-1.62,3.259 c-1.333,1.626-2.667,3.247-4,4.867c-4.315,5.252-8.62,10.514-12.928,15.772c-3.562-2.725-7.007-5.733-10.324-9.051 C806.842,1546.667,797.552,1524.26,797.552,1498.009z\"></path>\n </svg>\n `\n\n const versionBadge = showVersion && version ? `\n <span class=\"inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${\n variant === 'white'\n ? 'bg-white/10 text-white/80 ring-white/20'\n : 'bg-cyan-50 text-cyan-700 ring-cyan-700/10 dark:bg-cyan-500/10 dark:text-cyan-400 dark:ring-cyan-500/20'\n }\">\n ${version}\n </span>\n ` : ''\n\n const logoContent = showText ? `\n <div class=\"flex items-center gap-2 ${className}\">\n ${logoSvg}\n ${versionBadge}\n </div>\n ` : logoSvg\n\n // Wrap in link if href is provided\n if (href) {\n return `<a href=\"${href}\" class=\"inline-block hover:opacity-80 transition-opacity\">${logoContent}</a>`\n }\n\n return logoContent\n}","import { HtmlEscapedString } from \"hono/utils/html\";\nimport { renderLogo } from \"../components/logo.template\";\n\n// Catalyst Checkbox Component (HTML implementation)\nexport interface CatalystCheckboxProps {\n id: string;\n name: string;\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n description?: string;\n color?:\n | \"dark/zinc\"\n | \"dark/white\"\n | \"white\"\n | \"dark\"\n | \"zinc\"\n | \"blue\"\n | \"green\"\n | \"red\";\n className?: string;\n}\n\nexport function renderCatalystCheckbox(props: CatalystCheckboxProps): string {\n const {\n id,\n name,\n checked = false,\n disabled = false,\n label,\n description,\n color = \"dark/zinc\",\n className = \"\",\n } = props;\n\n const colorConfig = {\n \"dark/zinc\": {\n bg: \"#18181b\",\n border: \"#09090b\",\n check: \"#ffffff\",\n darkBg: \"#52525b\",\n },\n \"dark/white\": {\n bg: \"#18181b\",\n border: \"#09090b\",\n check: \"#ffffff\",\n darkBg: \"#ffffff\",\n darkCheck: \"#18181b\",\n },\n white: { bg: \"#ffffff\", border: \"#09090b\", check: \"#18181b\" },\n dark: { bg: \"#18181b\", border: \"#09090b\", check: \"#ffffff\" },\n zinc: { bg: \"#52525b\", border: \"#3f3f46\", check: \"#ffffff\" },\n blue: { bg: \"#2563eb\", border: \"#1d4ed8\", check: \"#ffffff\" },\n green: { bg: \"#16a34a\", border: \"#15803d\", check: \"#ffffff\" },\n red: { bg: \"#dc2626\", border: \"#b91c1c\", check: \"#ffffff\" },\n };\n\n const _config = colorConfig[color] || colorConfig[\"dark/zinc\"];\n\n const colorClasses = {\n \"dark/zinc\":\n \"peer-checked:bg-zinc-900 peer-checked:before:bg-zinc-900 dark:peer-checked:bg-zinc-600\",\n \"dark/white\":\n \"peer-checked:bg-zinc-900 peer-checked:before:bg-zinc-900 dark:peer-checked:bg-white\",\n white: \"peer-checked:bg-white peer-checked:before:bg-white\",\n dark: \"peer-checked:bg-zinc-900 peer-checked:before:bg-zinc-900\",\n zinc: \"peer-checked:bg-zinc-600 peer-checked:before:bg-zinc-600\",\n blue: \"peer-checked:bg-blue-600 peer-checked:before:bg-blue-600\",\n green: \"peer-checked:bg-green-600 peer-checked:before:bg-green-600\",\n red: \"peer-checked:bg-red-600 peer-checked:before:bg-red-600\",\n };\n\n const checkColor =\n color === \"dark/white\" ? \"dark:text-zinc-900\" : \"text-white\";\n\n const baseClasses = `\n relative isolate flex w-4 h-4 items-center justify-center rounded-[0.3125rem]\n before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow-sm\n dark:before:hidden\n dark:bg-white/5\n border border-zinc-950/15 peer-checked:border-transparent\n dark:border-white/15 dark:peer-checked:border-white/5\n peer-focus:outline peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-blue-500\n peer-disabled:opacity-50\n peer-disabled:border-zinc-950/25 peer-disabled:bg-zinc-950/5\n dark:peer-disabled:border-white/20 dark:peer-disabled:bg-white/2.5\n `\n .trim()\n .replace(/\\s+/g, \" \");\n\n const checkIconClasses = `\n w-4 h-4 opacity-0 peer-checked:opacity-100 pointer-events-none\n `\n .trim()\n .replace(/\\s+/g, \" \");\n\n if (description) {\n // Field layout with description\n return `\n <div class=\"grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr] ${className}\">\n <div class=\"col-start-1 row-start-1 mt-0.75 sm:mt-1\">\n <input\n type=\"checkbox\"\n id=\"${id}\"\n name=\"${name}\"\n ${checked ? \"checked\" : \"\"}\n ${disabled ? \"disabled\" : \"\"}\n class=\"peer sr-only\"\n />\n <label for=\"${id}\" class=\"inline-flex cursor-pointer\">\n <span class=\"${baseClasses} ${colorClasses[color] || colorClasses[\"dark/zinc\"]}\">\n <svg class=\"${checkIconClasses} ${checkColor}\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n </label>\n </div>\n ${label ? `<label for=\"${id}\" class=\"col-start-2 row-start-1 text-sm/6 font-medium text-zinc-950 dark:text-white cursor-pointer\">${label}</label>` : \"\"}\n ${description ? `<p class=\"col-start-2 row-start-2 text-sm/6 text-zinc-500 dark:text-zinc-400\">${description}</p>` : \"\"}\n </div>\n `;\n } else {\n // Simple checkbox with optional label\n return `\n <label class=\"inline-flex items-center gap-3 cursor-pointer ${className}\">\n <input\n type=\"checkbox\"\n id=\"${id}\"\n name=\"${name}\"\n ${checked ? \"checked\" : \"\"}\n ${disabled ? \"disabled\" : \"\"}\n class=\"peer sr-only\"\n />\n <span class=\"${baseClasses} ${colorClasses[color] || colorClasses[\"dark/zinc\"]}\">\n <svg class=\"${checkIconClasses} ${checkColor}\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n ${label ? `<span class=\"text-sm/6 font-medium text-zinc-950 dark:text-white\">${label}</span>` : \"\"}\n </label>\n `;\n }\n}\n\nexport interface AdminLayoutCatalystData {\n title: string;\n pageTitle?: string;\n currentPath?: string;\n version?: string;\n enableExperimentalFeatures?: boolean;\n user?: {\n name: string;\n email: string;\n role: string;\n };\n scripts?: string[];\n styles?: string[];\n content: string | HtmlEscapedString;\n dynamicMenuItems?: Array<{\n label: string;\n path: string;\n icon: string;\n }>;\n}\n\nexport function renderAdminLayoutCatalyst(\n data: AdminLayoutCatalystData\n): string {\n return `<!DOCTYPE html>\n<html lang=\"en\" class=\"dark\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${data.title} - SonicJS AI Admin</title>\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\">\n\n <!-- Tailwind CSS -->\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n zinc: {\n 50: '#fafafa',\n 100: '#f4f4f5',\n 200: '#e4e4e7',\n 300: '#d4d4d8',\n 400: '#a1a1aa',\n 500: '#71717a',\n 600: '#52525b',\n 700: '#3f3f46',\n 800: '#27272a',\n 900: '#18181b',\n 950: '#09090b'\n }\n }\n }\n }\n }\n </script>\n\n <!-- Additional Styles -->\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n /* Custom scrollbar */\n ::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background: #27272a;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #52525b;\n border-radius: 4px;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: #71717a;\n }\n\n /* Smooth transitions */\n * {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n </style>\n\n <!-- Scripts -->\n <script src=\"https://unpkg.com/htmx.org@2.0.3\"></script>\n <script src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\" defer></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js\"></script>\n\n <!-- CSRF: Auto-attach token to all HTMX and fetch requests -->\n <script>\n function getCsrfToken() {\n var cookie = document.cookie.split('; ')\n .find(function(row) { return row.startsWith('csrf_token='); });\n return cookie ? cookie.substring(cookie.indexOf('=') + 1) : '';\n }\n\n document.addEventListener('htmx:configRequest', function(event) {\n var token = getCsrfToken();\n if (token) {\n event.detail.headers['X-CSRF-Token'] = token;\n }\n });\n\n (function() {\n var originalFetch = window.fetch;\n window.fetch = function(url, options) {\n options = options || {};\n var method = (options.method || 'GET').toUpperCase();\n if (method !== 'GET' && method !== 'HEAD' && method !== 'OPTIONS') {\n options.headers = options.headers || {};\n if (options.headers instanceof Headers) {\n if (!options.headers.has('X-CSRF-Token')) {\n options.headers.set('X-CSRF-Token', getCsrfToken());\n }\n } else if (!Array.isArray(options.headers) && !options.headers['X-CSRF-Token']) {\n options.headers['X-CSRF-Token'] = getCsrfToken();\n }\n }\n return originalFetch.call(this, url, options);\n };\n })();\n\n // Inject _csrf hidden field into regular form submissions (non-HTMX)\n document.addEventListener('submit', function(event) {\n var form = event.target;\n if (!form || !form.tagName || form.tagName !== 'FORM') return;\n var method = (form.method || 'GET').toUpperCase();\n if (method === 'GET') return;\n if (form.hasAttribute('hx-post') || form.hasAttribute('hx-put') ||\n form.hasAttribute('hx-delete') || form.hasAttribute('hx-patch')) return;\n if (!form.querySelector('input[name=\"_csrf\"]')) {\n var input = document.createElement('input');\n input.type = 'hidden';\n input.name = '_csrf';\n input.value = getCsrfToken();\n form.appendChild(input);\n }\n });\n </script>\n\n ${\n data.styles\n ? data.styles\n .map((style) => `<link rel=\"stylesheet\" href=\"${style}\">`)\n .join(\"\\n \")\n : \"\"\n }\n ${\n data.scripts\n ? data.scripts\n .map((script) => `<script src=\"${script}\"></script>`)\n .join(\"\\n \")\n : \"\"\n }\n</head>\n<body class=\"min-h-screen bg-white dark:bg-zinc-900\">\n <div class=\"relative isolate flex min-h-svh w-full max-lg:flex-col lg:bg-zinc-100 dark:lg:bg-zinc-950\">\n <!-- Sidebar on desktop -->\n <div class=\"fixed inset-y-0 left-0 w-64 max-lg:hidden\">\n ${renderCatalystSidebar(\n data.currentPath,\n data.user,\n data.dynamicMenuItems,\n false,\n data.version,\n data.enableExperimentalFeatures\n )}\n </div>\n\n <!-- Mobile sidebar (hidden by default) -->\n <div id=\"mobile-sidebar-overlay\" class=\"fixed inset-0 bg-black/30 lg:hidden hidden z-40\" onclick=\"closeMobileSidebar()\"></div>\n <div id=\"mobile-sidebar\" class=\"fixed inset-y-0 left-0 w-80 transform -translate-x-full transition-transform duration-300 ease-in-out lg:hidden z-50\">\n ${renderCatalystSidebar(\n data.currentPath,\n data.user,\n data.dynamicMenuItems,\n true,\n data.version,\n data.enableExperimentalFeatures\n )}\n </div>\n\n <!-- Main content area -->\n <main class=\"flex flex-1 flex-col pb-2 lg:min-w-0 lg:pr-2 lg:pl-64\">\n <!-- Mobile header with menu toggle -->\n <header class=\"flex items-center px-4 py-2.5 lg:hidden border-b border-zinc-950/5 dark:border-white/5\">\n <button onclick=\"openMobileSidebar()\" class=\"relative flex items-center justify-center rounded-lg p-2 text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\" aria-label=\"Open navigation\">\n <svg class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z\" />\n </svg>\n </button>\n <div class=\"ml-4 flex-1\">\n ${renderLogo({ size: \"sm\", showText: true, variant: \"white\", version: data.version, href: \"/admin\" })}\n </div>\n </header>\n\n <!-- Content -->\n <div class=\"grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-sm lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10\">\n ${data.content}\n </div>\n </main>\n </div>\n\n <!-- Notification Container -->\n <div id=\"notification-container\" class=\"fixed top-4 right-4 z-50 space-y-2\"></div>\n\n <!-- Migration Warning Banner (hidden by default) -->\n <div id=\"migration-banner\" class=\"hidden fixed top-0 left-0 right-0 z-50 bg-amber-500 dark:bg-amber-600 shadow-lg\">\n <div class=\"max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between flex-wrap\">\n <div class=\"flex items-center flex-1\">\n <span class=\"flex p-2 rounded-lg bg-amber-600 dark:bg-amber-700\">\n <svg class=\"h-5 w-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"/>\n </svg>\n </span>\n <div class=\"ml-3\">\n <p class=\"text-sm font-medium text-white\">\n <span id=\"migration-count\"></span> pending database migration(s) detected\n </p>\n <p class=\"text-xs text-amber-100 dark:text-amber-200 mt-1\">\n Run: <code class=\"bg-amber-700 dark:bg-amber-800 px-2 py-0.5 rounded font-mono text-white\">wrangler d1 migrations apply DB --local</code>\n </p>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <a href=\"/admin/settings/migrations\" class=\"text-xs font-semibold text-white hover:text-amber-100 underline\">\n View Details\n </a>\n <button onclick=\"closeMigrationBanner()\" class=\"p-1 rounded-md text-white hover:bg-amber-600 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-white\">\n <svg class=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n </svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <script>\n // Mobile sidebar toggle\n function openMobileSidebar() {\n const sidebar = document.getElementById('mobile-sidebar');\n const overlay = document.getElementById('mobile-sidebar-overlay');\n sidebar.classList.remove('-translate-x-full');\n overlay.classList.remove('hidden');\n }\n\n function closeMobileSidebar() {\n const sidebar = document.getElementById('mobile-sidebar');\n const overlay = document.getElementById('mobile-sidebar-overlay');\n sidebar.classList.add('-translate-x-full');\n overlay.classList.add('hidden');\n }\n\n // User dropdown toggle\n function toggleUserDropdown() {\n const dropDowns = document.querySelectorAll('.userDropdown');\n dropDowns.forEach(dropdown => {\n dropdown.classList.toggle('hidden');\n });\n }\n\n // Close dropdown when clicking outside\n document.addEventListener('click', function(event) {\n const dropdowns = document.querySelectorAll('.userDropdown');\n const button = event.target.closest('[data-user-menu]');\n if (!button) {\n dropdowns.forEach(function(dropdown) {\n if (!dropdown.contains(event.target)) {\n dropdown.classList.add('hidden');\n }\n });\n }\n });\n\n // Show notification\n function showNotification(message, type = 'info') {\n const container = document.getElementById('notification-container');\n const notification = document.createElement('div');\n const colors = {\n success: 'bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 ring-green-600/20 dark:ring-green-500/20',\n error: 'bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-red-600/20 dark:ring-red-500/20',\n warning: 'bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 ring-amber-600/20 dark:ring-amber-500/20',\n info: 'bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 ring-blue-600/20 dark:ring-blue-500/20'\n };\n\n notification.className = \\`rounded-lg p-4 ring-1 \\${colors[type] || colors.info} max-w-sm shadow-lg\\`;\n notification.innerHTML = \\`\n <div class=\"flex items-center justify-between\">\n <span class=\"text-sm\">\\${message}</span>\n <button onclick=\"this.parentElement.parentElement.remove()\" class=\"ml-4 hover:opacity-70\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"></path>\n </svg>\n </button>\n </div>\n \\`;\n\n container.appendChild(notification);\n\n // Auto remove after 5 seconds\n setTimeout(() => {\n if (notification.parentElement) {\n notification.remove();\n }\n }, 5000);\n }\n\n // Initialize dark mode\n if (localStorage.getItem('darkMode') === 'false') {\n document.documentElement.classList.remove('dark');\n }\n\n // Migration banner functions\n function closeMigrationBanner() {\n const banner = document.getElementById('migration-banner');\n if (banner) {\n banner.classList.add('hidden');\n // Store in session storage so it doesn't show again during this session\n sessionStorage.setItem('migrationBannerDismissed', 'true');\n }\n }\n\n // Check for pending migrations on page load\n async function checkPendingMigrations() {\n // Don't check if user dismissed the banner in this session\n if (sessionStorage.getItem('migrationBannerDismissed') === 'true') {\n return;\n }\n\n try {\n const response = await fetch('/admin/api/migrations/status');\n if (response.ok) {\n const data = await response.json();\n if (data.success && data.data && data.data.pendingMigrations > 0) {\n const banner = document.getElementById('migration-banner');\n const countElement = document.getElementById('migration-count');\n if (banner && countElement) {\n countElement.textContent = data.data.pendingMigrations;\n banner.classList.remove('hidden');\n }\n }\n }\n } catch (error) {\n console.error('Failed to check migration status:', error);\n }\n }\n\n // Check for pending migrations when the page loads\n document.addEventListener('DOMContentLoaded', checkPendingMigrations);\n </script>\n</body>\n</html>`;\n}\n\nfunction renderCatalystSidebar(\n currentPath: string = \"\",\n user?: any,\n dynamicMenuItems?: Array<{ label: string; path: string; icon: string }>,\n isMobile: boolean = false,\n version?: string,\n enableExperimentalFeatures?: boolean\n): string {\n let baseMenuItems = [\n {\n label: \"Dashboard\",\n path: \"/admin\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z\"/>\n </svg>`,\n },\n {\n label: \"Collections\",\n path: \"/admin/collections\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z\"/>\n </svg>`,\n },\n {\n label: \"Forms\",\n path: \"/admin/forms\",\n icon: `<svg class=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"/>\n </svg>`,\n },\n {\n label: \"Content\",\n path: \"/admin/content\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z\" clip-rule=\"evenodd\"/>\n </svg>`,\n },\n {\n label: \"Media\",\n path: \"/admin/media\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z\" clip-rule=\"evenodd\"/>\n </svg>`,\n },\n {\n label: \"Users\",\n path: \"/admin/users\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z\"/>\n </svg>`,\n },\n {\n label: \"Plugins\",\n path: \"/admin/plugins\",\n icon: `<svg class=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"/>\n </svg>`,\n },\n {\n label: \"Cache\",\n path: \"/admin/cache\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 11-2 0 1 1 0 012 0zM2 13a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2zm14 1a1 1 0 11-2 0 1 1 0 012 0z\" clip-rule=\"evenodd\"/>\n </svg>`,\n },\n ];\n\n const settingsMenuItem = {\n label: \"Settings\",\n path: \"/admin/settings\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z\" clip-rule=\"evenodd\"/>\n </svg>`,\n };\n\n // Combine base menu items with dynamic menu items\n const allMenuItems = [...baseMenuItems];\n if (dynamicMenuItems && dynamicMenuItems.length > 0) {\n // Insert dynamic menu items after Users menu item\n const usersIndex = allMenuItems.findIndex(\n (item) => item.path === \"/admin/users\"\n );\n if (usersIndex !== -1) {\n allMenuItems.splice(usersIndex + 1, 0, ...dynamicMenuItems);\n } else {\n // Fallback: add to end if Users not found\n allMenuItems.push(...dynamicMenuItems);\n }\n }\n // Marker for middleware-injected plugin menu items (used when dynamicMenuItems is not passed explicitly)\n const pluginMenuMarker = (!dynamicMenuItems || dynamicMenuItems.length === 0) ? '<!-- DYNAMIC_PLUGIN_MENU -->' : '';\n\n const closeButton = isMobile\n ? `\n <div class=\"-mb-3 px-4 pt-3\">\n <button onclick=\"closeMobileSidebar()\" class=\"relative flex w-full items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5 sm:text-sm/5\" aria-label=\"Close navigation\">\n <svg class=\"h-5 w-5 shrink-0 fill-zinc-500 dark:fill-zinc-400\" viewBox=\"0 0 20 20\">\n <path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" />\n </svg>\n <span>Close menu</span>\n </button>\n </div>\n `\n : \"\";\n\n return `\n <nav class=\"flex h-full min-h-0 flex-col bg-white shadow-sm ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10 ${\n isMobile ? \"is-mobile rounded-lg p-2 m-2\" : \"\"\n }\">\n ${closeButton}\n\n <!-- Sidebar Header -->\n <div class=\"flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5\">\n ${renderLogo({ size: \"md\", showText: true, variant: \"white\", version, href: \"/admin\" })}\n </div>\n\n <!-- Sidebar Body -->\n <div class=\"flex flex-1 flex-col overflow-y-auto p-4\">\n <div class=\"flex flex-col gap-0.5\">\n ${allMenuItems\n .map((item) => {\n const isActive =\n currentPath === item.path ||\n (item.path !== \"/admin\" && currentPath?.startsWith(item.path));\n return `\n <span class=\"relative\">\n ${\n isActive\n ? `\n <span class=\"absolute inset-y-2 -left-4 w-0.5 rounded-full bg-cyan-500 dark:bg-cyan-400\"></span>\n `\n : \"\"\n }\n <a\n href=\"${item.path}\"\n class=\"flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-sm/5 font-medium ${\n isActive\n ? \"text-zinc-950 dark:text-white\"\n : \"text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\"\n }\"\n ${isActive ? 'data-current=\"true\"' : \"\"}\n >\n <span class=\"shrink-0 ${\n isActive\n ? \"fill-zinc-950 dark:fill-white\"\n : \"fill-zinc-500 dark:fill-zinc-400\"\n }\">\n ${item.icon}\n </span>\n <span class=\"truncate\">${item.label}</span>\n </a>\n </span>\n `;\n })\n .join(\"\")}\n ${pluginMenuMarker}\n </div>\n </div>\n\n <!-- Settings Menu Item (Bottom) -->\n <div class=\"border-t border-zinc-950/5 p-4 dark:border-white/5\">\n ${(() => {\n const isActive =\n currentPath === settingsMenuItem.path ||\n currentPath?.startsWith(settingsMenuItem.path);\n return `\n <span class=\"relative\">\n ${\n isActive\n ? `\n <span class=\"absolute inset-y-2 -left-4 w-0.5 rounded-full bg-cyan-500 dark:bg-cyan-400\"></span>\n `\n : \"\"\n }\n <a\n href=\"${settingsMenuItem.path}\"\n class=\"flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-sm/5 font-medium ${\n isActive\n ? \"text-zinc-950 dark:text-white\"\n : \"text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\"\n }\"\n ${isActive ? 'data-current=\"true\"' : \"\"}\n >\n <span class=\"shrink-0 ${\n isActive\n ? \"fill-zinc-950 dark:fill-white\"\n : \"fill-zinc-500 dark:fill-zinc-400\"\n }\">\n ${settingsMenuItem.icon}\n </span>\n <span class=\"truncate\">${settingsMenuItem.label}</span>\n </a>\n </span>\n `;\n })()}\n </div>\n\n <!-- Sidebar Footer (User) -->\n ${\n user\n ? `\n <div class=\"flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5\">\n <div class=\"relative\">\n <button\n data-user-menu\n onclick=\"toggleUserDropdown()\"\n class=\"flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-sm/5 font-medium text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\"\n >\n <div class=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-zinc-950 text-white dark:bg-white dark:text-zinc-950\">\n <span class=\"text-xs font-semibold\">${(\n user.name ||\n user.email ||\n \"U\"\n )\n .charAt(0)\n .toUpperCase()}</span>\n </div>\n <span class=\"flex-1 truncate\">${\n user.name || user.email || \"User\"\n }</span>\n <svg class=\"h-4 w-4 shrink-0 fill-zinc-500 dark:fill-zinc-400\" viewBox=\"0 0 20 20\">\n <path d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\" />\n </svg>\n </button>\n\n <!-- User Dropdown -->\n <div class=\"userDropdown hidden absolute bottom-full mb-2 left-0 right-0 mx-2 rounded-xl bg-white shadow-lg ring-1 ring-zinc-950/10 dark:bg-zinc-800 dark:ring-white/10 z-50\">\n <div class=\"p-2\">\n <div class=\"px-3 py-2 border-b border-zinc-950/5 dark:border-white/5\">\n <p class=\"text-sm font-medium text-zinc-950 dark:text-white\">${\n user.name || user.email || \"User\"\n }</p>\n <p class=\"text-xs text-zinc-500 dark:text-zinc-400\">${\n user.email || \"\"\n }</p>\n </div>\n <a href=\"/admin/profile\" class=\"flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\">\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"/>\n </svg>\n My Profile\n </a>\n <a href=\"/auth/logout\" class=\"flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10\">\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1\"/>\n </svg>\n Sign Out\n </a>\n </div>\n </div>\n </div>\n </div>\n `\n : \"\"\n }\n </nav>\n `;\n}\n"]}