astro-tractstack 2.0.27 → 2.0.29

package/package.json

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

package/templates/src/components/codehooks/SandboxAuthWrapper.tsx

@@ -5,22 +5,48 @@ import XMarkIcon from '@heroicons/react/24/solid/XMarkIcon';
 import { ProfileStorage } from '@/utils/profileStorage';
 import SandboxRegisterForm from '@/components/codehooks/SandboxRegisterForm';
 
-export default function SandboxAuthWrapper() {
+interface SandboxAuthWrapperProps {
+  isServerSideAuthenticated: boolean;
+}
+
+export default function SandboxAuthWrapper({
+  isServerSideAuthenticated,
+}: SandboxAuthWrapperProps) {
   const [profileExists, setProfileExists] = useState<boolean | null>(null);
 
   useEffect(() => {
-    setProfileExists(ProfileStorage.hasProfile());
-  }, []);
+    const hasLocalProfile = ProfileStorage.hasProfile();
+
+    if (hasLocalProfile && !isServerSideAuthenticated) {
+      const token = localStorage.getItem('tractstack_profile_token');
+
+      if (token) {
+        ProfileStorage.storeProfileToken(token);
+        window.location.reload();
+        return;
+      } else {
+        ProfileStorage.clearProfile();
+        setProfileExists(false);
+      }
+    } else {
+      setProfileExists(hasLocalProfile);
+    }
+  }, [isServerSideAuthenticated]);
 
   const handleRegistrationSuccess = () => {
     setProfileExists(true);
+    window.location.reload();
   };
 
   const handleClose = () => {
     window.location.href = '/';
   };
 
-  if (profileExists === null || profileExists === true) {
+  if (profileExists === true && isServerSideAuthenticated) {
+    return null;
+  }
+
+  if (profileExists === null) {
     return null;
   }
 

package/templates/src/components/edit/panels/StyleElementPanel.tsx

@@ -1,15 +1,19 @@
-import { useMemo, useEffect } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import Cog6ToothIcon from '@heroicons/react/24/outline/Cog6ToothIcon';
 import {
   styleElementInfoStore,
   resetStyleElementInfo,
   settingsPanelStore,
 } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
 import { StylesMemory } from '@/components/edit/state/StylesMemory';
 import {
   isMarkdownPaneFragmentNode,
   isGridLayoutNode,
 } from '@/utils/compositor/typeGuards';
+import { getNodeText } from '@/utils/compositor/nodesHelper';
+import { cloneDeep } from '@/utils/helpers';
+import { processClassesForViewports } from '@/utils/compositor/reduceNodesClassNames';
 import SelectedTailwindClass from '@/components/fields/SelectedTailwindClass';
 import { tagTitles } from '@/types/compositorTypes';
 import type {
@@ -19,6 +23,78 @@ import type {
   GridLayoutNode,
 } from '@/types/compositorTypes';
 
+type SpanOverride = {
+  mobile?: Record<string, string>;
+  tablet?: Record<string, string>;
+  desktop?: Record<string, string>;
+};
+
+const spanStyleClasses: SpanOverride[] = [
+  {
+    mobile: {
+      bgCLIP: 'text',
+      bgGradientDIRECTION: 'r',
+      gradientFrom: 'blue-600',
+      gradientTo: 'teal-500',
+      textCOLOR: 'transparent',
+    },
+  },
+  {
+    mobile: {
+      textCOLOR: 'blue-600',
+    },
+  },
+  {
+    mobile: {
+      bgCOLOR: 'yellow-300',
+      textCOLOR: 'slate-900',
+      px: '1',
+      rounded: 'sm',
+    },
+  },
+  {
+    mobile: {
+      display: 'inline-block',
+      bgCOLOR: 'indigo-100',
+      textCOLOR: 'indigo-700',
+      textSIZE: 'xs',
+      fontWEIGHT: 'bold',
+      px: '2.5',
+      py: '0.5',
+      rounded: 'full',
+    },
+  },
+  {
+    mobile: {
+      bgCLIP: 'text',
+      textCOLOR: 'transparent',
+      bgGradientDIRECTION: 'r',
+      gradientFrom: 'orange-400',
+      gradientVia: 'pink-500',
+      gradientTo: 'purple-600',
+      fontWEIGHT: 'bold',
+    },
+  },
+  {
+    mobile: {
+      textDECORATION: 'underline',
+      textDECORATIONSTYLE: 'wavy',
+      textDECORATIONCOLOR: 'teal-400',
+      textDECORATIONTHICKNESS: '4',
+      textUNDERLINEOFFSET: '4',
+    },
+  },
+  {
+    mobile: {
+      display: 'inline-block',
+      bgCOLOR: 'rose-500',
+      textCOLOR: 'white',
+      px: '2',
+      skew: '-3',
+    },
+  },
+];
+
 export interface StyleElementPanelProps {
   node: FlatNode;
   parentNode: MarkdownPaneFragmentNode | GridLayoutNode;
@@ -30,6 +106,8 @@ const StyleElementPanel = ({
   parentNode,
   onTitleChange,
 }: StyleElementPanelProps) => {
+  const [showPresets, setShowPresets] = useState(true);
+
   if (
     !node?.tagName ||
     (!isMarkdownPaneFragmentNode(parentNode) && !isGridLayoutNode(parentNode))
@@ -40,6 +118,18 @@ const StyleElementPanel = ({
   const defaultClasses = parentNode.defaultClasses?.[node.tagName];
   const overrideClasses = node.overrideClasses;
 
+  const hasOverrides = useMemo(() => {
+    return (
+      overrideClasses &&
+      ((overrideClasses.mobile &&
+        Object.keys(overrideClasses.mobile).length > 0) ||
+        (overrideClasses.tablet &&
+          Object.keys(overrideClasses.tablet).length > 0) ||
+        (overrideClasses.desktop &&
+          Object.keys(overrideClasses.desktop).length > 0))
+    );
+  }, [overrideClasses]);
+
   const mergedClasses = useMemo(() => {
     const result: {
       [key: string]: {
@@ -49,7 +139,6 @@ const StyleElementPanel = ({
       };
     } = {};
 
-    // First add all default classes
     if (defaultClasses) {
       Object.keys(defaultClasses.mobile).forEach((className) => {
         result[className] = {
@@ -64,7 +153,6 @@ const StyleElementPanel = ({
       });
     }
 
-    // Then overlay any override classes
     if (overrideClasses) {
       ['mobile', 'tablet', 'desktop'].forEach((viewport) => {
         const viewportOverrides =
@@ -114,6 +202,24 @@ const StyleElementPanel = ({
     });
   };
 
+  const applySpanPreset = (styleIndex: number) => {
+    const ctx = getCtx();
+    const allNodes = ctx.allNodes.get();
+    const targetNode = cloneDeep(allNodes.get(node.id)) as FlatNode;
+    if (!targetNode) return;
+
+    const preset = spanStyleClasses[styleIndex];
+
+    targetNode.overrideClasses = {
+      ...targetNode.overrideClasses,
+      ...preset,
+    };
+
+    ctx.modifyNodes([{ ...targetNode, isChanged: true }]);
+
+    setShowPresets(false);
+  };
+
   useEffect(() => {
     if (
       styleElementInfoStore.get().markdownParentId !== parentNode.id ||
@@ -140,6 +246,10 @@ const StyleElementPanel = ({
     }
   }, [node?.tagName, onTitleChange]);
 
+  const shouldShowQuickStyles =
+    node.tagName === 'span' && !hasOverrides && showPresets;
+  const nodeText = shouldShowQuickStyles ? getNodeText(node) : '';
+
   return (
     <div className="space-y-4">
       {node.wordCarouselPayload && (
@@ -165,42 +275,90 @@ const StyleElementPanel = ({
           </div>
         </div>
       )}
-      {Object.keys(mergedClasses).length > 0 ? (
-        <div className="flex flex-wrap gap-2">
-          {Object.entries(mergedClasses).map(([className, values]) => (
-            <SelectedTailwindClass
-              key={className}
-              name={className}
-              values={values}
-              onRemove={handleRemove}
-              onUpdate={handleUpdate}
-            />
-          ))}
-        </div>
-      ) : (
-        <div className="space-y-4">
-          <em>No styles.</em>
-        </div>
-      )}
 
-      <div className="space-y-4">
-        <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
-          <li>
-            <em>Actions:</em>
-          </li>
-          <li>
+      {shouldShowQuickStyles ? (
+        <div className="space-y-6">
+          <div className="space-y-2">
+            <h3 className="text-mydarkgrey text-sm font-bold">
+              Quick Style Selection
+            </h3>
+            <p className="text-xs text-gray-500">
+              Select a preset style for your text selection.
+            </p>
+          </div>
+
+          <div className="flex flex-col gap-4">
+            {spanStyleClasses.map((style, index) => {
+              const [classesPayload] = processClassesForViewports(
+                style as any,
+                {},
+                1
+              );
+              const combinedClasses = classesPayload[0] || '';
+
+              return (
+                <button
+                  key={index}
+                  onClick={() => applySpanPreset(index)}
+                  className="group w-full text-left text-xl transition-colors hover:outline-dotted hover:outline-2 hover:outline-black"
+                >
+                  <span className={combinedClasses}>
+                    {nodeText || 'Sample Text'}
+                  </span>
+                </button>
+              );
+            })}
+          </div>
+
+          <div className="border-t border-gray-100 pt-4">
             <button
-              onClick={() => handleClickAdd()}
-              className="text-myblue font-bold underline hover:text-black"
+              onClick={() => setShowPresets(false)}
+              className="text-myblue w-full text-center text-sm underline hover:text-black"
             >
-              Add Style
+              Apply your own styles manually
             </button>
-          </li>
-          <li>
-            <StylesMemory node={node} parentNode={parentNode} />
-          </li>
-        </ul>
-      </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          {Object.keys(mergedClasses).length > 0 ? (
+            <div className="flex flex-wrap gap-2">
+              {Object.entries(mergedClasses).map(([className, values]) => (
+                <SelectedTailwindClass
+                  key={className}
+                  name={className}
+                  values={values}
+                  onRemove={handleRemove}
+                  onUpdate={handleUpdate}
+                />
+              ))}
+            </div>
+          ) : (
+            <div className="space-y-4">
+              <em>No styles.</em>
+            </div>
+          )}
+
+          <div className="space-y-4">
+            <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+              <li>
+                <em>Actions:</em>
+              </li>
+              <li>
+                <button
+                  onClick={() => handleClickAdd()}
+                  className="text-myblue font-bold underline hover:text-black"
+                >
+                  Add Style
+                </button>
+              </li>
+              <li>
+                <StylesMemory node={node} parentNode={parentNode} />
+              </li>
+            </ul>
+          </div>
+        </>
+      )}
     </div>
   );
 };

package/templates/src/components/edit/panels/StyleLinkPanel.tsx

@@ -32,10 +32,13 @@ type ButtonStylePair = [ButtonStyle, ButtonStyle];
 
 const buttonStyleOptions = [
   'Plain text inline',
-  'Fancy text inline',
-  'Fancy button',
+  'Primary',
+  'Primary inverse',
+  'Dark',
+  'Dark inverse',
 ];
 const buttonStyleClasses: ButtonStylePair[] = [
+  // Plain text inline
   [
     {
       fontWEIGHT: ['bold'],
@@ -48,32 +51,93 @@ const buttonStyleClasses: ButtonStylePair[] = [
       textCOLOR: ['brand-1'],
     },
   ],
+  // Primary Solid Button
   [
     {
-      bgCOLOR: ['brand-4'],
-      fontWEIGHT: ['bold'],
-      px: ['3.5'],
-      py: ['1.5'],
-      rounded: ['lg'],
-      textCOLOR: ['brand-1'],
+      alignITEMS: ['center'],
+      bgCOLOR: ['blue-600'],
+      borderCOLOR: ['transparent'],
+      display: ['inline-flex'],
+      justifyCONTENT: ['center'],
+      px: ['6'],
+      py: ['3'],
+      rounded: ['md'],
+      textCOLOR: ['white'],
+      textSIZE: ['base'],
+      transition: ['colors'],
+      transitionDURATION: ['200'],
+      w: ['full'],
     },
     {
-      bgCOLOR: ['brand-3'],
+      bgCOLOR: ['blue-700'],
     },
   ],
+  // Secondary Outline Button
   [
     {
-      bgCOLOR: ['brand-4'],
-      display: ['inline-block'],
-      fontWEIGHT: ['bold'],
-      px: ['3.5'],
-      py: ['2.5'],
+      alignITEMS: ['center'],
+      bgCOLOR: ['transparent'],
+      borderCOLOR: ['blue-600'],
+      borderWIDTH: ['2'],
+      display: ['inline-flex'],
+      justifyCONTENT: ['center'],
+      px: ['6'],
+      py: ['3'],
       rounded: ['md'],
-      textCOLOR: ['brand-1'],
+      textCOLOR: ['blue-600'],
+      textSIZE: ['base'],
+      transition: ['colors'],
+      transitionDURATION: ['200'],
+      w: ['full'],
+    },
+    {
+      bgCOLOR: ['blue-50'],
+    },
+  ],
+  [
+    {
+      alignITEMS: ['center'],
+      bgCOLOR: ['black'],
+      borderCOLOR: ['transparent'],
+      borderWIDTH: ['2'],
+      display: ['inline-flex'],
+      justifyCONTENT: ['center'],
+      px: ['6'],
+      py: ['3'],
+      rounded: ['md'],
+      textCOLOR: ['white'],
+      textSIZE: ['base'],
+      transition: ['colors'],
+      transitionDURATION: ['200'],
+      w: ['full'],
+    },
+    {
+      bgCOLOR: ['white'],
+      textCOLOR: ['black'],
+      borderCOLOR: ['black'],
+      borderWIDTH: ['2'],
+    },
+  ],
+  [
+    {
+      alignITEMS: ['center'],
+      bgCOLOR: ['transparent'],
+      borderCOLOR: ['black'],
+      borderWIDTH: ['2'],
+      display: ['inline-flex'],
+      justifyCONTENT: ['center'],
+      px: ['6'],
+      py: ['3'],
+      rounded: ['md'],
+      textCOLOR: ['black'],
+      textSIZE: ['base'],
+      transition: ['colors'],
+      transitionDURATION: ['200'],
+      w: ['full'],
     },
     {
-      bgCOLOR: ['brand-3'],
-      rotate: ['2'],
+      textCOLOR: ['myblack'],
+      bgCOLOR: ['slate-100'],
     },
   ],
 ];

package/templates/src/pages/sandbox.astro

@@ -26,7 +26,6 @@ if (healthCheckRedirect !== undefined) {
 }
 
 const brandConfig = await getBrandConfig(tenantId);
-
 const emptyStoryFragment = {
   id: ulid(),
   nodeType: 'StoryFragment' as const,
@@ -43,12 +42,15 @@ const loadData = {
 };
 const title = 'Sandbox - TractStack Editor';
 const storyFragmentID = emptyStoryFragment.id;
-
 const fullContentMap = await getFullContentMap(tenantId);
 const urlParams: Record<string, string | boolean> = {};
 for (const [key, value] of Astro.url.searchParams) {
   urlParams[key] = value === '' ? true : value;
 }
+
+const hasProfile = Astro.request.headers
+  .get('cookie')
+  ?.includes('tractstack_profile=true');
 ---
 
 <Layout
@@ -59,7 +61,7 @@ for (const [key, value] of Astro.url.searchParams) {
   isStoryKeep={true}
   isEditor={true}
 >
-  <SandboxAuthWrapper client:load />
+  <SandboxAuthWrapper client:load isServerSideAuthenticated={!!hasProfile} />
   <Header
     title={title}
     slug="sandbox"
@@ -70,65 +72,71 @@ for (const [key, value] of Astro.url.searchParams) {
     menu={null}
   />
 
-  <section
-    id="storykeepHeader"
-    role="banner"
-    class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
-  >
-    <StoryKeepHeader
-      slug="sandbox"
-      isContext={false}
-      isSandboxMode={true}
-      client:only="react"
-    />
-  </section>
-
-  <div class="flex min-h-screen">
-    <StoryKeepToolMode isContext={false} client:only="react" />
-
-    <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 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)',
-          }}
+  {
+    hasProfile && (
+      <>
+        <section
+          id="storykeepHeader"
+          role="banner"
+          class="z-101 bg-mywhite left-0 right-0 drop-shadow transition-all duration-200"
         >
-          <Compositor
-            id={storyFragmentID}
-            nodes={loadData}
-            config={brandConfig}
-            fullContentMap={fullContentMap}
-            fullCanonicalURL="/sandbox"
-            urlParams={urlParams}
-            availableCodeHooks={Object.keys(codeHookComponents)}
+          <StoryKeepHeader
+            slug="sandbox"
+            isContext={false}
             isSandboxMode={true}
             client:only="react"
           />
+        </section>
+
+        <div class="flex min-h-screen">
+          <StoryKeepToolMode isContext={false} client:only="react" />
+
+          <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 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)',
+                }}
+              >
+                <Compositor
+                  id={storyFragmentID}
+                  nodes={loadData}
+                  config={brandConfig}
+                  fullContentMap={fullContentMap}
+                  fullCanonicalURL="/sandbox"
+                  urlParams={urlParams}
+                  availableCodeHooks={Object.keys(codeHookComponents)}
+                  isSandboxMode={true}
+                  client:only="react"
+                />
+              </div>
+            </div>
+          </main>
         </div>
-      </div>
-    </main>
-  </div>
 
-  <aside
-    id="settingsControls"
-    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-none flex-grow"></div>
+        <aside
+          id="settingsControls"
+          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-none flex-grow" />
 
-    <div class="pointer-events-auto flex-shrink-0">
-      <StoryKeepToolBar client:only="react" />
-    </div>
+          <div class="pointer-events-auto flex-shrink-0">
+            <StoryKeepToolBar client:only="react" />
+          </div>
 
-    <div class="pointer-events-auto max-h-full">
-      <SettingsPanel
-        config={brandConfig}
-        availableCodeHooks={Object.keys(codeHookComponents)}
-        client:only="react"
-      />
-    </div>
-  </aside>
+          <div class="pointer-events-auto max-h-full">
+            <SettingsPanel
+              config={brandConfig}
+              availableCodeHooks={Object.keys(codeHookComponents)}
+              client:only="react"
+            />
+          </div>
+        </aside>
+      </>
+    )
+  }
 </Layout>
 
 <script>