@sonicjs-cms/core 2.5.0 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (92) hide show
  1. package/dist/{app-Db0AfT5F.d.cts → app-DV27cjPy.d.cts} +1 -1
  2. package/dist/{app-Db0AfT5F.d.ts → app-DV27cjPy.d.ts} +1 -1
  3. package/dist/{chunk-YIXSSJWD.cjs → chunk-AYPF6C4D.cjs} +5 -5
  4. package/dist/{chunk-YIXSSJWD.cjs.map → chunk-AYPF6C4D.cjs.map} +1 -1
  5. package/dist/chunk-CLIH2T74.js +403 -0
  6. package/dist/chunk-CLIH2T74.js.map +1 -0
  7. package/dist/{chunk-BHNDALCA.js → chunk-DNHJS6RN.js} +6 -4
  8. package/dist/chunk-DNHJS6RN.js.map +1 -0
  9. package/dist/{chunk-YYV3XQOQ.cjs → chunk-E2BXLXPW.cjs} +7 -7
  10. package/dist/{chunk-YYV3XQOQ.cjs.map → chunk-E2BXLXPW.cjs.map} +1 -1
  11. package/dist/{chunk-AZLU3ROK.cjs → chunk-EHSZ6TAN.cjs} +11 -4
  12. package/dist/chunk-EHSZ6TAN.cjs.map +1 -0
  13. package/dist/{chunk-3YUHXWSG.js → chunk-F332TENF.js} +3 -3
  14. package/dist/{chunk-3YUHXWSG.js.map → chunk-F332TENF.js.map} +1 -1
  15. package/dist/{chunk-V5LBQN3I.js → chunk-GRN3GHUG.js} +11 -4
  16. package/dist/chunk-GRN3GHUG.js.map +1 -0
  17. package/dist/{chunk-UAQL2VWX.cjs → chunk-J7F3NPAP.cjs} +2436 -707
  18. package/dist/chunk-J7F3NPAP.cjs.map +1 -0
  19. package/dist/{chunk-VEL7QRYI.js → chunk-L2IDZI7F.js} +9 -2
  20. package/dist/chunk-L2IDZI7F.js.map +1 -0
  21. package/dist/{chunk-ILZ3DP4I.cjs → chunk-MPT5PA6U.cjs} +24 -2
  22. package/dist/chunk-MPT5PA6U.cjs.map +1 -0
  23. package/dist/{chunk-ZWV3EBZ7.cjs → chunk-MYB5RY7H.cjs} +6 -4
  24. package/dist/chunk-MYB5RY7H.cjs.map +1 -0
  25. package/dist/{chunk-OJZ45OJD.js → chunk-UISZ2MBW.js} +2272 -544
  26. package/dist/chunk-UISZ2MBW.js.map +1 -0
  27. package/dist/{chunk-AVPUX57O.js → chunk-V3KVSEG6.js} +3 -3
  28. package/dist/{chunk-AVPUX57O.js.map → chunk-V3KVSEG6.js.map} +1 -1
  29. package/dist/{chunk-TJTWRO4G.js → chunk-Y3EWJQ4D.js} +4 -4
  30. package/dist/{chunk-TJTWRO4G.js.map → chunk-Y3EWJQ4D.js.map} +1 -1
  31. package/dist/{chunk-LWG2MWDA.cjs → chunk-Y72M3MVX.cjs} +4 -4
  32. package/dist/{chunk-LWG2MWDA.cjs.map → chunk-Y72M3MVX.cjs.map} +1 -1
  33. package/dist/{chunk-SGAG6FD3.js → chunk-YFJJU26H.js} +24 -2
  34. package/dist/chunk-YFJJU26H.js.map +1 -0
  35. package/dist/chunk-YHW27CBV.cjs +406 -0
  36. package/dist/chunk-YHW27CBV.cjs.map +1 -0
  37. package/dist/{chunk-I4V3VZWF.cjs → chunk-YRFAQ6MI.cjs} +9 -2
  38. package/dist/chunk-YRFAQ6MI.cjs.map +1 -0
  39. package/dist/{collection-config-B6gMPunn.d.cts → collection-config-BF95LgQb.d.cts} +1 -1
  40. package/dist/{collection-config-B6gMPunn.d.ts → collection-config-BF95LgQb.d.ts} +1 -1
  41. package/dist/index.cjs +4098 -424
  42. package/dist/index.cjs.map +1 -1
  43. package/dist/index.d.cts +503 -8
  44. package/dist/index.d.ts +503 -8
  45. package/dist/index.js +4008 -341
  46. package/dist/index.js.map +1 -1
  47. package/dist/middleware.cjs +24 -24
  48. package/dist/middleware.d.cts +1 -1
  49. package/dist/middleware.d.ts +1 -1
  50. package/dist/middleware.js +3 -3
  51. package/dist/migrations-LEMFV2ND.cjs +13 -0
  52. package/dist/{migrations-NIEUFG44.cjs.map → migrations-LEMFV2ND.cjs.map} +1 -1
  53. package/dist/migrations-RKQES6XY.js +4 -0
  54. package/dist/{migrations-TGZKJKV4.js.map → migrations-RKQES6XY.js.map} +1 -1
  55. package/dist/{plugin-bootstrap-dYhD9fQR.d.ts → plugin-bootstrap-CB-xaBfK.d.ts} +2 -2
  56. package/dist/{plugin-bootstrap-SHsdjE6X.d.cts → plugin-bootstrap-U-cw9jn3.d.cts} +2 -2
  57. package/dist/plugins.cjs +11 -11
  58. package/dist/plugins.js +2 -2
  59. package/dist/routes.cjs +27 -27
  60. package/dist/routes.d.cts +1 -1
  61. package/dist/routes.d.ts +1 -1
  62. package/dist/routes.js +7 -7
  63. package/dist/services.cjs +16 -16
  64. package/dist/services.d.cts +2 -2
  65. package/dist/services.d.ts +2 -2
  66. package/dist/services.js +2 -2
  67. package/dist/templates.cjs +17 -17
  68. package/dist/templates.js +2 -2
  69. package/dist/types.d.cts +1 -1
  70. package/dist/types.d.ts +1 -1
  71. package/dist/utils.cjs +14 -14
  72. package/dist/utils.d.cts +1 -1
  73. package/dist/utils.d.ts +1 -1
  74. package/dist/utils.js +1 -1
  75. package/migrations/029_ai_search_plugin.sql +45 -0
  76. package/package.json +4 -2
  77. package/dist/chunk-AI2JJIJX.cjs +0 -211
  78. package/dist/chunk-AI2JJIJX.cjs.map +0 -1
  79. package/dist/chunk-AZLU3ROK.cjs.map +0 -1
  80. package/dist/chunk-BHNDALCA.js.map +0 -1
  81. package/dist/chunk-I4V3VZWF.cjs.map +0 -1
  82. package/dist/chunk-ILZ3DP4I.cjs.map +0 -1
  83. package/dist/chunk-OJZ45OJD.js.map +0 -1
  84. package/dist/chunk-QDBNW7KQ.js +0 -209
  85. package/dist/chunk-QDBNW7KQ.js.map +0 -1
  86. package/dist/chunk-SGAG6FD3.js.map +0 -1
  87. package/dist/chunk-UAQL2VWX.cjs.map +0 -1
  88. package/dist/chunk-V5LBQN3I.js.map +0 -1
  89. package/dist/chunk-VEL7QRYI.js.map +0 -1
  90. package/dist/chunk-ZWV3EBZ7.cjs.map +0 -1
  91. package/dist/migrations-NIEUFG44.cjs +0 -13
  92. package/dist/migrations-TGZKJKV4.js +0 -4
package/dist/chunk-EHSZ6TAN.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/templates/components/logo.template.ts","../src/templates/layouts/admin-layout-catalyst.template.ts","../src/templates/alert.template.ts","../src/templates/confirmation-dialog.template.ts","../src/templates/pagination.template.ts","../src/templates/table.template.ts","../src/templates/layouts/admin-layout-v2.template.ts","../src/templates/pages/admin-design.template.ts","../src/templates/pages/admin-checkboxes.template.ts","../src/templates/pages/admin-testimonials-list.template.ts","../src/templates/pages/admin-code-examples-list.template.ts","../src/templates/form.template.ts"],"names":["__esm","__export","renderAdminLayoutCatalyst","__toCommonJS"],"mappings":"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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA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","file":"chunk-EHSZ6TAN.cjs","sourcesContent":["export interface LogoData {\n size?: 'sm' | 'md' | 'lg' | 'xl'\n variant?: 'default' | 'white' | 'dark'\n showText?: boolean\n showVersion?: boolean\n version?: string\n className?: string\n href?: string // Optional link URL\n}\n\nconst sizeClasses = {\n sm: 'h-6 w-auto',\n md: 'h-8 w-auto',\n lg: 'h-12 w-auto',\n xl: 'h-16 w-auto'\n}\n\n\nexport function renderLogo(data: LogoData = {}): string {\n const {\n size = 'md',\n variant = 'default',\n showText = true,\n showVersion = true,\n version,\n className = '',\n href\n } = data\n\n const sizeClass = sizeClasses[size]\n\n // Official SonicJS logo SVG from sonicjs.com\n const logoSvg = `\n <svg class=\"${sizeClass} ${className}\" viewBox=\"380 1300 2250 400\" aria-hidden=\"true\">\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M476.851,1404.673h168.536c4.714,0,8.695-1.618,11.944-4.866c3.241-3.241,4.866-7.222,4.866-11.943 c0-2.357-0.443-4.569-1.327-6.636c-0.885-2.06-2.067-3.829-3.539-5.308c-1.479-1.472-3.249-2.654-5.308-3.538 c-2.067-0.885-4.279-1.327-6.635-1.327H476.851c-20.057,0-37.158,7.154-51.313,21.454c-14.155,14.308-21.233,31.483-21.233,51.534 c0,20.058,7.078,37.234,21.233,51.534c14.155,14.308,31.255,21.454,51.313,21.454h112.357c10.907,0,20.196,3.837,27.868,11.502 c7.666,7.672,11.502,16.885,11.502,27.646c0,10.769-3.836,19.982-11.502,27.647c-7.672,7.673-16.961,11.502-27.868,11.502H421.115 c-4.721,0-8.702,1.624-11.944,4.865c-3.248,3.249-4.866,7.23-4.866,11.944c0,3.248,0.733,6.123,2.212,8.626 c1.472,2.509,3.462,4.499,5.971,5.972c2.502,1.472,5.378,2.212,8.626,2.212h168.094c20.052,0,37.227-7.078,51.534-21.234 c14.3-14.155,21.454-31.331,21.454-51.534c0-20.196-7.154-37.379-21.454-51.534c-14.308-14.156-31.483-21.234-51.534-21.234 H476.851c-10.616,0-19.76-3.905-27.426-11.721c-7.672-7.811-11.501-17.101-11.501-27.87c0-10.761,3.829-19.975,11.501-27.647 C457.091,1408.508,466.235,1404.673,476.851,1404.673z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M974.78,1398.211c-5.016,6.574-10.034,13.146-15.048,19.721c-1.828,2.398-3.657,4.796-5.487,7.194 c1.994,1.719,3.958,3.51,5.873,5.424c18.724,18.731,28.089,41.216,28.089,67.459c0,26.251-9.366,48.658-28.089,67.237 c-18.731,18.579-41.215,27.868-67.459,27.868c-9.848,0-19.156-1.308-27.923-3.923l-4.185,3.354 c-8.587,6.885-17.154,13.796-25.725,20.702c17.52,8.967,36.86,13.487,58.054,13.487c35.533,0,65.91-12.608,91.124-37.821 c25.214-25.215,37.821-55.584,37.821-91.125c0-35.534-12.607-65.911-37.821-91.126 C981.004,1403.663,977.926,1400.854,974.78,1398.211z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M1364.644,1439.619c-4.72,0-8.702,1.624-11.943,4.865c-3.249,3.249-4.866,7.23-4.866,11.944v138.014 l-167.651-211.003c-0.297-0.586-0.74-1.03-1.327-1.326c-4.721-4.714-10.249-7.742-16.588-9.069 c-6.346-1.326-12.608-0.732-18.801,1.77c-6.192,2.509-11.059,6.49-14.598,11.944c-3.539,5.46-5.308,11.577-5.308,18.357v208.348 c0,4.721,1.618,8.703,4.866,11.944c3.241,3.241,7.222,4.865,11.943,4.865c2.945,0,5.751-0.738,8.405-2.211 c2.654-1.472,4.713-3.463,6.193-5.971c1.473-2.503,2.212-5.378,2.212-8.627v-205.251l166.325,209.675 c2.06,2.654,4.423,4.865,7.078,6.635c5.308,3.829,11.349,5.75,18.137,5.75c5.308,0,10.464-1.182,15.482-3.538 c3.539-1.769,6.56-4.127,9.069-7.078c2.502-2.945,4.491-6.338,5.971-10.175c1.473-3.829,2.212-7.664,2.212-11.501v-141.552 c0-4.714-1.624-8.695-4.865-11.944C1373.339,1441.243,1369.359,1439.619,1364.644,1439.619z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M1508.406,1432.983c-2.654-1.472-5.46-2.212-8.404-2.212c-4.721,0-8.703,1.7-11.944,5.087 c-3.249,3.395-4.865,7.3-4.865,11.723v163.228c0,4.721,1.616,8.702,4.865,11.943c3.241,3.249,7.223,4.866,11.944,4.866 c2.944,0,5.751-0.732,8.404-2.212c2.655-1.472,4.714-3.539,6.193-6.194c1.473-2.654,2.213-5.453,2.213-8.404V1447.58 c0-2.945-0.74-5.75-2.213-8.405C1513.12,1436.522,1511.06,1434.462,1508.406,1432.983z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M1499.78,1367.957c-4.575,0-8.481,1.625-11.722,4.866c-3.249,3.249-4.865,7.23-4.865,11.943 c0,2.951,0.732,5.75,2.212,8.405c1.472,2.654,3.463,4.721,5.971,6.193c2.503,1.479,5.378,2.212,8.627,2.212 c4.423,0,8.328-1.618,11.721-4.865c3.387-3.243,5.088-7.224,5.088-11.944c0-4.713-1.701-8.694-5.088-11.943 C1508.33,1369.582,1504.349,1367.957,1499.78,1367.957z\"></path>\n <path fill=\"${variant === 'white' ? '#ffffff' : variant === 'dark' ? '#1f2937' : '#F1F2F2'}\" d=\"M1859.627,1369.727H1747.27c-35.388,0-65.69,12.607-90.904,37.821 c-25.213,25.215-37.82,55.591-37.82,91.125c0,35.54,12.607,65.911,37.82,91.125c25.215,25.215,55.516,37.821,90.904,37.821h56.178 c4.714,0,8.695-1.618,11.944-4.866c3.241-3.241,4.865-7.222,4.865-11.943c0-4.714-1.624-8.695-4.865-11.943 c-3.249-3.243-7.23-4.866-11.944-4.866h-56.178c-26.251,0-48.659-9.359-67.237-28.09c-18.579-18.723-27.868-41.207-27.868-67.459 c0-26.243,9.29-48.659,27.868-67.237c18.579-18.579,40.987-27.868,67.237-27.868h112.357c4.714,0,8.696-1.693,11.944-5.087 c3.241-3.387,4.865-7.368,4.865-11.943c0-4.569-1.624-8.475-4.865-11.723C1868.322,1371.351,1864.341,1369.727,1859.627,1369.727z \"></path>\n <path fill=\"#06b6d4\" d=\"M2219.256,1371.054h-112.357c-4.423,0-8.336,1.624-11.723,4.865c-3.393,3.249-5.087,7.23-5.087,11.944 c0,4.721,1.694,8.702,5.087,11.943c3.387,3.249,7.3,4.866,11.723,4.866h95.547v95.105c0,26.251-9.365,48.659-28.088,67.237 c-18.731,18.579-41.215,27.868-67.459,27.868c-26.251,0-48.659-9.289-67.237-27.868c-18.579-18.579-27.868-40.987-27.868-67.237 c0-4.713-1.701-8.771-5.088-12.165c-3.393-3.387-7.374-5.087-11.943-5.087c-4.575,0-8.481,1.7-11.722,5.087 c-3.249,3.393-4.865,7.451-4.865,12.165c0,35.388,12.607,65.69,37.82,90.904c25.215,25.213,55.584,37.82,91.126,37.82 c35.532,0,65.91-12.607,91.125-37.82c25.214-25.215,37.82-55.516,37.82-90.904v-111.915c0-4.714-1.624-8.695-4.865-11.944 C2227.951,1372.678,2223.971,1371.054,2219.256,1371.054z\"></path>\n <path fill=\"#06b6d4\" d=\"M2574.24,1502.875c-14.306-14.156-31.483-21.234-51.533-21.234H2410.35 c-10.617,0-19.762-3.829-27.426-11.501c-7.672-7.664-11.501-16.954-11.501-27.868c0-10.907,3.829-20.196,11.501-27.868 c7.664-7.664,16.809-11.501,27.426-11.501h112.357c4.714,0,8.695-1.617,11.944-4.866c3.241-3.241,4.865-7.222,4.865-11.943 c0-4.714-1.624-8.695-4.865-11.944c-3.249-3.241-7.23-4.865-11.944-4.865H2410.35c-20.058,0-37.158,7.154-51.313,21.454 c-14.156,14.308-21.232,31.483-21.232,51.534c0,20.058,7.077,37.234,21.232,51.534c14.156,14.308,31.255,21.454,51.313,21.454 h112.357c7.078,0,13.637,1.77,19.684,5.308c6.042,3.539,10.838,8.336,14.377,14.377c3.538,6.047,5.307,12.607,5.307,19.685 c0,10.616-3.835,19.76-11.501,27.425c-7.672,7.673-16.961,11.502-27.868,11.502h-168.094c-4.721,0-8.703,1.7-11.944,5.087 c-3.249,3.393-4.865,7.374-4.865,11.943c0,4.576,1.616,8.481,4.865,11.723c3.241,3.249,7.223,4.866,11.944,4.866h168.094 c20.051,0,37.227-7.078,51.533-21.234c14.302-14.155,21.454-31.331,21.454-51.534 C2595.695,1534.213,2588.542,1517.03,2574.24,1502.875z\"></path>\n <path fill=\"#06b6d4\" d=\"M854.024,1585.195l20.001-16.028c16.616-13.507,33.04-27.265,50.086-40.251 c1.13-0.861,2.9-1.686,2.003-3.516c-0.843-1.716-2.481-2.302-4.484-2.123c-8.514,0.765-17.016-0.538-25.537-0.353 c-1.124,0.024-2.768,0.221-3.163-1.25c-0.371-1.369,1.088-2.063,1.919-2.894c6.26-6.242,12.574-12.43,18.816-18.691 c9.303-9.327,18.565-18.714,27.851-28.066c1.848-1.859,3.701-3.713,5.549-5.572c2.655-2.661,5.309-5.315,7.958-7.982 c0.574-0.579,1.259-1.141,1.246-1.94c-0.004-0.257-0.078-0.538-0.254-0.853c-0.556-0.981-1.441-1.1-2.469-0.957 c-0.658,0.096-1.315,0.185-1.973,0.275c-3.844,0.538-7.689,1.076-11.533,1.608c-3.641,0.505-7.281,1.02-10.922,1.529 c-4.162,0.582-8.324,1.158-12.486,1.748c-1.142,0.161-2.409,1.662-3.354,0.508c-0.419-0.508-0.431-1.028-0.251-1.531 c0.269-0.741,0.957-1.441,1.387-2.021c3.414-4.58,6.882-9.124,10.356-13.662c1.74-2.272,3.48-4.544,5.214-6.822 c4.682-6.141,9.369-12.281,14.051-18.422c0.09-0.119,0.181-0.237,0.271-0.355c6.848-8.98,13.7-17.958,20.553-26.936 c0.488-0.64,0.977-1.28,1.465-1.92c2.159-2.828,4.315-5.658,6.476-8.486c4.197-5.501,8.454-10.954,12.67-16.442 c0.263-0.347,0.538-0.718,0.717-1.106c0.269-0.586,0.299-1.196-0.335-1.776c-0.825-0.753-1.8-0.15-2.595,0.419 c-0.67,0.472-1.333,0.957-1.955,1.489c-2.206,1.889-4.401,3.797-6.595,5.698c-3.958,3.438-7.922,6.876-11.976,10.194 c-2.443,2.003-4.865,4.028-7.301,6.038c-18.689-10.581-39.53-15.906-62.549-15.906c-35.54,0-65.911,12.607-91.125,37.82 c-25.214,25.215-37.821,55.592-37.821,91.126c0,35.54,12.607,65.91,37.821,91.125c4.146,4.146,8.445,7.916,12.87,11.381 c-9.015,11.14-18.036,22.277-27.034,33.429c-1.208,1.489-3.755,3.151-2.745,4.891c0.078,0.144,0.173,0.281,0.305,0.425 c1.321,1.429,3.492-1.303,4.933-2.457c6.673-5.333,13.333-10.685,19.982-16.042c3.707-2.984,7.417-5.965,11.124-8.952 c1.474-1.188,2.951-2.373,4.425-3.561c6.41-5.164,12.816-10.333,19.238-15.481L854.024,1585.195z M797.552,1498.009 c0-26.243,9.29-48.728,27.868-67.459c18.579-18.723,40.987-28.089,67.238-28.089c12.273,0,23.712,2.075,34.34,6.171 c-3.37,2.905-6.734,5.816-10.069,8.762c-6.075,5.351-12.365,10.469-18.667,15.564c-4.179,3.378-8.371,6.744-12.514,10.164 c-7.54,6.23-15.037,12.52-22.529,18.804c-7.091,5.955-14.182,11.904-21.19,17.949c-1.136,0.974-3.055,1.907-2.135,3.94 c0.831,1.836,2.774,1.417,4.341,1.578l12.145-0.599l14.151-0.698c1.031-0.102,2.192-0.257,2.89,0.632 c0.034,0.044,0.073,0.078,0.106,0.127c1.017,1.561-0.67,2.105-1.387,2.942c-6.308,7.318-12.616,14.637-18.978,21.907 c-8.161,9.339-16.353,18.649-24.544,27.958c-2.146,2.433-4.275,4.879-6.422,7.312c-1.034,1.172-2.129,2.272-1.238,3.922 c0.933,1.728,2.685,1.752,4.323,1.602c4.134-0.367,8.263-0.489,12.396-0.492c0.242,0,0.485-0.005,0.728-0.004 c2.711,0.009,5.422,0.068,8.134,0.145c2.582,0.074,5.166,0.165,7.752,0.249c0.275,1.62-0.879,2.356-1.62,3.259 c-1.333,1.626-2.667,3.247-4,4.867c-4.315,5.252-8.62,10.514-12.928,15.772c-3.562-2.725-7.007-5.733-10.324-9.051 C806.842,1546.667,797.552,1524.26,797.552,1498.009z\"></path>\n </svg>\n `\n\n const versionBadge = showVersion && version ? `\n <span class=\"inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium ring-1 ring-inset ${\n variant === 'white'\n ? 'bg-white/10 text-white/80 ring-white/20'\n : 'bg-cyan-50 text-cyan-700 ring-cyan-700/10 dark:bg-cyan-500/10 dark:text-cyan-400 dark:ring-cyan-500/20'\n }\">\n ${version}\n </span>\n ` : ''\n\n const logoContent = showText ? `\n <div class=\"flex items-center gap-2 ${className}\">\n ${logoSvg}\n ${versionBadge}\n </div>\n ` : logoSvg\n\n // Wrap in link if href is provided\n if (href) {\n return `<a href=\"${href}\" class=\"inline-block hover:opacity-80 transition-opacity\">${logoContent}</a>`\n }\n\n return logoContent\n}","import { HtmlEscapedString } from \"hono/utils/html\";\nimport { renderLogo } from \"../components/logo.template\";\n\n// Catalyst Checkbox Component (HTML implementation)\nexport interface CatalystCheckboxProps {\n id: string;\n name: string;\n checked?: boolean;\n disabled?: boolean;\n label?: string;\n description?: string;\n color?:\n | \"dark/zinc\"\n | \"dark/white\"\n | \"white\"\n | \"dark\"\n | \"zinc\"\n | \"blue\"\n | \"green\"\n | \"red\";\n className?: string;\n}\n\nexport function renderCatalystCheckbox(props: CatalystCheckboxProps): string {\n const {\n id,\n name,\n checked = false,\n disabled = false,\n label,\n description,\n color = \"dark/zinc\",\n className = \"\",\n } = props;\n\n const colorConfig = {\n \"dark/zinc\": {\n bg: \"#18181b\",\n border: \"#09090b\",\n check: \"#ffffff\",\n darkBg: \"#52525b\",\n },\n \"dark/white\": {\n bg: \"#18181b\",\n border: \"#09090b\",\n check: \"#ffffff\",\n darkBg: \"#ffffff\",\n darkCheck: \"#18181b\",\n },\n white: { bg: \"#ffffff\", border: \"#09090b\", check: \"#18181b\" },\n dark: { bg: \"#18181b\", border: \"#09090b\", check: \"#ffffff\" },\n zinc: { bg: \"#52525b\", border: \"#3f3f46\", check: \"#ffffff\" },\n blue: { bg: \"#2563eb\", border: \"#1d4ed8\", check: \"#ffffff\" },\n green: { bg: \"#16a34a\", border: \"#15803d\", check: \"#ffffff\" },\n red: { bg: \"#dc2626\", border: \"#b91c1c\", check: \"#ffffff\" },\n };\n\n const _config = colorConfig[color] || colorConfig[\"dark/zinc\"];\n\n const colorClasses = {\n \"dark/zinc\":\n \"peer-checked:bg-zinc-900 peer-checked:before:bg-zinc-900 dark:peer-checked:bg-zinc-600\",\n \"dark/white\":\n \"peer-checked:bg-zinc-900 peer-checked:before:bg-zinc-900 dark:peer-checked:bg-white\",\n white: \"peer-checked:bg-white peer-checked:before:bg-white\",\n dark: \"peer-checked:bg-zinc-900 peer-checked:before:bg-zinc-900\",\n zinc: \"peer-checked:bg-zinc-600 peer-checked:before:bg-zinc-600\",\n blue: \"peer-checked:bg-blue-600 peer-checked:before:bg-blue-600\",\n green: \"peer-checked:bg-green-600 peer-checked:before:bg-green-600\",\n red: \"peer-checked:bg-red-600 peer-checked:before:bg-red-600\",\n };\n\n const checkColor =\n color === \"dark/white\" ? \"dark:text-zinc-900\" : \"text-white\";\n\n const baseClasses = `\n relative isolate flex w-4 h-4 items-center justify-center rounded-[0.3125rem]\n before:absolute before:inset-0 before:-z-10 before:rounded-[calc(0.3125rem-1px)] before:bg-white before:shadow-sm\n dark:before:hidden\n dark:bg-white/5\n border border-zinc-950/15 peer-checked:border-transparent\n dark:border-white/15 dark:peer-checked:border-white/5\n peer-focus:outline peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-blue-500\n peer-disabled:opacity-50\n peer-disabled:border-zinc-950/25 peer-disabled:bg-zinc-950/5\n dark:peer-disabled:border-white/20 dark:peer-disabled:bg-white/2.5\n `\n .trim()\n .replace(/\\s+/g, \" \");\n\n const checkIconClasses = `\n w-4 h-4 opacity-0 peer-checked:opacity-100 pointer-events-none\n `\n .trim()\n .replace(/\\s+/g, \" \");\n\n if (description) {\n // Field layout with description\n return `\n <div class=\"grid grid-cols-[1.125rem_1fr] gap-x-4 gap-y-1 sm:grid-cols-[1rem_1fr] ${className}\">\n <div class=\"col-start-1 row-start-1 mt-0.75 sm:mt-1\">\n <input\n type=\"checkbox\"\n id=\"${id}\"\n name=\"${name}\"\n ${checked ? \"checked\" : \"\"}\n ${disabled ? \"disabled\" : \"\"}\n class=\"peer sr-only\"\n />\n <label for=\"${id}\" class=\"inline-flex cursor-pointer\">\n <span class=\"${baseClasses} ${colorClasses[color] || colorClasses[\"dark/zinc\"]}\">\n <svg class=\"${checkIconClasses} ${checkColor}\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n </label>\n </div>\n ${label ? `<label for=\"${id}\" class=\"col-start-2 row-start-1 text-sm/6 font-medium text-zinc-950 dark:text-white cursor-pointer\">${label}</label>` : \"\"}\n ${description ? `<p class=\"col-start-2 row-start-2 text-sm/6 text-zinc-500 dark:text-zinc-400\">${description}</p>` : \"\"}\n </div>\n `;\n } else {\n // Simple checkbox with optional label\n return `\n <label class=\"inline-flex items-center gap-3 cursor-pointer ${className}\">\n <input\n type=\"checkbox\"\n id=\"${id}\"\n name=\"${name}\"\n ${checked ? \"checked\" : \"\"}\n ${disabled ? \"disabled\" : \"\"}\n class=\"peer sr-only\"\n />\n <span class=\"${baseClasses} ${colorClasses[color] || colorClasses[\"dark/zinc\"]}\">\n <svg class=\"${checkIconClasses} ${checkColor}\" viewBox=\"0 0 14 14\" fill=\"none\" stroke=\"currentColor\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n ${label ? `<span class=\"text-sm/6 font-medium text-zinc-950 dark:text-white\">${label}</span>` : \"\"}\n </label>\n `;\n }\n}\n\nexport interface AdminLayoutCatalystData {\n title: string;\n pageTitle?: string;\n currentPath?: string;\n version?: string;\n enableExperimentalFeatures?: boolean;\n user?: {\n name: string;\n email: string;\n role: string;\n };\n scripts?: string[];\n styles?: string[];\n content: string | HtmlEscapedString;\n dynamicMenuItems?: Array<{\n label: string;\n path: string;\n icon: string;\n }>;\n}\n\nexport function renderAdminLayoutCatalyst(\n data: AdminLayoutCatalystData\n): string {\n return `<!DOCTYPE html>\n<html lang=\"en\" class=\"dark\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${data.title} - SonicJS AI Admin</title>\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\">\n\n <!-- Tailwind CSS -->\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n colors: {\n zinc: {\n 50: '#fafafa',\n 100: '#f4f4f5',\n 200: '#e4e4e7',\n 300: '#d4d4d8',\n 400: '#a1a1aa',\n 500: '#71717a',\n 600: '#52525b',\n 700: '#3f3f46',\n 800: '#27272a',\n 900: '#18181b',\n 950: '#09090b'\n }\n }\n }\n }\n }\n </script>\n\n <!-- Additional Styles -->\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n /* Custom scrollbar */\n ::-webkit-scrollbar {\n width: 8px;\n height: 8px;\n }\n\n ::-webkit-scrollbar-track {\n background: #27272a;\n }\n\n ::-webkit-scrollbar-thumb {\n background: #52525b;\n border-radius: 4px;\n }\n\n ::-webkit-scrollbar-thumb:hover {\n background: #71717a;\n }\n\n /* Smooth transitions */\n * {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n }\n </style>\n\n <!-- Scripts -->\n <script src=\"https://unpkg.com/htmx.org@2.0.3\"></script>\n <script src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\" defer></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js\"></script>\n\n ${\n data.styles\n ? data.styles\n .map((style) => `<link rel=\"stylesheet\" href=\"${style}\">`)\n .join(\"\\n \")\n : \"\"\n }\n ${\n data.scripts\n ? data.scripts\n .map((script) => `<script src=\"${script}\"></script>`)\n .join(\"\\n \")\n : \"\"\n }\n</head>\n<body class=\"min-h-screen bg-white dark:bg-zinc-900\">\n <div class=\"relative isolate flex min-h-svh w-full max-lg:flex-col lg:bg-zinc-100 dark:lg:bg-zinc-950\">\n <!-- Sidebar on desktop -->\n <div class=\"fixed inset-y-0 left-0 w-64 max-lg:hidden\">\n ${renderCatalystSidebar(\n data.currentPath,\n data.user,\n data.dynamicMenuItems,\n false,\n data.version,\n data.enableExperimentalFeatures\n )}\n </div>\n\n <!-- Mobile sidebar (hidden by default) -->\n <div id=\"mobile-sidebar-overlay\" class=\"fixed inset-0 bg-black/30 lg:hidden hidden z-40\" onclick=\"closeMobileSidebar()\"></div>\n <div id=\"mobile-sidebar\" class=\"fixed inset-y-0 left-0 w-80 transform -translate-x-full transition-transform duration-300 ease-in-out lg:hidden z-50\">\n ${renderCatalystSidebar(\n data.currentPath,\n data.user,\n data.dynamicMenuItems,\n true,\n data.version,\n data.enableExperimentalFeatures\n )}\n </div>\n\n <!-- Main content area -->\n <main class=\"flex flex-1 flex-col pb-2 lg:min-w-0 lg:pr-2 lg:pl-64\">\n <!-- Mobile header with menu toggle -->\n <header class=\"flex items-center px-4 py-2.5 lg:hidden border-b border-zinc-950/5 dark:border-white/5\">\n <button onclick=\"openMobileSidebar()\" class=\"relative flex items-center justify-center rounded-lg p-2 text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\" aria-label=\"Open navigation\">\n <svg class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z\" />\n </svg>\n </button>\n <div class=\"ml-4 flex-1\">\n ${renderLogo({ size: \"sm\", showText: true, variant: \"white\", version: data.version, href: \"/admin\" })}\n </div>\n </header>\n\n <!-- Content -->\n <div class=\"grow p-6 lg:rounded-lg lg:bg-white lg:p-10 lg:shadow-sm lg:ring-1 lg:ring-zinc-950/5 dark:lg:bg-zinc-900 dark:lg:ring-white/10\">\n ${data.content}\n </div>\n </main>\n </div>\n\n <!-- Notification Container -->\n <div id=\"notification-container\" class=\"fixed top-4 right-4 z-50 space-y-2\"></div>\n\n <!-- Migration Warning Banner (hidden by default) -->\n <div id=\"migration-banner\" class=\"hidden fixed top-0 left-0 right-0 z-50 bg-amber-500 dark:bg-amber-600 shadow-lg\">\n <div class=\"max-w-7xl mx-auto px-4 py-3 sm:px-6 lg:px-8\">\n <div class=\"flex items-center justify-between flex-wrap\">\n <div class=\"flex items-center flex-1\">\n <span class=\"flex p-2 rounded-lg bg-amber-600 dark:bg-amber-700\">\n <svg class=\"h-5 w-5 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"/>\n </svg>\n </span>\n <div class=\"ml-3\">\n <p class=\"text-sm font-medium text-white\">\n <span id=\"migration-count\"></span> pending database migration(s) detected\n </p>\n <p class=\"text-xs text-amber-100 dark:text-amber-200 mt-1\">\n Run: <code class=\"bg-amber-700 dark:bg-amber-800 px-2 py-0.5 rounded font-mono text-white\">wrangler d1 migrations apply DB --local</code>\n </p>\n </div>\n </div>\n <div class=\"flex items-center gap-2\">\n <a href=\"/admin/settings/migrations\" class=\"text-xs font-semibold text-white hover:text-amber-100 underline\">\n View Details\n </a>\n <button onclick=\"closeMigrationBanner()\" class=\"p-1 rounded-md text-white hover:bg-amber-600 dark:hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-white\">\n <svg class=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n </svg>\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <script>\n // Mobile sidebar toggle\n function openMobileSidebar() {\n const sidebar = document.getElementById('mobile-sidebar');\n const overlay = document.getElementById('mobile-sidebar-overlay');\n sidebar.classList.remove('-translate-x-full');\n overlay.classList.remove('hidden');\n }\n\n function closeMobileSidebar() {\n const sidebar = document.getElementById('mobile-sidebar');\n const overlay = document.getElementById('mobile-sidebar-overlay');\n sidebar.classList.add('-translate-x-full');\n overlay.classList.add('hidden');\n }\n\n // User dropdown toggle\n function toggleUserDropdown() {\n const dropDowns = document.querySelectorAll('.userDropdown');\n dropDowns.forEach(dropdown => {\n dropdown.classList.toggle('hidden');\n });\n }\n\n // Close dropdown when clicking outside\n document.addEventListener('click', function(event) {\n const dropdown = document.getElementById('userDropdown');\n const button = event.target.closest('[data-user-menu]');\n if (!button && dropdown && !dropdown.contains(event.target)) {\n dropdown.classList.add('hidden');\n }\n });\n\n // Show notification\n function showNotification(message, type = 'info') {\n const container = document.getElementById('notification-container');\n const notification = document.createElement('div');\n const colors = {\n success: 'bg-green-50 dark:bg-green-500/10 text-green-700 dark:text-green-400 ring-green-600/20 dark:ring-green-500/20',\n error: 'bg-red-50 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-red-600/20 dark:ring-red-500/20',\n warning: 'bg-amber-50 dark:bg-amber-500/10 text-amber-700 dark:text-amber-400 ring-amber-600/20 dark:ring-amber-500/20',\n info: 'bg-blue-50 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 ring-blue-600/20 dark:ring-blue-500/20'\n };\n\n notification.className = \\`rounded-lg p-4 ring-1 \\${colors[type] || colors.info} max-w-sm shadow-lg\\`;\n notification.innerHTML = \\`\n <div class=\"flex items-center justify-between\">\n <span class=\"text-sm\">\\${message}</span>\n <button onclick=\"this.parentElement.parentElement.remove()\" class=\"ml-4 hover:opacity-70\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"></path>\n </svg>\n </button>\n </div>\n \\`;\n\n container.appendChild(notification);\n\n // Auto remove after 5 seconds\n setTimeout(() => {\n if (notification.parentElement) {\n notification.remove();\n }\n }, 5000);\n }\n\n // Initialize dark mode\n if (localStorage.getItem('darkMode') === 'false') {\n document.documentElement.classList.remove('dark');\n }\n\n // Migration banner functions\n function closeMigrationBanner() {\n const banner = document.getElementById('migration-banner');\n if (banner) {\n banner.classList.add('hidden');\n // Store in session storage so it doesn't show again during this session\n sessionStorage.setItem('migrationBannerDismissed', 'true');\n }\n }\n\n // Check for pending migrations on page load\n async function checkPendingMigrations() {\n // Don't check if user dismissed the banner in this session\n if (sessionStorage.getItem('migrationBannerDismissed') === 'true') {\n return;\n }\n\n try {\n const response = await fetch('/admin/api/migrations/status');\n if (response.ok) {\n const data = await response.json();\n if (data.success && data.data && data.data.pendingMigrations > 0) {\n const banner = document.getElementById('migration-banner');\n const countElement = document.getElementById('migration-count');\n if (banner && countElement) {\n countElement.textContent = data.data.pendingMigrations;\n banner.classList.remove('hidden');\n }\n }\n }\n } catch (error) {\n console.error('Failed to check migration status:', error);\n }\n }\n\n // Check for pending migrations when the page loads\n document.addEventListener('DOMContentLoaded', checkPendingMigrations);\n </script>\n</body>\n</html>`;\n}\n\nfunction renderCatalystSidebar(\n currentPath: string = \"\",\n user?: any,\n dynamicMenuItems?: Array<{ label: string; path: string; icon: string }>,\n isMobile: boolean = false,\n version?: string,\n enableExperimentalFeatures?: boolean\n): string {\n let baseMenuItems = [\n {\n label: \"Dashboard\",\n path: \"/admin\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z\"/>\n </svg>`,\n },\n {\n label: \"Collections\",\n path: \"/admin/collections\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z\"/>\n </svg>`,\n },\n {\n label: \"Content\",\n path: \"/admin/content\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z\" clip-rule=\"evenodd\"/>\n </svg>`,\n },\n {\n label: \"Media\",\n path: \"/admin/media\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z\" clip-rule=\"evenodd\"/>\n </svg>`,\n },\n {\n label: \"Users\",\n path: \"/admin/users\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z\"/>\n </svg>`,\n },\n {\n label: \"Plugins\",\n path: \"/admin/plugins\",\n icon: `<svg class=\"h-5 w-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"/>\n </svg>`,\n },\n {\n label: \"Cache\",\n path: \"/admin/cache\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 11-2 0 1 1 0 012 0zM2 13a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2zm14 1a1 1 0 11-2 0 1 1 0 012 0z\" clip-rule=\"evenodd\"/>\n </svg>`,\n },\n ];\n\n const settingsMenuItem = {\n label: \"Settings\",\n path: \"/admin/settings\",\n icon: `<svg class=\"h-5 w-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z\" clip-rule=\"evenodd\"/>\n </svg>`,\n };\n\n // Combine base menu items with dynamic menu items\n const allMenuItems = [...baseMenuItems];\n if (dynamicMenuItems && dynamicMenuItems.length > 0) {\n // Insert dynamic menu items after Users menu item\n const usersIndex = allMenuItems.findIndex(\n (item) => item.path === \"/admin/users\"\n );\n if (usersIndex !== -1) {\n allMenuItems.splice(usersIndex + 1, 0, ...dynamicMenuItems);\n } else {\n // Fallback: add to end if Users not found\n allMenuItems.push(...dynamicMenuItems);\n }\n }\n\n const closeButton = isMobile\n ? `\n <div class=\"-mb-3 px-4 pt-3\">\n <button onclick=\"closeMobileSidebar()\" class=\"relative flex w-full items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5 sm:text-sm/5\" aria-label=\"Close navigation\">\n <svg class=\"h-5 w-5 shrink-0 fill-zinc-500 dark:fill-zinc-400\" viewBox=\"0 0 20 20\">\n <path d=\"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" />\n </svg>\n <span>Close menu</span>\n </button>\n </div>\n `\n : \"\";\n\n return `\n <nav class=\"flex h-full min-h-0 flex-col bg-white shadow-sm ring-1 ring-zinc-950/5 dark:bg-zinc-900 dark:ring-white/10 ${\n isMobile ? \"is-mobile rounded-lg p-2 m-2\" : \"\"\n }\">\n ${closeButton}\n\n <!-- Sidebar Header -->\n <div class=\"flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5\">\n ${renderLogo({ size: \"md\", showText: true, variant: \"white\", version, href: \"/admin\" })}\n </div>\n\n <!-- Sidebar Body -->\n <div class=\"flex flex-1 flex-col overflow-y-auto p-4\">\n <div class=\"flex flex-col gap-0.5\">\n ${allMenuItems\n .map((item) => {\n const isActive =\n currentPath === item.path ||\n (item.path !== \"/admin\" && currentPath?.startsWith(item.path));\n return `\n <span class=\"relative\">\n ${\n isActive\n ? `\n <span class=\"absolute inset-y-2 -left-4 w-0.5 rounded-full bg-cyan-500 dark:bg-cyan-400\"></span>\n `\n : \"\"\n }\n <a\n href=\"${item.path}\"\n class=\"flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-sm/5 font-medium ${\n isActive\n ? \"text-zinc-950 dark:text-white\"\n : \"text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\"\n }\"\n ${isActive ? 'data-current=\"true\"' : \"\"}\n >\n <span class=\"shrink-0 ${\n isActive\n ? \"fill-zinc-950 dark:fill-white\"\n : \"fill-zinc-500 dark:fill-zinc-400\"\n }\">\n ${item.icon}\n </span>\n <span class=\"truncate\">${item.label}</span>\n </a>\n </span>\n `;\n })\n .join(\"\")}\n </div>\n </div>\n\n <!-- Settings Menu Item (Bottom) -->\n <div class=\"border-t border-zinc-950/5 p-4 dark:border-white/5\">\n ${(() => {\n const isActive =\n currentPath === settingsMenuItem.path ||\n currentPath?.startsWith(settingsMenuItem.path);\n return `\n <span class=\"relative\">\n ${\n isActive\n ? `\n <span class=\"absolute inset-y-2 -left-4 w-0.5 rounded-full bg-cyan-500 dark:bg-cyan-400\"></span>\n `\n : \"\"\n }\n <a\n href=\"${settingsMenuItem.path}\"\n class=\"flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-sm/5 font-medium ${\n isActive\n ? \"text-zinc-950 dark:text-white\"\n : \"text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\"\n }\"\n ${isActive ? 'data-current=\"true\"' : \"\"}\n >\n <span class=\"shrink-0 ${\n isActive\n ? \"fill-zinc-950 dark:fill-white\"\n : \"fill-zinc-500 dark:fill-zinc-400\"\n }\">\n ${settingsMenuItem.icon}\n </span>\n <span class=\"truncate\">${settingsMenuItem.label}</span>\n </a>\n </span>\n `;\n })()}\n </div>\n\n <!-- Sidebar Footer (User) -->\n ${\n user\n ? `\n <div class=\"flex flex-col border-t border-zinc-950/5 p-4 dark:border-white/5\">\n <div class=\"relative\">\n <button\n data-user-menu\n onclick=\"toggleUserDropdown()\"\n class=\"flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-sm/5 font-medium text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\"\n >\n <div class=\"flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-zinc-950 text-white dark:bg-white dark:text-zinc-950\">\n <span class=\"text-xs font-semibold\">${(\n user.name ||\n user.email ||\n \"U\"\n )\n .charAt(0)\n .toUpperCase()}</span>\n </div>\n <span class=\"flex-1 truncate\">${\n user.name || user.email || \"User\"\n }</span>\n <svg class=\"h-4 w-4 shrink-0 fill-zinc-500 dark:fill-zinc-400\" viewBox=\"0 0 20 20\">\n <path d=\"M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z\" />\n </svg>\n </button>\n\n <!-- User Dropdown -->\n <div class=\"userDropdown hidden absolute bottom-full mb-2 left-0 right-0 mx-2 rounded-xl bg-white shadow-lg ring-1 ring-zinc-950/10 dark:bg-zinc-800 dark:ring-white/10 z-50\">\n <div class=\"p-2\">\n <div class=\"px-3 py-2 border-b border-zinc-950/5 dark:border-white/5\">\n <p class=\"text-sm font-medium text-zinc-950 dark:text-white\">${\n user.name || user.email || \"User\"\n }</p>\n <p class=\"text-xs text-zinc-500 dark:text-zinc-400\">${\n user.email || \"\"\n }</p>\n </div>\n <a href=\"/admin/profile\" class=\"flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-zinc-950 hover:bg-zinc-950/5 dark:text-white dark:hover:bg-white/5\">\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"/>\n </svg>\n My Profile\n </a>\n <a href=\"/auth/logout\" class=\"flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-500/10\">\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1\"/>\n </svg>\n Sign Out\n </a>\n </div>\n </div>\n </div>\n </div>\n `\n : \"\"\n }\n </nav>\n `;\n}\n","export type AlertType = 'success' | 'error' | 'warning' | 'info'\n\nexport interface AlertData {\n type: AlertType\n title?: string\n message: string\n dismissible?: boolean\n className?: string\n icon?: boolean\n}\n\nexport function renderAlert(data: AlertData): string {\n const typeClasses = {\n success: 'bg-green-50 dark:bg-green-500/10 border border-green-600/20 dark:border-green-500/20',\n error: 'bg-error/10 border border-red-600/20 dark:border-red-500/20',\n warning: 'bg-amber-50 dark:bg-amber-500/10 border border-amber-600/20 dark:border-amber-500/20',\n info: 'bg-blue-50 dark:bg-blue-500/10 border border-blue-600/20 dark:border-blue-500/20'\n }\n\n const iconClasses = {\n success: 'text-green-600 dark:text-green-400',\n error: 'text-red-600 dark:text-red-400',\n warning: 'text-amber-600 dark:text-amber-400',\n info: 'text-blue-600 dark:text-blue-400'\n }\n\n const textClasses = {\n success: 'text-green-900 dark:text-green-300',\n error: 'text-red-900 dark:text-red-300',\n warning: 'text-amber-900 dark:text-amber-300',\n info: 'text-blue-900 dark:text-blue-300'\n }\n\n const messageTextClasses = {\n success: 'text-green-700 dark:text-green-400',\n error: 'text-red-700 dark:text-red-400',\n warning: 'text-amber-700 dark:text-amber-400',\n info: 'text-blue-700 dark:text-blue-400'\n }\n\n const icons = {\n success: `<path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\" />`,\n error: `<path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\" />`,\n warning: `<path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\" />`,\n info: `<path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\" />`\n }\n\n return `\n <div class=\"rounded-lg p-4 ${typeClasses[data.type]} ${data.className || ''}\" ${data.dismissible ? 'id=\"dismissible-alert\"' : ''}>\n <div class=\"flex\">\n ${data.icon !== false ? `\n <div class=\"flex-shrink-0\">\n <svg class=\"h-5 w-5 ${iconClasses[data.type]}\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n ${icons[data.type]}\n </svg>\n </div>\n ` : ''}\n <div class=\"${data.icon !== false ? 'ml-3' : ''}\">\n ${data.title ? `\n <h3 class=\"text-sm font-semibold ${textClasses[data.type]}\">\n ${data.title}\n </h3>\n ` : ''}\n <div class=\"${data.title ? 'mt-1 text-sm' : 'text-sm'} ${messageTextClasses[data.type]}\">\n <p>${data.message}</p>\n </div>\n </div>\n ${data.dismissible ? `\n <div class=\"ml-auto pl-3\">\n <div class=\"-mx-1.5 -my-1.5\">\n <button\n type=\"button\"\n class=\"inline-flex rounded-md p-1.5 ${iconClasses[data.type]} hover:bg-opacity-20 focus:outline-none focus:ring-2 focus:ring-offset-2\"\n onclick=\"document.getElementById('dismissible-alert').remove()\"\n >\n <span class=\"sr-only\">Dismiss</span>\n <svg class=\"h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\" />\n </svg>\n </button>\n </div>\n </div>\n ` : ''}\n </div>\n </div>\n `\n}\n\nexport function renderSuccessAlert(message: string, title?: string): string {\n return renderAlert({ type: 'success', message, title })\n}\n\nexport function renderErrorAlert(message: string, title?: string): string {\n return renderAlert({ type: 'error', message, title })\n}\n\nexport function renderWarningAlert(message: string, title?: string): string {\n return renderAlert({ type: 'warning', message, title })\n}\n\nexport function renderInfoAlert(message: string, title?: string): string {\n return renderAlert({ type: 'info', message, title })\n}","export interface ConfirmationDialogOptions {\n id: string\n title: string\n message: string\n confirmText?: string\n cancelText?: string\n confirmClass?: string\n iconColor?: 'red' | 'yellow' | 'blue'\n onConfirm?: string // JavaScript code to execute on confirm\n}\n\nexport function renderConfirmationDialog(options: ConfirmationDialogOptions): string {\n const {\n id,\n title,\n message,\n confirmText = 'Confirm',\n cancelText = 'Cancel',\n confirmClass = 'bg-red-500 hover:bg-red-400',\n iconColor = 'red',\n onConfirm = ''\n } = options\n\n const iconColorClasses = {\n red: 'bg-red-500/10 text-red-400',\n yellow: 'bg-yellow-500/10 text-yellow-400',\n blue: 'bg-blue-500/10 text-blue-400'\n }\n\n return `\n <el-dialog>\n <dialog\n id=\"${id}\"\n aria-labelledby=\"${id}-title\"\n class=\"fixed inset-0 m-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent p-0 backdrop:bg-transparent\"\n >\n <el-dialog-backdrop class=\"fixed inset-0 bg-gray-900/50 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in\"></el-dialog-backdrop>\n\n <div tabindex=\"0\" class=\"flex min-h-full items-end justify-center p-4 text-center focus:outline focus:outline-0 sm:items-center sm:p-0\">\n <el-dialog-panel class=\"relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl outline outline-1 -outline-offset-1 outline-white/10 transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in sm:my-8 sm:w-full sm:max-w-lg sm:p-6 data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95\">\n <div class=\"sm:flex sm:items-start\">\n <div class=\"mx-auto flex size-12 shrink-0 items-center justify-center rounded-full ${iconColorClasses[iconColor]} sm:mx-0 sm:size-10\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" data-slot=\"icon\" aria-hidden=\"true\" class=\"size-6\">\n <path d=\"M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n </svg>\n </div>\n <div class=\"mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left\">\n <h3 id=\"${id}-title\" class=\"text-base font-semibold text-white\">${title}</h3>\n <div class=\"mt-2\">\n <p class=\"text-sm text-gray-400\">${message}</p>\n </div>\n </div>\n </div>\n <div class=\"mt-5 sm:mt-4 sm:flex sm:flex-row-reverse\">\n <button\n type=\"button\"\n onclick=\"${onConfirm}; document.getElementById('${id}').close()\"\n command=\"close\"\n commandfor=\"${id}\"\n class=\"confirm-button inline-flex w-full justify-center rounded-md ${confirmClass} px-3 py-2 text-sm font-semibold text-white sm:ml-3 sm:w-auto\"\n >\n ${confirmText}\n </button>\n <button\n type=\"button\"\n command=\"close\"\n commandfor=\"${id}\"\n class=\"mt-3 inline-flex w-full justify-center rounded-md bg-white/10 px-3 py-2 text-sm font-semibold text-white ring-1 ring-inset ring-white/5 hover:bg-white/20 sm:mt-0 sm:w-auto\"\n >\n ${cancelText}\n </button>\n </div>\n </el-dialog-panel>\n </div>\n </dialog>\n </el-dialog>\n `\n}\n\n/**\n * Helper function to show a confirmation dialog programmatically\n * Usage in templates: Add this script and call showConfirmDialog()\n */\nexport function getConfirmationDialogScript(): string {\n return `\n <script src=\"https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1\" type=\"module\"></script>\n <script>\n function showConfirmDialog(dialogId) {\n const dialog = document.getElementById(dialogId);\n if (dialog) {\n dialog.showModal();\n }\n }\n </script>\n `\n}\n","export interface PaginationData {\n currentPage: number\n totalPages: number\n totalItems: number\n itemsPerPage: number\n startItem: number\n endItem: number\n baseUrl: string\n queryParams?: Record<string, string>\n showPageNumbers?: boolean\n maxPageNumbers?: number\n showPageSizeSelector?: boolean\n pageSizeOptions?: number[]\n}\n\nexport function renderPagination(data: PaginationData): string {\n // Show pagination if there are multiple pages OR if page size selector is enabled\n const shouldShowPagination = data.totalPages > 1 || (data.showPageSizeSelector !== false && data.totalItems > 0)\n\n if (!shouldShowPagination) {\n return ''\n }\n\n const buildUrl = (page: number, limit?: number): string => {\n const params = new URLSearchParams(data.queryParams || {})\n params.set('page', page.toString())\n if (limit) {\n params.set('limit', limit.toString())\n } else if (data.itemsPerPage !== 20) {\n params.set('limit', data.itemsPerPage.toString())\n }\n return `${data.baseUrl}?${params.toString()}`\n }\n\n const buildPageSizeUrl = (limit: number): string => {\n const params = new URLSearchParams(data.queryParams || {})\n params.set('page', '1') // Reset to page 1 when changing page size\n params.set('limit', limit.toString())\n return `${data.baseUrl}?${params.toString()}`\n }\n\n const generatePageNumbers = (): number[] => {\n const maxNumbers = data.maxPageNumbers || 5\n const half = Math.floor(maxNumbers / 2)\n let start = Math.max(1, data.currentPage - half)\n let end = Math.min(data.totalPages, start + maxNumbers - 1)\n\n // Adjust start if we're near the end\n if (end - start + 1 < maxNumbers) {\n start = Math.max(1, end - maxNumbers + 1)\n }\n\n const pages: number[] = []\n for (let i = start; i <= end; i++) {\n pages.push(i)\n }\n return pages\n }\n\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 px-4 py-3 flex items-center justify-between mt-4\">\n ${data.totalPages > 1 ? `\n <!-- Mobile Pagination -->\n <div class=\"flex-1 flex justify-between sm:hidden\">\n ${data.currentPage > 1 ? `\n <a href=\"${buildUrl(data.currentPage - 1)}\" 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 shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\">\n Previous\n </a>\n ` : `\n <span class=\"inline-flex items-center rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-400 dark:text-zinc-600 shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 opacity-50 cursor-not-allowed\">Previous</span>\n `}\n\n ${data.currentPage < data.totalPages ? `\n <a href=\"${buildUrl(data.currentPage + 1)}\" 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 shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\">\n Next\n </a>\n ` : `\n <span class=\"inline-flex items-center rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-400 dark:text-zinc-600 shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 opacity-50 cursor-not-allowed\">Next</span>\n `}\n </div>\n ` : ''}\n\n <!-- Desktop Pagination -->\n <div class=\"hidden sm:flex-1 sm:flex sm:items-center sm:justify-between\">\n <div class=\"flex items-center gap-4\">\n <p class=\"text-sm text-zinc-500 dark:text-zinc-400\">\n Showing <span class=\"font-medium text-zinc-950 dark:text-white\">${data.startItem}</span> to\n <span class=\"font-medium text-zinc-950 dark:text-white\">${data.endItem}</span> of\n <span class=\"font-medium text-zinc-950 dark:text-white\">${data.totalItems}</span> results\n </p>\n ${data.showPageSizeSelector !== false ? `\n <div class=\"flex items-center gap-2\">\n <label for=\"page-size\" class=\"text-sm text-zinc-500 dark:text-zinc-400\">Per page:</label>\n <div class=\"grid grid-cols-1\">\n <select\n id=\"page-size\"\n onchange=\"window.location.href = this.value\"\n class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-sm text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-zinc-500/30 dark:outline-zinc-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-zinc-500 dark:focus-visible:outline-zinc-400\"\n >\n ${(data.pageSizeOptions || [10, 20, 50, 100]).map(size => `\n <option value=\"${buildPageSizeUrl(size)}\" ${size === data.itemsPerPage ? 'selected' : ''}>\n ${size}\n </option>\n `).join('')}\n </select>\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-4 self-center justify-self-end text-zinc-600 dark:text-zinc-400\">\n <path d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" fill-rule=\"evenodd\" />\n </svg>\n </div>\n </div>\n ` : ''}\n </div>\n\n ${data.totalPages > 1 ? `\n <div class=\"flex items-center gap-x-1\">\n <!-- Previous Button -->\n ${data.currentPage > 1 ? `\n <a href=\"${buildUrl(data.currentPage - 1)}\"\n class=\"rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\">\n Previous\n </a>\n ` : ''}\n\n <!-- Page Numbers -->\n ${data.showPageNumbers !== false ? `\n <!-- First page if not in range -->\n ${(() => {\n const pageNumbers = generatePageNumbers()\n const firstPage = pageNumbers.length > 0 ? pageNumbers[0] : null\n return firstPage && firstPage > 1 ? `\n <a href=\"${buildUrl(1)}\"\n class=\"rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\">\n 1\n </a>\n ${firstPage > 2 ? `\n <span class=\"px-2 text-sm text-zinc-500 dark:text-zinc-400\">...</span>\n ` : ''}\n ` : ''\n })()}\n\n <!-- Page number buttons -->\n ${generatePageNumbers().map(pageNum => `\n ${pageNum === data.currentPage ? `\n <span class=\"rounded-lg bg-zinc-950 dark:bg-white px-3 py-2 text-sm font-semibold text-white dark:text-zinc-950\">\n ${pageNum}\n </span>\n ` : `\n <a href=\"${buildUrl(pageNum)}\"\n class=\"rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\">\n ${pageNum}\n </a>\n `}\n `).join('')}\n\n <!-- Last page if not in range -->\n ${(() => {\n const pageNumbers = generatePageNumbers()\n const lastPageNum = pageNumbers.length > 0 ? pageNumbers.slice(-1)[0] : null\n return lastPageNum && lastPageNum < data.totalPages ? `\n ${lastPageNum < data.totalPages - 1 ? `\n <span class=\"px-2 text-sm text-zinc-500 dark:text-zinc-400\">...</span>\n ` : ''}\n <a href=\"${buildUrl(data.totalPages)}\"\n class=\"rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\">\n ${data.totalPages}\n </a>\n ` : ''\n })()}\n ` : ''}\n\n <!-- Next Button -->\n ${data.currentPage < data.totalPages ? `\n <a href=\"${buildUrl(data.currentPage + 1)}\"\n class=\"rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\">\n Next\n </a>\n ` : ''}\n </div>\n ` : ''}\n </div>\n </div>\n `\n}","export interface TableColumn {\n key: string\n label: string\n sortable?: boolean\n className?: string\n sortType?: 'string' | 'number' | 'date' | 'boolean'\n render?: (value: any, row: any) => string\n}\n\nexport interface TableData<T = any> {\n columns: TableColumn[]\n rows: T[]\n selectable?: boolean\n className?: string\n emptyMessage?: string\n tableId?: string\n title?: string\n rowClickable?: boolean\n rowClickUrl?: (row: T) => string\n}\n\nexport function renderTable<T = any>(data: TableData<T>): string {\n const tableId = data.tableId || `table-${Math.random().toString(36).substr(2, 9)}`\n\n if (data.rows.length === 0) {\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-8 text-center\">\n <div class=\"text-zinc-500 dark:text-zinc-400\">\n <svg class=\"mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-500\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\" />\n </svg>\n <p class=\"mt-2 text-sm text-zinc-500 dark:text-zinc-400\">${data.emptyMessage || 'No data available'}</p>\n </div>\n </div>\n `\n }\n\n return `\n <div class=\"${data.className || ''}\" id=\"${tableId}\">\n ${data.title ? `\n <div class=\"px-4 sm:px-0 mb-4\">\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white\">${data.title}</h3>\n </div>\n ` : ''}\n <div class=\"overflow-x-auto\">\n <table class=\"min-w-full sortable-table\">\n <thead>\n <tr>\n ${data.selectable ? `\n <th class=\"px-4 py-3.5 text-center sm:pl-0\">\n <div class=\"flex items-center justify-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input type=\"checkbox\" id=\"select-all-${tableId}\" class=\"col-start-1 row-start-1 appearance-none rounded border border-white/10 bg-white/5 checked:border-cyan-500 checked:bg-cyan-500 indeterminate:border-cyan-500 indeterminate:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-500 disabled:border-white/5 disabled:bg-white/10 disabled:checked:bg-white/10 forced-colors:appearance-auto row-checkbox\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n </th>\n ` : ''}\n ${data.columns.map((column, index) => {\n const isFirst = index === 0 && !data.selectable\n const isLast = index === data.columns.length - 1\n return `\n <th class=\"px-4 py-3.5 text-left text-sm font-semibold text-zinc-950 dark:text-white ${isFirst ? 'sm:pl-0' : ''} ${isLast ? 'sm:pr-0' : ''} ${column.className || ''}\">\n ${column.sortable ? `\n <button\n class=\"flex items-center gap-x-2 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors sort-btn text-left\"\n data-column=\"${column.key}\"\n data-sort-type=\"${column.sortType || 'string'}\"\n data-sort-direction=\"none\"\n onclick=\"sortTable('${tableId}', '${column.key}', '${column.sortType || 'string'}')\"\n >\n <span>${column.label}</span>\n <div class=\"sort-icons flex flex-col\">\n <svg class=\"w-3 h-3 sort-up opacity-30\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z\" clip-rule=\"evenodd\" />\n </svg>\n <svg class=\"w-3 h-3 sort-down opacity-30 -mt-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z\" clip-rule=\"evenodd\" />\n </svg>\n </div>\n </button>\n ` : column.label}\n </th>\n `}).join('')}\n </tr>\n </thead>\n <tbody>\n ${data.rows.map((row) => {\n if (!row) return ''\n const clickableClass = data.rowClickable ? 'cursor-pointer' : ''\n const clickHandler = data.rowClickable && data.rowClickUrl ? `onclick=\"window.location.href='${data.rowClickUrl(row)}'\"` : ''\n return `\n <tr class=\"group border-t border-zinc-950/5 dark:border-white/5 hover:bg-gradient-to-r hover:from-cyan-50/50 hover:via-blue-50/30 hover:to-purple-50/50 dark:hover:from-cyan-900/20 dark:hover:via-blue-900/10 dark:hover:to-purple-900/20 hover:shadow-sm hover:shadow-cyan-500/5 dark:hover:shadow-cyan-400/5 transition-all duration-300 ${clickableClass}\" ${clickHandler}>\n ${data.selectable ? `\n <td class=\"px-4 py-4 sm:pl-0\" onclick=\"event.stopPropagation()\">\n <div class=\"flex items-center justify-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input type=\"checkbox\" value=\"${(row as any).id || ''}\" class=\"col-start-1 row-start-1 appearance-none rounded border border-white/10 bg-white/5 checked:border-cyan-500 checked:bg-cyan-500 indeterminate:border-cyan-500 indeterminate:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-500 disabled:border-white/5 disabled:bg-white/10 disabled:checked:bg-white/10 forced-colors:appearance-auto row-checkbox\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n </td>\n ` : ''}\n ${data.columns.map((column, colIndex) => {\n const value = (row as any)[column.key]\n const displayValue = column.render ? column.render(value, row) : value\n const stopPropagation = column.key === 'actions' ? 'onclick=\"event.stopPropagation()\"' : ''\n const isFirst = colIndex === 0 && !data.selectable\n const isLast = colIndex === data.columns.length - 1\n return `\n <td class=\"px-4 py-4 text-sm text-zinc-500 dark:text-zinc-400 ${isFirst ? 'sm:pl-0 font-medium text-zinc-950 dark:text-white' : ''} ${isLast ? 'sm:pr-0' : ''} ${column.className || ''}\" ${stopPropagation}>\n ${displayValue || ''}\n </td>\n `\n }).join('')}\n </tr>\n `\n }).join('')}\n </tbody>\n </table>\n </div>\n\n <script>\n // Table sorting functionality\n window.sortTable = function(tableId, column, sortType) {\n const tableContainer = document.getElementById(tableId);\n const table = tableContainer.querySelector('.sortable-table');\n const tbody = table.querySelector('tbody');\n const rows = Array.from(tbody.querySelectorAll('tr'));\n const headerBtn = table.querySelector(\\`[data-column=\"\\${column}\"]\\`);\n\n // Get current sort direction\n let direction = headerBtn.getAttribute('data-sort-direction');\n\n // Reset all sort indicators\n table.querySelectorAll('.sort-btn').forEach(btn => {\n btn.setAttribute('data-sort-direction', 'none');\n btn.querySelectorAll('.sort-up, .sort-down').forEach(icon => {\n icon.classList.add('opacity-30');\n icon.classList.remove('opacity-100', 'text-zinc-950', 'dark:text-white');\n });\n });\n\n // Determine new direction\n if (direction === 'none' || direction === 'desc') {\n direction = 'asc';\n } else {\n direction = 'desc';\n }\n\n // Update current header\n headerBtn.setAttribute('data-sort-direction', direction);\n const upIcon = headerBtn.querySelector('.sort-up');\n const downIcon = headerBtn.querySelector('.sort-down');\n\n if (direction === 'asc') {\n upIcon.classList.remove('opacity-30');\n upIcon.classList.add('opacity-100', 'text-zinc-950', 'dark:text-white');\n downIcon.classList.add('opacity-30');\n downIcon.classList.remove('opacity-100', 'text-zinc-950', 'dark:text-white');\n } else {\n downIcon.classList.remove('opacity-30');\n downIcon.classList.add('opacity-100', 'text-zinc-950', 'dark:text-white');\n upIcon.classList.add('opacity-30');\n upIcon.classList.remove('opacity-100', 'text-zinc-950', 'dark:text-white');\n }\n\n // Find column index (accounting for potential select column)\n const headers = Array.from(table.querySelectorAll('th'));\n const selectableOffset = table.querySelector('input[id^=\"select-all\"]') ? 1 : 0;\n const columnIndex = headers.findIndex(th => th.querySelector(\\`[data-column=\"\\${column}\"]\\`)) - selectableOffset;\n\n // Sort rows\n rows.sort((a, b) => {\n const aCell = a.children[columnIndex + selectableOffset];\n const bCell = b.children[columnIndex + selectableOffset];\n\n if (!aCell || !bCell) return 0;\n\n let aValue = aCell.textContent.trim();\n let bValue = bCell.textContent.trim();\n\n // Handle different sort types\n switch (sortType) {\n case 'number':\n aValue = parseFloat(aValue.replace(/[^0-9.-]/g, '')) || 0;\n bValue = parseFloat(bValue.replace(/[^0-9.-]/g, '')) || 0;\n break;\n case 'date':\n aValue = new Date(aValue).getTime() || 0;\n bValue = new Date(bValue).getTime() || 0;\n break;\n case 'boolean':\n aValue = aValue.toLowerCase() === 'true' || aValue.toLowerCase() === 'published' || aValue.toLowerCase() === 'active';\n bValue = bValue.toLowerCase() === 'true' || bValue.toLowerCase() === 'published' || bValue.toLowerCase() === 'active';\n break;\n default: // string\n aValue = aValue.toLowerCase();\n bValue = bValue.toLowerCase();\n }\n\n if (aValue < bValue) return direction === 'asc' ? -1 : 1;\n if (aValue > bValue) return direction === 'asc' ? 1 : -1;\n return 0;\n });\n\n // Re-append sorted rows\n rows.forEach(row => tbody.appendChild(row));\n };\n\n // Select all functionality\n document.addEventListener('DOMContentLoaded', function() {\n document.querySelectorAll('[id^=\"select-all\"]').forEach(selectAll => {\n selectAll.addEventListener('change', function() {\n const tableId = this.id.replace('select-all-', '');\n const table = document.getElementById(tableId);\n if (table) {\n const checkboxes = table.querySelectorAll('.row-checkbox');\n checkboxes.forEach(checkbox => {\n checkbox.checked = this.checked;\n });\n }\n });\n });\n });\n </script>\n </div>\n `\n}","import { HtmlEscapedString } from \"hono/utils/html\";\nimport { renderLogo } from \"../components/logo.template\";\n\nexport interface AdminLayoutData {\n title: string;\n pageTitle?: string;\n currentPath?: string;\n version?: string;\n enableExperimentalFeatures?: boolean;\n user?: {\n name: string;\n email: string;\n role: string;\n };\n scripts?: string[];\n styles?: string[];\n content: string | HtmlEscapedString;\n dynamicMenuItems?: Array<{\n label: string;\n path: string;\n icon: string;\n }>;\n}\n\nexport function renderAdminLayout(data: AdminLayoutData): string {\n // Import and use the new Catalyst layout\n const {\n renderAdminLayoutCatalyst,\n } = require(\"./admin-layout-catalyst.template\");\n return renderAdminLayoutCatalyst(data);\n}\n\nexport function adminLayoutV2(data: AdminLayoutData): string {\n return `<!DOCTYPE html>\n<html lang=\"en\" class=\"dark\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>${data.title} - SonicJS AI Admin</title>\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\">\n \n <!-- Tailwind CSS -->\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <script>\n tailwind.config = {\n darkMode: 'class',\n theme: {\n extend: {\n backdropBlur: {\n xs: '2px',\n },\n colors: {\n primary: '#465FFF',\n secondary: '#212A3E',\n dark: '#1C1C24',\n 'dark-2': '#1A1A27',\n 'dark-3': '#2C2C54',\n 'dark-4': '#40407A',\n 'dark-5': '#706FD3',\n 'gray-1': '#F7F9FC',\n 'gray-2': '#E4E6EA',\n 'gray-3': '#D2D4D9',\n 'gray-4': '#9CA3AF',\n 'gray-5': '#6B7280',\n 'gray-6': '#4B5563',\n 'gray-7': '#374151',\n 'gray-8': '#1F2937',\n 'gray-9': '#111827',\n success: '#10B981',\n warning: '#F59E0B',\n error: '#EF4444',\n info: '#3B82F6'\n },\n fontFamily: {\n satoshi: ['Satoshi', 'sans-serif'],\n },\n spacing: {\n '4.5': '1.125rem',\n '5.5': '1.375rem',\n '6.5': '1.625rem',\n '7.5': '1.875rem'\n },\n boxShadow: {\n 'default': '0px 8px 13px -3px rgba(0, 0, 0, 0.07)',\n 'card': '0px 1px 3px rgba(0, 0, 0, 0.12)',\n 'card-2': '0px 1px 2px rgba(0, 0, 0, 0.05)',\n 'switcher': '0px 2px 4px rgba(0, 0, 0, 0.2), inset 0px 2px 2px #FFFFFF, inset 0px -1px 1px rgba(0, 0, 0, 0.1)',\n },\n dropShadow: {\n 1: '0px 1px 0px #E2E8F0',\n 2: '0px 1px 4px rgba(0, 0, 0, 0.12)',\n }\n }\n }\n }\n </script>\n \n <!-- Additional Styles -->\n <style>\n @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');\n \n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n \n body {\n font-family: 'Inter', system-ui, -apple-system, sans-serif;\n }\n \n /* Custom scrollbar */\n ::-webkit-scrollbar {\n width: 6px;\n }\n \n ::-webkit-scrollbar-track {\n background: #1F2937;\n }\n \n ::-webkit-scrollbar-thumb {\n background: #465FFF;\n border-radius: 3px;\n }\n \n ::-webkit-scrollbar-thumb:hover {\n background: #3B4EE8;\n }\n \n /* Sidebar animations */\n .sidebar-item {\n transition: all 0.3s ease;\n }\n \n .sidebar-item:hover {\n transform: translateX(4px);\n }\n \n /* Card animations */\n .card-hover {\n transition: all 0.3s ease;\n }\n \n .card-hover:hover {\n transform: translateY(-2px);\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n }\n \n /* Button gradients */\n .btn-gradient {\n background: linear-gradient(135deg, #465FFF 0%, #9333EA 100%);\n }\n \n .btn-gradient:hover {\n background: linear-gradient(135deg, #3B4EE8 0%, #7C2D12 100%);\n }\n \n /* Dark mode form elements */\n .form-input {\n background-color: #1F2937;\n border-color: #374151;\n color: #F9FAFB;\n }\n \n .form-input:focus {\n border-color: #465FFF;\n box-shadow: 0 0 0 3px rgba(70, 95, 255, 0.1);\n }\n \n /* Notification styles */\n .notification {\n -webkit-backdrop-filter: blur(15px);\n backdrop-filter: blur(15px);\n animation: slideInRight 0.3s ease-out;\n }\n \n @keyframes slideInRight {\n from {\n transform: translateX(100%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n \n /* Custom slider styles */\n .slider::-webkit-slider-thumb {\n appearance: none;\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: #465FFF;\n cursor: pointer;\n border: 2px solid white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n \n .slider::-moz-range-thumb {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n background: #465FFF;\n cursor: pointer;\n border: 2px solid white;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);\n }\n \n .slider::-webkit-slider-track {\n height: 8px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.2);\n }\n \n .slider::-moz-range-track {\n height: 8px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.2);\n border: none;\n }\n \n /* PNG Background Images */\n .svg-pattern-blue-waves {\n background-color: #111827;\n background-image: url('/images/backgrounds/blue-waves.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n \n .svg-pattern-blue-crescent {\n background-color: #111827;\n background-image: url('/images/backgrounds/blue-crescent.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n \n .svg-pattern-blue-stars {\n background-color: #111827;\n background-image: url('/images/backgrounds/blue-stars.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n \n .svg-pattern-blue-waves-3d {\n background-color: #111827;\n background-image: url('/images/backgrounds/blue-waves-3d.png');\n background-size: cover;\n background-position: center;\n background-repeat: no-repeat;\n }\n </style>\n \n <!-- Scripts -->\n <script src=\"https://unpkg.com/htmx.org@2.0.3\"></script>\n <script src=\"https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js\" defer></script>\n <script src=\"https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js\"></script>\n \n ${data.styles ? data.styles.map((style) => `<link rel=\"stylesheet\" href=\"${style}\">`).join(\"\\n \") : \"\"}\n ${data.scripts ? data.scripts.map((script) => `<script src=\"${script}\"></script>`).join(\"\\n \") : \"\"}\n</head>\n<body class=\"bg-gradient-to-br from-slate-900 via-gray-900 to-black min-h-screen text-gray-1\">\n <!-- Background overlay with glass effect -->\n <div id=\"background-overlay\" class=\"fixed inset-0 backdrop-blur-sm\" style=\"background-color: rgba(0, 0, 0, 0.2);\"></div>\n <!-- Main container -->\n <div class=\"relative z-10 min-h-screen\">\n <!-- Header -->\n ${renderTopBar(data.pageTitle || \"Dashboard\", data.user)}\n\n <!-- Main content area -->\n <div class=\"px-4 sm:px-6 lg:px-8 py-8\">\n <div class=\"grid grid-cols-1 lg:grid-cols-5 gap-6\">\n <!-- Sidebar -->\n <div class=\"lg:col-span-1\">\n ${renderSidebar(data.currentPath || \"/\", data.user, data.dynamicMenuItems)}\n </div>\n \n <!-- Main content -->\n <div class=\"lg:col-span-4\">\n ${data.content}\n </div>\n </div>\n </div>\n </div>\n \n <!-- Notification Container -->\n <div id=\"notification-container\" class=\"fixed top-4 right-4 z-50 space-y-2\"></div>\n \n <script>\n // Dark mode toggle functionality\n function toggleDarkMode() {\n document.documentElement.classList.toggle('dark');\n localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));\n }\n \n // Initialize dark mode from localStorage\n if (localStorage.getItem('darkMode') === 'true' || (!('darkMode' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {\n document.documentElement.classList.add('dark');\n }\n \n // Sidebar toggle for mobile\n function toggleSidebar() {\n const sidebar = document.getElementById('sidebar');\n const overlay = document.getElementById('sidebar-overlay');\n sidebar.classList.toggle('-translate-x-full');\n overlay.classList.toggle('hidden');\n }\n \n // Close sidebar on overlay click\n function closeSidebar() {\n const sidebar = document.getElementById('sidebar');\n const overlay = document.getElementById('sidebar-overlay');\n sidebar.classList.add('-translate-x-full');\n overlay.classList.add('hidden');\n }\n \n // User dropdown toggle\n function toggleUserDropdown() {\n const dropdown = document.getElementById('userDropdown');\n dropdown.classList.toggle('hidden');\n }\n \n // Close dropdown when clicking outside\n document.addEventListener('click', function(event) {\n const dropdown = document.getElementById('userDropdown');\n const button = event.target.closest('button');\n if (!button || !button.getAttribute('onclick')) {\n dropdown.classList.add('hidden');\n }\n });\n \n // Show notification\n function showNotification(message, type = 'info') {\n const container = document.getElementById('notification-container');\n const notification = document.createElement('div');\n const colors = {\n success: 'bg-success text-white',\n error: 'bg-error text-white',\n warning: 'bg-warning text-white',\n info: 'bg-info text-white'\n };\n \n notification.className = \\`notification px-6 py-4 rounded-lg shadow-lg \\${colors[type] || colors.info} max-w-sm\\`;\n notification.innerHTML = \\`\n <div class=\"flex items-center justify-between\">\n <span>\\${message}</span>\n <button onclick=\"this.parentElement.parentElement.remove()\" class=\"ml-4 text-white/80 hover:text-white\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"></path>\n </svg>\n </button>\n </div>\n \\`;\n \n container.appendChild(notification);\n \n // Auto remove after 5 seconds\n setTimeout(() => {\n if (notification.parentElement) {\n notification.remove();\n }\n }, 5000);\n }\n \n // Background customizer functionality\n function toggleBackgroundCustomizer() {\n const dropdown = document.getElementById('backgroundCustomizer');\n dropdown.classList.toggle('hidden');\n }\n \n // Background themes\n const backgroundThemes = {\n 'default': 'bg-gradient-to-br from-slate-900 via-gray-900 to-black',\n 'cosmic-blue': 'bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900',\n 'matrix-green': 'bg-gradient-to-br from-gray-900 via-emerald-900 to-green-900',\n 'cyber-pink': 'bg-gradient-to-br from-gray-900 via-pink-900 to-rose-900',\n 'neon-orange': 'bg-gradient-to-br from-gray-900 via-orange-900 to-amber-900',\n 'purple-space': 'bg-gradient-to-br from-gray-900 via-purple-900 to-violet-800',\n 'blue-waves': 'svg-pattern-blue-waves',\n 'blue-crescent': 'svg-pattern-blue-crescent',\n 'blue-stars': 'svg-pattern-blue-stars',\n 'blue-waves-3d': 'svg-pattern-blue-waves-3d'\n };\n \n // Set background theme\n function setBackground(theme) {\n const body = document.body;\n \n // Remove all existing background classes and SVG patterns\n Object.values(backgroundThemes).forEach(bgClass => {\n if (bgClass.startsWith('svg-pattern-')) {\n body.classList.remove(bgClass);\n } else {\n body.classList.remove(...bgClass.split(' ').slice(1)); // Remove 'bg-gradient-to-br' prefix\n }\n });\n body.classList.remove('bg-gradient-to-br');\n \n // Add new background\n const themeClass = backgroundThemes[theme];\n if (themeClass.startsWith('svg-pattern-')) {\n body.classList.add(themeClass);\n } else {\n const newClasses = themeClass.split(' ').slice(1); // Remove 'bg-gradient-to-br' prefix\n body.classList.add('bg-gradient-to-br', ...newClasses);\n }\n \n // Save preference\n localStorage.setItem('backgroundTheme', theme);\n \n // Close dropdown\n toggleBackgroundCustomizer();\n \n // Show notification\n showNotification('Background changed to ' + theme.replace('-', ' '), 'success');\n }\n \n // Adjust background darkness\n function adjustDarkness(value) {\n const overlay = document.getElementById('background-overlay');\n if (overlay) {\n const opacity = value / 100; // Convert percentage to decimal\n overlay.style.backgroundColor = 'rgba(0, 0, 0, ' + opacity + ')';\n localStorage.setItem('backgroundDarkness', value);\n console.log('Darkness adjusted to:', value + '%', 'Opacity:', opacity);\n } else {\n console.log('Overlay element not found');\n }\n }\n \n // Initialize background on page load\n function initializeBackground() {\n const savedTheme = localStorage.getItem('backgroundTheme') || 'default';\n const savedDarkness = localStorage.getItem('backgroundDarkness') || '20';\n \n // Set background theme\n if (savedTheme !== 'default') {\n const body = document.body;\n const themeClass = backgroundThemes[savedTheme];\n \n // Remove all existing backgrounds first\n Object.values(backgroundThemes).forEach(bgClass => {\n if (bgClass.startsWith('svg-pattern-')) {\n body.classList.remove(bgClass);\n } else {\n body.classList.remove(...bgClass.split(' ').slice(1));\n }\n });\n body.classList.remove('bg-gradient-to-br');\n \n // Apply saved theme\n if (themeClass.startsWith('svg-pattern-')) {\n body.classList.add(themeClass);\n } else {\n const newClasses = themeClass.split(' ').slice(1);\n body.classList.add('bg-gradient-to-br', ...newClasses);\n }\n }\n \n // Set darkness\n const overlay = document.getElementById('background-overlay');\n if (overlay) {\n const opacity = savedDarkness / 100;\n overlay.style.backgroundColor = 'rgba(0, 0, 0, ' + opacity + ')';\n }\n \n // Set slider value\n const slider = document.getElementById('darknessSlider');\n if (slider) {\n slider.value = savedDarkness;\n }\n }\n \n // Close dropdown when clicking outside\n document.addEventListener('click', function(event) {\n const dropdown = document.getElementById('backgroundCustomizer');\n const button = event.target.closest('button');\n const slider = event.target.closest('#darknessSlider');\n const dropdownContainer = event.target.closest('#backgroundCustomizer');\n \n // Don't close if clicking inside the dropdown, on the toggle button, or on the slider\n if (!button?.getAttribute('onclick')?.includes('toggleBackgroundCustomizer') && \n !slider && !dropdownContainer) {\n dropdown?.classList.add('hidden');\n }\n });\n \n // Initialize background when page loads\n document.addEventListener('DOMContentLoaded', initializeBackground);\n </script>\n</body>\n</html>`;\n}\n\nfunction renderSidebar(\n currentPath: string,\n user?: any,\n dynamicMenuItems?: Array<{\n label: string;\n path: string;\n icon: string;\n }>\n): string {\n const baseMenuItems = [\n {\n label: \"Dashboard\",\n path: \"/admin\",\n icon: `<svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z\"/>\n </svg>`,\n },\n {\n label: \"Content\",\n path: \"/admin/content\",\n icon: `<svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"/>\n </svg>`,\n },\n {\n label: \"Collections\",\n path: \"/admin/collections\",\n icon: `<svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z\"/>\n </svg>`,\n },\n {\n label: \"Media\",\n path: \"/admin/media\",\n icon: `<svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11.707 4.707a1 1 0 00-1.414-1.414L10 9.586 8.707 8.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/>\n </svg>`,\n },\n {\n label: \"Users\",\n path: \"/admin/users\",\n icon: `<svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path d=\"M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z\"/>\n </svg>`,\n },\n {\n label: \"Plugins\",\n path: \"/admin/plugins\",\n icon: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10\"/>\n </svg>`,\n },\n {\n label: \"Cache\",\n path: \"/admin/cache\",\n icon: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"/>\n </svg>`,\n },\n {\n label: \"Design\",\n path: \"/admin/design\",\n icon: `<svg class=\"w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z\" />\n </svg>`,\n },\n {\n label: \"Logs\",\n path: \"/admin/logs\",\n icon: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"/>\n </svg>`,\n },\n {\n label: \"Settings\",\n path: \"/admin/settings\",\n icon: `<svg class=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 20 20\">\n <path fill-rule=\"evenodd\" d=\"M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z\" clip-rule=\"evenodd\"/>\n </svg>`,\n },\n {\n label: \"API Reference\",\n path: \"/admin/api-reference\",\n icon: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"/>\n </svg>`,\n },\n {\n label: \"Field Types\",\n path: \"/admin/field-types\",\n icon: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"/>\n </svg>`,\n },\n {\n label: \"API Spec\",\n path: \"/api\",\n target: \"_blank\",\n icon: `<svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"/>\n </svg>`,\n },\n ];\n\n // Combine base menu items with dynamic menu items from active plugins\n const allMenuItems = [...baseMenuItems];\n\n // Insert dynamic menu items after \"Users\"\n if (dynamicMenuItems && dynamicMenuItems.length > 0) {\n const usersIndex = allMenuItems.findIndex(\n (item) => item.path === \"/admin/users\"\n );\n if (usersIndex !== -1) {\n allMenuItems.splice(usersIndex + 1, 0, ...dynamicMenuItems);\n } else {\n // Fallback: add to end if Users not found\n allMenuItems.push(...dynamicMenuItems);\n }\n }\n\n return `\n <nav class=\"backdrop-blur-md bg-black/30 rounded-xl border border-white/10 shadow-xl p-6 h-[calc(100vh-9.5rem)] sticky top-8\">\n <div class=\"space-y-4\">\n ${allMenuItems\n .map((item) => {\n const isActive =\n currentPath === item.path ||\n (item.path !== \"/admin\" && currentPath.startsWith(item.path));\n const targetAttr = (item as any).target\n ? ` target=\"${(item as any).target}\"`\n : \"\";\n return `\n <a href=\"${item.path}\"${targetAttr} class=\"flex items-center space-x-3 ${isActive ? \"text-white bg-white/20\" : \"text-gray-300 hover:text-white\"} rounded-lg px-3 py-2 transition-all hover:bg-white/10\">\n ${item.icon}\n <span>${item.label}</span>\n </a>\n `;\n })\n .join(\"\")}\n </div>\n </nav>\n `;\n}\n\nfunction renderTopBar(pageTitle: string, user?: any): string {\n return `\n <header class=\"backdrop-blur-md bg-white/10 border-b border-white/20 shadow-lg relative z-[9998]\">\n <div class=\"px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center py-4\">\n <div class=\"flex items-center space-x-4\">\n ${renderLogo({ size: \"md\", showText: true, variant: \"white\" })}\n </div>\n \n <div class=\"flex items-center space-x-4\">\n <!-- Notifications -->\n <button class=\"p-2 text-gray-300 hover:text-white transition-colors rounded-lg hover:bg-white/10 relative\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9\"/>\n </svg>\n <span class=\"absolute top-1 right-1 w-2 h-2 bg-red-400 rounded-full\"></span>\n </button>\n\n <!-- Background Customizer -->\n <div class=\"relative z-[9999]\">\n <button class=\"p-2 text-gray-300 hover:text-white transition-colors rounded-lg hover:bg-white/10\" onclick=\"toggleBackgroundCustomizer()\">\n <svg class=\"w-5 h-5\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.098 19.902a3.75 3.75 0 0 0 5.304 0l6.401-6.402M6.75 21A3.75 3.75 0 0 1 3 17.25V4.125C3 3.504 3.504 3 4.125 3h5.25c.621 0 1.125.504 1.125 1.125v4.072M6.75 21a3.75 3.75 0 0 0 3.75-3.75V8.197M6.75 21h13.125c.621 0 1.125-.504 1.125-1.125v-5.25c0-.621-.504-1.125-1.125-1.125h-4.072M10.5 8.197l2.88-2.88c.438-.439 1.15-.439 1.59 0l3.712 3.713c.44.44.44 1.152 0 1.59l-2.879 2.88M6.75 17.25h.008v.008H6.75v-.008Z\" />\n </svg>\n </button>\n \n <!-- Background Customizer Dropdown -->\n <div id=\"backgroundCustomizer\" class=\"hidden absolute right-0 mt-2 w-80 backdrop-blur-md bg-black/95 rounded-xl border border-white/10 shadow-xl z-[9999]\">\n <div class=\"p-6\">\n <div class=\"flex items-center justify-between mb-4\">\n <h3 class=\"text-lg font-semibold text-white\">Background Themes</h3>\n <button onclick=\"toggleBackgroundCustomizer()\" class=\"text-gray-400 hover:text-white\">\n <svg class=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n </svg>\n </button>\n </div>\n \n <!-- Background Options -->\n <div class=\"space-y-3 mb-6\">\n <div class=\"grid grid-cols-2 gap-3\">\n <!-- Default (Deep Space) -->\n <button onclick=\"setBackground('default')\" class=\"bg-preview bg-gradient-to-br from-slate-900 via-gray-900 to-black h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group\">\n <div class=\"absolute inset-0 bg-black/20 rounded-lg\"></div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium\">Default</div>\n </button>\n \n <!-- Cosmic Blue -->\n <button onclick=\"setBackground('cosmic-blue')\" class=\"bg-preview bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group\">\n <div class=\"absolute inset-0 bg-black/20 rounded-lg\"></div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium\">Cosmic</div>\n </button>\n \n <!-- Matrix Green -->\n <button onclick=\"setBackground('matrix-green')\" class=\"bg-preview bg-gradient-to-br from-gray-900 via-emerald-900 to-green-900 h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group\">\n <div class=\"absolute inset-0 bg-black/20 rounded-lg\"></div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium\">Matrix</div>\n </button>\n \n <!-- Cyber Pink -->\n <button onclick=\"setBackground('cyber-pink')\" class=\"bg-preview bg-gradient-to-br from-gray-900 via-pink-900 to-rose-900 h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group\">\n <div class=\"absolute inset-0 bg-black/20 rounded-lg\"></div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium\">Cyber</div>\n </button>\n \n <!-- Neon Orange -->\n <button onclick=\"setBackground('neon-orange')\" class=\"bg-preview bg-gradient-to-br from-gray-900 via-orange-900 to-amber-900 h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group\">\n <div class=\"absolute inset-0 bg-black/20 rounded-lg\"></div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium\">Neon</div>\n </button>\n \n <!-- Purple Space -->\n <button onclick=\"setBackground('purple-space')\" class=\"bg-preview bg-gradient-to-br from-gray-900 via-purple-900 to-violet-800 h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group\">\n <div class=\"absolute inset-0 bg-black/20 rounded-lg\"></div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium\">Purple</div>\n </button>\n </div>\n \n <!-- Custom Backgrounds -->\n <div class=\"mt-4\">\n <h4 class=\"text-sm font-medium text-gray-300 mb-3\">Custom Backgrounds</h4>\n <div class=\"grid grid-cols-2 gap-3\">\n <!-- Blue Waves -->\n <button onclick=\"setBackground('blue-waves')\" class=\"h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group overflow-hidden\">\n <div class=\"absolute inset-0\">\n <img src=\"/images/backgrounds/blue-waves.png\" alt=\"Blue Waves\" class=\"w-full h-full object-cover opacity-60\">\n </div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium bg-black/50 px-2 py-1 rounded\">Waves</div>\n </button>\n \n <!-- Blue Crescent -->\n <button onclick=\"setBackground('blue-crescent')\" class=\"h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group overflow-hidden\">\n <div class=\"absolute inset-0\">\n <img src=\"/images/backgrounds/blue-crescent.png\" alt=\"Blue Crescent\" class=\"w-full h-full object-cover opacity-60\">\n </div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium bg-black/50 px-2 py-1 rounded\">Crescent</div>\n </button>\n \n <!-- Blue Stars -->\n <button onclick=\"setBackground('blue-stars')\" class=\"h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group overflow-hidden\">\n <div class=\"absolute inset-0\">\n <img src=\"/images/backgrounds/blue-stars.png\" alt=\"Blue Stars\" class=\"w-full h-full object-cover opacity-60\">\n </div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium bg-black/50 px-2 py-1 rounded\">Stars</div>\n </button>\n \n <!-- Blue Waves 3D -->\n <button onclick=\"setBackground('blue-waves-3d')\" class=\"h-16 rounded-lg border-2 border-white/20 hover:border-white/40 transition-all relative group overflow-hidden\">\n <div class=\"absolute inset-0\">\n <img src=\"/images/backgrounds/blue-waves-3d.png\" alt=\"Blue Waves 3D\" class=\"w-full h-full object-cover opacity-60\">\n </div>\n <div class=\"absolute bottom-1 left-2 text-xs text-white font-medium bg-black/50 px-2 py-1 rounded\">3D Waves</div>\n </button>\n </div>\n </div>\n </div>\n \n <!-- Darkness Slider -->\n <div class=\"space-y-3\">\n <label class=\"block text-sm font-medium text-white\">Background Darkness</label>\n <div class=\"flex items-center space-x-3\">\n <svg class=\"w-4 h-4 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707\"/>\n </svg>\n <input \n type=\"range\" \n id=\"darknessSlider\" \n min=\"10\" \n max=\"100\" \n value=\"20\" \n class=\"flex-1 h-2 bg-white/20 rounded-lg appearance-none cursor-pointer slider\"\n oninput=\"adjustDarkness(this.value)\"\n onchange=\"adjustDarkness(this.value)\"\n >\n <svg class=\"w-4 h-4 text-gray-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z\"/>\n </svg>\n </div>\n <div class=\"text-xs text-gray-400 text-center\">Adjust overlay darkness</div>\n </div>\n </div>\n </div>\n </div>\n \n <!-- User Dropdown -->\n ${\n user\n ? `\n <div class=\"relative z-[9999]\">\n <button class=\"flex items-center space-x-3 p-2 rounded-lg hover:bg-white/10 transition-colors group\" onclick=\"toggleUserDropdown()\">\n <div class=\"w-8 h-8 bg-gradient-to-br from-green-400 to-blue-500 rounded-full flex items-center justify-center\">\n <span class=\"text-white text-sm font-medium\">${(user.name || user.email || \"U\").charAt(0).toUpperCase()}</span>\n </div>\n <div class=\"hidden md:block text-left\">\n <div class=\"text-white text-sm font-medium\">${user.name || user.email || \"User\"}</div>\n <div class=\"text-gray-400 text-xs\">${user.role || \"Administrator\"}</div>\n </div>\n <svg class=\"w-4 h-4 text-gray-400 group-hover:text-white transition-colors\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\"/>\n </svg>\n </button>\n \n <!-- Dropdown Menu -->\n <div id=\"userDropdown\" class=\"hidden absolute right-0 mt-2 w-48 backdrop-blur-md bg-black/95 rounded-xl border border-white/10 shadow-xl z-[9999]\">\n <div class=\"py-2\">\n <div class=\"px-4 py-2 border-b border-white/10\">\n <p class=\"text-sm font-medium text-gray-1\">${user.name || user.email || \"User\"}</p>\n <p class=\"text-xs text-gray-4\">${user.email || \"\"}</p>\n </div>\n <a href=\"/admin/profile\" class=\"flex items-center gap-3 px-4 py-2 text-sm text-gray-300 hover:bg-white/10 hover:text-white transition-colors\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z\"/>\n </svg>\n My Profile\n </a>\n <a href=\"/auth/logout\" class=\"flex items-center gap-3 px-4 py-2 text-sm text-red-300 hover:bg-red-500/10 hover:text-red-200 transition-colors\">\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1\"/>\n </svg>\n Sign Out\n </a>\n </div>\n </div>\n </div>\n `\n : `\n <a href=\"/auth/login\" class=\"backdrop-blur-md bg-white/10 px-4 py-2 rounded-lg text-white font-medium hover:bg-white/20 transition-all\">\n Sign In\n </a>\n `\n }\n </div>\n </div>\n </header>\n `;\n}\n","import { renderAdminLayoutCatalyst, AdminLayoutCatalystData } from '../layouts/admin-layout-catalyst.template'\n\nexport interface DesignPageData {\n user?: {\n name: string\n email: string\n role: string\n }\n version?: string\n}\n\nexport function renderDesignPage(data: DesignPageData): string {\n const pageContent = `\n <div class=\"space-y-8\">\n <!-- Header -->\n <div class=\"sm:flex sm:items-center sm:justify-between\">\n <div>\n <h1 class=\"text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8\">Catalyst Design System</h1>\n <p class=\"mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400\">\n A comprehensive showcase of all UI components and design patterns\n </p>\n </div>\n <div class=\"mt-4 sm:mt-0 flex gap-x-2\">\n <a\n href=\"/docs/design-system\"\n class=\"inline-flex items-center gap-x-2 rounded-lg bg-white dark:bg-zinc-800 px-3.5 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white hover:bg-zinc-50 dark:hover:bg-zinc-700 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 transition-colors shadow-sm\"\n >\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z\"/>\n </svg>\n Documentation\n </a>\n </div>\n </div>\n\n <!-- Quick Navigation -->\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\">\n <div class=\"flex items-center justify-between mb-6\">\n <div>\n <h2 class=\"text-lg font-semibold text-zinc-950 dark:text-white\">Component Library</h2>\n <p class=\"mt-1 text-sm text-zinc-500 dark:text-zinc-400\">Browse all available components</p>\n </div>\n <span class=\"inline-flex items-center gap-x-1.5 rounded-lg bg-zinc-950 dark:bg-white px-3 py-1.5 text-xs font-semibold text-white dark:text-zinc-950\">\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"/>\n </svg>\n Quick Nav\n </span>\n </div>\n <div class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-3\">\n <a href=\"#modern\" class=\"text-sm font-medium text-cyan-600 dark:text-cyan-400 hover:text-cyan-700 dark:hover:text-cyan-300 transition-colors\">Modern Patterns</a>\n <a href=\"#typography\" class=\"text-sm font-medium text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">Typography</a>\n <a href=\"#colors\" class=\"text-sm font-medium text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">Colors</a>\n <a href=\"#buttons\" class=\"text-sm font-medium text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">Buttons</a>\n <a href=\"#forms\" class=\"text-sm font-medium text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">Forms</a>\n <a href=\"#checkboxes\" class=\"text-sm font-medium text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">Checkboxes</a>\n <a href=\"#tables\" class=\"text-sm font-medium text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">Tables</a>\n <a href=\"#alerts\" class=\"text-sm font-medium text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">Alerts</a>\n <a href=\"#badges\" class=\"text-sm font-medium text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">Badges</a>\n <a href=\"#cards\" class=\"text-sm font-medium text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">Cards</a>\n </div>\n </div>\n\n <!-- Modern Patterns Section -->\n <div id=\"modern\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Modern UI Patterns</h2>\n\n <!-- Gradient Filter Bar -->\n <div class=\"space-y-6\">\n <div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Gradient Filter Bar</h3>\n <div class=\"relative rounded-xl overflow-hidden\">\n <div class=\"absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 dark:from-cyan-400/20 dark:via-blue-400/20 dark:to-purple-400/20\"></div>\n <div class=\"relative bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10\">\n <div class=\"px-6 py-5\">\n <div class=\"flex items-center gap-x-4\">\n <div class=\"relative group flex-1 max-w-sm\">\n <div class=\"absolute left-3.5 top-2.5 flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 dark:from-cyan-300 dark:to-blue-400 opacity-90 group-focus-within:opacity-100 transition-opacity\">\n <svg class=\"h-3 w-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"/>\n </svg>\n </div>\n <input\n type=\"text\"\n placeholder=\"Search with gradient icon...\"\n class=\"w-full rounded-full bg-transparent pl-11 pr-4 py-2 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 border-2 border-cyan-200/50 dark:border-cyan-700/50 focus:outline-none focus:border-cyan-500 dark:focus:border-cyan-400 focus:shadow-lg focus:shadow-cyan-500/20 dark:focus:shadow-cyan-400/20 transition-all duration-300\"\n />\n </div>\n <button class=\"inline-flex items-center gap-x-1.5 px-3 py-1.5 bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm text-zinc-950 dark:text-white text-sm font-medium rounded-full ring-1 ring-inset ring-cyan-200/50 dark:ring-cyan-700/50 hover:bg-gradient-to-r hover:from-cyan-50 hover:to-blue-50 dark:hover:from-cyan-900/30 dark:hover:to-blue-900/30 hover:ring-cyan-300 dark:hover:ring-cyan-600 transition-all duration-200\">\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"/>\n </svg>\n Refresh\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Colored Badges -->\n <div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Colored Category Badges</h3>\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\">\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"inline-flex items-center rounded-md bg-lime-50 dark:bg-lime-500/10 px-2.5 py-1 text-sm font-medium text-lime-700 dark:text-lime-300 ring-1 ring-inset ring-lime-700/10 dark:ring-lime-400/20\">\n Collection Name\n </span>\n <span class=\"inline-flex items-center rounded-md bg-pink-50 dark:bg-pink-500/10 px-2.5 py-1 text-sm font-medium text-pink-700 dark:text-pink-300 ring-1 ring-inset ring-pink-700/10 dark:ring-pink-400/20\">\n 5 fields\n </span>\n <span class=\"inline-flex items-center rounded-md bg-cyan-50 dark:bg-cyan-500/10 px-2.5 py-1 text-sm font-medium text-cyan-700 dark:text-cyan-300 ring-1 ring-inset ring-cyan-700/10 dark:ring-cyan-400/20\">\n Interactive\n </span>\n <span class=\"inline-flex items-center rounded-md bg-purple-50 dark:bg-purple-500/10 px-2.5 py-1 text-sm font-medium text-purple-700 dark:text-purple-300 ring-1 ring-inset ring-purple-700/10 dark:ring-purple-400/20\">\n Category\n </span>\n </div>\n </div>\n </div>\n\n <!-- Enhanced Table Row -->\n <div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Enhanced Table with Gradient Hover</h3>\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 overflow-hidden\">\n <table class=\"min-w-full\">\n <thead class=\"bg-zinc-50 dark:bg-zinc-800/50\">\n <tr>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400\">Name</th>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400\">Type</th>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400\">Status</th>\n </tr>\n </thead>\n <tbody>\n <tr class=\"group border-t border-zinc-950/5 dark:border-white/5 hover:bg-gradient-to-r hover:from-cyan-50/50 hover:via-blue-50/30 hover:to-purple-50/50 dark:hover:from-cyan-900/20 dark:hover:via-blue-900/10 dark:hover:to-purple-900/20 hover:shadow-sm hover:shadow-cyan-500/5 dark:hover:shadow-cyan-400/5 hover:border-l-2 hover:border-l-cyan-500 dark:hover:border-l-cyan-400 transition-all duration-300\">\n <td class=\"px-6 py-4 text-sm font-medium text-zinc-950 dark:text-white\">Example Item</td>\n <td class=\"px-6 py-4 text-sm text-zinc-500 dark:text-zinc-400\">\n <span class=\"inline-flex items-center rounded-md bg-lime-50 dark:bg-lime-500/10 px-2.5 py-1 text-sm font-medium text-lime-700 dark:text-lime-300 ring-1 ring-inset ring-lime-700/10 dark:ring-lime-400/20\">\n Collection\n </span>\n </td>\n <td class=\"px-6 py-4 text-sm text-zinc-500 dark:text-zinc-400\">\n <span class=\"inline-flex items-center rounded-md bg-green-50 dark:bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20 dark:ring-green-500/20\">\n Active\n </span>\n </td>\n </tr>\n <tr class=\"group border-t border-zinc-950/5 dark:border-white/5 hover:bg-gradient-to-r hover:from-cyan-50/50 hover:via-blue-50/30 hover:to-purple-50/50 dark:hover:from-cyan-900/20 dark:hover:via-blue-900/10 dark:hover:to-purple-900/20 hover:shadow-sm hover:shadow-cyan-500/5 dark:hover:shadow-cyan-400/5 hover:border-l-2 hover:border-l-cyan-500 dark:hover:border-l-cyan-400 transition-all duration-300\">\n <td class=\"px-6 py-4 text-sm font-medium text-zinc-950 dark:text-white\">Another Item</td>\n <td class=\"px-6 py-4 text-sm text-zinc-500 dark:text-zinc-400\">\n <span class=\"inline-flex items-center rounded-md bg-pink-50 dark:bg-pink-500/10 px-2.5 py-1 text-sm font-medium text-pink-700 dark:text-pink-300 ring-1 ring-inset ring-pink-700/10 dark:ring-pink-400/20\">\n Content\n </span>\n </td>\n <td class=\"px-6 py-4 text-sm text-zinc-500 dark:text-zinc-400\">\n <span class=\"inline-flex items-center rounded-md bg-amber-50 dark:bg-amber-500/10 px-2 py-1 text-xs font-medium text-amber-700 dark:text-amber-400 ring-1 ring-inset ring-amber-600/20 dark:ring-amber-500/20\">\n Draft\n </span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Typography Section -->\n <div id=\"typography\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Typography</h2>\n\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-8\">\n <div class=\"space-y-8\">\n <div>\n <h1 class=\"text-3xl font-semibold text-zinc-950 dark:text-white\">Heading 1</h1>\n <code class=\"mt-2 block text-xs text-zinc-500 dark:text-zinc-400\">text-3xl font-semibold</code>\n </div>\n\n <div>\n <h2 class=\"text-2xl font-semibold text-zinc-950 dark:text-white\">Heading 2</h2>\n <code class=\"mt-2 block text-xs text-zinc-500 dark:text-zinc-400\">text-2xl font-semibold</code>\n </div>\n\n <div>\n <h3 class=\"text-xl font-semibold text-zinc-950 dark:text-white\">Heading 3</h3>\n <code class=\"mt-2 block text-xs text-zinc-500 dark:text-zinc-400\">text-xl font-semibold</code>\n </div>\n\n <div>\n <p class=\"text-base text-zinc-950 dark:text-white\">Body text - This is the standard body text used throughout the interface for content and descriptions.</p>\n <code class=\"mt-2 block text-xs text-zinc-500 dark:text-zinc-400\">text-base</code>\n </div>\n\n <div>\n <p class=\"text-sm text-zinc-500 dark:text-zinc-400\">Small text - Used for secondary information and metadata.</p>\n <code class=\"mt-2 block text-xs text-zinc-500 dark:text-zinc-400\">text-sm text-zinc-500</code>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Colors Section -->\n <div id=\"colors\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Color Palette</h2>\n\n <div class=\"space-y-6\">\n <!-- Pastel Brand Colors -->\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\">\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Pastel Brand Colors (Currently Used)</h3>\n <div class=\"grid grid-cols-2 md:grid-cols-4 gap-4\">\n <div>\n <div class=\"h-20 rounded-lg bg-cyan-400 dark:bg-cyan-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">cyan-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#22d3ee</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-pink-400 dark:bg-pink-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">pink-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#f472b6</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-purple-400 dark:bg-purple-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">purple-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#c084fc</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-lime-400 dark:bg-lime-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">lime-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#a3e635</span>\n </div>\n </div>\n </div>\n\n <!-- Full Pastel Palette -->\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\">\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Complete Pastel Color Set</h3>\n <div class=\"grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4\">\n <div>\n <div class=\"h-20 rounded-lg bg-cyan-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">cyan-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#22d3ee</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-sky-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">sky-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#38bdf8</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-blue-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">blue-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#60a5fa</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-indigo-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">indigo-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#818cf8</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-purple-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">purple-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#c084fc</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-fuchsia-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">fuchsia-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#e879f9</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-pink-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">pink-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#f472b6</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-rose-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">rose-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#fb7185</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-red-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">red-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#f87171</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-orange-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">orange-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#fb923c</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-amber-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">amber-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#fbbf24</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-yellow-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">yellow-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#facc15</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-lime-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">lime-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#a3e635</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-green-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">green-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#4ade80</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-emerald-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">emerald-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#34d399</span>\n </div>\n <div>\n <div class=\"h-20 rounded-lg bg-teal-400 shadow-sm\"></div>\n <span class=\"text-xs font-medium text-zinc-950 dark:text-white mt-2 block\">teal-400</span>\n <span class=\"text-xs text-zinc-500 dark:text-zinc-400\">#2dd4bf</span>\n </div>\n </div>\n </div>\n\n <!-- Zinc Scale & Semantic Colors -->\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n <!-- Zinc Scale -->\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\">\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Zinc (Neutral Scale)</h3>\n <div class=\"space-y-2\">\n <div class=\"flex items-center gap-x-3\">\n <div class=\"h-10 w-10 rounded-lg bg-zinc-50 ring-1 ring-inset ring-zinc-950/10\"></div>\n <span class=\"text-sm text-zinc-950 dark:text-white\">zinc-50</span>\n </div>\n <div class=\"flex items-center gap-x-3\">\n <div class=\"h-10 w-10 rounded-lg bg-zinc-100 ring-1 ring-inset ring-zinc-950/10\"></div>\n <span class=\"text-sm text-zinc-950 dark:text-white\">zinc-100</span>\n </div>\n <div class=\"flex items-center gap-x-3\">\n <div class=\"h-10 w-10 rounded-lg bg-zinc-500\"></div>\n <span class=\"text-sm text-zinc-950 dark:text-white\">zinc-500</span>\n </div>\n <div class=\"flex items-center gap-x-3\">\n <div class=\"h-10 w-10 rounded-lg bg-zinc-900\"></div>\n <span class=\"text-sm text-zinc-950 dark:text-white\">zinc-900</span>\n </div>\n <div class=\"flex items-center gap-x-3\">\n <div class=\"h-10 w-10 rounded-lg bg-zinc-950\"></div>\n <span class=\"text-sm text-zinc-950 dark:text-white\">zinc-950</span>\n </div>\n </div>\n </div>\n\n <!-- Semantic Colors -->\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\">\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Semantic Colors</h3>\n <div class=\"space-y-2\">\n <div class=\"flex items-center gap-x-3\">\n <div class=\"h-10 w-10 rounded-lg bg-blue-500\"></div>\n <span class=\"text-sm text-zinc-950 dark:text-white\">Info - blue-500</span>\n </div>\n <div class=\"flex items-center gap-x-3\">\n <div class=\"h-10 w-10 rounded-lg bg-green-500\"></div>\n <span class=\"text-sm text-zinc-950 dark:text-white\">Success - green-500</span>\n </div>\n <div class=\"flex items-center gap-x-3\">\n <div class=\"h-10 w-10 rounded-lg bg-amber-500\"></div>\n <span class=\"text-sm text-zinc-950 dark:text-white\">Warning - amber-500</span>\n </div>\n <div class=\"flex items-center gap-x-3\">\n <div class=\"h-10 w-10 rounded-lg bg-red-500\"></div>\n <span class=\"text-sm text-zinc-950 dark:text-white\">Error - red-500</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Buttons Section -->\n <div id=\"buttons\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Buttons</h2>\n\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-8\">\n <div class=\"space-y-8\">\n <!-- Primary Buttons -->\n <div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Primary</h3>\n <div class=\"flex flex-wrap gap-3\">\n <button class=\"inline-flex items-center gap-x-2 rounded-lg bg-zinc-950 dark:bg-white px-4 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors\">\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 4v16m8-8H4\"/>\n </svg>\n Create New\n </button>\n <button class=\"rounded-lg bg-zinc-950 dark:bg-white px-5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors\">\n Save Changes\n </button>\n </div>\n </div>\n\n <!-- Secondary Buttons -->\n <div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Secondary</h3>\n <div class=\"flex flex-wrap gap-3\">\n <button class=\"inline-flex items-center gap-x-2 rounded-lg bg-white dark:bg-zinc-800 px-4 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\">\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z\"/>\n </svg>\n Edit\n </button>\n <button class=\"rounded-lg bg-white dark:bg-zinc-800 px-5 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors\">\n Cancel\n </button>\n </div>\n </div>\n\n <!-- Danger Buttons -->\n <div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Danger</h3>\n <div class=\"flex flex-wrap gap-3\">\n <button class=\"inline-flex items-center gap-x-2 rounded-lg bg-red-600 px-4 py-2.5 text-sm font-semibold text-white hover:bg-red-700 transition-colors\">\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16\"/>\n </svg>\n Delete\n </button>\n </div>\n </div>\n\n <!-- Link Buttons -->\n <div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Link Style</h3>\n <div class=\"flex flex-wrap gap-3\">\n <button class=\"text-sm font-semibold text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">\n Learn more →\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Forms Section -->\n <div id=\"forms\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Form Components</h2>\n\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-8\">\n <form class=\"space-y-6\">\n <!-- Text Input -->\n <div>\n <label class=\"block text-sm font-medium text-zinc-950 dark:text-white mb-2\">\n Text Input\n </label>\n <input\n type=\"text\"\n placeholder=\"Enter text...\"\n class=\"w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-950 dark:focus:ring-white transition-shadow\"\n />\n </div>\n\n <!-- Select -->\n <div>\n <label for=\"select-demo\" class=\"block text-sm/6 font-medium text-zinc-950 dark:text-white\">\n Select Dropdown\n </label>\n <div class=\"mt-2 grid grid-cols-1\">\n <select id=\"select-demo\" class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-zinc-500/30 dark:outline-zinc-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-zinc-500 dark:focus-visible:outline-zinc-400 sm:text-sm/6\">\n <option value=\"\">Choose an option</option>\n <option value=\"1\">Option 1</option>\n <option value=\"2\" selected>Option 2</option>\n <option value=\"3\">Option 3</option>\n </select>\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" data-slot=\"icon\" aria-hidden=\"true\" class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-zinc-600 dark:text-zinc-400 sm:size-4\">\n <path d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" fill-rule=\"evenodd\" />\n </svg>\n </div>\n </div>\n\n <!-- Textarea -->\n <div>\n <label class=\"block text-sm font-medium text-zinc-950 dark:text-white mb-2\">\n Textarea\n </label>\n <textarea\n rows=\"3\"\n placeholder=\"Enter description...\"\n class=\"w-full rounded-lg bg-white dark:bg-zinc-800 px-3 py-2 text-sm text-zinc-950 dark:text-white shadow-sm ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:ring-2 focus:ring-zinc-950 dark:focus:ring-white transition-shadow\"\n ></textarea>\n </div>\n\n <!-- Radio -->\n <div>\n <label class=\"block text-sm font-medium text-zinc-950 dark:text-white mb-3\">\n Radio Group\n </label>\n <div class=\"space-y-2\">\n <div class=\"flex items-center gap-x-2\">\n <input\n type=\"radio\"\n id=\"radio-1\"\n name=\"radio-demo\"\n class=\"h-4 w-4 border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-950 dark:text-white focus:ring-2 focus:ring-zinc-950 dark:focus:ring-white focus:ring-offset-0\"\n />\n <label for=\"radio-1\" class=\"text-sm text-zinc-950 dark:text-white\">\n Option 1\n </label>\n </div>\n <div class=\"flex items-center gap-x-2\">\n <input\n type=\"radio\"\n id=\"radio-2\"\n name=\"radio-demo\"\n class=\"h-4 w-4 border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-800 text-zinc-950 dark:text-white focus:ring-2 focus:ring-zinc-950 dark:focus:ring-white focus:ring-offset-0\"\n />\n <label for=\"radio-2\" class=\"text-sm text-zinc-950 dark:text-white\">\n Option 2\n </label>\n </div>\n </div>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Checkboxes Section -->\n <div id=\"checkboxes\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Checkboxes</h2>\n\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-8\">\n <div class=\"space-y-8\">\n <!-- Simple Checkboxes -->\n <div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">Simple Checkboxes</h3>\n <fieldset>\n <legend class=\"sr-only\">Simple Checkboxes</legend>\n <div class=\"space-y-3\">\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"checkbox-1\" type=\"checkbox\" name=\"simple\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\"><label for=\"checkbox-1\" class=\"font-medium text-zinc-950 dark:text-white\">Default checkbox</label></div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"checkbox-2\" type=\"checkbox\" name=\"simple\" checked class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\"><label for=\"checkbox-2\" class=\"font-medium text-zinc-950 dark:text-white\">Checked checkbox</label></div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"checkbox-3\" type=\"checkbox\" name=\"simple\" disabled class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\"><label for=\"checkbox-3\" class=\"font-medium text-zinc-500 dark:text-zinc-500\">Disabled checkbox</label></div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"checkbox-4\" type=\"checkbox\" name=\"simple\" checked disabled class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\"><label for=\"checkbox-4\" class=\"font-medium text-zinc-500 dark:text-zinc-500\">Disabled & checked</label></div>\n </div>\n </div>\n </fieldset>\n </div>\n\n <!-- Checkboxes with Descriptions -->\n <div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-4\">With Descriptions</h3>\n <fieldset>\n <legend class=\"sr-only\">Notifications</legend>\n <div class=\"space-y-5\">\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"email-notif\" type=\"checkbox\" name=\"notifications\" checked aria-describedby=\"email-desc\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"email-notif\" class=\"font-medium text-zinc-950 dark:text-white\">Email notifications</label>\n <p id=\"email-desc\" class=\"text-zinc-500 dark:text-zinc-400\">Receive email updates about new features and product announcements.</p>\n </div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"marketing\" type=\"checkbox\" name=\"notifications\" aria-describedby=\"marketing-desc\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"marketing\" class=\"font-medium text-zinc-950 dark:text-white\">Marketing communications</label>\n <p id=\"marketing-desc\" class=\"text-zinc-500 dark:text-zinc-400\">Get tips, special offers, and news about our products and services.</p>\n </div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"security\" type=\"checkbox\" name=\"notifications\" checked disabled aria-describedby=\"security-desc\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"security\" class=\"font-medium text-zinc-500 dark:text-zinc-500\">Security alerts</label>\n <p id=\"security-desc\" class=\"text-zinc-500 dark:text-zinc-400\">Important notifications about your account security and privacy.</p>\n </div>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Tables Section -->\n <div id=\"tables\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Tables</h2>\n\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 overflow-hidden\">\n <table class=\"min-w-full divide-y divide-zinc-950/5 dark:divide-white/5\">\n <thead class=\"bg-zinc-50 dark:bg-zinc-800/50\">\n <tr>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400\">\n Name\n </th>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400\">\n Status\n </th>\n <th scope=\"col\" class=\"px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-zinc-500 dark:text-zinc-400\">\n Created\n </th>\n <th scope=\"col\" class=\"relative px-6 py-3\">\n <span class=\"sr-only\">Actions</span>\n </th>\n </tr>\n </thead>\n <tbody class=\"divide-y divide-zinc-950/5 dark:divide-white/5\">\n <tr class=\"hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-medium text-zinc-950 dark:text-white\">\n Sample Item 1\n </td>\n <td class=\"whitespace-nowrap px-6 py-4\">\n <span class=\"inline-flex items-center rounded-md bg-green-50 dark:bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20 dark:ring-green-500/20\">\n Published\n </span>\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm text-zinc-500 dark:text-zinc-400\">\n Jan 15, 2025\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-right text-sm font-medium\">\n <div class=\"flex justify-end gap-x-2\">\n <a href=\"#\" class=\"text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">\n Edit\n </a>\n <a href=\"#\" class=\"text-red-600 hover:text-red-700 dark:hover:text-red-500 transition-colors\">\n Delete\n </a>\n </div>\n </td>\n </tr>\n <tr class=\"hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors\">\n <td class=\"whitespace-nowrap px-6 py-4 text-sm font-medium text-zinc-950 dark:text-white\">\n Sample Item 2\n </td>\n <td class=\"whitespace-nowrap px-6 py-4\">\n <span class=\"inline-flex items-center rounded-md bg-amber-50 dark:bg-amber-500/10 px-2 py-1 text-xs font-medium text-amber-700 dark:text-amber-400 ring-1 ring-inset ring-amber-600/20 dark:ring-amber-500/20\">\n Draft\n </span>\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-sm text-zinc-500 dark:text-zinc-400\">\n Jan 14, 2025\n </td>\n <td class=\"whitespace-nowrap px-6 py-4 text-right text-sm font-medium\">\n <div class=\"flex justify-end gap-x-2\">\n <a href=\"#\" class=\"text-zinc-950 dark:text-white hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors\">\n Edit\n </a>\n <a href=\"#\" class=\"text-red-600 hover:text-red-700 dark:hover:text-red-500 transition-colors\">\n Delete\n </a>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n\n <!-- Alerts Section -->\n <div id=\"alerts\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Alerts</h2>\n\n <div class=\"space-y-4\">\n <!-- Success Alert -->\n <div class=\"rounded-lg bg-green-50 dark:bg-green-500/10 p-4 ring-1 ring-green-600/20 dark:ring-green-500/20\">\n <div class=\"flex items-start gap-x-3\">\n <svg class=\"h-5 w-5 text-green-600 dark:text-green-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\"/>\n </svg>\n <div>\n <h3 class=\"text-sm font-semibold text-green-900 dark:text-green-300\">Success</h3>\n <p class=\"mt-1 text-sm text-green-700 dark:text-green-400\">Your changes have been saved successfully.</p>\n </div>\n </div>\n </div>\n\n <!-- Error Alert -->\n <div class=\"rounded-lg bg-red-50 dark:bg-red-500/10 p-4 ring-1 ring-red-600/20 dark:ring-red-500/20\">\n <div class=\"flex items-start gap-x-3\">\n <svg class=\"h-5 w-5 text-red-600 dark:text-red-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"/>\n </svg>\n <div>\n <h3 class=\"text-sm font-semibold text-red-900 dark:text-red-300\">Error</h3>\n <p class=\"mt-1 text-sm text-red-700 dark:text-red-400\">There was a problem with your request.</p>\n </div>\n </div>\n </div>\n\n <!-- Warning Alert -->\n <div class=\"rounded-lg bg-amber-50 dark:bg-amber-500/10 p-4 ring-1 ring-amber-600/20 dark:ring-amber-500/20\">\n <div class=\"flex items-start gap-x-3\">\n <svg class=\"h-5 w-5 text-amber-600 dark:text-amber-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.865-.833-2.632 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z\"/>\n </svg>\n <div>\n <h3 class=\"text-sm font-semibold text-amber-900 dark:text-amber-300\">Warning</h3>\n <p class=\"mt-1 text-sm text-amber-700 dark:text-amber-400\">Please review your changes before continuing.</p>\n </div>\n </div>\n </div>\n\n <!-- Info Alert -->\n <div class=\"rounded-lg bg-blue-50 dark:bg-blue-500/10 p-4 ring-1 ring-blue-600/20 dark:ring-blue-500/20\">\n <div class=\"flex items-start gap-x-3\">\n <svg class=\"h-5 w-5 text-blue-600 dark:text-blue-400\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"/>\n </svg>\n <div>\n <h3 class=\"text-sm font-semibold text-blue-900 dark:text-blue-300\">Information</h3>\n <p class=\"mt-1 text-sm text-blue-700 dark:text-blue-400\">Here's some helpful information about this feature.</p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Badges Section -->\n <div id=\"badges\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Badges</h2>\n\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-8\">\n <div class=\"flex flex-wrap gap-2\">\n <span class=\"inline-flex items-center rounded-md bg-zinc-50 dark:bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-400 ring-1 ring-inset ring-zinc-500/10 dark:ring-zinc-400/20\">\n Default\n </span>\n <span class=\"inline-flex items-center rounded-md bg-blue-50 dark:bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-400 ring-1 ring-inset ring-blue-700/10 dark:ring-blue-400/20\">\n Info\n </span>\n <span class=\"inline-flex items-center rounded-md bg-green-50 dark:bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20 dark:ring-green-500/20\">\n Success\n </span>\n <span class=\"inline-flex items-center rounded-md bg-amber-50 dark:bg-amber-500/10 px-2 py-1 text-xs font-medium text-amber-700 dark:text-amber-400 ring-1 ring-inset ring-amber-600/20 dark:ring-amber-500/20\">\n Warning\n </span>\n <span class=\"inline-flex items-center rounded-md bg-red-50 dark:bg-red-500/10 px-2 py-1 text-xs font-medium text-red-700 dark:text-red-400 ring-1 ring-inset ring-red-600/20 dark:ring-red-500/20\">\n Error\n </span>\n </div>\n </div>\n </div>\n\n <!-- Cards Section -->\n <div id=\"cards\">\n <h2 class=\"text-xl font-semibold text-zinc-950 dark:text-white mb-6\">Cards</h2>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6\">\n <!-- Basic Card -->\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\">\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-2\">Basic Card</h3>\n <p class=\"text-sm text-zinc-500 dark:text-zinc-400\">\n A simple card with a title and description.\n </p>\n </div>\n\n <!-- Interactive Card -->\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 hover:shadow-md hover:ring-zinc-950/10 dark:hover:ring-white/20 transition-all cursor-pointer\">\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white mb-2\">Interactive Card</h3>\n <p class=\"text-sm text-zinc-500 dark:text-zinc-400\">\n This card has hover effects and is clickable.\n </p>\n </div>\n\n <!-- Card with Icon -->\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\">\n <div class=\"flex items-center gap-x-3 mb-3\">\n <div class=\"flex h-10 w-10 items-center justify-center rounded-lg bg-zinc-950 dark:bg-white\">\n <svg class=\"h-5 w-5 text-white dark:text-zinc-950\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 10V3L4 14h7v7l9-11h-7z\"/>\n </svg>\n </div>\n <h3 class=\"text-base font-semibold text-zinc-950 dark:text-white\">With Icon</h3>\n </div>\n <p class=\"text-sm text-zinc-500 dark:text-zinc-400\">\n Card with an icon in the header.\n </p>\n </div>\n </div>\n </div>\n\n </div>\n `\n\n const layoutData: AdminLayoutCatalystData = {\n title: 'Catalyst Design System',\n pageTitle: 'Design System',\n currentPath: '/admin/design',\n user: data.user,\n version: data.version,\n content: pageContent\n }\n\n return renderAdminLayoutCatalyst(layoutData)\n}","import { renderAdminLayoutCatalyst, AdminLayoutCatalystData } from '../layouts/admin-layout-catalyst.template'\n\nexport interface CheckboxPageData {\n user?: {\n name: string\n email: string\n role: string\n }\n}\n\nexport function renderCheckboxPage(data: CheckboxPageData): string {\n const pageContent = `\n <div class=\"space-y-8\">\n <!-- Header -->\n <div class=\"sm:flex sm:items-center sm:justify-between\">\n <div>\n <h1 class=\"text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8\">Catalyst Checkboxes</h1>\n <p class=\"mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400\">\n Interactive examples using the official Catalyst checkbox component\n </p>\n </div>\n <div class=\"mt-4 sm:mt-0\">\n <a\n href=\"/admin/design\"\n class=\"inline-flex items-center gap-x-2 rounded-lg bg-white dark:bg-zinc-800 px-3.5 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white hover:bg-zinc-50 dark:hover:bg-zinc-700 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 transition-colors shadow-sm\"\n >\n <svg class=\"w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M15 19l-7-7 7-7\"/>\n </svg>\n Back to Design System\n </a>\n </div>\n </div>\n\n <!-- Example 1: Discoverability -->\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-8\">\n <h3 class=\"text-base/6 font-semibold text-zinc-950 dark:text-white mb-2\">Discoverability</h3>\n <p class=\"text-sm/6 text-zinc-500 dark:text-zinc-400 mb-6\">Decide where your events can be found across the web.</p>\n\n <fieldset>\n <legend class=\"sr-only\">Discoverability</legend>\n <div class=\"space-y-5\">\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"show_on_events_page\" type=\"checkbox\" name=\"discoverability\" checked aria-describedby=\"show-description\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white dark:stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"show_on_events_page\" class=\"font-medium text-zinc-950 dark:text-white\">Show on events page</label>\n <p id=\"show-description\" class=\"text-zinc-500 dark:text-zinc-400\">Make this event visible on your profile.</p>\n </div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"allow_embedding\" type=\"checkbox\" name=\"discoverability\" aria-describedby=\"embedding-description\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white dark:stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"allow_embedding\" class=\"font-medium text-zinc-950 dark:text-white\">Allow embedding</label>\n <p id=\"embedding-description\" class=\"text-zinc-500 dark:text-zinc-400\">Allow others to embed your event details on their own site.</p>\n </div>\n </div>\n </div>\n </fieldset>\n </div>\n\n <!-- Example 2: Newsletter Preferences -->\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-8\">\n <h3 class=\"text-base/6 font-semibold text-zinc-950 dark:text-white mb-2\">Newsletter Preferences</h3>\n <p class=\"text-sm/6 text-zinc-500 dark:text-zinc-400 mb-6\">Choose which updates you'd like to receive.</p>\n\n <fieldset>\n <legend class=\"sr-only\">Newsletter Preferences</legend>\n <div class=\"space-y-5\">\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"product_updates\" type=\"checkbox\" name=\"newsletter\" checked aria-describedby=\"product-description\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white dark:stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"product_updates\" class=\"font-medium text-zinc-950 dark:text-white\">Product Updates</label>\n <p id=\"product-description\" class=\"text-zinc-500 dark:text-zinc-400\">Get notified about new features and improvements.</p>\n </div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"weekly_digest\" type=\"checkbox\" name=\"newsletter\" aria-describedby=\"weekly-description\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white dark:stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"weekly_digest\" class=\"font-medium text-zinc-950 dark:text-white\">Weekly Digest</label>\n <p id=\"weekly-description\" class=\"text-zinc-500 dark:text-zinc-400\">Receive a summary of activity every week.</p>\n </div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"marketing\" type=\"checkbox\" name=\"newsletter\" aria-describedby=\"marketing-description\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white dark:stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"marketing\" class=\"font-medium text-zinc-950 dark:text-white\">Marketing Emails</label>\n <p id=\"marketing-description\" class=\"text-zinc-500 dark:text-zinc-400\">Special offers and promotional content.</p>\n </div>\n </div>\n </div>\n </fieldset>\n </div>\n\n <!-- Example 3: Privacy Settings -->\n <div class=\"rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-8\">\n <h3 class=\"text-base/6 font-semibold text-zinc-950 dark:text-white mb-2\">Privacy Settings</h3>\n <p class=\"text-sm/6 text-zinc-500 dark:text-zinc-400 mb-6\">Control your privacy and data sharing preferences.</p>\n\n <fieldset>\n <legend class=\"sr-only\">Privacy Settings</legend>\n <div class=\"space-y-5\">\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"profile_public\" type=\"checkbox\" name=\"privacy\" checked aria-describedby=\"profile-description\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white dark:stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"profile_public\" class=\"font-medium text-zinc-950 dark:text-white\">Public Profile</label>\n <p id=\"profile-description\" class=\"text-zinc-500 dark:text-zinc-400\">Make your profile visible to other users.</p>\n </div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"show_activity\" type=\"checkbox\" name=\"privacy\" checked aria-describedby=\"activity-description\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white dark:stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"show_activity\" class=\"font-medium text-zinc-950 dark:text-white\">Show Activity</label>\n <p id=\"activity-description\" class=\"text-zinc-500 dark:text-zinc-400\">Display your recent activity on your profile.</p>\n </div>\n </div>\n <div class=\"flex gap-3\">\n <div class=\"flex h-6 shrink-0 items-center\">\n <div class=\"group grid size-4 grid-cols-1\">\n <input id=\"analytics\" type=\"checkbox\" name=\"privacy\" aria-describedby=\"analytics-description\" class=\"col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto\" />\n <svg viewBox=\"0 0 14 14\" fill=\"none\" class=\"pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white dark:stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25\">\n <path d=\"M3 8L6 11L11 3.5\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:checked]:opacity-100\" />\n <path d=\"M3 7H11\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"opacity-0 group-has-[:indeterminate]:opacity-100\" />\n </svg>\n </div>\n </div>\n <div class=\"text-sm/6\">\n <label for=\"analytics\" class=\"font-medium text-zinc-950 dark:text-white\">Analytics</label>\n <p id=\"analytics-description\" class=\"text-zinc-500 dark:text-zinc-400\">Help us improve by sharing anonymous usage data.</p>\n </div>\n </div>\n </div>\n </fieldset>\n </div>\n </div>\n `\n\n const layoutData: AdminLayoutCatalystData = {\n title: 'Catalyst Checkboxes',\n pageTitle: 'Catalyst Checkboxes',\n currentPath: '/admin/checkboxes',\n user: data.user,\n content: pageContent\n }\n\n return renderAdminLayoutCatalyst(layoutData)\n}\n","import { renderAdminLayoutCatalyst, AdminLayoutCatalystData } from '../layouts/admin-layout-catalyst.template'\nimport { renderPagination } from '../pagination.template'\nimport { renderAlert } from '../alert.template'\nimport { renderTable } from '../table.template'\n\ninterface Testimonial {\n id: number\n author_name: string\n author_title?: string\n author_company?: string\n testimonial_text: string\n rating?: number\n isPublished: boolean\n sortOrder: number\n created_at: number\n updated_at: number\n}\n\ninterface TestimonialsListData {\n testimonials: Testimonial[]\n totalCount: number\n currentPage: number\n totalPages: number\n user?: { name: string; email: string; role: string }\n message?: string\n messageType?: 'success' | 'error' | 'warning' | 'info'\n}\n\nexport function renderTestimonialsList(data: TestimonialsListData): string {\n const { testimonials, totalCount, currentPage, totalPages, message, messageType } = data\n\n const pageContent = `\n <div>\n <!-- Header -->\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6\">\n <div>\n <h1 class=\"text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8\">Testimonials</h1>\n <p class=\"mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400\">Manage customer testimonials and reviews</p>\n </div>\n <div class=\"mt-4 sm:mt-0 sm:ml-16 sm:flex-none\">\n <a href=\"/admin/testimonials/new\"\n class=\"inline-flex items-center justify-center rounded-lg bg-zinc-950 dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm\">\n <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n </svg>\n Add Testimonial\n </a>\n </div>\n </div>\n\n ${message ? renderAlert({ type: messageType || 'info', message, dismissible: true }) : ''}\n\n <!-- Filters -->\n <div class=\"relative rounded-xl overflow-hidden mb-6\">\n <!-- Gradient Background -->\n <div class=\"absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 dark:from-cyan-400/20 dark:via-blue-400/20 dark:to-purple-400/20\"></div>\n\n <div class=\"relative bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10\">\n <div class=\"px-6 py-5\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-4 flex-1\">\n <div>\n <label for=\"published\" class=\"block text-sm/6 font-medium text-zinc-950 dark:text-white\">Status</label>\n <div class=\"mt-2 grid grid-cols-1\">\n <select\n name=\"published\"\n id=\"published\"\n hx-get=\"/admin/testimonials\"\n hx-trigger=\"change\"\n hx-target=\"#testimonials-list\"\n hx-include=\"[name='minRating'], [name='search']\"\n class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-48\"\n >\n <option value=\"\">All</option>\n <option value=\"true\">Published</option>\n <option value=\"false\">Draft</option>\n </select>\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" data-slot=\"icon\" aria-hidden=\"true\" class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cyan-600 dark:text-cyan-400 sm:size-4\">\n <path d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" fill-rule=\"evenodd\" />\n </svg>\n </div>\n </div>\n <div>\n <label for=\"minRating\" class=\"block text-sm/6 font-medium text-zinc-950 dark:text-white\">Min Rating</label>\n <div class=\"mt-2 grid grid-cols-1\">\n <select\n name=\"minRating\"\n id=\"minRating\"\n hx-get=\"/admin/testimonials\"\n hx-trigger=\"change\"\n hx-target=\"#testimonials-list\"\n hx-include=\"[name='published'], [name='search']\"\n class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-cyan-500/30 dark:outline-cyan-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-cyan-500 dark:focus-visible:outline-cyan-400 sm:text-sm/6 min-w-48\"\n >\n <option value=\"\">All Ratings</option>\n <option value=\"5\">5 Stars</option>\n <option value=\"4\">4+ Stars</option>\n <option value=\"3\">3+ Stars</option>\n </select>\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" data-slot=\"icon\" aria-hidden=\"true\" class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-cyan-600 dark:text-cyan-400 sm:size-4\">\n <path d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" fill-rule=\"evenodd\" />\n </svg>\n </div>\n </div>\n <div class=\"flex-1 max-w-md\">\n <label for=\"search\" class=\"block text-sm font-medium text-zinc-950 dark:text-white mb-2\">Search</label>\n <div class=\"relative group\">\n <div class=\"absolute left-3.5 top-2.5 flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 dark:from-cyan-300 dark:to-blue-400 opacity-90 group-focus-within:opacity-100 transition-opacity\">\n <svg class=\"h-3 w-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"/>\n </svg>\n </div>\n <input\n type=\"text\"\n name=\"search\"\n id=\"search\"\n placeholder=\"Search testimonials...\"\n hx-get=\"/admin/testimonials\"\n hx-trigger=\"keyup changed delay:300ms\"\n hx-target=\"#testimonials-list\"\n hx-include=\"[name='published'], [name='minRating']\"\n class=\"w-full rounded-full bg-transparent px-11 py-2 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 border-2 border-cyan-200/50 dark:border-cyan-700/50 focus:outline-none focus:border-cyan-500 dark:focus:border-cyan-400 focus:shadow-lg focus:shadow-cyan-500/20 dark:focus:shadow-cyan-400/20 transition-all duration-300\"\n />\n </div>\n </div>\n </div>\n <div class=\"flex items-center gap-x-3 ml-4\">\n <span class=\"text-sm/6 font-medium text-zinc-700 dark:text-zinc-300 px-3 py-1.5 rounded-full bg-white/60 dark:bg-zinc-800/60 backdrop-blur-sm\">${totalCount} ${totalCount === 1 ? 'item' : 'items'}</span>\n <button\n onclick=\"location.reload()\"\n class=\"inline-flex items-center gap-x-1.5 px-3 py-1.5 bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm text-zinc-950 dark:text-white text-sm font-medium rounded-full ring-1 ring-inset ring-cyan-200/50 dark:ring-cyan-700/50 hover:bg-gradient-to-r hover:from-cyan-50 hover:to-blue-50 dark:hover:from-cyan-900/30 dark:hover:to-blue-900/30 hover:ring-cyan-300 dark:hover:ring-cyan-600 transition-all duration-200\"\n >\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"/>\n </svg>\n Refresh\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Testimonials List -->\n <div id=\"testimonials-list\">\n ${testimonials.length > 0 ? renderTable({\n tableId: 'testimonials-table',\n rowClickable: true,\n rowClickUrl: (row: any) => `/admin/testimonials/${row.id}`,\n columns: [\n { key: 'author', label: 'Author', sortable: true, sortType: 'string' },\n { key: 'testimonial', label: 'Testimonial', sortable: false },\n { key: 'status', label: 'Status', sortable: true, sortType: 'boolean' },\n { key: 'sortOrder', label: 'Order', sortable: true, sortType: 'number' },\n { key: 'created_at', label: 'Created', sortable: true, sortType: 'date' }\n ],\n rows: testimonials.map(testimonial => {\n const rating = testimonial.rating ? '⭐'.repeat(testimonial.rating) : ''\n const truncated = testimonial.testimonial_text.length > 100\n ? testimonial.testimonial_text.substring(0, 100) + '...'\n : testimonial.testimonial_text\n\n return {\n id: testimonial.id,\n author: `\n <div class=\"flex flex-col\">\n <div class=\"font-medium text-zinc-950 dark:text-white\">${testimonial.author_name}</div>\n ${testimonial.author_title || testimonial.author_company ? `\n <div class=\"text-xs text-zinc-500 dark:text-zinc-400\">\n ${[testimonial.author_title, testimonial.author_company].filter(Boolean).join(' · ')}\n </div>\n ` : ''}\n ${rating ? `<div class=\"text-xs mt-1\">${rating}</div>` : ''}\n </div>\n `,\n testimonial: `<div class=\"text-sm text-zinc-700 dark:text-zinc-300 max-w-md\">${truncated}</div>`,\n status: testimonial.isPublished\n ? '<span class=\"inline-flex items-center rounded-md bg-green-50 dark:bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20 dark:ring-green-500/20\">Published</span>'\n : '<span class=\"inline-flex items-center rounded-md bg-zinc-50 dark:bg-zinc-500/10 px-2 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-400 ring-1 ring-inset ring-zinc-500/20 dark:ring-zinc-500/20\">Draft</span>',\n sortOrder: testimonial.sortOrder.toString(),\n created_at: new Date(testimonial.created_at * 1000).toLocaleDateString()\n }\n }),\n selectable: true\n }) : `\n <div class=\"text-center py-12 bg-white dark:bg-zinc-900 rounded-lg shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10\">\n <svg class=\"mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z\" />\n </svg>\n <h3 class=\"mt-2 text-sm font-semibold text-zinc-950 dark:text-white\">No testimonials</h3>\n <p class=\"mt-1 text-sm text-zinc-500 dark:text-zinc-400\">Get started by creating a new testimonial.</p>\n <div class=\"mt-6\">\n <a href=\"/admin/testimonials/new\" class=\"inline-flex items-center rounded-md bg-zinc-950 dark:bg-white px-3 py-2 text-sm font-semibold text-white dark:text-zinc-950 shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors\">\n <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n </svg>\n New Testimonial\n </a>\n </div>\n </div>\n `}\n </div>\n\n ${totalPages > 1 ? renderPagination({\n currentPage,\n totalPages,\n totalItems: totalCount,\n itemsPerPage: 20,\n startItem: (currentPage - 1) * 20 + 1,\n endItem: Math.min(currentPage * 20, totalCount),\n baseUrl: '/admin/testimonials'\n }) : ''}\n </div>\n `\n\n const layoutData: AdminLayoutCatalystData = {\n title: 'Testimonials',\n pageTitle: 'Testimonials',\n currentPath: '/admin/testimonials',\n user: data.user,\n content: pageContent\n }\n\n return renderAdminLayoutCatalyst(layoutData)\n}\n","import { renderAdminLayoutCatalyst, AdminLayoutCatalystData } from '../layouts/admin-layout-catalyst.template'\nimport { renderPagination } from '../pagination.template'\nimport { renderAlert } from '../alert.template'\nimport { renderTable } from '../table.template'\n\ninterface CodeExample {\n id: number\n title: string\n description?: string\n code: string\n language: string\n category?: string\n tags?: string\n isPublished: boolean\n sortOrder: number\n created_at: number\n updated_at: number\n}\n\ninterface CodeExamplesListData {\n codeExamples: CodeExample[]\n totalCount: number\n currentPage: number\n totalPages: number\n user?: { name: string; email: string; role: string }\n message?: string\n messageType?: 'success' | 'error' | 'warning' | 'info'\n}\n\nexport function renderCodeExamplesList(data: CodeExamplesListData): string {\n const { codeExamples, totalCount, currentPage, totalPages, message, messageType } = data\n\n const pageContent = `\n <div>\n <!-- Header -->\n <div class=\"flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6\">\n <div>\n <h1 class=\"text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8\">Code Examples</h1>\n <p class=\"mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400\">Manage code snippets and examples</p>\n </div>\n <div class=\"mt-4 sm:mt-0 sm:ml-16 sm:flex-none\">\n <a href=\"/admin/code-examples/new\"\n class=\"inline-flex items-center justify-center rounded-lg bg-zinc-950 dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm\">\n <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n </svg>\n Add Code Example\n </a>\n </div>\n </div>\n\n ${message ? renderAlert({ type: messageType || 'info', message, dismissible: true }) : ''}\n\n <!-- Filters -->\n <div class=\"relative rounded-xl overflow-hidden mb-6\">\n <!-- Gradient Background -->\n <div class=\"absolute inset-0 bg-gradient-to-r from-purple-500/10 via-pink-500/10 to-orange-500/10 dark:from-purple-400/20 dark:via-pink-400/20 dark:to-orange-400/20\"></div>\n\n <div class=\"relative bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10\">\n <div class=\"px-6 py-5\">\n <div class=\"flex items-center justify-between\">\n <div class=\"flex items-center space-x-4 flex-1\">\n <div>\n <label for=\"published\" class=\"block text-sm/6 font-medium text-zinc-950 dark:text-white\">Status</label>\n <div class=\"mt-2 grid grid-cols-1\">\n <select\n name=\"published\"\n id=\"published\"\n hx-get=\"/admin/code-examples\"\n hx-trigger=\"change\"\n hx-target=\"#code-examples-list\"\n hx-include=\"[name='language'], [name='search']\"\n class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-purple-500/30 dark:outline-purple-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400 sm:text-sm/6 min-w-48\"\n >\n <option value=\"\">All</option>\n <option value=\"true\">Published</option>\n <option value=\"false\">Draft</option>\n </select>\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" data-slot=\"icon\" aria-hidden=\"true\" class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-purple-600 dark:text-purple-400 sm:size-4\">\n <path d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" fill-rule=\"evenodd\" />\n </svg>\n </div>\n </div>\n <div>\n <label for=\"language\" class=\"block text-sm/6 font-medium text-zinc-950 dark:text-white\">Language</label>\n <div class=\"mt-2 grid grid-cols-1\">\n <select\n name=\"language\"\n id=\"language\"\n hx-get=\"/admin/code-examples\"\n hx-trigger=\"change\"\n hx-target=\"#code-examples-list\"\n hx-include=\"[name='published'], [name='search']\"\n class=\"col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-purple-500/30 dark:outline-purple-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400 sm:text-sm/6 min-w-48\"\n >\n <option value=\"\">All Languages</option>\n <option value=\"javascript\">JavaScript</option>\n <option value=\"typescript\">TypeScript</option>\n <option value=\"python\">Python</option>\n <option value=\"go\">Go</option>\n <option value=\"rust\">Rust</option>\n <option value=\"java\">Java</option>\n <option value=\"php\">PHP</option>\n <option value=\"ruby\">Ruby</option>\n <option value=\"sql\">SQL</option>\n </select>\n <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" data-slot=\"icon\" aria-hidden=\"true\" class=\"pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-purple-600 dark:text-purple-400 sm:size-4\">\n <path d=\"M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z\" clip-rule=\"evenodd\" fill-rule=\"evenodd\" />\n </svg>\n </div>\n </div>\n <div class=\"flex-1 max-w-md\">\n <label for=\"search\" class=\"block text-sm font-medium text-zinc-950 dark:text-white mb-2\">Search</label>\n <div class=\"relative group\">\n <div class=\"absolute left-3.5 top-2.5 flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-purple-400 to-pink-500 dark:from-purple-300 dark:to-pink-400 opacity-90 group-focus-within:opacity-100 transition-opacity\">\n <svg class=\"h-3 w-3 text-white\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" stroke-width=\"2.5\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z\"/>\n </svg>\n </div>\n <input\n type=\"text\"\n name=\"search\"\n id=\"search\"\n placeholder=\"Search code examples...\"\n hx-get=\"/admin/code-examples\"\n hx-trigger=\"keyup changed delay:300ms\"\n hx-target=\"#code-examples-list\"\n hx-include=\"[name='published'], [name='language']\"\n class=\"w-full rounded-full bg-transparent px-11 py-2 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 border-2 border-purple-200/50 dark:border-purple-700/50 focus:outline-none focus:border-purple-500 dark:focus:border-purple-400 focus:shadow-lg focus:shadow-purple-500/20 dark:focus:shadow-purple-400/20 transition-all duration-300\"\n />\n </div>\n </div>\n </div>\n <div class=\"flex items-center gap-x-3 ml-4\">\n <span class=\"text-sm/6 font-medium text-zinc-700 dark:text-zinc-300 px-3 py-1.5 rounded-full bg-white/60 dark:bg-zinc-800/60 backdrop-blur-sm\">${totalCount} ${totalCount === 1 ? 'item' : 'items'}</span>\n <button\n onclick=\"location.reload()\"\n class=\"inline-flex items-center gap-x-1.5 px-3 py-1.5 bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm text-zinc-950 dark:text-white text-sm font-medium rounded-full ring-1 ring-inset ring-purple-200/50 dark:ring-purple-700/50 hover:bg-gradient-to-r hover:from-purple-50 hover:to-pink-50 dark:hover:from-purple-900/30 dark:hover:to-pink-900/30 hover:ring-purple-300 dark:hover:ring-purple-600 transition-all duration-200\"\n >\n <svg class=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15\"/>\n </svg>\n Refresh\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Code Examples List -->\n <div id=\"code-examples-list\">\n ${codeExamples.length > 0 ? renderTable({\n tableId: 'code-examples-table',\n rowClickable: true,\n rowClickUrl: (row: any) => `/admin/code-examples/${row.id}`,\n columns: [\n { key: 'title', label: 'Title', sortable: true, sortType: 'string' },\n { key: 'language', label: 'Language', sortable: true, sortType: 'string' },\n { key: 'description', label: 'Description', sortable: false },\n { key: 'status', label: 'Status', sortable: true, sortType: 'boolean' },\n { key: 'sortOrder', label: 'Order', sortable: true, sortType: 'number' },\n { key: 'created_at', label: 'Created', sortable: true, sortType: 'date' }\n ],\n rows: codeExamples.map(example => {\n const truncatedDesc = example.description\n ? (example.description.length > 80\n ? example.description.substring(0, 80) + '...'\n : example.description)\n : 'No description'\n\n const languageColors: Record<string, string> = {\n javascript: 'bg-yellow-100 dark:bg-yellow-500/10 text-yellow-700 dark:text-yellow-400 ring-yellow-600/20 dark:ring-yellow-500/20',\n typescript: 'bg-blue-100 dark:bg-blue-500/10 text-blue-700 dark:text-blue-400 ring-blue-600/20 dark:ring-blue-500/20',\n python: 'bg-green-100 dark:bg-green-500/10 text-green-700 dark:text-green-400 ring-green-600/20 dark:ring-green-500/20',\n go: 'bg-cyan-100 dark:bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 ring-cyan-600/20 dark:ring-cyan-500/20',\n rust: 'bg-orange-100 dark:bg-orange-500/10 text-orange-700 dark:text-orange-400 ring-orange-600/20 dark:ring-orange-500/20',\n java: 'bg-red-100 dark:bg-red-500/10 text-red-700 dark:text-red-400 ring-red-600/20 dark:ring-red-500/20',\n php: 'bg-indigo-100 dark:bg-indigo-500/10 text-indigo-700 dark:text-indigo-400 ring-indigo-600/20 dark:ring-indigo-500/20',\n ruby: 'bg-pink-100 dark:bg-pink-500/10 text-pink-700 dark:text-pink-400 ring-pink-600/20 dark:ring-pink-500/20',\n sql: 'bg-purple-100 dark:bg-purple-500/10 text-purple-700 dark:text-purple-400 ring-purple-600/20 dark:ring-purple-500/20'\n }\n const langColor = languageColors[example.language.toLowerCase()] || 'bg-zinc-100 dark:bg-zinc-500/10 text-zinc-700 dark:text-zinc-400 ring-zinc-600/20 dark:ring-zinc-500/20'\n\n return {\n id: example.id,\n title: `<div class=\"font-medium text-zinc-950 dark:text-white\">${example.title}</div>`,\n language: `<span class=\"inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset ${langColor}\">${example.language}</span>`,\n description: `<div class=\"text-sm text-zinc-700 dark:text-zinc-300 max-w-md\">${truncatedDesc}</div>`,\n status: example.isPublished\n ? '<span class=\"inline-flex items-center rounded-md bg-green-50 dark:bg-green-500/10 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-400 ring-1 ring-inset ring-green-600/20 dark:ring-green-500/20\">Published</span>'\n : '<span class=\"inline-flex items-center rounded-md bg-zinc-50 dark:bg-zinc-500/10 px-2 py-1 text-xs font-medium text-zinc-600 dark:text-zinc-400 ring-1 ring-inset ring-zinc-500/20 dark:ring-zinc-500/20\">Draft</span>',\n sortOrder: example.sortOrder.toString(),\n created_at: new Date(example.created_at * 1000).toLocaleDateString()\n }\n }),\n selectable: true\n }) : `\n <div class=\"text-center py-12 bg-white dark:bg-zinc-900 rounded-lg shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10\">\n <svg class=\"mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-600\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\" />\n </svg>\n <h3 class=\"mt-2 text-sm font-semibold text-zinc-950 dark:text-white\">No code examples</h3>\n <p class=\"mt-1 text-sm text-zinc-500 dark:text-zinc-400\">Get started by creating a new code example.</p>\n <div class=\"mt-6\">\n <a href=\"/admin/code-examples/new\" class=\"inline-flex items-center rounded-md bg-zinc-950 dark:bg-white px-3 py-2 text-sm font-semibold text-white dark:text-zinc-950 shadow-sm hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors\">\n <svg class=\"-ml-0.5 mr-1.5 h-5 w-5\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n <path d=\"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z\" />\n </svg>\n New Code Example\n </a>\n </div>\n </div>\n `}\n </div>\n\n ${totalPages > 1 ? renderPagination({\n currentPage,\n totalPages,\n totalItems: totalCount,\n itemsPerPage: 20,\n startItem: (currentPage - 1) * 20 + 1,\n endItem: Math.min(currentPage * 20, totalCount),\n baseUrl: '/admin/code-examples'\n }) : ''}\n </div>\n `\n\n const layoutData: AdminLayoutCatalystData = {\n title: 'Code Examples',\n pageTitle: 'Code Examples',\n currentPath: '/admin/code-examples',\n user: data.user,\n content: pageContent\n }\n\n return renderAdminLayoutCatalyst(layoutData)\n}\n","export interface FormField {\n name: string\n label: string\n type: 'text' | 'email' | 'textarea' | 'select' | 'checkbox' | 'rich_text' | 'number' | 'date' | 'multi_select' | 'file'\n value?: any\n placeholder?: string\n required?: boolean\n readonly?: boolean\n helpText?: string\n options?: Array<{ value: string; label: string; selected?: boolean }>\n rows?: number\n className?: string\n validation?: {\n min?: number\n max?: number\n pattern?: string\n }\n}\n\nexport interface FormData {\n id?: string\n action?: string\n method?: string\n hxPost?: string\n hxPut?: string\n hxTarget?: string\n fields: FormField[]\n submitButtons: Array<{\n label: string\n type?: 'submit' | 'button'\n value?: string\n name?: string\n className?: string\n onclick?: string\n }>\n title?: string\n description?: string\n className?: string\n}\n\nexport function renderForm(data: FormData): string {\n return `\n <form \n ${data.id ? `id=\"${data.id}\"` : ''}\n ${data.hxPost ? `hx-post=\"${data.hxPost}\"` : data.hxPut ? `hx-put=\"${data.hxPut}\"` : data.action ? `action=\"${data.action}\"` : ''}\n ${data.hxTarget ? `hx-target=\"${data.hxTarget}\"` : ''}\n method=\"${data.method || 'POST'}\"\n class=\"${data.className || 'space-y-6'}\"\n ${data.fields.some(f => f.type === 'file') ? 'enctype=\"multipart/form-data\"' : ''}\n >\n ${data.title ? `\n <div class=\"mb-6\">\n <h2 class=\"text-lg font-medium text-gray-1\">${data.title}</h2>\n ${data.description ? `<p class=\"mt-1 text-sm text-gray-4\">${data.description}</p>` : ''}\n </div>\n ` : ''}\n \n <div id=\"form-messages\"></div>\n \n ${data.fields.map(field => renderFormField(field)).join('')}\n \n <div class=\"flex justify-between items-center pt-6 border-t border-gray-7\">\n <div class=\"flex space-x-4\">\n ${data.submitButtons.map(button => `\n <button \n type=\"${button.type || 'submit'}\"\n ${button.name ? `name=\"${button.name}\"` : ''}\n ${button.value ? `value=\"${button.value}\"` : ''}\n ${button.onclick ? `onclick=\"${button.onclick}\"` : ''}\n class=\"btn ${button.className || 'btn-primary'}\"\n >\n ${button.label}\n </button>\n `).join('')}\n </div>\n </div>\n </form>\n `\n}\n\nexport function renderFormField(field: FormField): string {\n const fieldId = `field-${field.name}`\n const required = field.required ? 'required' : ''\n const readonly = field.readonly ? 'readonly' : ''\n const placeholder = field.placeholder ? `placeholder=\"${field.placeholder}\"` : ''\n\n let fieldHTML = ''\n\n switch (field.type) {\n case 'text':\n case 'email':\n case 'number':\n case 'date':\n fieldHTML = `\n <input\n type=\"${field.type === 'date' ? 'datetime-local' : field.type}\"\n id=\"${fieldId}\"\n name=\"${field.name}\"\n value=\"${field.value || ''}\"\n class=\"form-input ${field.className || ''}\"\n ${placeholder}\n ${required}\n ${readonly}\n ${field.validation?.min !== undefined ? `min=\"${field.validation.min}\"` : ''}\n ${field.validation?.max !== undefined ? `max=\"${field.validation.max}\"` : ''}\n ${field.validation?.pattern ? `pattern=\"${field.validation.pattern}\"` : ''}\n >\n `\n break\n \n case 'textarea':\n fieldHTML = `\n <textarea \n id=\"${fieldId}\"\n name=\"${field.name}\" \n class=\"form-textarea ${field.className || ''}\" \n rows=\"${field.rows || 4}\"\n ${placeholder}\n ${required}\n >${field.value || ''}</textarea>\n `\n break\n \n case 'rich_text':\n const uniqueId = `${field.name}-${Date.now()}`\n fieldHTML = `\n <div class=\"markdown-field\">\n <textarea id=\"${uniqueId}\" name=\"${field.name}\" class=\"form-textarea\" rows=\"8\">${field.value || ''}</textarea>\n <script>\n if (typeof EasyMDE !== 'undefined') {\n new EasyMDE({\n element: document.getElementById('${uniqueId}'),\n minHeight: '300px',\n spellChecker: false,\n status: ['autosave', 'lines', 'words', 'cursor'],\n autosave: {\n enabled: true,\n uniqueId: '${uniqueId}',\n delay: 1000\n },\n renderingConfig: {\n singleLineBreaks: false,\n codeSyntaxHighlighting: true\n }\n });\n }\n </script>\n </div>\n `\n break\n \n case 'select':\n fieldHTML = `\n <select \n id=\"${fieldId}\"\n name=\"${field.name}\" \n class=\"form-input ${field.className || ''}\" \n ${required}\n >\n ${field.options ? field.options.map(option => `\n <option value=\"${option.value}\" ${option.selected || field.value === option.value ? 'selected' : ''}>\n ${option.label}\n </option>\n `).join('') : ''}\n </select>\n `\n break\n \n case 'multi_select':\n fieldHTML = `\n <select \n id=\"${fieldId}\"\n name=\"${field.name}\" \n class=\"form-input ${field.className || ''}\" \n multiple \n ${required}\n >\n ${field.options ? field.options.map(option => `\n <option value=\"${option.value}\" ${option.selected ? 'selected' : ''}>\n ${option.label}\n </option>\n `).join('') : ''}\n </select>\n `\n break\n \n case 'checkbox':\n fieldHTML = `\n <input\n type=\"checkbox\"\n id=\"${fieldId}\"\n name=\"${field.name}\"\n value=\"1\"\n class=\"size-4 rounded border border-white/15 bg-white/5 checked:border-transparent checked:bg-white disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-white/20 focus:ring-offset-2 ${field.className || ''}\"\n ${field.value ? 'checked' : ''}\n ${required}\n >\n <label for=\"${fieldId}\" class=\"ml-2 text-sm text-white\">${field.label}</label>\n `\n break\n \n default:\n fieldHTML = `\n <input \n type=\"text\" \n id=\"${fieldId}\"\n name=\"${field.name}\" \n value=\"${field.value || ''}\"\n class=\"form-input ${field.className || ''}\" \n ${placeholder} \n ${required}\n >\n `\n break\n }\n \n // For checkbox, we handle the label differently\n if (field.type === 'checkbox') {\n return `\n <div class=\"form-group\">\n <div class=\"flex items-center\">\n ${fieldHTML}\n </div>\n ${field.helpText ? `<p class=\"text-sm text-zinc-500 dark:text-zinc-400 mt-1 ml-6\">${field.helpText}</p>` : ''}\n </div>\n `\n }\n\n return `\n <div class=\"form-group\">\n <label for=\"${fieldId}\" class=\"form-label\">\n ${field.label}${field.required ? ' *' : ''}\n </label>\n ${fieldHTML}\n ${field.helpText ? `<p class=\"text-sm text-zinc-500 dark:text-zinc-400 mt-1\">${field.helpText}</p>` : ''}\n </div>\n `\n}"]}