astro-tractstack 2.0.30 → 2.0.32

package/dist/index.js

@@ -10,7 +10,7 @@ function b(t) {
 }
 function g(t, e) {
   e.info("TractStack configuration applied"), t.enableMultiTenant && e.info("Multi-tenant mode enabled"), t.includeExamples && e.info("Example components will be included");
-  const c = process.env.PUBLIC_GO_BACKEND, r = process.env.PUBLIC_TENANTID;
+  const c = process.env.PUBLIC_GO_BACKEND, o = process.env.PUBLIC_TENANTID;
   if (!c)
     e.warn("PUBLIC_GO_BACKEND not set - this will be required at runtime");
   else
@@ -19,11 +19,11 @@ function g(t, e) {
     } catch {
       e.error(`PUBLIC_GO_BACKEND is not a valid URL: ${c}`);
     }
-  return r ? /^[a-zA-Z0-9_-]+$/.test(r) ? e.info(`Tenant ID validated: ${r}`) : e.error(`PUBLIC_TENANTID contains invalid characters: ${r}`) : e.warn("PUBLIC_TENANTID not set - this will be required at runtime"), t;
+  return o ? /^[a-zA-Z0-9_-]+$/.test(o) ? e.info(`Tenant ID validated: ${o}`) : e.error(`PUBLIC_TENANTID contains invalid characters: ${o}`) : e.warn("PUBLIC_TENANTID not set - this will be required at runtime"), t;
 }
 async function w(t, e, c) {
   e.info("TractStack: Injecting template files");
-  const r = [
+  const o = [
     // Core Configuration
     {
       src: t("../templates/env.example"),
@@ -2053,38 +2053,12 @@ async function w(t, e, c) {
       src: t("../templates/socials/youtube.svg"),
       dest: "public/socials/youtube.svg"
     },
-    // Multi-Tenant Features
-    {
-      src: t("../templates/src/components/tenant/RegistrationForm.tsx"),
-      dest: "src/components/tenant/RegistrationForm.tsx"
-    },
-    {
-      src: t("../templates/src/utils/api/tenantConfig.ts"),
-      dest: "src/utils/api/tenantConfig.ts"
-    },
-    {
-      src: t("../templates/src/utils/api/tenantHelpers.ts"),
-      dest: "src/utils/api/tenantHelpers.ts"
-    },
     // Multi-Tenant Features (Conditional)
     ...c?.enableMultiTenant ? [
       // Middleware
       {
         src: t("../templates/src/middleware.ts"),
         dest: "src/middleware.ts"
-      },
-      // Pages
-      {
-        src: t("../templates/src/pages/sandbox/register.astro"),
-        dest: "src/pages/sandbox/register.astro"
-      },
-      {
-        src: t("../templates/src/pages/sandbox/activate.astro"),
-        dest: "src/pages/sandbox/activate.astro"
-      },
-      {
-        src: t("../templates/src/pages/sandbox/success.astro"),
-        dest: "src/pages/sandbox/success.astro"
       }
     ] : [],
     // Multi-Tenant Types (Always included due to plan reference)
@@ -2164,12 +2138,12 @@ async function w(t, e, c) {
       }
     ] : []
   ];
-  for (const s of r)
+  for (const s of o)
     try {
       const p = i(s.dest);
       n(p) || x(p, { recursive: !0 });
-      const o = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
-      if (!n(s.dest) || o)
+      const r = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
+      if (!n(s.dest) || r)
         if (n(s.src))
           k(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
@@ -2178,8 +2152,8 @@ async function w(t, e, c) {
         }
       else s.protected ? e.info(`Protected: ${s.dest} (skipped overwrite)`) : e.info(`Skipped existing ${s.dest}`);
     } catch (p) {
-      const o = p instanceof Error ? p.message : String(p);
-      e.error(`Failed to create ${s.dest}: ${o}`);
+      const r = p instanceof Error ? p.message : String(p);
+      e.error(`Failed to create ${s.dest}: ${r}`);
     }
 }
 function _(t) {
@@ -2198,7 +2172,7 @@ function C(t = {}) {
   return {
     name: "astro-tractstack",
     hooks: {
-      "astro:config:setup": async ({ config: c, updateConfig: r, logger: s }) => {
+      "astro:config:setup": async ({ config: c, updateConfig: o, logger: s }) => {
         g(t, s);
         const p = t.enableMultiTenant || !1;
         if (s.info(
@@ -2218,7 +2192,7 @@ function C(t = {}) {
           ), new Error(
             "TractStack requires an SSR adapter. Please add @astrojs/node adapter to your astro.config.mjs"
           );
-        r({
+        o({
           vite: {
             define: {
               __TRACTSTACK_VERSION__: JSON.stringify("2.0.0-alpha.1"),

package/package.json

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

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

@@ -16,6 +16,8 @@ import {
   hasArtpacksStore,
   settingsPanelStore,
   brandConfigStore,
+  viewportModeStore,
+  setViewportMode,
 } from '@/stores/storykeep';
 import { getCtx, ROOT_NODE_NAME, type NodesContext } from '@/stores/nodes';
 import { stopLoadingAnimation } from '@/utils/helpers';
@@ -284,6 +286,12 @@ export const Compositor = (props: CompositorProps) => {
     selectionOrigin.current = null;
   };
 
+  useEffect(() => {
+    if (viewportModeStore.get() === 'auto') {
+      setViewportMode('auto');
+    }
+  }, []);
+
   useEffect(() => {
     fullContentMapStore.set(props.fullContentMap);
     hasAssemblyAIStore.set(props.config?.HAS_AAI || false);

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

@@ -9,26 +9,53 @@ import { getCtx } from '@/stores/nodes';
 import { RenderChildren } from './RenderChildren';
 import { CodeHookContainer } from './Pane';
 import type { NodeProps } from '@/types/nodeProps';
+import type { BgImageNode, ArtpackImageNode } from '@/types/compositorTypes';
 import { SaveToLibraryModal } from '@/components/edit/state/SaveToLibraryModal';
 import { RestylePaneModal } from '@/components/edit/pane/RestylePaneModal';
 import { selectionStore } from '@/stores/selection';
 import { copyPaneToClipboard } from '@/utils/compositor/designLibraryHelper';
 
+function getSizeClasses(
+  size: string,
+  side: 'image' | 'content',
+  viewport: string
+): string {
+  if (viewport === 'mobile') {
+    return 'w-full';
+  }
+  switch (size) {
+    case 'narrow':
+      return side === 'image' ? 'w-1/3' : 'w-2/3';
+    case 'wide':
+      return side === 'image' ? 'w-2/3' : 'w-1/3';
+    default:
+      return 'w-1/2';
+  }
+}
+
 export const Pane_DesignLibrary = (props: NodeProps) => {
   const ctx = getCtx(props);
-
   const { isRestyleModalOpen } = useStore(selectionStore, {
     keys: ['isRestyleModalOpen'],
   });
-
-  const wrapperClasses = `grid ${ctx.getNodeClasses(
-    props.nodeId,
+  const [currentViewport, setCurrentViewport] = useState(
     viewportKeyStore.get().value
-  )}`;
+  );
+
+  useEffect(() => {
+    const unsubscribeViewport = viewportKeyStore.subscribe((newViewport) => {
+      setCurrentViewport(newViewport.value);
+    });
+    return () => unsubscribeViewport();
+  }, []);
+
+  const wrapperClasses = `grid ${ctx.getNodeClasses(props.nodeId, currentViewport)}`;
   const contentClasses = 'relative w-full h-auto justify-self-start';
   const contentStyles: CSSProperties = {
     ...ctx.getNodeCSSPropertiesStyles(props.nodeId),
     gridArea: '1/1/1/1',
+    position: 'relative',
+    zIndex: 1,
   };
   const codeHookPayload = ctx.getNodeCodeHookPayload(props.nodeId);
   const [children, setChildren] = useState<string[]>([
@@ -36,11 +63,14 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
   ]);
   const [isSaveModalOpen, setIsSaveModalOpen] = useState(false);
   const [wasCopied, setWasCopied] = useState(false);
+  const [renderCount, setRenderCount] = useState(0);
+
   const getPaneId = (): string => `pane-${props.nodeId}`;
 
   useEffect(() => {
     const unsubscribe = ctx.notifications.subscribe(props.nodeId, () => {
       setChildren([...ctx.getChildNodeIDs(props.nodeId)]);
+      setRenderCount((prev) => prev + 1);
     });
     return unsubscribe;
   }, [props.nodeId, ctx.notifications]);
@@ -65,54 +95,145 @@ export const Pane_DesignLibrary = (props: NodeProps) => {
     }
   };
 
+  const Buttons = () => (
+    <div className="absolute left-2 top-2 z-10 flex flex-row gap-x-2">
+      {!props.isSandboxMode && (
+        <button
+          title="Save Pane to Design Library"
+          onClick={handleSaveClick}
+          className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-600 p-1.5 shadow-lg hover:bg-cyan-700"
+        >
+          <ArchiveBoxArrowDownIcon className="h-7 w-7 text-white" />
+        </button>
+      )}
+      <button
+        title="Restyle Pane from Design Library"
+        onClick={handleRestyleClick}
+        className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 p-1.5 shadow-lg hover:bg-blue-700"
+      >
+        <ArrowPathRoundedSquareIcon className="h-7 w-7 text-white" />
+      </button>
+      <button
+        title="Copy Pane Design to Clipboard"
+        onClick={handleCopyToClipboard}
+        className={`flex h-10 w-10 items-center justify-center rounded-full p-1.5 shadow-lg transition-colors ${
+          wasCopied ? 'bg-green-500' : 'bg-gray-600 hover:bg-gray-700'
+        }`}
+      >
+        {wasCopied ? (
+          <CheckIcon className="h-7 w-7 text-white" />
+        ) : (
+          <ArrowDownTrayIcon className="h-7 w-7 text-white" />
+        )}
+      </button>
+    </div>
+  );
+
+  const allNodes = ctx.allNodes.get();
+  const bgNode = children
+    .map((id) => allNodes.get(id))
+    .find(
+      (node) =>
+        node?.nodeType === 'BgPane' &&
+        'type' in node &&
+        (node.type === 'background-image' || node.type === 'artpack-image')
+    ) as (BgImageNode | ArtpackImageNode) | undefined;
+
+  const useFlexLayout =
+    bgNode &&
+    (bgNode.position === 'leftBleed' || bgNode.position === 'rightBleed');
+  const deferFlexLayout =
+    bgNode && (bgNode.position === 'left' || bgNode.position === 'right');
+
+  const flexDirection =
+    currentViewport === 'mobile'
+      ? 'flex-col'
+      : bgNode?.position === 'rightBleed'
+        ? 'flex-row-reverse'
+        : 'flex-row';
+
   return (
     <div id={getPaneId()} className="pane min-h-16">
-      <div id={ctx.getNodeSlug(props.nodeId)} className={wrapperClasses}>
-        <div
-          className={contentClasses}
-          style={contentStyles}
-          onClick={(e) => {
-            ctx.setClickedNodeId(props.nodeId);
-            e.stopPropagation();
-          }}
-        >
-          <div className="absolute left-2 top-2 z-10 flex flex-row gap-x-2">
-            {!props.isSandboxMode && (
-              <button
-                title="Save Pane to Design Library"
-                onClick={handleSaveClick}
-                className="flex h-10 w-10 items-center justify-center rounded-full bg-cyan-600 p-1.5 shadow-lg hover:bg-cyan-700"
-              >
-                <ArchiveBoxArrowDownIcon className="h-7 w-7 text-white" />
-              </button>
-            )}
-            <button
-              title="Restyle Pane from Design Library"
-              onClick={handleRestyleClick}
-              className="flex h-10 w-10 items-center justify-center rounded-full bg-blue-600 p-1.5 shadow-lg hover:bg-blue-700"
+      <div
+        id={ctx.getNodeSlug(props.nodeId)}
+        className={useFlexLayout ? '' : wrapperClasses}
+      >
+        {codeHookPayload ? (
+          <div className={contentClasses} style={contentStyles}>
+            <Buttons />
+            <CodeHookContainer payload={codeHookPayload} />
+          </div>
+        ) : useFlexLayout ? (
+          <div
+            className={`flex flex-nowrap ${flexDirection} ${ctx.getNodeClasses(props.nodeId, currentViewport)}`}
+          >
+            <div
+              className={`relative overflow-hidden ${getSizeClasses(bgNode.size || 'equal', 'image', currentViewport)}`}
             >
-              <ArrowPathRoundedSquareIcon className="h-7 w-7 text-white" />
-            </button>
-            <button
-              title="Copy Pane Design to Clipboard"
-              onClick={handleCopyToClipboard}
-              className={`flex h-10 w-10 items-center justify-center rounded-full p-1.5 shadow-lg transition-colors ${
-                wasCopied ? 'bg-green-500' : 'bg-gray-600 hover:bg-gray-700'
-              }`}
+              <RenderChildren
+                children={children.filter((id) => {
+                  const node = allNodes.get(id);
+                  return node?.nodeType === 'BgPane';
+                })}
+                nodeProps={props}
+                key={`bg-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
+            <div
+              className={`${contentClasses} ${getSizeClasses(bgNode.size || 'equal', 'content', currentViewport)}`}
+              style={ctx.getNodeCSSPropertiesStyles(props.nodeId)}
+              onClick={(e) => {
+                ctx.setClickedNodeId(props.nodeId);
+                e.stopPropagation();
+              }}
             >
-              {wasCopied ? (
-                <CheckIcon className="h-7 w-7 text-white" />
-              ) : (
-                <ArrowDownTrayIcon className="h-7 w-7 text-white" />
-              )}
-            </button>
+              <Buttons />
+              <RenderChildren
+                children={children.filter((id) => {
+                  const node = allNodes.get(id);
+                  return node?.nodeType !== 'BgPane';
+                })}
+                nodeProps={props}
+                key={`content-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
           </div>
-          {codeHookPayload ? (
-            <CodeHookContainer payload={codeHookPayload} />
-          ) : (
-            <RenderChildren children={children} nodeProps={props} />
-          )}
-        </div>
+        ) : deferFlexLayout ? (
+          <div
+            className={contentClasses}
+            style={contentStyles}
+            onClick={(e) => {
+              ctx.setClickedNodeId(props.nodeId);
+              e.stopPropagation();
+            }}
+          >
+            <Buttons />
+            <RenderChildren
+              children={children.filter((id) => {
+                const node = allNodes.get(id);
+                return node?.nodeType !== 'BgPane';
+              })}
+              nodeProps={props}
+              key={`content-children-${props.nodeId}-${renderCount}`}
+            />
+          </div>
+        ) : (
+          <div
+            className={contentClasses}
+            style={contentStyles}
+            onClick={(e) => {
+              ctx.setClickedNodeId(props.nodeId);
+              e.stopPropagation();
+            }}
+          >
+            <Buttons />
+            <RenderChildren
+              children={children}
+              nodeProps={props}
+              key={`render-children-${props.nodeId}-${renderCount}`}
+            />
+          </div>
+        )}
       </div>
       {isSaveModalOpen && (
         <SaveToLibraryModal

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

@@ -5,64 +5,181 @@ import { getCtx } from '@/stores/nodes';
 import { RenderChildren } from './RenderChildren';
 import { CodeHookContainer } from './Pane';
 import type { NodeProps } from '@/types/nodeProps';
+import type { BgImageNode, ArtpackImageNode } from '@/types/compositorTypes';
+
+function getSizeClasses(
+  size: string,
+  side: 'image' | 'content',
+  viewport: string
+): string {
+  if (viewport === 'mobile') {
+    return 'w-full';
+  }
+  switch (size) {
+    case 'narrow':
+      return side === 'image' ? 'w-1/3' : 'w-2/3';
+    case 'wide':
+      return side === 'image' ? 'w-2/3' : 'w-1/3';
+    default:
+      return 'w-1/2';
+  }
+}
 
 export const PaneEraser = (props: NodeProps) => {
-  const wrapperClasses = `grid ${getCtx(props).getNodeClasses(props.nodeId, viewportKeyStore.get().value)}`;
+  const ctx = getCtx(props);
+  const [currentViewport, setCurrentViewport] = useState(
+    viewportKeyStore.get().value
+  );
+
+  useEffect(() => {
+    const unsubscribeViewport = viewportKeyStore.subscribe((newViewport) => {
+      setCurrentViewport(newViewport.value);
+    });
+    return () => unsubscribeViewport();
+  }, []);
+
+  const wrapperClasses = `grid ${ctx.getNodeClasses(props.nodeId, currentViewport)}`;
   const contentClasses = 'relative w-full h-auto justify-self-start';
   const contentStyles: CSSProperties = {
-    ...getCtx(props).getNodeCSSPropertiesStyles(props.nodeId),
+    ...ctx.getNodeCSSPropertiesStyles(props.nodeId),
     gridArea: '1/1/1/1',
+    position: 'relative',
+    zIndex: 1,
   };
-  const codeHookPayload = getCtx(props).getNodeCodeHookPayload(props.nodeId);
+  const codeHookPayload = ctx.getNodeCodeHookPayload(props.nodeId);
   const [children, setChildren] = useState<string[]>([
-    ...getCtx(props).getChildNodeIDs(props.nodeId),
+    ...ctx.getChildNodeIDs(props.nodeId),
   ]);
+  const [renderCount, setRenderCount] = useState(0);
 
   const getPaneId = (): string => `pane-${props.nodeId}`;
 
   useEffect(() => {
-    const unsubscribe = getCtx(props).notifications.subscribe(
-      props.nodeId,
-      () => {
-        console.log(
-          'notification received data update for pane node: ' + props.nodeId
-        );
-        setChildren([...getCtx(props).getChildNodeIDs(props.nodeId)]);
-      }
-    );
+    const unsubscribe = ctx.notifications.subscribe(props.nodeId, () => {
+      setChildren([...ctx.getChildNodeIDs(props.nodeId)]);
+      setRenderCount((prev) => prev + 1);
+    });
     return unsubscribe;
-  }, []);
+  }, [props.nodeId, ctx.notifications]);
+
+  const DeleteButton = () => (
+    <button
+      title="Delete Pane"
+      onClick={(e) => {
+        ctx.setClickedNodeId(props.nodeId);
+        e.stopPropagation();
+      }}
+      className="absolute right-2 top-2 z-10 rounded-full bg-red-700 p-1.5 hover:bg-black"
+    >
+      <TrashIcon className="h-10 w-10 text-white" />
+    </button>
+  );
+
+  const allNodes = ctx.allNodes.get();
+  const bgNode = children
+    .map((id) => allNodes.get(id))
+    .find(
+      (node) =>
+        node?.nodeType === 'BgPane' &&
+        'type' in node &&
+        (node.type === 'background-image' || node.type === 'artpack-image')
+    ) as (BgImageNode | ArtpackImageNode) | undefined;
+
+  const useFlexLayout =
+    bgNode &&
+    (bgNode.position === 'leftBleed' || bgNode.position === 'rightBleed');
+  const deferFlexLayout =
+    bgNode && (bgNode.position === 'left' || bgNode.position === 'right');
+
+  const flexDirection =
+    currentViewport === 'mobile'
+      ? 'flex-col'
+      : bgNode?.position === 'rightBleed'
+        ? 'flex-row-reverse'
+        : 'flex-row';
 
   return (
     <div id={getPaneId()} className="pane min-h-16">
       <div
-        id={getCtx(props).getNodeSlug(props.nodeId)}
-        className={wrapperClasses}
+        id={ctx.getNodeSlug(props.nodeId)}
+        className={useFlexLayout ? '' : wrapperClasses}
       >
-        <div
-          className={contentClasses}
-          style={contentStyles}
-          onClick={(e) => {
-            getCtx(props).setClickedNodeId(props.nodeId);
-            e.stopPropagation();
-          }}
-        >
-          <button
-            title="Delete Pane"
+        {codeHookPayload ? (
+          <div className={contentClasses} style={contentStyles}>
+            <DeleteButton />
+            <CodeHookContainer payload={codeHookPayload} />
+          </div>
+        ) : useFlexLayout ? (
+          <div
+            className={`flex flex-nowrap ${flexDirection} ${ctx.getNodeClasses(props.nodeId, currentViewport)}`}
+          >
+            <div
+              className={`relative overflow-hidden ${getSizeClasses(bgNode.size || 'equal', 'image', currentViewport)}`}
+            >
+              <RenderChildren
+                children={children.filter((id) => {
+                  const node = allNodes.get(id);
+                  return node?.nodeType === 'BgPane';
+                })}
+                nodeProps={props}
+                key={`bg-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
+            <div
+              className={`${contentClasses} ${getSizeClasses(bgNode.size || 'equal', 'content', currentViewport)}`}
+              style={ctx.getNodeCSSPropertiesStyles(props.nodeId)}
+              onClick={(e) => {
+                ctx.setClickedNodeId(props.nodeId);
+                e.stopPropagation();
+              }}
+            >
+              <DeleteButton />
+              <RenderChildren
+                children={children.filter((id) => {
+                  const node = allNodes.get(id);
+                  return node?.nodeType !== 'BgPane';
+                })}
+                nodeProps={props}
+                key={`content-children-${props.nodeId}-${renderCount}`}
+              />
+            </div>
+          </div>
+        ) : deferFlexLayout ? (
+          <div
+            className={contentClasses}
+            style={contentStyles}
             onClick={(e) => {
-              getCtx(props).setClickedNodeId(props.nodeId);
+              ctx.setClickedNodeId(props.nodeId);
               e.stopPropagation();
             }}
-            className="absolute right-2 top-2 z-10 rounded-full bg-red-700 p-1.5 hover:bg-black"
           >
-            <TrashIcon className="h-10 w-10 text-white" />
-          </button>
-          {codeHookPayload ? (
-            <CodeHookContainer payload={codeHookPayload} />
-          ) : (
-            <RenderChildren children={children} nodeProps={props} />
-          )}
-        </div>
+            <DeleteButton />
+            <RenderChildren
+              children={children.filter((id) => {
+                const node = allNodes.get(id);
+                return node?.nodeType !== 'BgPane';
+              })}
+              nodeProps={props}
+              key={`content-children-${props.nodeId}-${renderCount}`}
+            />
+          </div>
+        ) : (
+          <div
+            className={contentClasses}
+            style={contentStyles}
+            onClick={(e) => {
+              ctx.setClickedNodeId(props.nodeId);
+              e.stopPropagation();
+            }}
+          >
+            <DeleteButton />
+            <RenderChildren
+              children={children}
+              nodeProps={props}
+              key={`render-children-${props.nodeId}-${renderCount}`}
+            />
+          </div>
+        )}
       </div>
     </div>
   );

package/templates/src/stores/nodes.ts

@@ -35,6 +35,7 @@ import type {
   MenuNode,
   NodeType,
   PaneFragmentNode,
+  BgImageNode,
   PaneNode,
   StoryFragmentNode,
   Tag,
@@ -3264,6 +3265,15 @@ export class NodesContext {
           breakMobile: visualBreakPane.breakMobile,
         };
         allNodes.push(bgPaneNode);
+      } else if (paneTemplate.bgPane.type === 'background-image') {
+        const bgImagePane = paneTemplate.bgPane as BgImageNode;
+        const bgPaneNode: BgImageNode = {
+          ...bgImagePane,
+          id: bgPaneId,
+          nodeType: 'BgPane',
+          parentId: newPaneId,
+        };
+        allNodes.push(bgPaneNode);
       } else if (paneTemplate.bgPane.type === 'artpack-image') {
         const artpackBgPane = paneTemplate.bgPane as ArtpackImageNode;
         const bgPaneNode: ArtpackImageNode = {

package/templates/src/utils/auth.ts

@@ -78,7 +78,8 @@ export function getUserRole(astro: any): 'admin' | 'editor' | null {
  */
 export function requireAdmin(astro: any): Response | undefined {
   if (!isAdmin(astro)) {
-    return astro.redirect('/storykeep/login');
+    const target = encodeURIComponent(astro.url.pathname + astro.url.search);
+    return astro.redirect(`/storykeep/login?redirect=${target}`);
   }
 }
 
@@ -88,7 +89,8 @@ export function requireAdmin(astro: any): Response | undefined {
  */
 export function requireEditor(astro: any): Response | undefined {
   if (!isEditor(astro)) {
-    return astro.redirect('/storykeep/login');
+    const target = encodeURIComponent(astro.url.pathname + astro.url.search);
+    return astro.redirect(`/storykeep/login?redirect=${target}`);
   }
 }
 
@@ -98,7 +100,8 @@ export function requireEditor(astro: any): Response | undefined {
  */
 export function requireAdminOrEditor(astro: any): Response | undefined {
   if (!isAuthenticated(astro)) {
-    return astro.redirect('/storykeep/login');
+    const target = encodeURIComponent(astro.url.pathname + astro.url.search);
+    return astro.redirect(`/storykeep/login?redirect=${target}`);
   }
 }