create-flowdular 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-flowdular",
-	"version": "0.2.2",
+	"version": "0.2.4",
 	"type": "module",
 	"description": "Scaffold a Flowdular application: the platform, one example module and the secrets a fresh install needs.",
 	"license": "MIT",

package/template/default/modules/example/package.json

@@ -16,7 +16,7 @@
 	"dependencies": {
 		"octane": "0.1.51",
 		"segment-state": "0.2.0",
-		"@flowdular/sdk": "0.2.2"
+		"@flowdular/sdk": "0.2.3"
 	},
 	"devDependencies": {
 		"@tsrx/typescript-plugin": "0.3.120",

package/template/default/modules/example/src/client/NotesView.tsrx

@@ -195,30 +195,34 @@ export function NotesView(props: NotesViewProps) @{
 				onSubmit={submit}
 			>
 				<div class="ui-drawer__body">
-					@if (error) {
-						<Alert>{error}</Alert>
-					}
-					<FormField label={t('example.field.title')}>
-						<input
-							class="ui-input"
-							id="title"
-							name="title"
+					<div class="ui-form">
+						@if (error) {
+							<Alert>{error}</Alert>
+						}
+						<FormField label={t('example.field.title')} required>
+							<input
+								class="ui-input"
+								id="title"
+								name="title"
+								required
+								maxLength={120}
+							/>
+						</FormField>
+						<FormField
+							label={t('example.field.body')}
 							required
-							maxLength={120}
-						/>
-					</FormField>
-					<FormField
-						label={t('example.field.body')}
-						help={t('example.field.body.help')}
-					>
-						<textarea
-							class="ui-textarea"
-							id="body"
-							required
-							rows={6}
-							maxLength={4000}
-						></textarea>
-					</FormField>
+							help={t('example.field.body.help')}
+						>
+							<textarea
+								class="ui-textarea"
+								id="body"
+								name="body"
+								required
+								rows={6}
+								maxLength={4000}
+							></textarea>
+						</FormField>
+					</div>
 				</div>
 				<div class="ui-drawer__foot">
 					<Button type="button" onClick={closeForm}>{t(

package/template/default/package.json

@@ -21,6 +21,6 @@
 	"devDependencies": {
 		"@tsrx/prettier-plugin": "0.3.120",
 		"prettier": "3.6.2",
-		"flowdular": "0.2.2"
+		"flowdular": "0.2.3"
 	}
 }

package/template/default/platform/index.html

@@ -1,13 +1,168 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="flowdular-booting">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<meta name="theme-color" content="#141B2E" />
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<style id="flowdular-critical-splash">
+			html,
+			body,
+			#root {
+				min-height: 100%;
+				margin: 0;
+				background: #0c1222;
+			}
+			.flowdular-splash {
+				position: fixed;
+				inset: 0;
+				z-index: 2147483647;
+				display: grid;
+				place-items: center;
+				background: #0c1222;
+				color: #f4f6fa;
+				transition: opacity 180ms ease;
+			}
+			.flowdular-splash__content {
+				display: grid;
+				justify-items: center;
+				gap: 16px;
+				font:
+					600 13px/1.2 ui-sans-serif,
+					system-ui,
+					sans-serif;
+				letter-spacing: 0.14em;
+				text-transform: uppercase;
+			}
+			.flowdular-splash__stage {
+				min-width: 190px;
+				font-size: 10px;
+				font-weight: 500;
+				color: #8794ab;
+				letter-spacing: 0.08em;
+				text-align: center;
+				text-transform: none;
+			}
+			.flowdular-splash__mark {
+				display: block;
+				width: 44px;
+				height: 44px;
+				animation: flowdular-pulse 1.4s ease-in-out infinite alternate;
+			}
+			.flowdular-splash--leaving {
+				opacity: 0;
+				pointer-events: none;
+			}
+			@keyframes flowdular-pulse {
+				to {
+					opacity: 0.45;
+				}
+			}
+			@media (prefers-reduced-motion: reduce) {
+				.flowdular-splash__mark {
+					animation: none;
+				}
+			}
+		</style>
 		<!--ssr-head-->
 	</head>
-	<body>
+	<body aria-busy="true">
+		<div
+			id="flowdular-splash"
+			class="flowdular-splash"
+			role="status"
+			aria-live="polite"
+		>
+			<div class="flowdular-splash__content">
+				<svg
+					class="flowdular-splash__mark"
+					viewBox="0 0 24 24"
+					aria-hidden="true"
+				>
+					<g fill="#ffffff">
+						<circle cx="7.9" cy="3.4" r="1.7" />
+						<rect x="6.2" y="3.4" width="3.4" height="1.6" />
+						<rect x="6.2" y="10.8" width="3.4" height="9.8" />
+						<circle cx="7.9" cy="20.6" r="1.7" />
+						<circle cx="16.1" cy="3.4" r="1.7" />
+						<rect x="14.4" y="3.4" width="3.4" height="9.8" />
+						<rect x="14.4" y="19" width="3.4" height="1.6" />
+						<circle cx="16.1" cy="20.6" r="1.7" />
+					</g>
+					<g fill="#e08a45">
+						<circle cx="3.4" cy="7.9" r="1.7" />
+						<rect x="3.4" y="6.2" width="9.8" height="3.4" />
+						<rect x="19" y="6.2" width="1.6" height="3.4" />
+						<circle cx="20.6" cy="7.9" r="1.7" />
+						<circle cx="3.4" cy="16.1" r="1.7" />
+						<rect x="3.4" y="14.4" width="1.6" height="3.4" />
+						<rect x="10.8" y="14.4" width="9.8" height="3.4" />
+						<circle cx="20.6" cy="16.1" r="1.7" />
+					</g>
+				</svg>
+				<span>Flowdular</span>
+				<small id="flowdular-splash-stage" class="flowdular-splash__stage"
+					>Starting workspace</small
+				>
+			</div>
+		</div>
 		<div id="root"><!--ssr-body--></div>
+		<script nonce="__FLOWDULAR_CSP_NONCE__">
+			(() => {
+				if (document.getElementById('flowdular-web-data')) {
+					document.getElementById('flowdular-splash')?.remove();
+					document.documentElement.classList.remove('flowdular-booting');
+					document.body.removeAttribute('aria-busy');
+					return;
+				}
+				const startedAt = performance.now();
+				const stages = [
+					'Securing session',
+					'Selecting workspace',
+					'Loading modules',
+					'Preparing workspace',
+				];
+				let stageIndex = 0;
+				let ready = false;
+				let stageTimer;
+				const stage = document.getElementById('flowdular-splash-stage');
+				const advance = () => {
+					if (!stage || ready) return;
+					stage.textContent = stages[Math.min(stageIndex, stages.length - 1)];
+					stageIndex += 1;
+				};
+				const finish = () => {
+					if (ready) return;
+					ready = true;
+					clearInterval(stageTimer);
+					const splash = document.getElementById('flowdular-splash');
+					if (!splash) return;
+					const leave = () => {
+						splash.classList.add('flowdular-splash--leaving');
+						document.documentElement.classList.remove('flowdular-booting');
+						document.body.setAttribute('aria-busy', 'false');
+						setTimeout(() => splash.remove(), 200);
+					};
+					const remaining = Math.max(0, 850 - (performance.now() - startedAt));
+					setTimeout(leave, remaining);
+				};
+				window.addEventListener('DOMContentLoaded', () => {
+					advance();
+					stageTimer = setInterval(advance, 320);
+					/* The server-rendered page is already visible underneath; hydration
+					   in development can take seconds, so the splash never blocks longer
+					   than this. */
+					setTimeout(finish, 2500);
+				});
+				window.addEventListener('flowdular:ready', finish, { once: true });
+			})();
+		</script>
+		<noscript
+			><style>
+				.flowdular-splash {
+					display: none;
+				}
+			</style></noscript
+		>
 	</body>
 </html>

package/template/default/platform/package.json

@@ -14,7 +14,7 @@
 		"@octanejs/vite-plugin": "0.1.51",
 		"octane": "0.1.51",
 		"pg": "8.23.0",
-		"@flowdular/sdk": "0.2.2"
+		"@flowdular/sdk": "0.2.3"
 	},
 	"devDependencies": {
 		"@octanejs/app-core": "0.0.47",

package/template/default/platform/scripts/dev.mjs

@@ -1,18 +1,51 @@
 import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { createServer } from 'vite';
+import {
+	createOctaneLogger,
+	installOctaneConsoleBridge,
+	shouldUseColor,
+	createTheme,
+	printReady,
+} from '@flowdular/sdk/dev-console';
 
 const appRoot = resolve(fileURLToPath(new URL('..', import.meta.url)));
+const verbose =
+	process.argv.includes('--verbose') ||
+	process.argv.includes('-v') ||
+	process.env.FD_DEV_VERBOSE === 'true';
+const color = shouldUseColor();
+const restoreConsole = installOctaneConsoleBridge(verbose, color);
 
-const server = await createServer({
-	root: appRoot,
-	configFile: resolve(appRoot, 'vite.config.ts'),
+let server;
+try {
+	server = await createServer({
+		root: appRoot,
+		configFile: resolve(appRoot, 'vite.config.ts'),
+		customLogger: createOctaneLogger(verbose, color),
+		clearScreen: false,
+	});
+	await server.listen();
+} catch (error) {
+	restoreConsole();
+	throw error;
+}
+printReady({
+	title: 'FLOWDULAR',
+	subtitle: 'development workspace',
+	theme: createTheme(color),
+	lines: [
+		[
+			'local',
+			server.resolvedUrls?.local?.[0] ?? 'http://localhost:4310/',
+			'info',
+		],
+		['diagnostics', verbose ? 'verbose' : 'quiet · use --verbose', 'muted'],
+	],
 });
-await server.listen();
-server.printUrls();
 
 /* Closing without exiting lets octane.config.ts release the database on the
    same signal; the process ends once both have drained. */
-const stop = () => void server.close();
+const stop = () => void server.close().finally(restoreConsole);
 process.once('SIGINT', stop);
 process.once('SIGTERM', stop);