appflare 0.2.46 → 0.2.48

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 (141) hide show
  1. package/Documentation.md +898 -898
  2. package/cli/commands/index.ts +247 -247
  3. package/cli/generate.ts +360 -360
  4. package/cli/index.ts +120 -120
  5. package/cli/load-config.ts +184 -184
  6. package/cli/schema-compiler.ts +1366 -1366
  7. package/cli/templates/auth/README.md +156 -156
  8. package/cli/templates/auth/config.ts +61 -61
  9. package/cli/templates/auth/route-config.ts +1 -1
  10. package/cli/templates/auth/route-handler.ts +1 -1
  11. package/cli/templates/auth/route-request-utils.ts +5 -5
  12. package/cli/templates/auth/route.config.ts +18 -18
  13. package/cli/templates/auth/route.handler.ts +18 -18
  14. package/cli/templates/auth/route.request-utils.ts +55 -55
  15. package/cli/templates/auth/route.ts +14 -14
  16. package/cli/templates/core/README.md +266 -266
  17. package/cli/templates/core/app-creation.ts +19 -19
  18. package/cli/templates/core/client/appflare.ts +112 -112
  19. package/cli/templates/core/client/handlers/index.ts +763 -763
  20. package/cli/templates/core/client/handlers.ts +1 -1
  21. package/cli/templates/core/client/index.ts +7 -7
  22. package/cli/templates/core/client/storage.ts +195 -195
  23. package/cli/templates/core/client/types.ts +187 -187
  24. package/cli/templates/core/client-modules/appflare.ts +1 -1
  25. package/cli/templates/core/client-modules/handlers.ts +1 -1
  26. package/cli/templates/core/client-modules/index.ts +1 -1
  27. package/cli/templates/core/client-modules/storage.ts +1 -1
  28. package/cli/templates/core/client-modules/types.ts +1 -1
  29. package/cli/templates/core/client.artifacts.ts +39 -39
  30. package/cli/templates/core/client.ts +4 -4
  31. package/cli/templates/core/drizzle.ts +15 -15
  32. package/cli/templates/core/export.ts +14 -14
  33. package/cli/templates/core/handlers.route.ts +24 -24
  34. package/cli/templates/core/handlers.ts +1 -1
  35. package/cli/templates/core/imports.ts +9 -9
  36. package/cli/templates/core/server.ts +38 -38
  37. package/cli/templates/core/types.ts +6 -6
  38. package/cli/templates/core/wrangler.ts +109 -109
  39. package/cli/templates/dashboard/builders/functions/index.ts +17 -17
  40. package/cli/templates/dashboard/builders/functions/render-page/header.ts +20 -20
  41. package/cli/templates/dashboard/builders/functions/render-page/index.ts +33 -33
  42. package/cli/templates/dashboard/builders/functions/render-page/request-panel.ts +271 -271
  43. package/cli/templates/dashboard/builders/functions/render-page/result-panel.ts +85 -85
  44. package/cli/templates/dashboard/builders/functions/render-page/scripts.ts +703 -703
  45. package/cli/templates/dashboard/builders/functions/tree-builder.ts +47 -47
  46. package/cli/templates/dashboard/builders/navigation.ts +155 -155
  47. package/cli/templates/dashboard/builders/storage/index.ts +13 -13
  48. package/cli/templates/dashboard/builders/storage/routes/create-directory-route.ts +29 -29
  49. package/cli/templates/dashboard/builders/storage/routes/delete-route.ts +18 -18
  50. package/cli/templates/dashboard/builders/storage/routes/download-route.ts +23 -23
  51. package/cli/templates/dashboard/builders/storage/routes/index.ts +22 -22
  52. package/cli/templates/dashboard/builders/storage/routes/list-route.ts +25 -25
  53. package/cli/templates/dashboard/builders/storage/routes/preview-route.ts +21 -21
  54. package/cli/templates/dashboard/builders/storage/routes/upload-route.ts +21 -21
  55. package/cli/templates/dashboard/builders/storage/runtime/helpers.ts +72 -72
  56. package/cli/templates/dashboard/builders/storage/runtime/storage-page.ts +130 -130
  57. package/cli/templates/dashboard/builders/table-routes/common/drawer-panel.ts +27 -27
  58. package/cli/templates/dashboard/builders/table-routes/common/pagination.ts +30 -30
  59. package/cli/templates/dashboard/builders/table-routes/common/search-bar.ts +23 -23
  60. package/cli/templates/dashboard/builders/table-routes/fragments.ts +217 -217
  61. package/cli/templates/dashboard/builders/table-routes/helpers.ts +45 -45
  62. package/cli/templates/dashboard/builders/table-routes/index.ts +8 -8
  63. package/cli/templates/dashboard/builders/table-routes/table/actions-cell.ts +71 -71
  64. package/cli/templates/dashboard/builders/table-routes/table/get-route.ts +291 -291
  65. package/cli/templates/dashboard/builders/table-routes/table/index.ts +80 -80
  66. package/cli/templates/dashboard/builders/table-routes/table/post-routes.ts +163 -163
  67. package/cli/templates/dashboard/builders/table-routes/table-route.ts +7 -7
  68. package/cli/templates/dashboard/builders/table-routes/users/get-route.ts +69 -69
  69. package/cli/templates/dashboard/builders/table-routes/users/html/modals.ts +57 -57
  70. package/cli/templates/dashboard/builders/table-routes/users/html/page.ts +27 -27
  71. package/cli/templates/dashboard/builders/table-routes/users/html/table.ts +128 -128
  72. package/cli/templates/dashboard/builders/table-routes/users/index.ts +32 -32
  73. package/cli/templates/dashboard/builders/table-routes/users/post-routes.ts +150 -150
  74. package/cli/templates/dashboard/builders/table-routes/users/redirect.ts +14 -14
  75. package/cli/templates/dashboard/builders/table-routes/users-route.ts +10 -10
  76. package/cli/templates/dashboard/components/dashboard-home.ts +23 -23
  77. package/cli/templates/dashboard/components/layout.ts +420 -420
  78. package/cli/templates/dashboard/components/login-page.ts +65 -65
  79. package/cli/templates/dashboard/index.ts +61 -61
  80. package/cli/templates/dashboard/types.ts +9 -9
  81. package/cli/templates/handlers/README.md +353 -353
  82. package/cli/templates/handlers/auth.ts +37 -37
  83. package/cli/templates/handlers/execution.ts +42 -42
  84. package/cli/templates/handlers/generators/context/context-creation.ts +101 -101
  85. package/cli/templates/handlers/generators/context/error-helpers.ts +11 -11
  86. package/cli/templates/handlers/generators/context/scheduler.ts +24 -24
  87. package/cli/templates/handlers/generators/context/storage-api.ts +82 -82
  88. package/cli/templates/handlers/generators/context/storage-helpers.ts +59 -59
  89. package/cli/templates/handlers/generators/context/types.ts +40 -40
  90. package/cli/templates/handlers/generators/context.ts +43 -43
  91. package/cli/templates/handlers/generators/execution.ts +15 -15
  92. package/cli/templates/handlers/generators/handlers.ts +14 -14
  93. package/cli/templates/handlers/generators/registration/modules/cron.ts +35 -26
  94. package/cli/templates/handlers/generators/registration/modules/realtime/auth.ts +75 -75
  95. package/cli/templates/handlers/generators/registration/modules/realtime/durable-object.ts +144 -144
  96. package/cli/templates/handlers/generators/registration/modules/realtime/index.ts +14 -14
  97. package/cli/templates/handlers/generators/registration/modules/realtime/publisher.ts +102 -102
  98. package/cli/templates/handlers/generators/registration/modules/realtime/routes.ts +164 -164
  99. package/cli/templates/handlers/generators/registration/modules/realtime/types.ts +30 -30
  100. package/cli/templates/handlers/generators/registration/modules/realtime/utils.ts +510 -510
  101. package/cli/templates/handlers/generators/registration/modules/scheduler.ts +65 -56
  102. package/cli/templates/handlers/generators/registration/modules/storage.ts +199 -199
  103. package/cli/templates/handlers/generators/registration/sections.ts +210 -210
  104. package/cli/templates/handlers/generators/types/context.ts +121 -121
  105. package/cli/templates/handlers/generators/types/core.ts +108 -106
  106. package/cli/templates/handlers/generators/types/operations.ts +135 -135
  107. package/cli/templates/handlers/generators/types/query-definitions/filter-and-where-types.ts +291 -291
  108. package/cli/templates/handlers/generators/types/query-definitions/query-api-types.ts +135 -135
  109. package/cli/templates/handlers/generators/types/query-definitions/query-helper-functions.ts +1382 -1382
  110. package/cli/templates/handlers/generators/types/query-definitions/schema-and-table-types.ts +278 -278
  111. package/cli/templates/handlers/generators/types/query-definitions.ts +13 -13
  112. package/cli/templates/handlers/generators/types/query-runtime/handled-error.ts +13 -13
  113. package/cli/templates/handlers/generators/types/query-runtime/runtime-aggregate-and-footer.ts +174 -174
  114. package/cli/templates/handlers/generators/types/query-runtime/runtime-read.ts +158 -157
  115. package/cli/templates/handlers/generators/types/query-runtime/runtime-setup.ts +45 -45
  116. package/cli/templates/handlers/generators/types/query-runtime/runtime-write.ts +958 -958
  117. package/cli/templates/handlers/generators/types/query-runtime.ts +15 -15
  118. package/cli/templates/handlers/index.ts +47 -47
  119. package/cli/templates/handlers/operations.ts +116 -116
  120. package/cli/templates/handlers/registration.ts +91 -91
  121. package/cli/templates/handlers/types.ts +17 -17
  122. package/cli/templates/handlers/utils.ts +48 -48
  123. package/cli/types.ts +110 -110
  124. package/cli/utils/handler-discovery.ts +501 -501
  125. package/cli/utils/json-utils.ts +24 -24
  126. package/cli/utils/path-utils.ts +19 -19
  127. package/cli/utils/schema-discovery.ts +399 -399
  128. package/dist/cli/index.js +43 -23
  129. package/dist/cli/index.mjs +43 -23
  130. package/dist/react/index.js +1 -1
  131. package/dist/react/index.mjs +1 -1
  132. package/index.ts +18 -18
  133. package/package.json +58 -58
  134. package/react/index.ts +5 -5
  135. package/react/use-infinite-query.ts +255 -255
  136. package/react/use-mutation.ts +89 -89
  137. package/react/use-query.ts +210 -210
  138. package/schema.ts +641 -641
  139. package/test-better-auth-hash.ts +2 -2
  140. package/tsconfig.json +6 -6
  141. package/tsup.config.ts +82 -82
package/cli/templates/dashboard/components/layout.ts CHANGED
@@ -1,420 +1,420 @@
1
- import { DiscoveredHandlerOperation } from "../../../utils/handler-discovery";
2
- import { buildSidebarFunctionList } from "../builders/navigation";
3
-
4
- /**
5
- * Generates the Layout component source code (as a string to be embedded in generated output).
6
- */
7
- export function buildLayoutComponent(
8
- sidebarTableList: string,
9
- handlers: DiscoveredHandlerOperation[],
10
- ): string {
11
- const sidebarFunctionList = buildSidebarFunctionList(handlers);
12
- return `
13
- function Layout(props: { children: any; title: string; hideSidebar?: boolean }) {
14
- return html\`<!DOCTYPE html>
15
- <html lang="en" data-theme="light">
16
- <head>
17
- <meta charset="UTF-8">
18
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
- <title>\${props.title}</title>
20
- <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
21
- <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
22
- <script src="https://unpkg.com/htmx.org@1.9.11"></script>
23
- <script src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>
24
- <script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
25
- <script src="https://cdn.jsdelivr.net/npm/iconify-icon@2/dist/iconify-icon.min.js"></script>
26
- <style>
27
- @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700&display=swap');
28
- body { font-family: 'Inter', sans-serif; }
29
-
30
- .nav-icon-btn {
31
- position: relative;
32
- display: flex;
33
- flex-direction: column;
34
- align-items: center;
35
- justify-content: center;
36
- gap: 5px;
37
- padding: 12px 4px;
38
- width: 100%;
39
- border: none;
40
- background: transparent;
41
- cursor: pointer;
42
- color: oklch(var(--bc) / 0.38);
43
- transition: color 0.15s, background 0.15s;
44
- font-size: 0.58rem;
45
- font-weight: 600;
46
- letter-spacing: 0.06em;
47
- text-transform: uppercase;
48
- text-decoration: none;
49
- }
50
- .nav-icon-btn:hover {
51
- color: oklch(var(--bc) / 0.65);
52
- background: oklch(var(--b2) / 0.6);
53
- }
54
- .nav-icon-btn.active {
55
- color: oklch(var(--p));
56
- background: oklch(var(--p) / 0.16);
57
- font-weight: 700;
58
- }
59
- .nav-icon-btn.active::before {
60
- content: '';
61
- position: absolute;
62
- left: 0;
63
- top: 20%;
64
- bottom: 20%;
65
- width: 4px;
66
- border-radius: 0 4px 4px 0;
67
- background: oklch(var(--p));
68
- }
69
-
70
- #sidebar-right {
71
- width: 210px;
72
- min-width: 210px;
73
- transition: width 0.2s ease, opacity 0.2s ease, min-width 0.2s ease;
74
- overflow: hidden;
75
- }
76
- #sidebar-right.hidden-pane {
77
- width: 0;
78
- min-width: 0;
79
- opacity: 0;
80
- pointer-events: none;
81
- }
82
-
83
- .sidebar-link {
84
- position: relative;
85
- display: flex;
86
- align-items: center;
87
- gap: 9px;
88
- padding: 7px 10px;
89
- border-radius: 7px;
90
- color: oklch(var(--bc) / 0.6);
91
- text-decoration: none;
92
- font-size: 0.825rem;
93
- transition: background 0.12s, color 0.12s;
94
- width: 100%;
95
- }
96
- .sidebar-link:hover {
97
- background: oklch(var(--b2));
98
- color: oklch(var(--bc) / 0.85);
99
- }
100
- .sidebar-link.active {
101
- background: oklch(var(--p) / 0.16);
102
- color: oklch(var(--p));
103
- font-weight: 600;
104
- border-radius: 7px;
105
- box-shadow: inset 3px 0 0 oklch(var(--p));
106
- }
107
- .sidebar-link.active iconify-icon { opacity: 1; }
108
- .sidebar-link iconify-icon {
109
- opacity: 0.45;
110
- transition: opacity 0.12s;
111
- flex-shrink: 0;
112
- }
113
- .sidebar-link:hover iconify-icon { opacity: 0.7; }
114
-
115
- .folder-item { list-style: none; }
116
- .folder-item > details > summary { list-style: none; }
117
- .folder-item > details > summary::-webkit-details-marker { display: none; }
118
- .folder-item > details > summary::before {
119
- content: '';
120
- display: inline-block;
121
- width: 16px;
122
- height: 16px;
123
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
124
- background-size: contain;
125
- transition: transform 0.15s ease;
126
- opacity: 0.45;
127
- }
128
- .folder-item > details[open] > summary::before {
129
- transform: rotate(90deg);
130
- }
131
-
132
- .table th {
133
- font-weight: 500;
134
- font-size: 0.78rem;
135
- text-transform: uppercase;
136
- letter-spacing: 0.05em;
137
- color: oklch(var(--bc) / 0.45);
138
- }
139
- .table td { vertical-align: middle; }
140
- .table tr { border-bottom: 1px solid oklch(var(--b2)); }
141
- .table tr:last-child { border-bottom: none; }
142
- </style>
143
- <script>
144
- (function() {
145
- const saved = localStorage.getItem('admin-theme');
146
- if (saved) document.documentElement.setAttribute('data-theme', saved);
147
- })();
148
- </script>
149
- </head>
150
- <body class="min-h-screen bg-base-100" hx-ext="response-targets">
151
- \${!props.hideSidebar ? raw(\`
152
- <div class="navbar bg-base-100 border-b border-base-200 px-5 h-14 min-h-[3.5rem]">
153
- <div class="flex-1 flex items-center gap-3">
154
- <a href="/admin" class="flex items-center gap-2.5 font-semibold tracking-tight hover:opacity-80 transition-opacity">
155
- <iconify-icon icon="solar:shield-star-bold-duotone" width="26" height="26" class="text-primary"></iconify-icon>
156
- <span class="text-[15px]">Appflare</span>
157
- </a>
158
- </div>
159
- <div class="flex-none flex items-center gap-1">
160
- <button id="theme-toggle" onclick="toggleTheme()" class="btn btn-ghost btn-sm btn-square" title="Toggle theme">
161
- <iconify-icon icon="solar:sun-bold-duotone" width="18" height="18" id="theme-icon-light" class="hidden"></iconify-icon>
162
- <iconify-icon icon="solar:moon-bold-duotone" width="18" height="18" id="theme-icon-dark" class="hidden"></iconify-icon>
163
- </button>
164
- <a href="/" class="btn btn-ghost btn-sm gap-1.5 text-sm font-normal">
165
- <iconify-icon icon="solar:arrow-left-linear" width="16" height="16"></iconify-icon>
166
- Back to App
167
- </a>
168
- </div>
169
- </div>
170
- \`) : ""}
171
-
172
- <div class="flex">
173
- \${!props.hideSidebar ? raw(\`
174
- <div class="flex min-h-[calc(100vh-3.5rem)]">
175
- <aside class="w-[68px] bg-base-100 border-r border-base-200 flex flex-col items-center pt-4 pb-3 gap-0.5 shrink-0">
176
- <button class="nav-icon-btn active" id="nav-tables" onclick="showPane('tables', true)" title="Tables">
177
- <iconify-icon icon="solar:database-bold-duotone" width="24" height="24"></iconify-icon>
178
- Tables
179
- </button>
180
-
181
- <a
182
- href="/admin/storage"
183
- class="nav-icon-btn"
184
- id="nav-storage"
185
- hx-get="/admin/storage"
186
- hx-target="#main-content"
187
- hx-push-url="true"
188
- hx-swap="outerHTML"
189
- onclick="showPane('storage', true)"
190
- title="Storage"
191
- >
192
- <iconify-icon icon="solar:folder-with-files-bold-duotone" width="24" height="24"></iconify-icon>
193
- Storage
194
- </a>
195
-
196
- <button class="nav-icon-btn" id="nav-functions" onclick="showPane('functions', true)" title="Functions">
197
- <iconify-icon icon="solar:code-bold-duotone" width="24" height="24"></iconify-icon>
198
- Functions
199
- </button>
200
- </aside>
201
-
202
- <div id="sidebar-right" class="bg-base-100 border-r border-base-200 flex flex-col">
203
- <div id="pane-tables" class="flex flex-col h-full">
204
- <div class="px-3 pt-5 pb-3">
205
- <p class="text-[10px] font-semibold uppercase tracking-widest opacity-35 mb-3 px-1">Collections</p>
206
- <div class="relative">
207
- <iconify-icon icon="solar:magnifer-linear" width="13" height="13" class="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-35 pointer-events-none"></iconify-icon>
208
- <input
209
- type="text"
210
- id="table-search"
211
- placeholder="Search collections..."
212
- class="input input-sm border border-base-200 bg-base-200/50 focus:bg-base-100 focus:border-primary focus:outline-none w-full pl-7 text-xs rounded-lg h-8"
213
- onkeyup="filterTables(this.value)"
214
- />
215
- </div>
216
- </div>
217
- <nav class="flex-1 overflow-y-auto px-2 pb-4">
218
- <ul class="flex flex-col gap-0.5" id="table-list">
219
- ${sidebarTableList}
220
- </ul>
221
- </nav>
222
- </div>
223
-
224
- <div id="pane-storage" class="flex flex-col h-full hidden">
225
- <div class="px-3 pt-5 pb-3">
226
- <p class="text-[10px] font-semibold uppercase tracking-widest opacity-35 mb-3 px-1">Storage</p>
227
- </div>
228
- <nav class="flex-1 overflow-y-auto px-2 pb-4">
229
- <ul id="storage-folder-list" class="flex flex-col gap-0.5"></ul>
230
- </nav>
231
- </div>
232
-
233
- ${sidebarFunctionList}
234
- </div>
235
- </div>
236
- \`) : ""}
237
-
238
- <main class="\${props.hideSidebar ? 'flex-1 p-8 overflow-auto min-h-[calc(100vh-3.5rem)] flex justify-center items-center bg-base-200/30' : 'flex-1 p-6 overflow-auto max-h-[calc(100vh-3.5rem)] bg-base-200/30'}">
239
- \${props.children}
240
- </main>
241
- </div>
242
-
243
- <script>
244
- function toggleTheme() {
245
- const html = document.documentElement;
246
- const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
247
- html.setAttribute('data-theme', next);
248
- localStorage.setItem('admin-theme', next);
249
- updateThemeIcon();
250
- }
251
-
252
- function updateThemeIcon() {
253
- const theme = document.documentElement.getAttribute('data-theme');
254
- const lightIcon = document.getElementById('theme-icon-light');
255
- const darkIcon = document.getElementById('theme-icon-dark');
256
- if (lightIcon && darkIcon) {
257
- lightIcon.classList.toggle('hidden', theme !== 'dark');
258
- darkIcon.classList.toggle('hidden', theme === 'dark');
259
- }
260
- }
261
-
262
- function showPane(name, autoNavigate) {
263
- document.querySelectorAll('.nav-icon-btn').forEach(function(btn) {
264
- btn.classList.remove('active');
265
- });
266
- var btn = document.getElementById('nav-' + name);
267
- if (btn) btn.classList.add('active');
268
-
269
- document.querySelectorAll('[id^="pane-"]').forEach(function(pane) {
270
- pane.classList.add('hidden');
271
- });
272
- var targetPane = document.getElementById('pane-' + name);
273
- if (targetPane) targetPane.classList.remove('hidden');
274
-
275
- var right = document.getElementById('sidebar-right');
276
- if (right) {
277
- var shouldShowRightPane = (name === 'tables' || name === 'functions' || name === 'storage');
278
- right.classList.toggle('hidden-pane', !shouldShowRightPane);
279
- }
280
-
281
- if (name === 'storage') {
282
- syncStoragePane();
283
- }
284
-
285
- if (autoNavigate) {
286
- var linkSelector;
287
- if (name === 'tables') linkSelector = '#table-list a';
288
- else if (name === 'functions') linkSelector = '#pane-functions a';
289
- else linkSelector = '#pane-' + name + ' a';
290
-
291
- var firstLink = linkSelector ? document.querySelector(linkSelector) : null;
292
- if (firstLink) {
293
- var href = firstLink.getAttribute('href');
294
- if (href && href !== window.location.pathname) {
295
- firstLink.click();
296
- }
297
- }
298
- }
299
- }
300
-
301
- function filterTables(query) {
302
- var q = query.toLowerCase();
303
- document.querySelectorAll('#table-list > li').forEach(function(li) {
304
- var name = (li.getAttribute('data-name') || li.textContent).toLowerCase();
305
- li.style.display = name.includes(q) ? '' : 'none';
306
- });
307
- }
308
-
309
- function filterFunctions(query) {
310
- var q = query.toLowerCase();
311
- document.querySelectorAll('#pane-functions details').forEach(function(details) {
312
- details.open = true;
313
- });
314
- document.querySelectorAll('#pane-functions li').forEach(function(li) {
315
- var name = (li.getAttribute('data-name') || li.textContent).toLowerCase();
316
- var matches = name.includes(q);
317
- li.style.display = matches ? '' : 'none';
318
- if (!matches && li.classList.contains('folder-item')) {
319
- var childItems = li.querySelectorAll('li');
320
- childItems.forEach(function(child) {
321
- var childName = (child.getAttribute('data-name') || child.textContent).toLowerCase();
322
- if (childName.includes(q)) {
323
- li.style.display = '';
324
- var parentDetails = li.closest('details');
325
- if (parentDetails) parentDetails.open = true;
326
- }
327
- });
328
- }
329
- });
330
- }
331
-
332
- function getStoragePathParts() {
333
- var path = window.location.pathname;
334
- if (!path.startsWith('/admin/storage')) return [];
335
- var raw = path.slice('/admin/storage'.length);
336
- if (raw.startsWith('/')) raw = raw.slice(1);
337
- if (!raw) return [];
338
- return raw.split('/').filter(Boolean).map(function(segment) {
339
- try {
340
- return decodeURIComponent(segment);
341
- } catch (_e) {
342
- return segment;
343
- }
344
- });
345
- }
346
-
347
- function toStorageHref(parts) {
348
- if (!parts || parts.length === 0) return '/admin/storage';
349
- return '/admin/storage/' + parts.map(function(part) {
350
- return encodeURIComponent(part);
351
- }).join('/');
352
- }
353
-
354
- function buildStoragePaneLink(href, label, icon) {
355
- return '<li><a href="' + href + '" hx-get="' + href + '" hx-target="#main-content" hx-push-url="true" hx-swap="outerHTML" class="sidebar-link"><iconify-icon icon="' + icon + '" width="16" height="16" class="opacity-50 shrink-0"></iconify-icon><span class="truncate">' + label + '</span></a></li>';
356
- }
357
-
358
- function syncStoragePane() {
359
- var list = document.getElementById('storage-folder-list');
360
- if (!list) return;
361
-
362
- var items = [];
363
- items.push(buildStoragePaneLink('/admin/storage', 'Root', 'solar:home-angle-bold-duotone'));
364
-
365
- var parts = getStoragePathParts();
366
- if (parts.length > 0) {
367
- items.push(buildStoragePaneLink(toStorageHref(parts.slice(0, -1)), '..', 'solar:arrow-up-linear'));
368
- }
369
-
370
- document.querySelectorAll('[data-storage-dir-link]').forEach(function(anchor) {
371
- var href = anchor.getAttribute('href');
372
- if (!href || href === window.location.pathname) return;
373
- var label = (anchor.textContent || '').trim();
374
- if (!label) return;
375
- items.push(buildStoragePaneLink(href, label, 'solar:folder-bold-duotone'));
376
- });
377
-
378
- if (items.length === 1) {
379
- items.push('<li><span class="sidebar-link opacity-40 pointer-events-none"><iconify-icon icon="solar:folder-open-bold-duotone" width="16" height="16" class="opacity-50 shrink-0"></iconify-icon><span class="truncate">No folders</span></span></li>');
380
- }
381
-
382
- list.innerHTML = items.join('');
383
- }
384
-
385
- function highlightActiveLink() {
386
- var path = window.location.pathname;
387
- if (path !== '/' && path.endsWith('/')) {
388
- path = path.slice(0, -1);
389
- }
390
-
391
- if (path === '/admin/storage' || path.startsWith('/admin/storage/')) {
392
- showPane('storage');
393
- } else if (path === '/admin' || path === '/admin/users' || path.startsWith('/admin/table/')) {
394
- showPane('tables');
395
- } else if (path.startsWith('/admin/functions')) {
396
- showPane('functions');
397
- }
398
-
399
- document.querySelectorAll('#sidebar-right a').forEach(function(a) {
400
- var href = (a.getAttribute('href') || '/');
401
- if (href !== '/' && href.endsWith('/')) {
402
- href = href.slice(0, -1);
403
- }
404
- a.classList.toggle('active', href === path);
405
- });
406
-
407
- syncStoragePane();
408
- }
409
-
410
- document.addEventListener('DOMContentLoaded', function() {
411
- updateThemeIcon();
412
- highlightActiveLink();
413
- });
414
- document.body.addEventListener('htmx:afterSettle', highlightActiveLink);
415
- </script>
416
- </body>
417
- </html>\`;
418
- }
419
- `;
420
- }
1
+ import { DiscoveredHandlerOperation } from "../../../utils/handler-discovery";
2
+ import { buildSidebarFunctionList } from "../builders/navigation";
3
+
4
+ /**
5
+ * Generates the Layout component source code (as a string to be embedded in generated output).
6
+ */
7
+ export function buildLayoutComponent(
8
+ sidebarTableList: string,
9
+ handlers: DiscoveredHandlerOperation[],
10
+ ): string {
11
+ const sidebarFunctionList = buildSidebarFunctionList(handlers);
12
+ return `
13
+ function Layout(props: { children: any; title: string; hideSidebar?: boolean }) {
14
+ return html\`<!DOCTYPE html>
15
+ <html lang="en" data-theme="light">
16
+ <head>
17
+ <meta charset="UTF-8">
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
19
+ <title>\${props.title}</title>
20
+ <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
21
+ <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
22
+ <script src="https://unpkg.com/htmx.org@1.9.11"></script>
23
+ <script src="https://unpkg.com/htmx.org/dist/ext/response-targets.js"></script>
24
+ <script src="https://unpkg.com/htmx.org/dist/ext/json-enc.js"></script>
25
+ <script src="https://cdn.jsdelivr.net/npm/iconify-icon@2/dist/iconify-icon.min.js"></script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700&display=swap');
28
+ body { font-family: 'Inter', sans-serif; }
29
+
30
+ .nav-icon-btn {
31
+ position: relative;
32
+ display: flex;
33
+ flex-direction: column;
34
+ align-items: center;
35
+ justify-content: center;
36
+ gap: 5px;
37
+ padding: 12px 4px;
38
+ width: 100%;
39
+ border: none;
40
+ background: transparent;
41
+ cursor: pointer;
42
+ color: oklch(var(--bc) / 0.38);
43
+ transition: color 0.15s, background 0.15s;
44
+ font-size: 0.58rem;
45
+ font-weight: 600;
46
+ letter-spacing: 0.06em;
47
+ text-transform: uppercase;
48
+ text-decoration: none;
49
+ }
50
+ .nav-icon-btn:hover {
51
+ color: oklch(var(--bc) / 0.65);
52
+ background: oklch(var(--b2) / 0.6);
53
+ }
54
+ .nav-icon-btn.active {
55
+ color: oklch(var(--p));
56
+ background: oklch(var(--p) / 0.16);
57
+ font-weight: 700;
58
+ }
59
+ .nav-icon-btn.active::before {
60
+ content: '';
61
+ position: absolute;
62
+ left: 0;
63
+ top: 20%;
64
+ bottom: 20%;
65
+ width: 4px;
66
+ border-radius: 0 4px 4px 0;
67
+ background: oklch(var(--p));
68
+ }
69
+
70
+ #sidebar-right {
71
+ width: 210px;
72
+ min-width: 210px;
73
+ transition: width 0.2s ease, opacity 0.2s ease, min-width 0.2s ease;
74
+ overflow: hidden;
75
+ }
76
+ #sidebar-right.hidden-pane {
77
+ width: 0;
78
+ min-width: 0;
79
+ opacity: 0;
80
+ pointer-events: none;
81
+ }
82
+
83
+ .sidebar-link {
84
+ position: relative;
85
+ display: flex;
86
+ align-items: center;
87
+ gap: 9px;
88
+ padding: 7px 10px;
89
+ border-radius: 7px;
90
+ color: oklch(var(--bc) / 0.6);
91
+ text-decoration: none;
92
+ font-size: 0.825rem;
93
+ transition: background 0.12s, color 0.12s;
94
+ width: 100%;
95
+ }
96
+ .sidebar-link:hover {
97
+ background: oklch(var(--b2));
98
+ color: oklch(var(--bc) / 0.85);
99
+ }
100
+ .sidebar-link.active {
101
+ background: oklch(var(--p) / 0.16);
102
+ color: oklch(var(--p));
103
+ font-weight: 600;
104
+ border-radius: 7px;
105
+ box-shadow: inset 3px 0 0 oklch(var(--p));
106
+ }
107
+ .sidebar-link.active iconify-icon { opacity: 1; }
108
+ .sidebar-link iconify-icon {
109
+ opacity: 0.45;
110
+ transition: opacity 0.12s;
111
+ flex-shrink: 0;
112
+ }
113
+ .sidebar-link:hover iconify-icon { opacity: 0.7; }
114
+
115
+ .folder-item { list-style: none; }
116
+ .folder-item > details > summary { list-style: none; }
117
+ .folder-item > details > summary::-webkit-details-marker { display: none; }
118
+ .folder-item > details > summary::before {
119
+ content: '';
120
+ display: inline-block;
121
+ width: 16px;
122
+ height: 16px;
123
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z'/%3E%3C/svg%3E");
124
+ background-size: contain;
125
+ transition: transform 0.15s ease;
126
+ opacity: 0.45;
127
+ }
128
+ .folder-item > details[open] > summary::before {
129
+ transform: rotate(90deg);
130
+ }
131
+
132
+ .table th {
133
+ font-weight: 500;
134
+ font-size: 0.78rem;
135
+ text-transform: uppercase;
136
+ letter-spacing: 0.05em;
137
+ color: oklch(var(--bc) / 0.45);
138
+ }
139
+ .table td { vertical-align: middle; }
140
+ .table tr { border-bottom: 1px solid oklch(var(--b2)); }
141
+ .table tr:last-child { border-bottom: none; }
142
+ </style>
143
+ <script>
144
+ (function() {
145
+ const saved = localStorage.getItem('admin-theme');
146
+ if (saved) document.documentElement.setAttribute('data-theme', saved);
147
+ })();
148
+ </script>
149
+ </head>
150
+ <body class="min-h-screen bg-base-100" hx-ext="response-targets">
151
+ \${!props.hideSidebar ? raw(\`
152
+ <div class="navbar bg-base-100 border-b border-base-200 px-5 h-14 min-h-[3.5rem]">
153
+ <div class="flex-1 flex items-center gap-3">
154
+ <a href="/admin" class="flex items-center gap-2.5 font-semibold tracking-tight hover:opacity-80 transition-opacity">
155
+ <iconify-icon icon="solar:shield-star-bold-duotone" width="26" height="26" class="text-primary"></iconify-icon>
156
+ <span class="text-[15px]">Appflare</span>
157
+ </a>
158
+ </div>
159
+ <div class="flex-none flex items-center gap-1">
160
+ <button id="theme-toggle" onclick="toggleTheme()" class="btn btn-ghost btn-sm btn-square" title="Toggle theme">
161
+ <iconify-icon icon="solar:sun-bold-duotone" width="18" height="18" id="theme-icon-light" class="hidden"></iconify-icon>
162
+ <iconify-icon icon="solar:moon-bold-duotone" width="18" height="18" id="theme-icon-dark" class="hidden"></iconify-icon>
163
+ </button>
164
+ <a href="/" class="btn btn-ghost btn-sm gap-1.5 text-sm font-normal">
165
+ <iconify-icon icon="solar:arrow-left-linear" width="16" height="16"></iconify-icon>
166
+ Back to App
167
+ </a>
168
+ </div>
169
+ </div>
170
+ \`) : ""}
171
+
172
+ <div class="flex">
173
+ \${!props.hideSidebar ? raw(\`
174
+ <div class="flex min-h-[calc(100vh-3.5rem)]">
175
+ <aside class="w-[68px] bg-base-100 border-r border-base-200 flex flex-col items-center pt-4 pb-3 gap-0.5 shrink-0">
176
+ <button class="nav-icon-btn active" id="nav-tables" onclick="showPane('tables', true)" title="Tables">
177
+ <iconify-icon icon="solar:database-bold-duotone" width="24" height="24"></iconify-icon>
178
+ Tables
179
+ </button>
180
+
181
+ <a
182
+ href="/admin/storage"
183
+ class="nav-icon-btn"
184
+ id="nav-storage"
185
+ hx-get="/admin/storage"
186
+ hx-target="#main-content"
187
+ hx-push-url="true"
188
+ hx-swap="outerHTML"
189
+ onclick="showPane('storage', true)"
190
+ title="Storage"
191
+ >
192
+ <iconify-icon icon="solar:folder-with-files-bold-duotone" width="24" height="24"></iconify-icon>
193
+ Storage
194
+ </a>
195
+
196
+ <button class="nav-icon-btn" id="nav-functions" onclick="showPane('functions', true)" title="Functions">
197
+ <iconify-icon icon="solar:code-bold-duotone" width="24" height="24"></iconify-icon>
198
+ Functions
199
+ </button>
200
+ </aside>
201
+
202
+ <div id="sidebar-right" class="bg-base-100 border-r border-base-200 flex flex-col">
203
+ <div id="pane-tables" class="flex flex-col h-full">
204
+ <div class="px-3 pt-5 pb-3">
205
+ <p class="text-[10px] font-semibold uppercase tracking-widest opacity-35 mb-3 px-1">Collections</p>
206
+ <div class="relative">
207
+ <iconify-icon icon="solar:magnifer-linear" width="13" height="13" class="absolute left-2.5 top-1/2 -translate-y-1/2 opacity-35 pointer-events-none"></iconify-icon>
208
+ <input
209
+ type="text"
210
+ id="table-search"
211
+ placeholder="Search collections..."
212
+ class="input input-sm border border-base-200 bg-base-200/50 focus:bg-base-100 focus:border-primary focus:outline-none w-full pl-7 text-xs rounded-lg h-8"
213
+ onkeyup="filterTables(this.value)"
214
+ />
215
+ </div>
216
+ </div>
217
+ <nav class="flex-1 overflow-y-auto px-2 pb-4">
218
+ <ul class="flex flex-col gap-0.5" id="table-list">
219
+ ${sidebarTableList}
220
+ </ul>
221
+ </nav>
222
+ </div>
223
+
224
+ <div id="pane-storage" class="flex flex-col h-full hidden">
225
+ <div class="px-3 pt-5 pb-3">
226
+ <p class="text-[10px] font-semibold uppercase tracking-widest opacity-35 mb-3 px-1">Storage</p>
227
+ </div>
228
+ <nav class="flex-1 overflow-y-auto px-2 pb-4">
229
+ <ul id="storage-folder-list" class="flex flex-col gap-0.5"></ul>
230
+ </nav>
231
+ </div>
232
+
233
+ ${sidebarFunctionList}
234
+ </div>
235
+ </div>
236
+ \`) : ""}
237
+
238
+ <main class="\${props.hideSidebar ? 'flex-1 p-8 overflow-auto min-h-[calc(100vh-3.5rem)] flex justify-center items-center bg-base-200/30' : 'flex-1 p-6 overflow-auto max-h-[calc(100vh-3.5rem)] bg-base-200/30'}">
239
+ \${props.children}
240
+ </main>
241
+ </div>
242
+
243
+ <script>
244
+ function toggleTheme() {
245
+ const html = document.documentElement;
246
+ const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
247
+ html.setAttribute('data-theme', next);
248
+ localStorage.setItem('admin-theme', next);
249
+ updateThemeIcon();
250
+ }
251
+
252
+ function updateThemeIcon() {
253
+ const theme = document.documentElement.getAttribute('data-theme');
254
+ const lightIcon = document.getElementById('theme-icon-light');
255
+ const darkIcon = document.getElementById('theme-icon-dark');
256
+ if (lightIcon && darkIcon) {
257
+ lightIcon.classList.toggle('hidden', theme !== 'dark');
258
+ darkIcon.classList.toggle('hidden', theme === 'dark');
259
+ }
260
+ }
261
+
262
+ function showPane(name, autoNavigate) {
263
+ document.querySelectorAll('.nav-icon-btn').forEach(function(btn) {
264
+ btn.classList.remove('active');
265
+ });
266
+ var btn = document.getElementById('nav-' + name);
267
+ if (btn) btn.classList.add('active');
268
+
269
+ document.querySelectorAll('[id^="pane-"]').forEach(function(pane) {
270
+ pane.classList.add('hidden');
271
+ });
272
+ var targetPane = document.getElementById('pane-' + name);
273
+ if (targetPane) targetPane.classList.remove('hidden');
274
+
275
+ var right = document.getElementById('sidebar-right');
276
+ if (right) {
277
+ var shouldShowRightPane = (name === 'tables' || name === 'functions' || name === 'storage');
278
+ right.classList.toggle('hidden-pane', !shouldShowRightPane);
279
+ }
280
+
281
+ if (name === 'storage') {
282
+ syncStoragePane();
283
+ }
284
+
285
+ if (autoNavigate) {
286
+ var linkSelector;
287
+ if (name === 'tables') linkSelector = '#table-list a';
288
+ else if (name === 'functions') linkSelector = '#pane-functions a';
289
+ else linkSelector = '#pane-' + name + ' a';
290
+
291
+ var firstLink = linkSelector ? document.querySelector(linkSelector) : null;
292
+ if (firstLink) {
293
+ var href = firstLink.getAttribute('href');
294
+ if (href && href !== window.location.pathname) {
295
+ firstLink.click();
296
+ }
297
+ }
298
+ }
299
+ }
300
+
301
+ function filterTables(query) {
302
+ var q = query.toLowerCase();
303
+ document.querySelectorAll('#table-list > li').forEach(function(li) {
304
+ var name = (li.getAttribute('data-name') || li.textContent).toLowerCase();
305
+ li.style.display = name.includes(q) ? '' : 'none';
306
+ });
307
+ }
308
+
309
+ function filterFunctions(query) {
310
+ var q = query.toLowerCase();
311
+ document.querySelectorAll('#pane-functions details').forEach(function(details) {
312
+ details.open = true;
313
+ });
314
+ document.querySelectorAll('#pane-functions li').forEach(function(li) {
315
+ var name = (li.getAttribute('data-name') || li.textContent).toLowerCase();
316
+ var matches = name.includes(q);
317
+ li.style.display = matches ? '' : 'none';
318
+ if (!matches && li.classList.contains('folder-item')) {
319
+ var childItems = li.querySelectorAll('li');
320
+ childItems.forEach(function(child) {
321
+ var childName = (child.getAttribute('data-name') || child.textContent).toLowerCase();
322
+ if (childName.includes(q)) {
323
+ li.style.display = '';
324
+ var parentDetails = li.closest('details');
325
+ if (parentDetails) parentDetails.open = true;
326
+ }
327
+ });
328
+ }
329
+ });
330
+ }
331
+
332
+ function getStoragePathParts() {
333
+ var path = window.location.pathname;
334
+ if (!path.startsWith('/admin/storage')) return [];
335
+ var raw = path.slice('/admin/storage'.length);
336
+ if (raw.startsWith('/')) raw = raw.slice(1);
337
+ if (!raw) return [];
338
+ return raw.split('/').filter(Boolean).map(function(segment) {
339
+ try {
340
+ return decodeURIComponent(segment);
341
+ } catch (_e) {
342
+ return segment;
343
+ }
344
+ });
345
+ }
346
+
347
+ function toStorageHref(parts) {
348
+ if (!parts || parts.length === 0) return '/admin/storage';
349
+ return '/admin/storage/' + parts.map(function(part) {
350
+ return encodeURIComponent(part);
351
+ }).join('/');
352
+ }
353
+
354
+ function buildStoragePaneLink(href, label, icon) {
355
+ return '<li><a href="' + href + '" hx-get="' + href + '" hx-target="#main-content" hx-push-url="true" hx-swap="outerHTML" class="sidebar-link"><iconify-icon icon="' + icon + '" width="16" height="16" class="opacity-50 shrink-0"></iconify-icon><span class="truncate">' + label + '</span></a></li>';
356
+ }
357
+
358
+ function syncStoragePane() {
359
+ var list = document.getElementById('storage-folder-list');
360
+ if (!list) return;
361
+
362
+ var items = [];
363
+ items.push(buildStoragePaneLink('/admin/storage', 'Root', 'solar:home-angle-bold-duotone'));
364
+
365
+ var parts = getStoragePathParts();
366
+ if (parts.length > 0) {
367
+ items.push(buildStoragePaneLink(toStorageHref(parts.slice(0, -1)), '..', 'solar:arrow-up-linear'));
368
+ }
369
+
370
+ document.querySelectorAll('[data-storage-dir-link]').forEach(function(anchor) {
371
+ var href = anchor.getAttribute('href');
372
+ if (!href || href === window.location.pathname) return;
373
+ var label = (anchor.textContent || '').trim();
374
+ if (!label) return;
375
+ items.push(buildStoragePaneLink(href, label, 'solar:folder-bold-duotone'));
376
+ });
377
+
378
+ if (items.length === 1) {
379
+ items.push('<li><span class="sidebar-link opacity-40 pointer-events-none"><iconify-icon icon="solar:folder-open-bold-duotone" width="16" height="16" class="opacity-50 shrink-0"></iconify-icon><span class="truncate">No folders</span></span></li>');
380
+ }
381
+
382
+ list.innerHTML = items.join('');
383
+ }
384
+
385
+ function highlightActiveLink() {
386
+ var path = window.location.pathname;
387
+ if (path !== '/' && path.endsWith('/')) {
388
+ path = path.slice(0, -1);
389
+ }
390
+
391
+ if (path === '/admin/storage' || path.startsWith('/admin/storage/')) {
392
+ showPane('storage');
393
+ } else if (path === '/admin' || path === '/admin/users' || path.startsWith('/admin/table/')) {
394
+ showPane('tables');
395
+ } else if (path.startsWith('/admin/functions')) {
396
+ showPane('functions');
397
+ }
398
+
399
+ document.querySelectorAll('#sidebar-right a').forEach(function(a) {
400
+ var href = (a.getAttribute('href') || '/');
401
+ if (href !== '/' && href.endsWith('/')) {
402
+ href = href.slice(0, -1);
403
+ }
404
+ a.classList.toggle('active', href === path);
405
+ });
406
+
407
+ syncStoragePane();
408
+ }
409
+
410
+ document.addEventListener('DOMContentLoaded', function() {
411
+ updateThemeIcon();
412
+ highlightActiveLink();
413
+ });
414
+ document.body.addEventListener('htmx:afterSettle', highlightActiveLink);
415
+ </script>
416
+ </body>
417
+ </html>\`;
418
+ }
419
+ `;
420
+ }