astro-tractstack 2.0.33 → 2.0.35

package/bin/create-tractstack.js

@@ -496,8 +496,8 @@ export default defineConfig({
   integrations: [
     react(),
     tractstack({
-      includeExamples: ${responses.includeExamples},
-      enableMultiTenant: ${responses.enableMultiTenant},
+      includeExamples: ${finalResponses.includeExamples},
+      enableMultiTenant: ${finalResponses.enableMultiTenant},
     }),
   ],
   output: 'server',
@@ -515,8 +515,8 @@ export default defineConfig({
   integrations: [
     react(),
     tractstack({
-      includeExamples: ${responses.includeExamples},
-      enableMultiTenant: ${responses.enableMultiTenant},
+      includeExamples: ${finalResponses.includeExamples},
+      enableMultiTenant: ${finalResponses.enableMultiTenant},
     }),
   ],
   output: 'server',
@@ -613,10 +613,10 @@ export default defineConfig({
   // Success message
   console.log(kleur.green('\n🎉 TractStack setup complete!'));
 
-  const runCommand =
-    packageManager === 'pnpm' ? 'pnpm run' : `${packageManager} run`;
+  //const runCommand =
+  //  packageManager === 'pnpm' ? 'pnpm run' : `${packageManager} run`;
 
-  if (responses.enableMultiTenant) {
+  if (finalResponses.enableMultiTenant) {
     console.log('\n' + kleur.bold('Multi-tenant features enabled:'));
     console.log(`  • Tenant registration: ${kleur.cyan('/sandbox/register')}`);
     console.log(`  • Subdomain routing middleware added`);
@@ -625,7 +625,7 @@ export default defineConfig({
     );
   }
 
-  if (responses.includeExamples) {
+  if (finalResponses.includeExamples) {
     console.log(`\n${kleur.bold('Example components included:')}`);
     console.log(
       `  • Collections route: ${kleur.cyan('/collections/[param1]')}`

package/dist/index.js

@@ -839,10 +839,6 @@ async function w(t, e, c) {
       src: t("../templates/src/pages/storykeep.astro"),
       dest: "src/pages/storykeep.astro"
     },
-    {
-      src: t("../templates/src/pages/storykeep/init.astro"),
-      dest: "src/pages/storykeep/init.astro"
-    },
     {
       src: t("../templates/src/pages/storykeep/content.astro"),
       dest: "src/pages/storykeep/content.astro"
@@ -2061,10 +2057,20 @@ async function w(t, e, c) {
         dest: "src/middleware.ts"
       }
     ] : [],
-    // Multi-Tenant Types (Always included due to plan reference)
+    // Manual Setup Wizard
+    {
+      src: t("../templates/src/utils/api/setupHelpers.ts"),
+      dest: "src/utils/api/setupHelpers.ts"
+    },
     {
-      src: t("../templates/src/types/multiTenant.ts"),
-      dest: "src/types/multiTenant.ts"
+      src: t(
+        "../templates/src/components/storykeep/widgets/SetupWizard.tsx"
+      ),
+      dest: "src/components/storykeep/widgets/SetupWizard.tsx"
+    },
+    {
+      src: t("../templates/src/pages/storykeep/init.astro"),
+      dest: "src/pages/storykeep/init.astro"
     },
     // Custom Components (Conditional)
     {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.33",
+  "version": "2.0.35",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",

package/templates/src/components/storykeep/widgets/SetupWizard.tsx

@@ -0,0 +1,153 @@
+import { useFormState } from '@/hooks/useFormState';
+import StringInput from '@/components/form/StringInput';
+import BooleanToggle from '@/components/form/BooleanToggle';
+import UnsavedChangesBar from '@/components/form/UnsavedChangesBar';
+import {
+  initialSetupState,
+  setupStateIntercept,
+  validateSetup,
+  initializeSystem,
+} from '@/utils/api/setupHelpers';
+
+export default function SetupWizard() {
+  const formState = useFormState({
+    initialData: initialSetupState,
+    validator: validateSetup,
+    interceptor: setupStateIntercept,
+    onSave: async (data) => {
+      try {
+        await initializeSystem(data);
+        // Hard redirect to break out of any potential state/cache issues
+        window.location.href = '/storykeep';
+        return data;
+      } catch (error) {
+        console.error('Installation failed:', error);
+        throw error;
+      }
+    },
+  });
+
+  const { state, updateField, errors } = formState;
+
+  return (
+    <div className="mx-auto max-w-2xl p-6" style={{ paddingBottom: '112px' }}>
+      <div className="rounded-lg bg-white p-8 shadow-lg">
+        <div className="mb-8">
+          <div className="h-16">
+            <img
+              src="/brand/logo.svg"
+              className="pointer-events-none mx-auto h-full"
+              alt="Logo"
+            />
+          </div>
+
+          <h2 className="mb-2 mt-8 text-2xl font-bold text-gray-900">
+            Install Tract Stack
+          </h2>
+          <p className="text-gray-600">
+            Create your admin account to initialize this node.
+          </p>
+        </div>
+
+        <div className="space-y-6">
+          {/* Email */}
+          <div>
+            <label className="mb-1 block text-sm font-bold text-gray-700">
+              Email Address *
+            </label>
+            <StringInput
+              value={state.email}
+              onChange={(value) => updateField('email', value)}
+              type="email"
+              placeholder="admin@example.com"
+              error={errors.email}
+            />
+            <p className="mt-1 text-sm text-gray-500">
+              Used for system notifications and recovery.
+            </p>
+          </div>
+
+          {/* Admin Password */}
+          <div>
+            <label className="mb-1 block text-sm font-bold text-gray-700">
+              Admin Password *
+            </label>
+            <StringInput
+              value={state.adminPassword}
+              onChange={(value) => updateField('adminPassword', value)}
+              type="password"
+              placeholder="Strong password"
+              error={errors.adminPassword}
+            />
+            <p className="mt-1 text-sm text-gray-500">Minimum 8 characters</p>
+          </div>
+
+          {/* Confirm Password */}
+          <div>
+            <label className="mb-1 block text-sm font-bold text-gray-700">
+              Confirm Password *
+            </label>
+            <StringInput
+              value={state.confirmPassword}
+              onChange={(value) => updateField('confirmPassword', value)}
+              type="password"
+              placeholder="Confirm your password"
+              error={errors.confirmPassword}
+            />
+          </div>
+
+          {/* Database Configuration */}
+          <div className="rounded-lg border border-gray-200 p-4">
+            <div className="mb-4">
+              <BooleanToggle
+                value={state.tursoEnabled}
+                onChange={(value) => updateField('tursoEnabled', value)}
+                label="Enable Turso Database"
+              />
+              <p className="mt-2 text-sm text-gray-500">
+                By default, we use a local SQLite3 database. Enable this to
+                connect to a Turso instance.
+              </p>
+            </div>
+
+            {state.tursoEnabled && (
+              <div className="space-y-4 rounded-lg bg-gray-50 p-4">
+                <div>
+                  <label className="mb-1 block text-sm font-bold text-gray-700">
+                    Turso Database URL *
+                  </label>
+                  <StringInput
+                    value={state.tursoDatabaseURL}
+                    onChange={(value) => updateField('tursoDatabaseURL', value)}
+                    placeholder="libsql://your-database.turso.io"
+                    error={errors.tursoDatabaseURL}
+                  />
+                </div>
+
+                <div>
+                  <label className="mb-1 block text-sm font-bold text-gray-700">
+                    Turso Auth Token *
+                  </label>
+                  <StringInput
+                    value={state.tursoAuthToken}
+                    onChange={(value) => updateField('tursoAuthToken', value)}
+                    type="password"
+                    placeholder="Your Turso auth token"
+                    error={errors.tursoAuthToken}
+                  />
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <UnsavedChangesBar
+          formState={formState}
+          message="Initialize System"
+          saveLabel="Install"
+          cancelLabel="Clear Form"
+        />
+      </div>
+    </div>
+  );
+}

package/templates/src/pages/storykeep/init.astro

@@ -1,21 +1,24 @@
 ---
 import { freshInstallStore } from '@/stores/backend';
 import { preHealthCheck } from '@/utils/backend';
-import RegistrationForm from '@/components/tenant/RegistrationForm';
+import SetupWizard from '@/components/storykeep/widgets/SetupWizard';
 
-const tenantId =
-  Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
-await preHealthCheck(tenantId);
+const isMultiTenant = import.meta.env.PUBLIC_ENABLE_MULTI_TENANT === 'true';
 
-const { needsSetup } = freshInstallStore.get();
+// Only run the "Wizard Check" logic if we are NOT in multi-tenant mode.
+if (!isMultiTenant) {
+  const tenantId =
+    Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default';
+  await preHealthCheck(tenantId);
 
-if (!needsSetup) {
-  return Astro.redirect('/storykeep');
+  const { needsSetup } = freshInstallStore.get();
+  if (!needsSetup) {
+    return Astro.redirect('/storykeep');
+  }
 }
 
 const isDev = import.meta.env.DEV;
-const isInitialized = !freshInstallStore.get().needsSetup;
-const cssBasePath = isInitialized ? '/media/css' : '/styles';
+const cssBasePath = '/styles';
 const mainStylesUrl = isDev
   ? `${cssBasePath}/storykeep.css`
   : `${cssBasePath}/frontend.css`;
@@ -31,21 +34,28 @@ const mainStylesUrl = isDev
     <link rel="stylesheet" href={mainStylesUrl} />
   </head>
   <body class="h-full">
-    <div class="max-w-5xl p-3.5 md:p-8">
-      <RegistrationForm client:load isInitMode={true} />
-    </div>
+    {
+      isMultiTenant ? (
+        <div class="flex min-h-screen items-center justify-center">
+          <img src="/brand/logo.svg" class="h-16 w-auto" alt="Logo" />
+        </div>
+      ) : (
+        <div class="max-w-5xl p-3.5 md:p-8">
+          <SetupWizard client:load />
+        </div>
+      )
+    }
 
     <script>
-      // Ensure clean slate for fresh installation
       (function initCleanSlate() {
         try {
-          // Clear admin/editor auth cookies
           document.cookie =
             'admin_auth=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
           document.cookie =
             'editor_auth=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
+          document.cookie =
+            'tractstack_session_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
 
-          // Clear all TractStack localStorage items
           const tractStackKeys = [];
           for (let i = 0; i < localStorage.length; i++) {
             const key = localStorage.key(i);
@@ -55,16 +65,6 @@ const mainStylesUrl = isDev
           }
           tractStackKeys.forEach((key) => localStorage.removeItem(key));
 
-          // Clear session-related items
-          localStorage.removeItem('tractstack_session_id');
-          localStorage.removeItem('tractstack_fingerprint');
-          localStorage.removeItem('tractstack_visit');
-          localStorage.removeItem('tractstack_entered_tracked');
-
-          // Clear session cookie
-          document.cookie =
-            'tractstack_session_id=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; SameSite=Lax';
-
           console.log('TractStack: Clean slate initialization complete');
         } catch (error) {
           console.warn('TractStack: Error during clean slate init:', error);

package/templates/src/utils/api/setupHelpers.ts

@@ -0,0 +1,114 @@
+import { TractStackAPI } from '@/utils/api';
+
+export interface SetupWizardState {
+  email: string;
+  adminPassword: string;
+  confirmPassword: string;
+  tursoEnabled: boolean;
+  tursoDatabaseURL: string;
+  tursoAuthToken: string;
+}
+
+export const initialSetupState: SetupWizardState = {
+  email: '',
+  adminPassword: '',
+  confirmPassword: '',
+  tursoEnabled: false,
+  tursoDatabaseURL: '',
+  tursoAuthToken: '',
+};
+
+/**
+ * State interceptor (Preserving existing UI patterns)
+ */
+export function setupStateIntercept(
+  newState: SetupWizardState,
+  field: keyof SetupWizardState,
+  value: any
+): SetupWizardState {
+  // Pattern: Clear Turso fields when disabled
+  if (field === 'tursoEnabled' && !value) {
+    return {
+      ...newState,
+      tursoEnabled: false,
+      tursoDatabaseURL: '',
+      tursoAuthToken: '',
+    };
+  }
+
+  // Pattern: Clear confirmation password when main password changes
+  if (field === 'adminPassword') {
+    return {
+      ...newState,
+      adminPassword: value,
+      confirmPassword: '',
+    };
+  }
+
+  return newState;
+}
+
+/**
+ * Validation Logic (Preserving existing Regex and Rules)
+ */
+export function validateSetup(state: SetupWizardState): Record<string, string> {
+  const errors: Record<string, string> = {};
+
+  // Email Validation pattern
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!state.email.trim()) {
+    errors.email = 'Email is required';
+  } else if (!emailRegex.test(state.email.trim())) {
+    errors.email = 'Please enter a valid email address';
+  }
+
+  // Password Validation pattern
+  if (!state.adminPassword.trim()) {
+    errors.adminPassword = 'Admin password is required';
+  } else if (state.adminPassword.length < 8) {
+    errors.adminPassword = 'Admin password must be at least 8 characters long';
+  }
+
+  // Confirmation Pattern
+  if (!errors.adminPassword && state.adminPassword !== state.confirmPassword) {
+    errors.confirmPassword = 'Passwords do not match';
+  }
+
+  // Turso Validation Pattern
+  if (state.tursoEnabled) {
+    if (!state.tursoDatabaseURL.trim()) {
+      errors.tursoDatabaseURL = 'Turso Database URL is required';
+    } else if (!state.tursoDatabaseURL.startsWith('libsql://')) {
+      errors.tursoDatabaseURL =
+        'Turso Database URL must start with "libsql://"';
+    }
+
+    if (!state.tursoAuthToken.trim()) {
+      errors.tursoAuthToken = 'Turso Auth Token is required';
+    }
+  }
+
+  return errors;
+}
+
+/**
+ * API Call (Preserving Payload Structure)
+ */
+export async function initializeSystem(state: SetupWizardState): Promise<void> {
+  const api = new TractStackAPI('default');
+
+  const payload = {
+    adminEmail: state.email.trim(),
+    adminPassword: state.adminPassword.trim(),
+    ...(state.tursoEnabled && {
+      tursoDatabaseURL: state.tursoDatabaseURL.trim(),
+      tursoAuthToken: state.tursoAuthToken.trim(),
+    }),
+  };
+
+  const response = await api.post('/api/v1/setup/initialize', payload);
+
+  if (!response.success) {
+    throw new Error(response.error || 'Setup failed');
+  }
+}

package/utils/inject-files.ts

@@ -848,10 +848,6 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/pages/storykeep.astro'),
       dest: 'src/pages/storykeep.astro',
     },
-    {
-      src: resolve('../templates/src/pages/storykeep/init.astro'),
-      dest: 'src/pages/storykeep/init.astro',
-    },
     {
       src: resolve('../templates/src/pages/storykeep/content.astro'),
       dest: 'src/pages/storykeep/content.astro',
@@ -2086,6 +2082,7 @@ export async function injectTemplateFiles(
       src: resolve('../templates/socials/youtube.svg'),
       dest: 'public/socials/youtube.svg',
     },
+
     // Multi-Tenant Features (Conditional)
     ...(config?.enableMultiTenant
       ? [
@@ -2096,10 +2093,21 @@ export async function injectTemplateFiles(
           },
         ]
       : []),
-    // Multi-Tenant Types (Always included due to plan reference)
+
+    // Manual Setup Wizard
+    {
+      src: resolve('../templates/src/utils/api/setupHelpers.ts'),
+      dest: 'src/utils/api/setupHelpers.ts',
+    },
     {
-      src: resolve('../templates/src/types/multiTenant.ts'),
-      dest: 'src/types/multiTenant.ts',
+      src: resolve(
+        '../templates/src/components/storykeep/widgets/SetupWizard.tsx'
+      ),
+      dest: 'src/components/storykeep/widgets/SetupWizard.tsx',
+    },
+    {
+      src: resolve('../templates/src/pages/storykeep/init.astro'),
+      dest: 'src/pages/storykeep/init.astro',
     },
 
     // Custom Components (Conditional)

package/templates/src/types/multiTenant.ts

@@ -1,77 +0,0 @@
-export interface TenantProvisioningData {
-  tenantId: string;
-  adminPassword: string;
-  name: string;
-  adminEmail: string;
-  tursoEnabled: boolean;
-  tursoDatabaseURL?: string;
-  tursoAuthToken?: string;
-}
-
-export interface TenantCapacity {
-  available: boolean;
-  currentTenants: number;
-  maxTenants: number;
-  availableSlots: number;
-}
-
-export interface ActivationRequest {
-  token: string;
-}
-
-export interface TenantActivationRequest {
-  token: string;
-}
-
-export interface TenantProvisioningResponse {
-  message: string;
-  token: string;
-}
-
-export interface TenantRegistrationState {
-  tenantId: string;
-  adminPassword: string;
-  confirmPassword: string;
-  name: string;
-  email: string;
-  tursoEnabled: boolean;
-  tursoDatabaseURL: string;
-  tursoAuthToken: string;
-}
-
-export interface TenantValidationErrors {
-  [key: string]: string;
-}
-
-// Validation functions matching backend
-export function validateTenantId(tenantId: string): {
-  valid: boolean;
-  error?: string;
-} {
-  // Must be 3-12 characters
-  if (tenantId.length < 3 || tenantId.length > 12) {
-    return { valid: false, error: 'Tenant ID must be 3-12 characters long' };
-  }
-
-  // Must be lowercase
-  if (tenantId !== tenantId.toLowerCase()) {
-    return { valid: false, error: 'Tenant ID must be lowercase' };
-  }
-
-  // Only alphanumeric and dashes
-  const validPattern = /^[a-z0-9-]+$/;
-  if (!validPattern.test(tenantId)) {
-    return {
-      valid: false,
-      error:
-        'Tenant ID can only contain lowercase letters, numbers, and dashes',
-    };
-  }
-
-  // Cannot be "default" (reserved)
-  if (tenantId === 'default') {
-    return { valid: false, error: "'default' is a reserved tenant ID" };
-  }
-
-  return { valid: true };
-}