astro-tractstack 2.0.0-rc.68 → 2.0.0-rc.69

package/package.json

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

package/templates/src/components/codehooks/FeaturedArticle.astro

@@ -40,7 +40,7 @@ const bgColor = parsedOptions.bgColor || '';
       class="mx-auto w-full max-w-7xl px-8 py-12"
       style={bgColor ? `background-color: ${bgColor}` : ''}
     >
-      <div class="grid grid-cols-1 items-center gap-x-16 gap-y-12 md:grid-cols-2">
+      <div class="grid grid-cols-1 items-center md:grid-cols-2 md:gap-y-12">
         <div class="w-full">
           <a href={`/${featuredStory.slug}`} class="block">
             <div class="max-w-lg pr-12">

package/templates/src/components/codehooks/ListContent.astro

@@ -22,6 +22,8 @@ try {
     topics: '',
     excludedIds: '',
     pageSize: 10,
+    title: '',
+    bgColor: '',
   };
 }
 
@@ -30,6 +32,8 @@ const excludedIdsArray = parsedOptions.excludedIds
   : [];
 const topicsArray = parsedOptions.topics ? parsedOptions.topics.split(',') : [];
 const pageSize = parseInt(parsedOptions.pageSize || '10');
+const title = parsedOptions.title;
+const bgColor = parsedOptions.bgColor || '';
 
 // Filter for valid stories to display
 const validPages = contentMap.filter(
@@ -62,14 +66,16 @@ const sortedStories = [...filteredStories].sort((a, b) => {
 // The initial display
 const initialStories = sortedStories.slice(0, pageSize);
 const totalPages = Math.ceil(sortedStories.length / pageSize);
-
-const bgColor = parsedOptions.bgColor || '';
 ---
 
 <div
-  class="mx-auto max-w-7xl p-4 py-12"
+  class="mx-auto max-w-7xl p-4 py-24"
   style={bgColor ? `background-color: ${bgColor}` : ''}
 >
+  <h2 class="mb-8 text-center text-3xl font-bold text-gray-900">
+    {title || `Recent Articles`}
+  </h2>
+
   {
     initialStories.length === 0 && (
       <div class="rounded-lg bg-gray-50 px-4 py-12 text-center">

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

@@ -22,7 +22,6 @@ const ListContentSetup = ({
 }: ListContentSetupProps) => {
   const $contentMap = useStore(fullContentMapStore);
   const [isPanelOpen, setIsPanelOpen] = useState(false);
-
   const [excludedIds, setExcludedIds] = useState<string[]>(
     params?.excludedIds ? params.excludedIds.split(',') : []
   );
@@ -34,6 +33,7 @@ const ListContentSetup = ({
   );
   const [currentPage, setCurrentPage] = useState(1);
   const [bgColor, setBgColor] = useState(params?.bgColor || '');
+  const [title, setTitle] = useState(params?.title || '');
 
   const isInitialMount = useRef(true);
 
@@ -43,15 +43,15 @@ const ListContentSetup = ({
     selectedTopics.length > 0 ||
     excludedIds.length > 0 ||
     pageSize !== 10 ||
-    bgColor !== '';
+    bgColor !== '' ||
+    title !== '';
 
   const validPages = $contentMap.filter(
     (item) =>
       item.type === 'StoryFragment' &&
       typeof item.description === 'string' &&
       typeof item.thumbSrc === 'string' &&
-      typeof item.thumbSrcSet === 'string' &&
-      typeof item.changed === 'string'
+      typeof item.thumbSrcSet === 'string'
   );
 
   // Build topic map for filtering
@@ -111,6 +111,7 @@ const ListContentSetup = ({
               topics: selectedTopics.join(','),
               pageSize: pageSize,
               bgColor: bgColor,
+              title: title,
             }),
           },
           bgColour: bgColor || undefined,
@@ -138,7 +139,7 @@ const ListContentSetup = ({
     }, 500);
 
     return () => clearTimeout(timeoutId);
-  }, [excludedIds, selectedTopics, pageSize, bgColor]);
+  }, [excludedIds, selectedTopics, pageSize, bgColor, title]);
 
   // Toggle a page's exclusion status
   const toggleExclude = (id: string) => {
@@ -283,6 +284,23 @@ const ListContentSetup = ({
           <h3 className="text-lg font-bold text-gray-900">Content Settings</h3>
         </div>
         <div className="space-y-4 pt-4">
+          <div>
+            <label
+              htmlFor="list-title"
+              className="block text-sm font-bold text-gray-700"
+            >
+              Optional Title
+            </label>
+            <input
+              type="text"
+              id="list-title"
+              className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-600 focus:ring-cyan-600 sm:text-sm"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              placeholder="e.g., Recent Articles"
+            />
+          </div>
+
           <div>
             <label
               htmlFor="page-size"
@@ -449,23 +467,9 @@ const ListContentSetup = ({
                     />
                   </div>
                   <div className="ml-4 min-w-0 flex-1">
-                    <div className="flex items-center justify-between">
-                      <p className="truncate text-sm font-bold text-gray-900">
-                        {page.title}
-                      </p>
-                      <div className="flex items-center space-x-4">
-                        <button
-                          onClick={() => toggleExclude(page.id)}
-                          className={`rounded px-2 py-1 text-xs font-bold ${
-                            isExcluded
-                              ? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                              : 'bg-red-100 text-red-600 hover:bg-red-200'
-                          }`}
-                        >
-                          {isExcluded ? 'Restore' : 'Exclude'}
-                        </button>
-                      </div>
-                    </div>
+                    <p className="text-sm font-bold text-gray-900">
+                      {page.title}
+                    </p>
                     <div className="mt-1">
                       <p className="line-clamp-1 text-sm text-gray-500">
                         {page.description}
@@ -486,6 +490,16 @@ const ListContentSetup = ({
                             {topic}
                           </span>
                         ))}
+                        <button
+                          onClick={() => toggleExclude(page.id)}
+                          className={`rounded px-2 py-1 text-xs font-bold ${
+                            isExcluded
+                              ? 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                              : 'bg-red-100 text-red-600 hover:bg-red-200'
+                          }`}
+                        >
+                          {isExcluded ? 'Restore' : 'Exclude'}
+                        </button>
                       </div>
                     )}
                     <div className="mt-1 flex items-center text-xs text-gray-500">

package/templates/src/components/compositor/PanelVisibilityWrapper.tsx

@@ -67,10 +67,6 @@ const PanelVisibilityWrapper = ({
               currentActiveMode.panel === panelType &&
               currentActiveMode.paneId === nodeId;
             if (!entries[0].isIntersecting && stillActive) {
-              console.log('❌ CLOSING PANEL DUE TO INTERSECTION OBSERVER!', {
-                panelType,
-                nodeId,
-              });
               nodesCtx.closeAllPanels();
             }
           }, 100); // Small delay to allow panel to render

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

@@ -102,7 +102,7 @@ const StoryKeepHeader = ({ slug, isContext = false }: StoryKeepHeaderProps) => {
       <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 p-2">
         {/* Viewport Section with stacked label */}
         <div className="flex flex-col items-center">
-          <span className="text-xs font-medium text-gray-600">Viewport:</span>
+          <span className="text-xs font-bold text-gray-600">Viewport:</span>
           <span className="text-xs text-gray-700">{viewport}</span>
         </div>
 

package/templates/src/components/edit/pane/PanePanel_title.tsx

@@ -285,14 +285,14 @@ const PaneTitlePanel = ({ nodeId, setMode }: PaneTitlePanelProps) => {
         {/* Help Text */}
         <div className="space-y-4 text-sm text-gray-600">
           <div>
-            <h4 className="font-semibold">Title Guidelines:</h4>
+            <h4 className="font-bold">Title Guidelines:</h4>
             <ul className="ml-4 mt-1 list-disc">
               <li>5-35 characters recommended for optimal display</li>
               <li>Clear, descriptive title for the pane content</li>
             </ul>
           </div>
           <div>
-            <h4 className="font-semibold">Slug Guidelines:</h4>
+            <h4 className="font-bold">Slug Guidelines:</h4>
             <ul className="ml-4 mt-1 list-disc">
               <li>Used for analytics tracking</li>
               <li>Only lowercase letters, numbers, and hyphens</li>

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

@@ -905,7 +905,7 @@ export default function SaveModal({
 
               {stage === 'ERROR' && (
                 <div className="mb-4 rounded bg-red-50 p-3 text-red-800">
-                  <div className="font-medium">Save failed</div>
+                  <div className="font-bold">Save failed</div>
                   <div className="mt-1 text-sm">{error}</div>
                 </div>
               )}

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_slug.tsx

@@ -217,7 +217,7 @@ const StoryFragmentSlugPanel = ({
 
         {isHomeSlug && (
           <div className="mt-4">
-            <div className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1.5 text-sm font-medium text-blue-800">
+            <div className="inline-flex items-center rounded-full bg-blue-100 px-3 py-1.5 text-sm font-bold text-blue-800">
               <LockClosedIcon className="mr-1.5 h-4 w-4" />
               Home Page
             </div>

package/templates/src/components/fields/BackgroundImage.tsx

@@ -504,7 +504,7 @@ const BackgroundImage = ({ paneId, onUpdate }: BackgroundImageProps) => {
                           />
                         </div>
                         <div className="flex-1">
-                          <div className="font-medium">
+                          <div className="font-bold">
                             {file.altDescription || file.filename}
                           </div>
                           {file.altDescription && (

package/templates/src/components/fields/ImageUpload.tsx

@@ -323,7 +323,7 @@ export const ImageUpload = ({
       {isSelectingFile && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
           <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
-            <h3 className="text-mydarkgrey mb-4 text-lg font-medium">
+            <h3 className="text-mydarkgrey mb-4 text-lg font-bold">
               Select an Image
             </h3>
 

package/templates/src/components/search/SearchResults.tsx

@@ -270,7 +270,7 @@ export default function SearchResults({
                 <div className="mt-3 min-w-0 flex-1 md:mt-0">
                   <div className="flex items-start justify-between gap-4">
                     <div className="flex-1">
-                      <h3 className="text-mydarkgrey group-hover:text-myblue mb-2 text-lg font-semibold transition-colors">
+                      <h3 className="text-mydarkgrey group-hover:text-myblue mb-2 text-lg font-bold transition-colors">
                         {item.title}
                       </h3>
                       {item.description && (
@@ -320,7 +320,7 @@ export default function SearchResults({
             page={currentPage}
             onPageChange={(details) => handlePageChange(details.page)}
           >
-            <Pagination.PrevTrigger className="text-mydarkgrey hover:text-myblue mr-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50">
+            <Pagination.PrevTrigger className="text-mydarkgrey hover:text-myblue mr-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold transition-colors disabled:opacity-50">
               <ChevronLeftIcon className="h-4 w-4" />
               Previous
             </Pagination.PrevTrigger>
@@ -334,7 +334,7 @@ export default function SearchResults({
                         key={index}
                         type="page"
                         value={page.value}
-                        className={`rounded px-3 py-2 text-sm font-medium transition-colors ${
+                        className={`rounded px-3 py-2 text-sm font-bold transition-colors ${
                           page.value === currentPage
                             ? 'bg-myblue text-white'
                             : 'text-mydarkgrey hover:text-myblue'
@@ -355,7 +355,7 @@ export default function SearchResults({
               </Pagination.Context>
             </div>
 
-            <Pagination.NextTrigger className="text-mydarkgrey hover:text-myblue ml-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-medium transition-colors disabled:opacity-50">
+            <Pagination.NextTrigger className="text-mydarkgrey hover:text-myblue ml-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold transition-colors disabled:opacity-50">
               Next
               <ChevronRightIcon className="h-4 w-4" />
             </Pagination.NextTrigger>

package/templates/src/components/storykeep/controls/content/ResourceForm.tsx

@@ -252,12 +252,26 @@ export default function ResourceForm({
           />
         );
 
-      case 'image':
+      case 'image': {
+        let fileUploadValue = ''; // Default to an empty string.
+
+        if (typeof fieldValue === 'string') {
+          // Case 1: The value is a string (Base64 URI).
+          fileUploadValue = fieldValue;
+        } else if (
+          fieldValue &&
+          typeof fieldValue === 'object' &&
+          fieldValue.src
+        ) {
+          // already saved, url
+          fileUploadValue = fieldValue.src;
+        }
+
         return (
           <FileUpload
             key={fieldName}
             label={fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}
-            value={fieldValue || ''}
+            value={fileUploadValue}
             onChange={(value) => updateOptionsField(fieldName, value)}
             accept="image/*"
             showPreview={true}
@@ -265,6 +279,7 @@ export default function ResourceForm({
             required={!fieldDef.optional}
           />
         );
+      }
 
       default:
         return (

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

@@ -259,7 +259,7 @@ export default function Wizard({
             <div className="mt-3">
               <a
                 href={currentStep.href}
-                className="inline-flex items-center rounded-md bg-cyan-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
+                className="inline-flex items-center rounded-md bg-cyan-600 px-3 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600"
               >
                 {currentStep.buttonText}
                 <svg