astro-tractstack 2.0.0-rc.9 → 2.0.0

package/templates/src/pages/[...slug]/edit.astro

@@ -168,16 +168,10 @@ for (const [key, value] of Astro.url.searchParams) {
     <StoryKeepToolMode isContext={false} client:only="react" />
 
     <!-- Main Content Area -->
-    <main
-      id="mainContent"
-      class="relative flex-1"
-      style={{
-        paddingBottom: 'var(--bottom-right-controls-bottom-offset, 16px)',
-      }}
-    >
+    <main id="mainContent" class="relative flex-1 overflow-x-auto">
       <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
         <div
-          class="h-fit min-h-screen"
+          class="h-fit min-h-screen pb-96"
           style={{
             backgroundImage:
               'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
@@ -201,15 +195,22 @@ for (const [key, value] of Astro.url.searchParams) {
   <!-- Floating Controls (Settings Panel & HUD OR ToolBar) -->
   <aside
     id="settingsControls"
-    class="z-101 pointer-events-none fixed bottom-24 right-0 flex max-h-screen flex-col items-end gap-2 overflow-y-auto p-4 md:bottom-0"
+    class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
   >
-    <div class="pointer-events-auto">
+    <div class="pointer-events-none flex-grow"></div>
+
+    {/* Toolbar's wrapper: Does not grow or shrink */}
+    <div class="pointer-events-auto flex-shrink-0">
       <StoryKeepToolBar client:only="react" />
     </div>
-    <div class="pointer-events-auto">
+
+    {
+      /* Settings Panel's wrapper: Grows, shrinks, and will be positioned by our script */
+    }
+    <div class="pointer-events-auto max-h-full">
       <SettingsPanel
         config={brandConfig}
-        availableCodeHooks={['featured-content', 'list-content', 'bunny-video']}
+        availableCodeHooks={Object.keys(codeHookComponents)}
         client:only="react"
       />
     </div>
@@ -217,7 +218,6 @@ for (const [key, value] of Astro.url.searchParams) {
 </Layout>
 
 <script>
-  import { setupLayoutObservers, setupLayoutStyles } from '@/utils/layout';
-  setupLayoutStyles();
+  import { setupLayoutObservers } from '@/utils/layout';
   setupLayoutObservers();
 </script>

package/templates/src/pages/[...slug].astro

@@ -30,7 +30,9 @@ let storyData;
 try {
   storyData = await getStoryData(Astro, lookup, sessionId, tenantId);
 } catch (error) {
-  if (error instanceof Response) {
+  if (error instanceof Response && error.status === 404) {
+    return Astro.redirect('/404');
+  } else if (error instanceof Response) {
     return error;
   }
   console.error('Error fetching storyfragment:', error);
@@ -43,6 +45,7 @@ const storyfragmentId = storyData.id;
 const storyfragmentTitle = storyData.title || 'Untitled Story';
 const paneIds = storyData.paneIds || [];
 const codeHookTargets = storyData.codeHookTargets || {};
+const resourcesPayload = storyData.resourcesPayload || {};
 
 if (paneIds.length === 0) {
   console.log(`Empty Story Fragment. Redirecting to /storykeep`);
@@ -101,11 +104,22 @@ const brandConfig = await getBrandConfig(tenantId);
 if (!brandConfig.SITE_INIT) {
   return Astro.redirect('/storykeep');
 }
+
+const ogImage =
+  typeof storyData.socialImagePath === `string`
+    ? storyData.socialImagePath
+    : undefined;
+const paneSlugLookup: Record<string, string> = {};
+paneIds.forEach((paneId: string) => {
+  const paneData = fullContentMap.find((item) => item.id === paneId);
+  paneSlugLookup[paneId] = paneData?.slug || paneId;
+});
 ---
 
 <Layout
   title={storyfragmentTitle}
   slug={lookup || brandConfig.HOME_SLUG}
+  ogImage={ogImage}
   menu={storyData.menu || null}
   created={storyData.created}
   isContext={false}
@@ -120,26 +134,73 @@ if (!brandConfig.SITE_INIT) {
     <div class="panes-container">
       {
         paneIds.map((paneId: string) => (
-          <div
-            id={`pane-${paneId}`}
-            data-pane-id={paneId}
-            class="pane-fragment-container"
-            hx-get={`/api/v1/fragments/panes/${paneId}`}
-            hx-trigger="refresh"
-            hx-swap="innerHTML"
-          >
-            {codeHookTargets[paneId] ? (
-              <div class="overflow-hidden">
-                <CodeHook
-                  target={codeHookTargets[paneId]}
-                  paneId={paneId}
-                  fullContentMap={fullContentMap}
-                  noPaneId={true}
-                />
-              </div>
-            ) : (
-              <Fragment set:html={fragmentsData[paneId] || ''} />
-            )}
+          <div id={paneSlugLookup[paneId]}>
+            <div
+              id={`pane-${paneId}`}
+              data-pane-id={paneId}
+              class="pane-fragment-container"
+              style={
+                !codeHookTargets[paneId]
+                  ? undefined
+                  : !storyData.codeHookVisibility?.[paneId]
+                    ? 'display:none;'
+                    : 'display:block;'
+              }
+              hx-get={`/api/v1/fragments/panes/${paneId}`}
+              hx-trigger="refresh"
+              hx-swap="innerHTML scroll:none"
+            >
+              {codeHookTargets[paneId] ? (
+                <div class="relative overflow-hidden">
+                  <CodeHook
+                    target={codeHookTargets[paneId]}
+                    options={(() => {
+                      const optionsStr =
+                        codeHookTargets[paneId + '-' + codeHookTargets[paneId]];
+                      return optionsStr
+                        ? { params: { options: optionsStr } }
+                        : undefined;
+                    })()}
+                    fullContentMap={fullContentMap}
+                    resourcesPayload={resourcesPayload}
+                  />
+                  <div id={`pane-${paneId}-unset`}>
+                    {Array.isArray(storyData.codeHookVisibility?.[paneId]) && (
+                      <button
+                        type="button"
+                        class="text-mydarkgrey absolute right-2 top-2 z-10 rounded-full bg-white p-1.5 hover:bg-black hover:text-white"
+                        title="Go Back"
+                        hx-post="/api/v1/state"
+                        hx-trigger="click"
+                        hx-swap="none"
+                        hx-vals={JSON.stringify({
+                          unsetBeliefIds:
+                            storyData.codeHookVisibility[paneId].join(','),
+                          paneId: paneId,
+                        })}
+                        hx-preserve="true"
+                      >
+                        <svg
+                          class="h-6 w-6"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.5"
+                          stroke="currentColor"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"
+                          />
+                        </svg>
+                      </button>
+                    )}
+                  </div>
+                </div>
+              ) : (
+                <Fragment set:html={fragmentsData[paneId] || ''} />
+              )}
+            </div>
           </div>
         ))
       }

package/templates/src/pages/api/orphan-analysis.ts

@@ -69,7 +69,6 @@ export const GET: APIRoute = async ({ request }) => {
         status: 200,
         headers: {
           'Content-Type': 'application/json',
-          'Cache-Control': 'public, max-age=300', // Cache for 5 minutes
         },
       });
     } catch (fetchError) {

package/templates/src/pages/api/tailwind.ts

@@ -11,24 +11,6 @@ export const POST: APIRoute = async ({ request }) => {
       request.headers.get('X-Tenant-ID') ||
       import.meta.env.PUBLIC_TENANTID ||
       'default';
-    const isMultiTenant =
-      import.meta.env.PUBLIC_ENABLE_MULTI_TENANT === 'true' &&
-      tenantId !== 'default';
-
-    if (isMultiTenant) {
-      return new Response('CSS generation disabled in multi-tenant mode', {
-        status: 403,
-      });
-    }
-
-    // Read tailwind config from project root
-    const configPath = path.join(process.cwd(), 'tailwind.config.cjs');
-    const configContent = await fs.readFile(configPath, 'utf-8');
-    const tailwindConfig = new Function(
-      'module',
-      'exports',
-      configContent + '; return module.exports;'
-    )({ exports: {} }, {});
 
     const goBackend =
       import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
@@ -63,9 +45,29 @@ export const POST: APIRoute = async ({ request }) => {
       ...new Set([...(cleanClasses || []), ...(dirtyClasses || [])]),
     ];
 
-    // Generate CSS using JIT
-    const tailwindCss = createTailwindcss({ tailwindConfig });
-    const htmlContent = [`<span class="${allClasses.join(' ')}"></span>`];
+    // Read base tailwind config from project root
+    const configPath = path.join(process.cwd(), 'tailwind.config.cjs');
+    const configContent = await fs.readFile(configPath, 'utf-8');
+    const baseTailwindConfig = new Function(
+      'module',
+      'exports',
+      configContent + '; return module.exports;'
+    )({ exports: {} }, {});
+
+    // Create config with safelist
+    const tailwindConfigWithSafelist = {
+      ...baseTailwindConfig,
+      safelist: allClasses,
+    };
+
+    // Generate CSS using JIT with safelist
+    const tailwindCss = createTailwindcss({
+      tailwindConfig: tailwindConfigWithSafelist,
+    });
+
+    // Use simple HTML content since safelist should handle class generation
+    const htmlContent = ['<div>Using the safelist</div>'];
+
     const generatedCss = await tailwindCss.generateStylesFromContent(
       `@tailwind base; @tailwind utilities;`,
       htmlContent

package/templates/src/pages/context/[...contextSlug]/edit.astro

@@ -159,16 +159,10 @@ for (const [key, value] of Astro.url.searchParams) {
     <StoryKeepToolMode isContext={true} client:only="react" />
 
     <!-- Main Content Area -->
-    <main
-      id="mainContent"
-      class="relative flex-1"
-      style={{
-        paddingBottom: 'var(--bottom-right-controls-bottom-offset, 16px)',
-      }}
-    >
+    <main id="mainContent" class="relative flex-1 overflow-x-auto">
       <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
         <div
-          class="h-fit min-h-screen"
+          class="h-fit min-h-screen pb-96"
           style={{
             backgroundImage:
               'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
@@ -192,15 +186,22 @@ for (const [key, value] of Astro.url.searchParams) {
   <!-- Floating Controls (Settings Panel & HUD OR ToolBar) -->
   <aside
     id="settingsControls"
-    class="z-101 pointer-events-none fixed bottom-24 right-0 flex max-h-screen flex-col items-end gap-2 overflow-y-auto p-4 md:bottom-0"
+    class="z-101 pointer-events-none fixed bottom-16 right-2 flex flex-col items-end gap-2 md:bottom-2"
   >
-    <div class="pointer-events-auto">
+    <div class="pointer-events-none flex-grow"></div>
+
+    {/* Toolbar's wrapper: Does not grow or shrink */}
+    <div class="pointer-events-auto flex-shrink-0">
       <StoryKeepToolBar client:only="react" />
     </div>
-    <div class="pointer-events-auto">
+
+    {
+      /* Settings Panel's wrapper: Grows, shrinks, and will be positioned by our script */
+    }
+    <div class="pointer-events-auto max-h-full">
       <SettingsPanel
         config={brandConfig}
-        availableCodeHooks={['featured-content', 'list-content', 'bunny-video']}
+        availableCodeHooks={Object.keys(codeHookComponents)}
         client:only="react"
       />
     </div>
@@ -208,7 +209,6 @@ for (const [key, value] of Astro.url.searchParams) {
 </Layout>
 
 <script>
-  import { setupLayoutObservers, setupLayoutStyles } from '@/utils/layout';
-  setupLayoutStyles();
+  import { setupLayoutObservers } from '@/utils/layout';
   setupLayoutObservers();
 </script>

package/templates/src/pages/context/[...contextSlug].astro

@@ -59,6 +59,7 @@ try {
 const paneId = contextPaneData.id;
 const paneTitle = contextPaneData.title || 'Context';
 const codeHookTarget = contextPaneData.codeHookTarget || null;
+const resourcesPayload = storyData.resourcesPayload || {};
 
 // Get rendered fragment for the context pane
 let fragmentData = '';
@@ -119,11 +120,15 @@ if (!brandConfig.SITE_INIT) {
       class="context-pane-container"
       hx-get={`/api/v1/fragments/panes/${paneId}`}
       hx-trigger="refresh"
-      hx-swap="innerHTML"
+      hx-swap="innerHTML scroll:none"
     >
       {
         codeHookTarget ? (
-          <CodeHook target={codeHookTarget} fullContentMap={fullContentMap} />
+          <CodeHook
+            target={codeHookTarget}
+            resourcesPayload={resourcesPayload}
+            fullContentMap={fullContentMap}
+          />
         ) : (
           <Fragment set:html={fragmentData} />
         )

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

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import StoryKeepDashboard from '@/components/storykeep/Dashboard';
 import StoryKeepDashboard_Advanced from '@/components/storykeep/Dashboard_Advanced';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
@@ -40,11 +41,10 @@ if (initializing) {
 const title = 'Advanced | StoryKeep';
 
 let fullContentMap;
-let homeSlug = 'hello';
+const homeSlug = brandConfig.HOME_SLUG || 'hello';
 
 try {
   fullContentMap = await getFullContentMap(tenantId);
-  homeSlug = fullContentMap.find((item) => item.isHome)?.slug || 'hello';
 } catch (error) {
   return Astro.redirect(
     `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
@@ -53,8 +53,9 @@ try {
 ---
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
-  <main id="main-content" class="min-h-screen w-full">
-    <div class="p-8">
+  <main id="main-content" class="relative min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
+    <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"
         fullContentMap={fullContentMap}

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

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import BrandingPageWrapper from '@/components/storykeep/state/BrandingWrapper';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
 import { getFullContentMap } from '@/stores/analytics';
@@ -29,11 +30,10 @@ const initializing = !brandConfig.SITE_INIT;
 const title = 'Branding | StoryKeep';
 
 let fullContentMap;
-let homeSlug = 'hello';
+const homeSlug = brandConfig.HOME_SLUG || 'hello';
 
 try {
   fullContentMap = await getFullContentMap(tenantId);
-  homeSlug = fullContentMap.find((item) => item.isHome)?.slug || 'hello';
 } catch (error) {
   return Astro.redirect(
     `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
@@ -42,8 +42,9 @@ try {
 ---
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
-  <main id="main-content" class="min-h-screen w-full">
-    <div class="p-8">
+  <main id="main-content" class="relative min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
+    <div class="max-w-5xl p-3.5 md:p-8">
       <BrandingPageWrapper
         client:only="react"
         fullContentMap={fullContentMap}

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

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import StoryKeepDashboard from '@/components/storykeep/Dashboard';
 import StoryKeepDashboard_Content from '@/components/storykeep/Dashboard_Content';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
@@ -36,11 +37,10 @@ const title = 'Content | StoryKeep';
 const createMenu = Astro.url.searchParams.has('create-menu');
 
 let fullContentMap;
-let homeSlug = 'hello';
+const homeSlug = brandConfig.HOME_SLUG || 'hello';
 
 try {
   fullContentMap = await getFullContentMap(tenantId);
-  homeSlug = fullContentMap.find((item) => item.isHome)?.slug || 'hello';
 } catch (error) {
   return Astro.redirect(
     `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
@@ -49,8 +49,9 @@ try {
 ---
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
-  <main id="main-content" class="min-h-screen w-full">
-    <div class="p-8">
+  <main id="main-content" class="relative min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
+    <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"
         fullContentMap={fullContentMap}

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

@@ -31,6 +31,45 @@ const mainStylesUrl = isDev
     <link rel="stylesheet" href={mainStylesUrl} />
   </head>
   <body class="h-full">
-    <RegistrationForm client:load isInitMode={true} />
+    <div class="max-w-5xl p-3.5 md:p-8">
+      <RegistrationForm client:load isInitMode={true} />
+    </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';
+
+          // Clear all TractStack localStorage items
+          const tractStackKeys = [];
+          for (let i = 0; i < localStorage.length; i++) {
+            const key = localStorage.key(i);
+            if (key && key.startsWith('tractstack_')) {
+              tractStackKeys.push(key);
+            }
+          }
+          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);
+        }
+      })();
+    </script>
   </body>
 </html>

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

@@ -75,7 +75,7 @@ const mainStylesUrl = isDev
         </h2>
       </div>
 
-      <div class="mx-auto">
+      <div class="mx-auto max-w-sm">
         <div class="rounded-lg bg-white px-6 py-12 shadow-inner">
           <!-- Error message -->
           <div

package/templates/src/pages/storykeep.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import StoryKeepDashboard from '@/components/storykeep/Dashboard';
 import StoryKeepDashboard_Analytics from '@/components/storykeep/Dashboard_Analytics';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
@@ -35,14 +36,13 @@ if (initializing) {
 
 const title = 'Analytics | StoryKeep';
 
+const homeSlug = brandConfig.HOME_SLUG || 'hello';
 let fullContentMap;
-let homeSlug = 'hello';
 
 try {
   fullContentMap = await getFullContentMap(
     Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default'
   );
-  homeSlug = fullContentMap.find((item) => item.isHome)?.slug || 'hello';
 } catch (error) {
   return Astro.redirect(
     `/maint?from=${encodeURIComponent(Astro.url.pathname)}`
@@ -51,8 +51,9 @@ try {
 ---
 
 <Layout title={title} isStoryKeep={true} slug="storykeep">
-  <main id="main-content" class="min-h-screen w-full">
-    <div class="p-3.5 md:p-8">
+  <main id="main-content" class="relative min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
+    <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"
         fullContentMap={fullContentMap}