astro-tractstack 2.1.3 → 2.2.1

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

@@ -123,7 +123,7 @@ export default function SandboxRegisterForm({
             value={firstname}
             onChange={(e) => setFirstname(e.target.value)}
             disabled={isLoading}
-            className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
             required
           />
         </div>
@@ -140,7 +140,7 @@ export default function SandboxRegisterForm({
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             disabled={isLoading}
-            className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
             required
           />
         </div>
@@ -157,7 +157,7 @@ export default function SandboxRegisterForm({
             value={codeword}
             onChange={(e) => setCodeword(e.target.value)}
             disabled={isLoading}
-            className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
             required
           />
         </div>

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

@@ -21,8 +21,8 @@ import {
   sandboxTokenStore,
 } from '@/stores/storykeep';
 import { getCtx, ROOT_NODE_NAME, type NodesContext } from '@/stores/nodes';
-import { stopLoadingAnimation } from '@/utils/helpers';
-import Node from './Node';
+import { resolveCollisions, stopLoadingAnimation } from '@/utils/helpers';
+import { Node } from './Node';
 import { ARTPACKS } from '@/constants/brandThemes';
 import {
   selectionStore,
@@ -288,6 +288,15 @@ export const Compositor = (props: CompositorProps) => {
     selectionOrigin.current = null;
   };
 
+  useEffect(() => {
+    window.addEventListener('resize', resolveCollisions);
+    return () => window.removeEventListener('resize', resolveCollisions);
+  }, []);
+
+  useEffect(() => {
+    resolveCollisions();
+  });
+
   useEffect(() => {
     if (viewportModeStore.get() === 'auto') {
       setViewportMode('auto');
@@ -352,10 +361,16 @@ export const Compositor = (props: CompositorProps) => {
       }
     );
 
+    const unsubscribeToolAddMode = getCtx(props).toolAddModeStore.subscribe(
+      (mode) => {
+        if (mode.value !== 'span') resetSelectionStore();
+      }
+    );
+
     const unsubscribeToolMode = getCtx(props).toolModeValStore.subscribe(
       (mode) => {
         if (VERBOSE) console.log(LOG_PREFIX + 'Tool mode changed:', mode.value);
-        if (mode.value !== 'styles') {
+        if (mode.value !== 'insert') {
           if (VERBOSE)
             console.log(
               LOG_PREFIX + 'Exited styles mode, resetting selection store.'
@@ -384,6 +399,7 @@ export const Compositor = (props: CompositorProps) => {
         console.log(LOG_PREFIX + 'Compositor unmounting, cleaning up...');
       unsubscribe();
       unsubscribeToolMode();
+      unsubscribeToolAddMode();
       stopLoadingAnimation();
       // Ensure listeners are removed on unmount
       window.removeEventListener('mousemove', handleDragMove);
@@ -417,6 +433,8 @@ export const Compositor = (props: CompositorProps) => {
           'span'
         );
         if (newSpanNodeId) {
+          ctx.toolModeValStore.set({ value: 'text' });
+          ctx.toolAddModeStore.set({ value: 'p' });
           settingsPanelStore.set({
             action: 'style-element',
             nodeId: newSpanNodeId,
@@ -480,12 +498,10 @@ export const Compositor = (props: CompositorProps) => {
     >
       {/* Loading indicator */}
       {isLoading && (
-        <div className="absolute inset-0 z-10 flex items-center justify-center">
-          <div className="flex items-center space-x-2 text-gray-600">
-            <div className="h-4 w-4 animate-spin rounded-full border-2 border-gray-300 border-t-gray-600"></div>
-            <span>{initialized ? 'Updating...' : 'Compositing page...'}</span>
-          </div>
-        </div>
+        <div
+          className="absolute inset-0 flex items-center justify-center"
+          style={{ zIndex: '1007' }}
+        ></div>
       )}
 
       {/* Selection drag box */}