astro-tractstack 2.0.0-rc.24 → 2.0.0-rc.25

package/package.json

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

package/templates/src/components/edit/SettingsPanel.tsx

@@ -23,7 +23,7 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
 
   return (
     <div
-      className="bg-mydarkgrey rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
+      className="bg-mydarkgrey max-w-md rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
       style={
         {
           animation: window.matchMedia(

package/templates/src/components/edit/state/SaveModal.tsx

@@ -14,9 +14,11 @@ import {
 } from '@/stores/storykeep';
 import { startLoadingAnimation } from '@/utils/helpers';
 import type {
+  FlatNode,
   BaseNode,
   PaneNode,
   StoryFragmentNode,
+  MarkdownPaneFragmentNode,
 } from '@/types/compositorTypes';
 
 type SaveStage =
@@ -317,6 +319,56 @@ export default function SaveModal({
                 isContext
               );
 
+              // This ensures css generation in the next phase uses fresh values
+              payload.optionsPayload.nodes.forEach((transformedNode) => {
+                const liveNode = ctx.allNodes.get().get(transformedNode.id);
+                if (!liveNode) return;
+
+                let needsUpdate = false;
+                let updatedNode: BaseNode = { ...liveNode };
+
+                // Update elementCss for TagElement nodes (FlatNode)
+                if (
+                  transformedNode.nodeType === 'TagElement' &&
+                  transformedNode.elementCss
+                ) {
+                  const flatNode = liveNode as FlatNode;
+                  if (flatNode.elementCss !== transformedNode.elementCss) {
+                    (updatedNode as FlatNode).elementCss =
+                      transformedNode.elementCss;
+                    needsUpdate = true;
+                  }
+                }
+
+                // Update parentCss for Markdown nodes (MarkdownPaneFragmentNode)
+                if (
+                  transformedNode.nodeType === 'Markdown' &&
+                  transformedNode.parentCss
+                ) {
+                  const markdownNode = liveNode as MarkdownPaneFragmentNode;
+                  const currentParentCss = markdownNode.parentCss;
+                  const newParentCss = transformedNode.parentCss as string[];
+
+                  const isDifferent =
+                    !currentParentCss ||
+                    currentParentCss.length !== newParentCss.length ||
+                    currentParentCss.some(
+                      (css, index) => css !== newParentCss[index]
+                    );
+
+                  if (isDifferent) {
+                    (updatedNode as MarkdownPaneFragmentNode).parentCss =
+                      newParentCss;
+                    needsUpdate = true;
+                  }
+                }
+
+                // Only update the live node if there are actual changes
+                if (needsUpdate) {
+                  ctx.allNodes.get().set(transformedNode.id, updatedNode);
+                }
+              });
+
               // Check if this pane exists or is new
               const paneExistsInBackend = contentMap.some(
                 (item) => item.type === 'Pane' && item.id === paneNode.id

package/templates/src/layouts/Layout.astro

@@ -45,8 +45,6 @@ const {
   impressions = [],
 } = Astro.props;
 
-const isDev = import.meta.env.DEV;
-
 // Get site status from the store
 const isInitialized = !freshInstallStore.get().needsSetup;
 
@@ -60,13 +58,12 @@ const brandConfig = propBrandConfig || (await getBrandConfig(tenantId));
 const cssBasePath = isInitialized ? '/media/css' : '/styles';
 const fontBasePath = isInitialized ? '/media/fonts' : '/fonts';
 const mainStylesUrl = (() => {
-  const baseUrl =
-    isStoryKeep || isDev
-      ? `${cssBasePath}/storykeep.css`
-      : `${cssBasePath}/frontend.css`;
+  const baseUrl = isStoryKeep // || isDev
+    ? `${cssBasePath}/storykeep.css`
+    : `${cssBasePath}/frontend.css`;
 
   // Only add version for frontend.css (the dynamic one)
-  if (!isStoryKeep && !isDev && brandConfig?.STYLES_VER) {
+  if (!isStoryKeep && brandConfig?.STYLES_VER) {
     return `${baseUrl}?v=${brandConfig.STYLES_VER}`;
   }
 

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,18 +45,29 @@ export const POST: APIRoute = async ({ request }) => {
       ...new Set([...(cleanClasses || []), ...(dirtyClasses || [])]),
     ];
 
-    // Generate CSS using JIT
-    const tailwindCss = createTailwindcss({ tailwindConfig });
-    const baseClasses = allClasses.filter(
-      (c) => !c.startsWith('md:') && !c.startsWith('xl:')
-    );
-    const mdClasses = allClasses.filter((c) => c.startsWith('md:'));
-    const xlClasses = allClasses.filter((c) => c.startsWith('xl:'));
-    const htmlContent = [
-      `<div class="${baseClasses.join(' ')}"></div>`,
-      `<div class="md:block ${mdClasses.join(' ')}"></div>`,
-      `<div class="xl:block ${xlClasses.join(' ')}"></div>`,
-    ];
+    // 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