astro-tractstack 2.0.0-rc.60 → 2.0.0-rc.61

package/package.json

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

package/templates/src/components/compositor/nodes/Pane.tsx

@@ -32,7 +32,7 @@ const CodeHookContainer = ({
               <Fragment key={key}>
                 <span className="min-w-24 font-bold text-gray-600">{key}:</span>
                 <div className="ml-2 flex flex-wrap gap-1">
-                  {value.split('|').map((item, index) => (
+                  {value.split(/,|\|/).map((item, index) => (
                     <span
                       key={index}
                       className="inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-800"

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
 import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
 import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
@@ -8,11 +8,8 @@ import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import BugAntIcon from '@heroicons/react/24/outline/BugAntIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
-import { debounce } from '@/utils/helpers';
 import type { ToolModeVal } from '@/types/compositorTypes';
 
-const SHORT_THRESHOLD = 650;
-
 const storykeepToolModes = [
   {
     key: 'styles' as const,
@@ -84,34 +81,16 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         ctx.toolModeValStore.set({ value: 'text' });
+        ctx.notifyNode('root');
       }
     };
 
-    const toolModeNav = navRef.current;
-
-    // If the <nav> element hasn't been rendered yet, do nothing.
-    // The hook will re-run when hasTitle/hasPanes changes and it does render.
-    if (!toolModeNav) {
-      return;
-    }
-
-    const updateToolbarLayout = debounce(() => {
-      const isWideAndShort =
-        window.innerWidth >= 801 && window.innerHeight <= SHORT_THRESHOLD;
-      toolModeNav.classList.toggle('is-compact-widget', isWideAndShort);
-    }, 50);
-
     document.addEventListener('keydown', handleEscapeKey);
-    window.addEventListener('resize', updateToolbarLayout);
-
-    updateToolbarLayout(); // Initial check
 
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
-      window.removeEventListener('resize', updateToolbarLayout);
     };
-    // This dependency array is the key. The effect will re-run when the render conditions change.
-  }, [ctx, hasTitle, hasPanes, isContext]);
+  }, [ctx]);
 
   if (!hasTitle || (!hasPanes && !isContext)) {
     return null;
@@ -119,38 +98,12 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
 
   return (
     <>
-      <style>{`
-        #mainNav.is-compact-widget {
-          position: fixed;
-          bottom: 0.25rem;
-          left: 0rem;
-          top: auto;
-          right: auto;
-          height: auto;
-          width: auto;
-          padding: 0.5rem;
-          border-radius: 0 0.75rem 0.75rem 0;
-          box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-          background-color: rgba(252, 252, 252, 0.7);
-          backdrop-filter: blur(4px);
-          border: 1px solid rgba(0, 0, 0, 0.05);
-        }
-        #mainNav.is-compact-widget > div {
-          flex-direction: row;
-          flex-wrap: nowrap;
-          align-items: center;
-          gap: 1rem;
-          margin: 0;
-          padding: 0;
-          height: auto;
-        }
-      `}</style>
       <nav
         id="mainNav"
         ref={navRef}
-        className="z-102 bg-mywhite fixed bottom-0 left-0 right-0 pt-1.5 md:sticky md:bottom-auto md:left-0 md:top-24 md:h-screen md:w-16 md:pt-0"
+        className="z-102 bg-mywhite md:bg-mywhite/70 fixed bottom-0 left-0 right-0 p-1.5 md:bottom-2 md:right-auto md:h-auto md:w-auto md:rounded-r-xl md:border md:border-black/5 md:p-2 md:shadow-lg md:backdrop-blur-sm"
       >
-        <div className="flex flex-wrap justify-around gap-4 py-0.5 md:mt-0 md:flex-col md:items-center md:gap-8 md:space-x-0 md:space-y-2 md:py-2">
+        <div className="flex flex-wrap justify-around gap-4 py-0.5 md:flex-nowrap md:justify-start md:gap-4 md:p-0">
           <div className="text-mydarkgrey text-center text-sm font-bold">
             mode:
             <div className="font-action text-myblue pt-1.5 text-center text-xs">

package/templates/src/components/widgets/ImpressionWrapper.tsx

@@ -191,7 +191,6 @@ const ImpressionWrapper = ({
     <div
       className="impressions-wrapper pointer-events-none fixed z-50"
       style={{
-        bottom: 'var(--bottom-right-controls-bottom-offset, 16px)',
         right: '16px',
       }}
     >

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 overflow-x-auto"
-      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-24"
           style={{
             backgroundImage:
               'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',
@@ -224,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/context/[...contextSlug]/edit.astro

@@ -215,7 +215,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/utils/layout.ts

@@ -9,20 +9,6 @@ import { debounce } from '@/utils/helpers';
 
 let hasScrolledForSettingsPanel = false;
 
-export function setupLayoutStyles(): void {
-  const updateBottomOffset = () => {
-    const mobileNavHeight = window.innerWidth < 801 ? 80 : 0;
-    const padding = 4;
-    const offset = `${mobileNavHeight + padding}px`;
-    document.documentElement.style.setProperty(
-      '--bottom-right-controls-bottom-offset',
-      offset
-    );
-  };
-  updateBottomOffset();
-  window.addEventListener('resize', updateBottomOffset);
-}
-
 // Replace your existing setupPaneObserver with this one.
 function setupPaneObserver() {
   let currentObserver: IntersectionObserver | null = null;
@@ -64,7 +50,6 @@ function setupPaneObserver() {
 
 export function setupLayoutObservers(): void {
   const storykeepHeader = document.getElementById('storykeepHeader');
-  const toolModeNav = document.getElementById('mainNav');
   const settingsControls = document.getElementById('settingsControls');
   const standardHeader = document.querySelector('header');
 
@@ -99,20 +84,6 @@ export function setupLayoutObservers(): void {
         storykeepHeader.style.top = '';
       }
     }
-
-    if (toolModeNav && window.innerWidth >= 801) {
-      if (shouldBeSticky) {
-        toolModeNav.classList.remove('md:static');
-        toolModeNav.classList.add('md:fixed');
-        toolModeNav.style.top = '60px';
-        toolModeNav.style.left = '0';
-      } else {
-        toolModeNav.classList.remove('md:fixed');
-        toolModeNav.classList.add('md:static');
-        toolModeNav.style.top = '';
-        toolModeNav.style.left = '';
-      }
-    }
   };
 
   const debouncedUpdate = debounce(() => {