@sonicjs-cms/core 2.7.0 → 2.8.0

package/dist/chunk-S6K2H2TS.cjs.map

@@ -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-S6K2H2TS.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-EHSZ6TAN.cjs → chunk-SHCYIZAN.cjs}

@@ -442,6 +442,13 @@ function renderCatalystSidebar(currentPath = "", user, dynamicMenuItems, isMobil
         <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"/>
       </svg>`
     },
+    {
+      label: "Forms",
+      path: "/admin/forms",
+      icon: `<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <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"/>
+      </svg>`
+    },
     {
       label: "Content",
       path: "/admin/content",
@@ -3554,5 +3561,5 @@ exports.renderLogo = renderLogo;
 exports.renderPagination = renderPagination;
 exports.renderTable = renderTable;
 exports.renderTestimonialsList = renderTestimonialsList;
-//# sourceMappingURL=chunk-EHSZ6TAN.cjs.map
-//# sourceMappingURL=chunk-EHSZ6TAN.cjs.map
+//# sourceMappingURL=chunk-SHCYIZAN.cjs.map
+//# sourceMappingURL=chunk-SHCYIZAN.cjs.map