appflare 0.2.30 → 0.2.31

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 (140) hide show
  1. package/Documentation.md +758 -758
  2. package/cli/commands/index.ts +238 -238
  3. package/cli/generate.ts +178 -178
  4. package/cli/index.ts +120 -120
  5. package/cli/load-config.ts +184 -184
  6. package/cli/schema-compiler.ts +1183 -1183
  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 +748 -748
  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 +186 -186
  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 +171 -171
  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 +554 -554
  45. package/cli/templates/dashboard/builders/navigation.ts +122 -122
  46. package/cli/templates/dashboard/builders/storage/index.ts +13 -13
  47. package/cli/templates/dashboard/builders/storage/routes/create-directory-route.ts +29 -29
  48. package/cli/templates/dashboard/builders/storage/routes/delete-route.ts +18 -18
  49. package/cli/templates/dashboard/builders/storage/routes/download-route.ts +23 -23
  50. package/cli/templates/dashboard/builders/storage/routes/index.ts +22 -22
  51. package/cli/templates/dashboard/builders/storage/routes/list-route.ts +25 -25
  52. package/cli/templates/dashboard/builders/storage/routes/preview-route.ts +21 -21
  53. package/cli/templates/dashboard/builders/storage/routes/upload-route.ts +21 -21
  54. package/cli/templates/dashboard/builders/storage/runtime/helpers.ts +72 -72
  55. package/cli/templates/dashboard/builders/storage/runtime/storage-page.ts +130 -130
  56. package/cli/templates/dashboard/builders/table-routes/common/drawer-panel.ts +27 -27
  57. package/cli/templates/dashboard/builders/table-routes/common/pagination.ts +30 -30
  58. package/cli/templates/dashboard/builders/table-routes/common/search-bar.ts +23 -23
  59. package/cli/templates/dashboard/builders/table-routes/fragments.ts +217 -217
  60. package/cli/templates/dashboard/builders/table-routes/helpers.ts +45 -45
  61. package/cli/templates/dashboard/builders/table-routes/index.ts +8 -8
  62. package/cli/templates/dashboard/builders/table-routes/table/actions-cell.ts +71 -71
  63. package/cli/templates/dashboard/builders/table-routes/table/get-route.ts +291 -291
  64. package/cli/templates/dashboard/builders/table-routes/table/index.ts +80 -80
  65. package/cli/templates/dashboard/builders/table-routes/table/post-routes.ts +163 -163
  66. package/cli/templates/dashboard/builders/table-routes/table-route.ts +7 -7
  67. package/cli/templates/dashboard/builders/table-routes/users/get-route.ts +69 -69
  68. package/cli/templates/dashboard/builders/table-routes/users/html/modals.ts +57 -57
  69. package/cli/templates/dashboard/builders/table-routes/users/html/page.ts +27 -27
  70. package/cli/templates/dashboard/builders/table-routes/users/html/table.ts +128 -128
  71. package/cli/templates/dashboard/builders/table-routes/users/index.ts +32 -32
  72. package/cli/templates/dashboard/builders/table-routes/users/post-routes.ts +150 -150
  73. package/cli/templates/dashboard/builders/table-routes/users/redirect.ts +14 -14
  74. package/cli/templates/dashboard/builders/table-routes/users-route.ts +10 -10
  75. package/cli/templates/dashboard/components/dashboard-home.ts +23 -23
  76. package/cli/templates/dashboard/components/layout.ts +388 -388
  77. package/cli/templates/dashboard/components/login-page.ts +65 -65
  78. package/cli/templates/dashboard/index.ts +61 -61
  79. package/cli/templates/dashboard/types.ts +9 -9
  80. package/cli/templates/handlers/README.md +353 -353
  81. package/cli/templates/handlers/auth.ts +37 -37
  82. package/cli/templates/handlers/execution.ts +42 -42
  83. package/cli/templates/handlers/generators/context/context-creation.ts +101 -101
  84. package/cli/templates/handlers/generators/context/error-helpers.ts +11 -11
  85. package/cli/templates/handlers/generators/context/scheduler.ts +24 -24
  86. package/cli/templates/handlers/generators/context/storage-api.ts +82 -82
  87. package/cli/templates/handlers/generators/context/storage-helpers.ts +59 -59
  88. package/cli/templates/handlers/generators/context/types.ts +40 -40
  89. package/cli/templates/handlers/generators/context.ts +43 -43
  90. package/cli/templates/handlers/generators/execution.ts +15 -15
  91. package/cli/templates/handlers/generators/handlers.ts +13 -13
  92. package/cli/templates/handlers/generators/registration/modules/cron.ts +26 -26
  93. package/cli/templates/handlers/generators/registration/modules/realtime/auth.ts +75 -75
  94. package/cli/templates/handlers/generators/registration/modules/realtime/durable-object.ts +144 -144
  95. package/cli/templates/handlers/generators/registration/modules/realtime/index.ts +14 -14
  96. package/cli/templates/handlers/generators/registration/modules/realtime/publisher.ts +102 -102
  97. package/cli/templates/handlers/generators/registration/modules/realtime/routes.ts +164 -164
  98. package/cli/templates/handlers/generators/registration/modules/realtime/types.ts +30 -30
  99. package/cli/templates/handlers/generators/registration/modules/realtime/utils.ts +516 -516
  100. package/cli/templates/handlers/generators/registration/modules/scheduler.ts +56 -56
  101. package/cli/templates/handlers/generators/registration/modules/storage.ts +199 -199
  102. package/cli/templates/handlers/generators/registration/sections.ts +210 -210
  103. package/cli/templates/handlers/generators/types/context.ts +92 -92
  104. package/cli/templates/handlers/generators/types/core.ts +106 -106
  105. package/cli/templates/handlers/generators/types/operations.ts +135 -135
  106. package/cli/templates/handlers/generators/types/query-definitions/filter-and-where-types.ts +281 -259
  107. package/cli/templates/handlers/generators/types/query-definitions/query-api-types.ts +135 -135
  108. package/cli/templates/handlers/generators/types/query-definitions/query-helper-functions.ts +1103 -1031
  109. package/cli/templates/handlers/generators/types/query-definitions/schema-and-table-types.ts +278 -246
  110. package/cli/templates/handlers/generators/types/query-definitions.ts +13 -13
  111. package/cli/templates/handlers/generators/types/query-runtime/handled-error.ts +13 -13
  112. package/cli/templates/handlers/generators/types/query-runtime/runtime-aggregate-and-footer.ts +174 -174
  113. package/cli/templates/handlers/generators/types/query-runtime/runtime-read.ts +157 -121
  114. package/cli/templates/handlers/generators/types/query-runtime/runtime-setup.ts +45 -45
  115. package/cli/templates/handlers/generators/types/query-runtime/runtime-write.ts +697 -697
  116. package/cli/templates/handlers/generators/types/query-runtime.ts +15 -15
  117. package/cli/templates/handlers/index.ts +43 -43
  118. package/cli/templates/handlers/operations.ts +116 -116
  119. package/cli/templates/handlers/registration.ts +91 -91
  120. package/cli/templates/handlers/types.ts +15 -15
  121. package/cli/templates/handlers/utils.ts +48 -48
  122. package/cli/types.ts +110 -110
  123. package/cli/utils/handler-discovery.ts +466 -466
  124. package/cli/utils/json-utils.ts +24 -24
  125. package/cli/utils/path-utils.ts +19 -19
  126. package/cli/utils/schema-discovery.ts +399 -399
  127. package/dist/cli/index.d.mts +2 -0
  128. package/dist/cli/index.d.ts +2 -0
  129. package/dist/cli/index.js +270 -108
  130. package/dist/cli/index.mjs +270 -108
  131. package/index.ts +18 -18
  132. package/package.json +58 -58
  133. package/react/index.ts +5 -5
  134. package/react/use-infinite-query.ts +252 -252
  135. package/react/use-mutation.ts +89 -89
  136. package/react/use-query.ts +207 -207
  137. package/schema.ts +415 -415
  138. package/test-better-auth-hash.ts +2 -2
  139. package/tsconfig.json +6 -6
  140. package/tsup.config.ts +82 -82
package/cli/templates/dashboard/components/layout.ts CHANGED
@@ -1,388 +1,388 @@
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
- .table th {
116
- font-weight: 500;
117
- font-size: 0.78rem;
118
- text-transform: uppercase;
119
- letter-spacing: 0.05em;
120
- color: oklch(var(--bc) / 0.45);
121
- }
122
- .table td { vertical-align: middle; }
123
- .table tr { border-bottom: 1px solid oklch(var(--b2)); }
124
- .table tr:last-child { border-bottom: none; }
125
- </style>
126
- <script>
127
- (function() {
128
- const saved = localStorage.getItem('admin-theme');
129
- if (saved) document.documentElement.setAttribute('data-theme', saved);
130
- })();
131
- </script>
132
- </head>
133
- <body class="min-h-screen bg-base-100" hx-ext="response-targets">
134
- \${!props.hideSidebar ? raw(\`
135
- <div class="navbar bg-base-100 border-b border-base-200 px-5 h-14 min-h-[3.5rem]">
136
- <div class="flex-1 flex items-center gap-3">
137
- <a href="/admin" class="flex items-center gap-2.5 font-semibold tracking-tight hover:opacity-80 transition-opacity">
138
- <iconify-icon icon="solar:shield-star-bold-duotone" width="26" height="26" class="text-primary"></iconify-icon>
139
- <span class="text-[15px]">Appflare</span>
140
- </a>
141
- </div>
142
- <div class="flex-none flex items-center gap-1">
143
- <button id="theme-toggle" onclick="toggleTheme()" class="btn btn-ghost btn-sm btn-square" title="Toggle theme">
144
- <iconify-icon icon="solar:sun-bold-duotone" width="18" height="18" id="theme-icon-light" class="hidden"></iconify-icon>
145
- <iconify-icon icon="solar:moon-bold-duotone" width="18" height="18" id="theme-icon-dark" class="hidden"></iconify-icon>
146
- </button>
147
- <a href="/" class="btn btn-ghost btn-sm gap-1.5 text-sm font-normal">
148
- <iconify-icon icon="solar:arrow-left-linear" width="16" height="16"></iconify-icon>
149
- Back to App
150
- </a>
151
- </div>
152
- </div>
153
- \`) : ""}
154
-
155
- <div class="flex">
156
- \${!props.hideSidebar ? raw(\`
157
- <div class="flex min-h-[calc(100vh-3.5rem)]">
158
- <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">
159
- <button class="nav-icon-btn active" id="nav-tables" onclick="showPane('tables', true)" title="Tables">
160
- <iconify-icon icon="solar:database-bold-duotone" width="24" height="24"></iconify-icon>
161
- Tables
162
- </button>
163
-
164
- <a
165
- href="/admin/storage"
166
- class="nav-icon-btn"
167
- id="nav-storage"
168
- hx-get="/admin/storage"
169
- hx-target="#main-content"
170
- hx-push-url="true"
171
- hx-swap="outerHTML"
172
- onclick="showPane('storage', true)"
173
- title="Storage"
174
- >
175
- <iconify-icon icon="solar:folder-with-files-bold-duotone" width="24" height="24"></iconify-icon>
176
- Storage
177
- </a>
178
-
179
- <button class="nav-icon-btn" id="nav-functions" onclick="showPane('functions', true)" title="Functions">
180
- <iconify-icon icon="solar:code-bold-duotone" width="24" height="24"></iconify-icon>
181
- Functions
182
- </button>
183
- </aside>
184
-
185
- <div id="sidebar-right" class="bg-base-100 border-r border-base-200 flex flex-col">
186
- <div id="pane-tables" class="flex flex-col h-full">
187
- <div class="px-3 pt-5 pb-3">
188
- <p class="text-[10px] font-semibold uppercase tracking-widest opacity-35 mb-3 px-1">Collections</p>
189
- <div class="relative">
190
- <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>
191
- <input
192
- type="text"
193
- id="table-search"
194
- placeholder="Search collections..."
195
- 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"
196
- onkeyup="filterTables(this.value)"
197
- />
198
- </div>
199
- </div>
200
- <nav class="flex-1 overflow-y-auto px-2 pb-4">
201
- <ul class="flex flex-col gap-0.5" id="table-list">
202
- ${sidebarTableList}
203
- </ul>
204
- </nav>
205
- </div>
206
-
207
- <div id="pane-storage" class="flex flex-col h-full hidden">
208
- <div class="px-3 pt-5 pb-3">
209
- <p class="text-[10px] font-semibold uppercase tracking-widest opacity-35 mb-3 px-1">Storage</p>
210
- </div>
211
- <nav class="flex-1 overflow-y-auto px-2 pb-4">
212
- <ul id="storage-folder-list" class="flex flex-col gap-0.5"></ul>
213
- </nav>
214
- </div>
215
-
216
- ${sidebarFunctionList}
217
- </div>
218
- </div>
219
- \`) : ""}
220
-
221
- <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'}">
222
- \${props.children}
223
- </main>
224
- </div>
225
-
226
- <script>
227
- function toggleTheme() {
228
- const html = document.documentElement;
229
- const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
230
- html.setAttribute('data-theme', next);
231
- localStorage.setItem('admin-theme', next);
232
- updateThemeIcon();
233
- }
234
-
235
- function updateThemeIcon() {
236
- const theme = document.documentElement.getAttribute('data-theme');
237
- const lightIcon = document.getElementById('theme-icon-light');
238
- const darkIcon = document.getElementById('theme-icon-dark');
239
- if (lightIcon && darkIcon) {
240
- lightIcon.classList.toggle('hidden', theme !== 'dark');
241
- darkIcon.classList.toggle('hidden', theme === 'dark');
242
- }
243
- }
244
-
245
- function showPane(name, autoNavigate) {
246
- document.querySelectorAll('.nav-icon-btn').forEach(function(btn) {
247
- btn.classList.remove('active');
248
- });
249
- var btn = document.getElementById('nav-' + name);
250
- if (btn) btn.classList.add('active');
251
-
252
- document.querySelectorAll('[id^="pane-"]').forEach(function(pane) {
253
- pane.classList.add('hidden');
254
- });
255
- var targetPane = document.getElementById('pane-' + name);
256
- if (targetPane) targetPane.classList.remove('hidden');
257
-
258
- var right = document.getElementById('sidebar-right');
259
- if (right) {
260
- var shouldShowRightPane = (name === 'tables' || name === 'functions' || name === 'storage');
261
- right.classList.toggle('hidden-pane', !shouldShowRightPane);
262
- }
263
-
264
- if (name === 'storage') {
265
- syncStoragePane();
266
- }
267
-
268
- if (autoNavigate) {
269
- var linkSelector;
270
- if (name === 'tables') linkSelector = '#table-list a';
271
- else if (name === 'functions') linkSelector = '#pane-functions a';
272
- else linkSelector = '#pane-' + name + ' a';
273
-
274
- var firstLink = linkSelector ? document.querySelector(linkSelector) : null;
275
- if (firstLink) {
276
- var href = firstLink.getAttribute('href');
277
- if (href && href !== window.location.pathname) {
278
- firstLink.click();
279
- }
280
- }
281
- }
282
- }
283
-
284
- function filterTables(query) {
285
- var q = query.toLowerCase();
286
- document.querySelectorAll('#table-list > li').forEach(function(li) {
287
- var name = (li.getAttribute('data-name') || li.textContent).toLowerCase();
288
- li.style.display = name.includes(q) ? '' : 'none';
289
- });
290
- }
291
-
292
- function filterFunctions(query) {
293
- var q = query.toLowerCase();
294
- document.querySelectorAll('#pane-functions li').forEach(function(li) {
295
- var name = (li.getAttribute('data-name') || li.textContent).toLowerCase();
296
- li.style.display = name.includes(q) ? '' : 'none';
297
- });
298
- }
299
-
300
- function getStoragePathParts() {
301
- var path = window.location.pathname;
302
- if (!path.startsWith('/admin/storage')) return [];
303
- var raw = path.slice('/admin/storage'.length);
304
- if (raw.startsWith('/')) raw = raw.slice(1);
305
- if (!raw) return [];
306
- return raw.split('/').filter(Boolean).map(function(segment) {
307
- try {
308
- return decodeURIComponent(segment);
309
- } catch (_e) {
310
- return segment;
311
- }
312
- });
313
- }
314
-
315
- function toStorageHref(parts) {
316
- if (!parts || parts.length === 0) return '/admin/storage';
317
- return '/admin/storage/' + parts.map(function(part) {
318
- return encodeURIComponent(part);
319
- }).join('/');
320
- }
321
-
322
- function buildStoragePaneLink(href, label, icon) {
323
- 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>';
324
- }
325
-
326
- function syncStoragePane() {
327
- var list = document.getElementById('storage-folder-list');
328
- if (!list) return;
329
-
330
- var items = [];
331
- items.push(buildStoragePaneLink('/admin/storage', 'Root', 'solar:home-angle-bold-duotone'));
332
-
333
- var parts = getStoragePathParts();
334
- if (parts.length > 0) {
335
- items.push(buildStoragePaneLink(toStorageHref(parts.slice(0, -1)), '..', 'solar:arrow-up-linear'));
336
- }
337
-
338
- document.querySelectorAll('[data-storage-dir-link]').forEach(function(anchor) {
339
- var href = anchor.getAttribute('href');
340
- if (!href || href === window.location.pathname) return;
341
- var label = (anchor.textContent || '').trim();
342
- if (!label) return;
343
- items.push(buildStoragePaneLink(href, label, 'solar:folder-bold-duotone'));
344
- });
345
-
346
- if (items.length === 1) {
347
- 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>');
348
- }
349
-
350
- list.innerHTML = items.join('');
351
- }
352
-
353
- function highlightActiveLink() {
354
- var path = window.location.pathname;
355
- if (path !== '/' && path.endsWith('/')) {
356
- path = path.slice(0, -1);
357
- }
358
-
359
- if (path === '/admin/storage' || path.startsWith('/admin/storage/')) {
360
- showPane('storage');
361
- } else if (path === '/admin' || path === '/admin/users' || path.startsWith('/admin/table/')) {
362
- showPane('tables');
363
- } else if (path.startsWith('/admin/functions')) {
364
- showPane('functions');
365
- }
366
-
367
- document.querySelectorAll('#sidebar-right a').forEach(function(a) {
368
- var href = (a.getAttribute('href') || '/');
369
- if (href !== '/' && href.endsWith('/')) {
370
- href = href.slice(0, -1);
371
- }
372
- a.classList.toggle('active', href === path);
373
- });
374
-
375
- syncStoragePane();
376
- }
377
-
378
- document.addEventListener('DOMContentLoaded', function() {
379
- updateThemeIcon();
380
- highlightActiveLink();
381
- });
382
- document.body.addEventListener('htmx:afterSettle', highlightActiveLink);
383
- </script>
384
- </body>
385
- </html>\`;
386
- }
387
- `;
388
- }
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
+ .table th {
116
+ font-weight: 500;
117
+ font-size: 0.78rem;
118
+ text-transform: uppercase;
119
+ letter-spacing: 0.05em;
120
+ color: oklch(var(--bc) / 0.45);
121
+ }
122
+ .table td { vertical-align: middle; }
123
+ .table tr { border-bottom: 1px solid oklch(var(--b2)); }
124
+ .table tr:last-child { border-bottom: none; }
125
+ </style>
126
+ <script>
127
+ (function() {
128
+ const saved = localStorage.getItem('admin-theme');
129
+ if (saved) document.documentElement.setAttribute('data-theme', saved);
130
+ })();
131
+ </script>
132
+ </head>
133
+ <body class="min-h-screen bg-base-100" hx-ext="response-targets">
134
+ \${!props.hideSidebar ? raw(\`
135
+ <div class="navbar bg-base-100 border-b border-base-200 px-5 h-14 min-h-[3.5rem]">
136
+ <div class="flex-1 flex items-center gap-3">
137
+ <a href="/admin" class="flex items-center gap-2.5 font-semibold tracking-tight hover:opacity-80 transition-opacity">
138
+ <iconify-icon icon="solar:shield-star-bold-duotone" width="26" height="26" class="text-primary"></iconify-icon>
139
+ <span class="text-[15px]">Appflare</span>
140
+ </a>
141
+ </div>
142
+ <div class="flex-none flex items-center gap-1">
143
+ <button id="theme-toggle" onclick="toggleTheme()" class="btn btn-ghost btn-sm btn-square" title="Toggle theme">
144
+ <iconify-icon icon="solar:sun-bold-duotone" width="18" height="18" id="theme-icon-light" class="hidden"></iconify-icon>
145
+ <iconify-icon icon="solar:moon-bold-duotone" width="18" height="18" id="theme-icon-dark" class="hidden"></iconify-icon>
146
+ </button>
147
+ <a href="/" class="btn btn-ghost btn-sm gap-1.5 text-sm font-normal">
148
+ <iconify-icon icon="solar:arrow-left-linear" width="16" height="16"></iconify-icon>
149
+ Back to App
150
+ </a>
151
+ </div>
152
+ </div>
153
+ \`) : ""}
154
+
155
+ <div class="flex">
156
+ \${!props.hideSidebar ? raw(\`
157
+ <div class="flex min-h-[calc(100vh-3.5rem)]">
158
+ <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">
159
+ <button class="nav-icon-btn active" id="nav-tables" onclick="showPane('tables', true)" title="Tables">
160
+ <iconify-icon icon="solar:database-bold-duotone" width="24" height="24"></iconify-icon>
161
+ Tables
162
+ </button>
163
+
164
+ <a
165
+ href="/admin/storage"
166
+ class="nav-icon-btn"
167
+ id="nav-storage"
168
+ hx-get="/admin/storage"
169
+ hx-target="#main-content"
170
+ hx-push-url="true"
171
+ hx-swap="outerHTML"
172
+ onclick="showPane('storage', true)"
173
+ title="Storage"
174
+ >
175
+ <iconify-icon icon="solar:folder-with-files-bold-duotone" width="24" height="24"></iconify-icon>
176
+ Storage
177
+ </a>
178
+
179
+ <button class="nav-icon-btn" id="nav-functions" onclick="showPane('functions', true)" title="Functions">
180
+ <iconify-icon icon="solar:code-bold-duotone" width="24" height="24"></iconify-icon>
181
+ Functions
182
+ </button>
183
+ </aside>
184
+
185
+ <div id="sidebar-right" class="bg-base-100 border-r border-base-200 flex flex-col">
186
+ <div id="pane-tables" class="flex flex-col h-full">
187
+ <div class="px-3 pt-5 pb-3">
188
+ <p class="text-[10px] font-semibold uppercase tracking-widest opacity-35 mb-3 px-1">Collections</p>
189
+ <div class="relative">
190
+ <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>
191
+ <input
192
+ type="text"
193
+ id="table-search"
194
+ placeholder="Search collections..."
195
+ 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"
196
+ onkeyup="filterTables(this.value)"
197
+ />
198
+ </div>
199
+ </div>
200
+ <nav class="flex-1 overflow-y-auto px-2 pb-4">
201
+ <ul class="flex flex-col gap-0.5" id="table-list">
202
+ ${sidebarTableList}
203
+ </ul>
204
+ </nav>
205
+ </div>
206
+
207
+ <div id="pane-storage" class="flex flex-col h-full hidden">
208
+ <div class="px-3 pt-5 pb-3">
209
+ <p class="text-[10px] font-semibold uppercase tracking-widest opacity-35 mb-3 px-1">Storage</p>
210
+ </div>
211
+ <nav class="flex-1 overflow-y-auto px-2 pb-4">
212
+ <ul id="storage-folder-list" class="flex flex-col gap-0.5"></ul>
213
+ </nav>
214
+ </div>
215
+
216
+ ${sidebarFunctionList}
217
+ </div>
218
+ </div>
219
+ \`) : ""}
220
+
221
+ <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'}">
222
+ \${props.children}
223
+ </main>
224
+ </div>
225
+
226
+ <script>
227
+ function toggleTheme() {
228
+ const html = document.documentElement;
229
+ const next = html.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
230
+ html.setAttribute('data-theme', next);
231
+ localStorage.setItem('admin-theme', next);
232
+ updateThemeIcon();
233
+ }
234
+
235
+ function updateThemeIcon() {
236
+ const theme = document.documentElement.getAttribute('data-theme');
237
+ const lightIcon = document.getElementById('theme-icon-light');
238
+ const darkIcon = document.getElementById('theme-icon-dark');
239
+ if (lightIcon && darkIcon) {
240
+ lightIcon.classList.toggle('hidden', theme !== 'dark');
241
+ darkIcon.classList.toggle('hidden', theme === 'dark');
242
+ }
243
+ }
244
+
245
+ function showPane(name, autoNavigate) {
246
+ document.querySelectorAll('.nav-icon-btn').forEach(function(btn) {
247
+ btn.classList.remove('active');
248
+ });
249
+ var btn = document.getElementById('nav-' + name);
250
+ if (btn) btn.classList.add('active');
251
+
252
+ document.querySelectorAll('[id^="pane-"]').forEach(function(pane) {
253
+ pane.classList.add('hidden');
254
+ });
255
+ var targetPane = document.getElementById('pane-' + name);
256
+ if (targetPane) targetPane.classList.remove('hidden');
257
+
258
+ var right = document.getElementById('sidebar-right');
259
+ if (right) {
260
+ var shouldShowRightPane = (name === 'tables' || name === 'functions' || name === 'storage');
261
+ right.classList.toggle('hidden-pane', !shouldShowRightPane);
262
+ }
263
+
264
+ if (name === 'storage') {
265
+ syncStoragePane();
266
+ }
267
+
268
+ if (autoNavigate) {
269
+ var linkSelector;
270
+ if (name === 'tables') linkSelector = '#table-list a';
271
+ else if (name === 'functions') linkSelector = '#pane-functions a';
272
+ else linkSelector = '#pane-' + name + ' a';
273
+
274
+ var firstLink = linkSelector ? document.querySelector(linkSelector) : null;
275
+ if (firstLink) {
276
+ var href = firstLink.getAttribute('href');
277
+ if (href && href !== window.location.pathname) {
278
+ firstLink.click();
279
+ }
280
+ }
281
+ }
282
+ }
283
+
284
+ function filterTables(query) {
285
+ var q = query.toLowerCase();
286
+ document.querySelectorAll('#table-list > li').forEach(function(li) {
287
+ var name = (li.getAttribute('data-name') || li.textContent).toLowerCase();
288
+ li.style.display = name.includes(q) ? '' : 'none';
289
+ });
290
+ }
291
+
292
+ function filterFunctions(query) {
293
+ var q = query.toLowerCase();
294
+ document.querySelectorAll('#pane-functions li').forEach(function(li) {
295
+ var name = (li.getAttribute('data-name') || li.textContent).toLowerCase();
296
+ li.style.display = name.includes(q) ? '' : 'none';
297
+ });
298
+ }
299
+
300
+ function getStoragePathParts() {
301
+ var path = window.location.pathname;
302
+ if (!path.startsWith('/admin/storage')) return [];
303
+ var raw = path.slice('/admin/storage'.length);
304
+ if (raw.startsWith('/')) raw = raw.slice(1);
305
+ if (!raw) return [];
306
+ return raw.split('/').filter(Boolean).map(function(segment) {
307
+ try {
308
+ return decodeURIComponent(segment);
309
+ } catch (_e) {
310
+ return segment;
311
+ }
312
+ });
313
+ }
314
+
315
+ function toStorageHref(parts) {
316
+ if (!parts || parts.length === 0) return '/admin/storage';
317
+ return '/admin/storage/' + parts.map(function(part) {
318
+ return encodeURIComponent(part);
319
+ }).join('/');
320
+ }
321
+
322
+ function buildStoragePaneLink(href, label, icon) {
323
+ 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>';
324
+ }
325
+
326
+ function syncStoragePane() {
327
+ var list = document.getElementById('storage-folder-list');
328
+ if (!list) return;
329
+
330
+ var items = [];
331
+ items.push(buildStoragePaneLink('/admin/storage', 'Root', 'solar:home-angle-bold-duotone'));
332
+
333
+ var parts = getStoragePathParts();
334
+ if (parts.length > 0) {
335
+ items.push(buildStoragePaneLink(toStorageHref(parts.slice(0, -1)), '..', 'solar:arrow-up-linear'));
336
+ }
337
+
338
+ document.querySelectorAll('[data-storage-dir-link]').forEach(function(anchor) {
339
+ var href = anchor.getAttribute('href');
340
+ if (!href || href === window.location.pathname) return;
341
+ var label = (anchor.textContent || '').trim();
342
+ if (!label) return;
343
+ items.push(buildStoragePaneLink(href, label, 'solar:folder-bold-duotone'));
344
+ });
345
+
346
+ if (items.length === 1) {
347
+ 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>');
348
+ }
349
+
350
+ list.innerHTML = items.join('');
351
+ }
352
+
353
+ function highlightActiveLink() {
354
+ var path = window.location.pathname;
355
+ if (path !== '/' && path.endsWith('/')) {
356
+ path = path.slice(0, -1);
357
+ }
358
+
359
+ if (path === '/admin/storage' || path.startsWith('/admin/storage/')) {
360
+ showPane('storage');
361
+ } else if (path === '/admin' || path === '/admin/users' || path.startsWith('/admin/table/')) {
362
+ showPane('tables');
363
+ } else if (path.startsWith('/admin/functions')) {
364
+ showPane('functions');
365
+ }
366
+
367
+ document.querySelectorAll('#sidebar-right a').forEach(function(a) {
368
+ var href = (a.getAttribute('href') || '/');
369
+ if (href !== '/' && href.endsWith('/')) {
370
+ href = href.slice(0, -1);
371
+ }
372
+ a.classList.toggle('active', href === path);
373
+ });
374
+
375
+ syncStoragePane();
376
+ }
377
+
378
+ document.addEventListener('DOMContentLoaded', function() {
379
+ updateThemeIcon();
380
+ highlightActiveLink();
381
+ });
382
+ document.body.addEventListener('htmx:afterSettle', highlightActiveLink);
383
+ </script>
384
+ </body>
385
+ </html>\`;
386
+ }
387
+ `;
388
+ }