astro-tractstack 2.0.0-rc.32 → 2.0.0-rc.34

package/dist/index.js

@@ -478,10 +478,6 @@ async function w(t, e, c) {
       src: t("../templates/src/components/edit/pane/PanePanel_path.tsx"),
       dest: "src/components/edit/pane/PanePanel_path.tsx"
     },
-    {
-      src: t("../templates/src/components/edit/pane/PanePanel_slug.tsx"),
-      dest: "src/components/edit/pane/PanePanel_slug.tsx"
-    },
     {
       src: t("../templates/src/components/edit/pane/PanePanel_title.tsx"),
       dest: "src/components/edit/pane/PanePanel_title.tsx"
@@ -1028,6 +1024,12 @@ async function w(t, e, c) {
       dest: "src/components/form/advanced/APIConfigSection.tsx"
     },
     // StoryKeep Dashboard Components
+    {
+      src: t(
+        "../templates/src/components/storykeep/StoryKeepBackdrop.astro"
+      ),
+      dest: "src/components/storykeep/StoryKeepBackdrop.astro"
+    },
     {
       src: t("../templates/src/components/storykeep/Dashboard.tsx"),
       dest: "src/components/storykeep/Dashboard.tsx"

package/package.json

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

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

@@ -9,10 +9,13 @@ import {
   isContextPaneNode,
   hasBeliefPayload,
 } from '@/utils/compositor/typeGuards';
-import { settingsPanelStore, viewportKeyStore } from '@/stores/storykeep';
+import {
+  settingsPanelStore,
+  viewportKeyStore,
+  fullContentMapStore,
+} from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
 import PaneTitlePanel from './PanePanel_title';
-import PaneSlugPanel from './PanePanel_slug';
 import PaneMagicPathPanel from './PanePanel_path';
 import PaneImpressionPanel from './PanePanel_impression';
 import { PaneConfigMode, type PaneNode } from '@/types/compositorTypes';
@@ -30,7 +33,7 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
   const reorderMode = toolMode.value === `move`;
   const isActiveMode =
     activePaneMode.panel === 'settings' && activePaneMode.paneId === nodeId;
-
+  const $contentMap = useStore(fullContentMapStore);
   const $viewportKey = useStore(viewportKeyStore);
   const isMobile = $viewportKey.value === `mobile`;
 
@@ -104,8 +107,6 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
 
   if (mode === PaneConfigMode.TITLE) {
     return <PaneTitlePanel nodeId={nodeId} setMode={setSaveMode} />;
-  } else if (mode === PaneConfigMode.SLUG) {
-    return <PaneSlugPanel nodeId={nodeId} setMode={setSaveMode} />;
   } else if (mode === PaneConfigMode.PATH) {
     return <PaneMagicPathPanel nodeId={nodeId} setMode={setSaveMode} />;
   } else if (mode === PaneConfigMode.IMPRESSION) {
@@ -137,28 +138,16 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
               <>
                 {!isTemplate && (
                   <>
-                    <button
-                      onClick={() => setSaveMode(PaneConfigMode.TITLE)}
-                      className={buttonClass}
-                    >
-                      Pane Title
-                      {!isMobile && (
-                        <>
-                          : <strong>{paneNode.title}</strong>
-                        </>
-                      )}
-                    </button>
-                    <button
-                      onClick={() => setSaveMode(PaneConfigMode.SLUG)}
-                      className={buttonClass}
-                    >
-                      Slug
-                      {!isMobile && (
-                        <>
-                          : <strong>{paneNode.slug}</strong>
-                        </>
-                      )}
-                    </button>
+                    {$contentMap.some(
+                      (item) => item.type === 'Pane' && item.id === nodeId
+                    ) && (
+                      <button
+                        onClick={() => setSaveMode(PaneConfigMode.TITLE)}
+                        className={buttonClass}
+                      >
+                        ID
+                      </button>
+                    )}
                     <button
                       onClick={() => setSaveMode(PaneConfigMode.IMPRESSION)}
                       className={buttonClass}

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

@@ -5,10 +5,12 @@ import {
   type SetStateAction,
   type ChangeEvent,
 } from 'react';
+import { useStore } from '@nanostores/react';
 import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import { fullContentMapStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
-import { cloneDeep } from '@/utils/helpers';
+import { cloneDeep, findUniqueSlug, titleToSlug } from '@/utils/helpers';
 import { PaneConfigMode, type PaneNode } from '@/types/compositorTypes';
 
 interface PaneTitlePanelProps {
@@ -18,36 +20,141 @@ interface PaneTitlePanelProps {
 
 const PaneTitlePanel = ({ nodeId, setMode }: PaneTitlePanelProps) => {
   const [title, setTitle] = useState('');
-  const [isValid, setIsValid] = useState(false);
-  const [warning, setWarning] = useState(false);
-  const [charCount, setCharCount] = useState(0);
+  const [slug, setSlug] = useState('');
+  const [isValidTitle, setIsValidTitle] = useState(false);
+  const [isValidSlug, setIsValidSlug] = useState(false);
+  const [warningTitle, setWarningTitle] = useState(false);
+  const [warningSlug, setWarningSlug] = useState(false);
+  const [titleCharCount, setTitleCharCount] = useState(0);
+  const [slugCharCount, setSlugCharCount] = useState(0);
+  const [slugValidationError, setSlugValidationError] = useState<string | null>(
+    null
+  );
+  const [canSaveSlug, setCanSaveSlug] = useState(false);
 
+  const $contentMap = useStore(fullContentMapStore);
   const ctx = getCtx();
   const allNodes = ctx.allNodes.get();
   const paneNode = allNodes.get(nodeId) as PaneNode;
   if (!paneNode) return null;
 
+  const existingSlugs = $contentMap
+    .filter(
+      (item) =>
+        ['Pane', 'StoryFragment'].includes(item.type) && item.id !== nodeId
+    )
+    .map((item) => item.slug);
+
   useEffect(() => {
     setTitle(paneNode.title);
-    setCharCount(paneNode.title.length);
-  }, [paneNode.title]);
+    setSlug(paneNode.slug);
+    setTitleCharCount(paneNode.title.length);
+    setSlugCharCount(paneNode.slug.length);
+    checkSlugLiveValidity(paneNode.slug);
+  }, [paneNode.title, paneNode.slug]);
 
   const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
     const newTitle = e.target.value;
     if (newTitle.length <= 50) {
-      // Prevent more than 70 chars
       setTitle(newTitle);
-      setCharCount(newTitle.length);
-      setIsValid(newTitle.length >= 5 && newTitle.length <= 35);
-      setWarning(newTitle.length > 35 && newTitle.length <= 50);
+      setTitleCharCount(newTitle.length);
+      setIsValidTitle(newTitle.length >= 5 && newTitle.length <= 35);
+      setWarningTitle(newTitle.length > 35 && newTitle.length <= 50);
+    }
+  };
+
+  const handleSlugChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newSlug = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
+
+    if (newSlug.length <= 50) {
+      setSlug(newSlug);
+      checkSlugLiveValidity(newSlug);
+    }
+  };
+
+  const checkSlugLiveValidity = (value: string) => {
+    const length = value.length;
+    setSlugCharCount(length);
+
+    // Basic format check for allowed characters
+    if (!/^[a-z0-9-]*$/.test(value)) {
+      setSlugValidationError(
+        'Only lowercase letters, numbers, and hyphens allowed'
+      );
+      setIsValidSlug(false);
+      setCanSaveSlug(false);
+      return false;
     }
+
+    // Length checks
+    setIsValidSlug(length >= 3 && length <= 40);
+    setWarningSlug(length > 40 && length <= 50);
+    setSlugValidationError(null);
+
+    // Check if we can save
+    if (length >= 3) {
+      const saveValidation = checkSlugSaveValidity(value);
+      setCanSaveSlug(saveValidation.isValid);
+      if (!saveValidation.isValid) {
+        setSlugValidationError(saveValidation.error || null);
+      }
+    } else {
+      setCanSaveSlug(false);
+    }
+
+    return true;
+  };
+
+  const checkSlugSaveValidity = (
+    value: string
+  ): { isValid: boolean; error?: string } => {
+    // Strict pattern that prevents leading/trailing hyphens and multiple consecutive hyphens
+    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value)) {
+      return {
+        isValid: false,
+        error:
+          'Slug must start and end with letters or numbers, and no consecutive hyphens',
+      };
+    }
+
+    // Check duplicates
+    if (existingSlugs.includes(value)) {
+      return {
+        isValid: false,
+        error: 'This slug is already in use',
+      };
+    }
+
+    return { isValid: true };
   };
 
   const handleTitleBlur = () => {
     if (title.length >= 5) {
-      // Only update if meets minimum length
+      // Auto-generate slug if slug is empty or still system-generated
+      let updatedSlug = slug;
+      if (!slug || slug === paneNode.slug) {
+        const generatedSlug = titleToSlug(title);
+        const uniqueSlug = findUniqueSlug(generatedSlug, existingSlugs);
+        updatedSlug = uniqueSlug;
+        setSlug(uniqueSlug);
+        checkSlugLiveValidity(uniqueSlug);
+      }
+
       const ctx = getCtx();
-      const updatedNode = { ...cloneDeep(paneNode), title, isChanged: true };
+      const updatedNode = {
+        ...cloneDeep(paneNode),
+        title,
+        slug: updatedSlug,
+        isChanged: true,
+      };
+      ctx.modifyNodes([updatedNode]);
+    }
+  };
+
+  const handleSlugBlur = () => {
+    if (canSaveSlug) {
+      const ctx = getCtx();
+      const updatedNode = { ...cloneDeep(paneNode), slug, isChanged: true };
       ctx.modifyNodes([updatedNode]);
     }
   };
@@ -56,7 +163,7 @@ const PaneTitlePanel = ({ nodeId, setMode }: PaneTitlePanelProps) => {
     <div className="group mb-4 w-full rounded-b-md bg-white px-1.5 py-6 shadow-inner">
       <div className="px-3.5">
         <div className="mb-4 flex justify-between">
-          <h3 className="text-lg font-bold">Pane Title</h3>
+          <h3 className="text-lg font-bold">Pane Title & Slug</h3>
           <button
             onClick={() => setMode(PaneConfigMode.DEFAULT)}
             className="text-myblue hover:text-black"
@@ -65,73 +172,133 @@ const PaneTitlePanel = ({ nodeId, setMode }: PaneTitlePanelProps) => {
           </button>
         </div>
 
-        <div className="relative">
-          <input
-            type="text"
-            value={title}
-            onChange={handleTitleChange}
-            onBlur={handleTitleBlur}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.currentTarget.blur();
-              }
-            }}
-            className={`w-full rounded-md border px-2 py-1 pr-16 ${
-              charCount < 5
-                ? 'border-red-500 bg-red-50'
-                : isValid
-                  ? 'border-green-500 bg-green-50'
-                  : warning
-                    ? 'border-yellow-500 bg-yellow-50'
-                    : 'border-gray-300'
-            }`}
-            placeholder="Enter story fragment title (50-60 characters recommended)"
-          />
-          <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-2">
-            {charCount < 5 ? (
-              <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />
-            ) : isValid ? (
-              <CheckIcon className="h-5 w-5 text-green-500" />
-            ) : warning ? (
-              <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
-            ) : null}
-            <span
-              className={`text-sm ${
-                charCount < 5
-                  ? 'text-red-500'
-                  : isValid
-                    ? 'text-green-500'
-                    : warning
-                      ? 'text-yellow-500'
-                      : 'text-gray-500'
+        {/* Title Input */}
+        <div className="mb-6">
+          <label className="mb-2 block text-sm font-bold text-gray-700">
+            Title
+          </label>
+          <div className="relative">
+            <input
+              type="text"
+              value={title}
+              onChange={handleTitleChange}
+              onBlur={handleTitleBlur}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.currentTarget.blur();
+                }
+              }}
+              className={`w-full rounded-md border px-2 py-1 pr-16 ${
+                titleCharCount < 5
+                  ? 'border-red-500 bg-red-50'
+                  : isValidTitle
+                    ? 'border-green-500 bg-green-50'
+                    : warningTitle
+                      ? 'border-yellow-500 bg-yellow-50'
+                      : 'border-gray-300'
               }`}
-            >
-              {charCount}/50
-            </span>
+              placeholder="Enter pane title (5-35 characters recommended)"
+            />
+            <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-2">
+              {titleCharCount < 5 ? (
+                <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />
+              ) : isValidTitle ? (
+                <CheckIcon className="h-5 w-5 text-green-500" />
+              ) : warningTitle ? (
+                <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
+              ) : null}
+              <span
+                className={`text-sm ${
+                  titleCharCount < 5
+                    ? 'text-red-500'
+                    : isValidTitle
+                      ? 'text-green-500'
+                      : warningTitle
+                        ? 'text-yellow-500'
+                        : 'text-gray-500'
+                }`}
+              >
+                {titleCharCount}/50
+              </span>
+            </div>
           </div>
         </div>
-        <div className="mt-4 space-y-4 text-lg">
-          <div className="text-gray-600">
-            Write a clear, descriptive title for this piece of content. This is
-            used for your own internal analytics.
-          </div>
-          <div className="py-4">
-            {charCount < 5 && (
-              <span className="text-red-500">
-                Title must be at least 5 characters
-              </span>
-            )}
-            {charCount >= 5 && charCount < 10 && (
-              <span className="text-gray-500">
-                Add {10 - charCount} more characters for optimal length
+
+        {/* Slug Input */}
+        <div className="mb-4">
+          <label className="mb-2 block text-sm font-bold text-gray-700">
+            Slug (URL)
+          </label>
+          <div className="relative">
+            <input
+              type="text"
+              value={slug}
+              onChange={handleSlugChange}
+              onBlur={handleSlugBlur}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.currentTarget.blur();
+                }
+              }}
+              className={`w-full rounded-md border px-2 py-1 pr-16 ${
+                slugValidationError || slugCharCount < 3
+                  ? 'border-red-500 bg-red-50'
+                  : isValidSlug && canSaveSlug
+                    ? 'border-green-500 bg-green-50'
+                    : warningSlug
+                      ? 'border-yellow-500 bg-yellow-50'
+                      : 'border-gray-300'
+              }`}
+              placeholder="Enter pane slug (3-40 characters recommended)"
+            />
+            <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-2">
+              {slugValidationError || slugCharCount < 3 ? (
+                <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />
+              ) : isValidSlug && canSaveSlug ? (
+                <CheckIcon className="h-5 w-5 text-green-500" />
+              ) : warningSlug ? (
+                <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
+              ) : null}
+              <span
+                className={`text-sm ${
+                  slugValidationError || slugCharCount < 3
+                    ? 'text-red-500'
+                    : isValidSlug && canSaveSlug
+                      ? 'text-green-500'
+                      : warningSlug
+                        ? 'text-yellow-500'
+                        : 'text-gray-500'
+                }`}
+              >
+                {slugCharCount}/50
               </span>
-            )}
-            {warning && (
-              <span className="text-yellow-500">Title is getting long</span>
-            )}
-            {isValid && (
-              <span className="text-green-500">Perfect title length!</span>
-            )}
+            </div>
+          </div>
+          {slugValidationError && (
+            <div className="mt-2 text-sm text-red-600">
+              <ExclamationTriangleIcon className="mr-1 inline h-4 w-4" />
+              {slugValidationError}
+            </div>
+          )}
+        </div>
+
+        {/* Help Text */}
+        <div className="space-y-4 text-sm text-gray-600">
+          <div>
+            <h4 className="font-semibold">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>
+            <ul className="ml-4 mt-1 list-disc">
+              <li>Used for analytics tracking</li>
+              <li>Only lowercase letters, numbers, and hyphens</li>
+              <li>Must start and end with letter or number</li>
+              <li>No consecutive hyphens</li>
+            </ul>
           </div>
         </div>
       </div>

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

@@ -73,7 +73,6 @@ export default function SaveModal({
   const isSaving = useRef(false);
   const [isNavigating, setIsNavigating] = useState(false);
   const isCreateMode = slug === 'create';
-  const contentMap = fullContentMapStore.get();
   const pendingHomePageSlug = pendingHomePageSlugStore.get();
   const goBackend =
     import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
@@ -334,113 +333,108 @@ export default function SaveModal({
             currentStep: 0,
             totalSteps: dirtyPanes.length,
           });
-          for (let i = 0; i < dirtyPanes.length; i++) {
-            const paneNode = dirtyPanes[i];
 
-            try {
-              const payload = transformLivePaneForSave(
-                ctx,
-                paneNode.id,
-                isContext
-              );
-
-              payload.optionsPayload.nodes.forEach((transformedNode) => {
-                const liveNode = ctx.allNodes.get().get(transformedNode.id);
-                if (!liveNode) return;
-
-                let needsUpdate = false;
-                let updatedNode: BaseNode = { ...liveNode };
-
-                if (
-                  transformedNode.nodeType === 'TagElement' &&
-                  transformedNode.elementCss
-                ) {
-                  const flatNode = liveNode as FlatNode;
-                  if (flatNode.elementCss !== transformedNode.elementCss) {
-                    (updatedNode as FlatNode).elementCss =
-                      transformedNode.elementCss;
-                    needsUpdate = true;
-                  }
-                }
+          const bulkPayload = dirtyPanes.map((paneNode) =>
+            transformLivePaneForSave(ctx, paneNode.id, isContext)
+          );
 
-                if (
-                  transformedNode.nodeType === 'Markdown' &&
-                  transformedNode.parentCss
-                ) {
-                  const markdownNode = liveNode as MarkdownPaneFragmentNode;
-                  const currentParentCss = markdownNode.parentCss;
-                  const newParentCss = transformedNode.parentCss as string[];
-
-                  const isDifferent =
-                    !currentParentCss ||
-                    currentParentCss.length !== newParentCss.length ||
-                    currentParentCss.some(
-                      (css, index) => css !== newParentCss[index]
-                    );
-
-                  if (isDifferent) {
-                    (updatedNode as MarkdownPaneFragmentNode).parentCss =
-                      newParentCss;
-                    needsUpdate = true;
-                  }
+          bulkPayload.forEach((payload) => {
+            payload.optionsPayload.nodes.forEach((transformedNode) => {
+              const liveNode = ctx.allNodes.get().get(transformedNode.id);
+              if (!liveNode) return;
+
+              let needsUpdate = false;
+              let updatedNode: BaseNode = { ...liveNode };
+
+              if (
+                transformedNode.nodeType === 'TagElement' &&
+                transformedNode.elementCss
+              ) {
+                const flatNode = liveNode as FlatNode;
+                if (flatNode.elementCss !== transformedNode.elementCss) {
+                  (updatedNode as FlatNode).elementCss =
+                    transformedNode.elementCss;
+                  needsUpdate = true;
                 }
+              }
 
-                if (needsUpdate) {
-                  ctx.allNodes.get().set(transformedNode.id, updatedNode);
+              if (
+                transformedNode.nodeType === 'Markdown' &&
+                transformedNode.parentCss
+              ) {
+                const markdownNode = liveNode as MarkdownPaneFragmentNode;
+                const currentParentCss = markdownNode.parentCss;
+                const newParentCss = transformedNode.parentCss as string[];
+
+                const isDifferent =
+                  !currentParentCss ||
+                  currentParentCss.length !== newParentCss.length ||
+                  currentParentCss.some(
+                    (css, index) => css !== newParentCss[index]
+                  );
+
+                if (isDifferent) {
+                  (updatedNode as MarkdownPaneFragmentNode).parentCss =
+                    newParentCss;
+                  needsUpdate = true;
                 }
-              });
-
-              const paneExistsInBackend = contentMap.some(
-                (item) => item.type === 'Pane' && item.id === paneNode.id
-              );
-              const isCreatePaneMode = !paneExistsInBackend;
-              const endpoint = isCreatePaneMode
-                ? `${goBackend}/api/v1/nodes/panes/create`
-                : `${goBackend}/api/v1/nodes/panes/${payload.id}`;
-              const method = isCreatePaneMode ? 'POST' : 'PUT';
+              }
 
-              addDebugMessage(
-                `Processing pane ${i + 1}/${
-                  dirtyPanes.length
-                }: ${paneNode.id} -> ${method} ${endpoint}`
-              );
+              if (needsUpdate) {
+                ctx.allNodes.get().set(transformedNode.id, updatedNode);
+              }
+            });
+          });
 
-              const response = await fetch(endpoint, {
-                method,
-                headers: {
-                  'Content-Type': 'application/json',
-                  'X-Tenant-ID': tenantId,
-                },
-                credentials: 'include',
-                body: JSON.stringify(payload),
-              });
+          const endpoint = `${goBackend}/api/v1/nodes/panes/bulk`;
+          addDebugMessage(
+            `Processing ${dirtyPanes.length} panes via -> POST ${endpoint}`
+          );
 
-              if (!response.ok) {
-                throw new Error(`HTTP error! status: ${response.status}`);
-              }
+          try {
+            const response = await fetch(endpoint, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/json',
+                'X-Tenant-ID': tenantId,
+              },
+              credentials: 'include',
+              body: JSON.stringify({ panes: bulkPayload }),
+            });
 
-              await response.json();
-              addDebugMessage(`Pane ${paneNode.id} saved successfully`);
-            } catch (etlError) {
-              const errorMsg =
-                etlError instanceof Error ? etlError.message : 'Unknown error';
-              addDebugMessage(`Pane ${paneNode.id} ETL failed: ${errorMsg}`);
+            if (!response.ok) {
+              const errorText = await response.text();
               throw new Error(
-                `Failed to save pane ${paneNode.id}: ${errorMsg}`
+                `HTTP error! status: ${response.status} - ${errorText}`
               );
             }
 
-            setStageProgress((prev) => ({ ...prev, currentStep: i + 1 }));
-            completedProcessingSteps++;
-            const processingProgress =
-              (completedProcessingSteps / totalProcessingSteps) *
-              PROGRESS_PHASES.PROCESSING;
-            setProgress(
-              PROGRESS_PHASES.PREPARATION +
-                PROGRESS_PHASES.UPLOADS +
-                processingProgress
+            await response.json();
+            addDebugMessage(
+              `${dirtyPanes.length} panes saved successfully via bulk endpoint.`
             );
+          } catch (bulkError) {
+            const errorMsg =
+              bulkError instanceof Error
+                ? bulkError.message
+                : 'Unknown bulk save error';
+            addDebugMessage(`Bulk pane save failed: ${errorMsg}`);
+            throw new Error(`Failed to save panes in bulk: ${errorMsg}`);
           }
+
+          setStageProgress({
+            currentStep: dirtyPanes.length,
+            totalSteps: dirtyPanes.length,
+          });
+          completedProcessingSteps += dirtyPanes.length;
+          const processingProgress =
+            (completedProcessingSteps / totalProcessingSteps) *
+            PROGRESS_PHASES.PROCESSING;
+          setProgress(
+            PROGRESS_PHASES.PREPARATION +
+              PROGRESS_PHASES.UPLOADS +
+              processingProgress
+          );
         }
 
         if (!isContext && dirtyStoryFragments.length > 0) {

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

@@ -1,10 +1,12 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useMemo } from 'react';
 import { useStore } from '@nanostores/react';
+import { Select } from '@ark-ui/react/select';
+import { createListCollection } from '@ark-ui/react/collection';
 import BackgroundImage from './BackgroundImage';
 import ArtpackImage from './ArtpackImage';
 import ColorPickerCombo from './ColorPickerCombo';
 import { getCtx } from '@/stores/nodes';
-import { hasArtpacksStore } from '@/stores/storykeep';
+import { hasArtpacksStore, settingsPanelStore } from '@/stores/storykeep';
 import { cloneDeep } from '@/utils/helpers';
 import type { BrandConfig } from '@/types/tractstack';
 import type {
@@ -19,6 +21,36 @@ export interface BackgroundImageWrapperProps {
   config?: BrandConfig;
 }
 
+const CheckIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-5 w-5"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const ChevronDownIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="h-5 w-5"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
 const BackgroundImageWrapper = ({
   paneId,
   config,
@@ -27,11 +59,8 @@ const BackgroundImageWrapper = ({
   const allNodes = useStore(ctx.allNodes);
   const $artpacks = useStore(hasArtpacksStore);
   const hasArtpacks = $artpacks && Object.keys($artpacks).length > 0;
-
-  // State to force re-renders when child components need it
   const [, setUpdateCounter] = useState(0);
 
-  // Using useCallback to create a stable reference to the update function
   const onUpdate = useCallback(() => {
     setUpdateCounter((prev) => prev + 1);
   }, []);
@@ -89,8 +118,47 @@ const BackgroundImageWrapper = ({
   const position = bgNode?.position || 'background';
   const size = bgNode?.size || 'equal';
 
+  const positionOptions = [
+    { label: 'Background', value: 'background' },
+    { label: 'Left', value: 'left' },
+    { label: 'Right', value: 'right' },
+    { label: 'Left Bleed', value: 'leftBleed' },
+    { label: 'Right Bleed', value: 'rightBleed' },
+  ];
+
+  const collection = useMemo(
+    () =>
+      createListCollection({
+        items: positionOptions,
+        itemToValue: (item) => item.value,
+        itemToString: (item) => item.label,
+      }),
+    []
+  );
+
+  const selectItemStyles = `
+    .position-item[data-highlighted] {
+      background-color: #0891b2; /* bg-cyan-600 */
+      color: white;
+    }
+    .position-item[data-highlighted] .position-indicator {
+      color: white;
+    }
+    .position-item[data-state="checked"] .position-indicator {
+      display: flex;
+    }
+    .position-item .position-indicator {
+      display: none;
+    }
+    .position-item[data-state="checked"] {
+      font-weight: bold;
+    }
+  `;
+
   return (
     <div className="w-full space-y-6">
+      <style>{selectItemStyles}</style>
+
       <h3 className="text-sm font-bold text-gray-700">Background</h3>
 
       <ColorPickerCombo
@@ -115,39 +183,64 @@ const BackgroundImageWrapper = ({
       )}
       {bgNode && (
         <div className="w-full space-y-6">
-          {/* Position Toggle */}
           <div className="space-y-2">
-            <label className="block text-sm font-bold text-gray-700">
-              Position
-            </label>
-            <div className="flex flex-wrap space-x-4">
-              {(
-                [
-                  'background',
-                  'left',
-                  'right',
-                  'leftBleed',
-                  'rightBleed',
-                ] as const
-              ).map((pos) => (
-                <label key={pos} className="inline-flex items-center">
-                  <input
-                    type="radio"
-                    name="position"
-                    value={pos}
-                    checked={position === pos}
-                    onChange={() => handlePositionChange(pos)}
-                    className="text-myblue focus:ring-myblue h-4 w-4 border-gray-300"
+            <Select.Root
+              collection={collection}
+              positioning={{ sameWidth: true }}
+              value={[position]}
+              onValueChange={(details) => {
+                const currentSignal = settingsPanelStore.get();
+                if (currentSignal) {
+                  settingsPanelStore.set({
+                    ...currentSignal,
+                    editLock: Date.now(),
+                  });
+                }
+                handlePositionChange(
+                  details.value[0] as
+                    | 'background'
+                    | 'left'
+                    | 'right'
+                    | 'leftBleed'
+                    | 'rightBleed'
+                );
+              }}
+            >
+              <Select.Label className="block text-sm font-bold text-gray-700">
+                Position
+              </Select.Label>
+              <Select.Control>
+                <Select.Trigger className="focus:border-myblue focus:ring-myblue flex w-full items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1">
+                  <Select.ValueText
+                    className="capitalize"
+                    placeholder="Select a position"
                   />
-                  <span className="ml-2 text-sm capitalize text-gray-700">
-                    {pos}
-                  </span>
-                </label>
-              ))}
-            </div>
+                  <Select.Indicator>
+                    <ChevronDownIcon />
+                  </Select.Indicator>
+                </Select.Trigger>
+              </Select.Control>
+              <Select.Positioner>
+                <Select.Content className="z-10 mt-1 w-full rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <Select.ItemGroup>
+                    {collection.items.map((item) => (
+                      <Select.Item
+                        key={item.value}
+                        item={item}
+                        className="position-item relative cursor-pointer select-none py-2 pl-10 pr-4 text-sm text-gray-900"
+                      >
+                        <Select.ItemText>{item.label}</Select.ItemText>
+                        <Select.ItemIndicator className="position-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                          <CheckIcon />
+                        </Select.ItemIndicator>
+                      </Select.Item>
+                    ))}
+                  </Select.ItemGroup>
+                </Select.Content>
+              </Select.Positioner>
+            </Select.Root>
           </div>
 
-          {/* Size Toggle - Only show when position is left or right */}
           {position !== 'background' && (
             <div className="space-y-2">
               <label className="block text-sm font-bold text-gray-700">
@@ -177,7 +270,6 @@ const BackgroundImageWrapper = ({
             </div>
           )}
 
-          {/* Render the appropriate image component */}
           {isArtpackImageNode(bgNode) ? (
             <ArtpackImage paneId={paneId} onUpdate={onUpdate} />
           ) : (

package/templates/src/components/form/ActionBuilderField.tsx

@@ -202,7 +202,9 @@ export default function ActionBuilderField({
                 onChange={(e) => {
                   const newValue = e.target.value;
                   setParam1(newValue);
-                  updateValue(selectedTarget, '', newValue);
+                }}
+                onBlur={(e) => {
+                  updateValue(selectedTarget, '', e.target.value);
                 }}
                 placeholder="https://..."
                 className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-700 focus:ring-cyan-700"

package/templates/src/components/storykeep/StoryKeepBackdrop.astro

@@ -0,0 +1,86 @@
+---
+let MODE = 'logo'; // 'wordmark' | 'logo'
+
+interface Props {
+  brandConfig: {
+    LOGO?: string;
+    WORDMARK?: string;
+  };
+}
+
+const { brandConfig } = Astro.props;
+
+const getAssetPath = (
+  configPath: string | undefined,
+  fallback: string
+): string => {
+  if (configPath && configPath !== '') {
+    return configPath;
+  }
+  return fallback;
+};
+
+let assetUrl;
+if (MODE === `wordmark`)
+  assetUrl = getAssetPath(brandConfig?.WORDMARK, '/brand/wordmark.svg');
+else assetUrl = getAssetPath(brandConfig?.LOGO, '/brand/logo.svg');
+
+// Generate positions programmatically for triple density
+const generatePositions = () => {
+  const positions = [];
+  const rows = 15; // More rows to extend beyond boundaries
+  const cols = 12; // More cols to extend beyond boundaries
+
+  for (let row = 0; row < rows; row++) {
+    for (let col = 0; col < cols; col++) {
+      // Skip some positions for natural spacing
+      if ((row + col) % 3 !== 0) continue;
+
+      // Allow logos to extend beyond container edges (no margins)
+      const top = (row / (rows - 1)) * 120 - 10; // Extend 10% beyond top/bottom
+      const left = (col / (cols - 1)) * 120 - 10; // Extend 10% beyond left/right
+      const rotation = -45 + Math.random() * 90;
+
+      positions.push({
+        top: `${top}%`,
+        left: `${left}%`,
+        rotation: `${rotation}deg`,
+      });
+    }
+  }
+
+  return positions;
+};
+
+const logoPositions = generatePositions();
+---
+
+{
+  assetUrl && (
+    <div
+      class="pointer-events-none absolute overflow-hidden rounded-2xl p-1.5 md:p-3.5"
+      style={{
+        top: '2rem',
+        left: '64rem',
+        right: '0',
+        bottom: '3.5rem',
+        opacity: '0.85',
+        //filter: 'grayscale(1)',
+      }}
+    >
+      {logoPositions.map((position) => (
+        <img
+          src={assetUrl}
+          style={{
+            position: 'absolute',
+            top: position.top,
+            left: position.left,
+            width: '120px',
+            height: 'auto',
+            transform: `rotate(${position.rotation})`,
+          }}
+        />
+      ))}
+    </div>
+  )
+}

package/templates/src/pages/storykeep/advanced.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import StoryKeepDashboard from '@/components/storykeep/Dashboard';
 import StoryKeepDashboard_Advanced from '@/components/storykeep/Dashboard_Advanced';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
@@ -53,6 +54,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
     <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"

package/templates/src/pages/storykeep/branding.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import BrandingPageWrapper from '@/components/storykeep/state/BrandingWrapper';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
 import { getFullContentMap } from '@/stores/analytics';
@@ -42,6 +43,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
     <div class="max-w-5xl p-3.5 md:p-8">
       <BrandingPageWrapper
         client:only="react"

package/templates/src/pages/storykeep/content.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import StoryKeepDashboard from '@/components/storykeep/Dashboard';
 import StoryKeepDashboard_Content from '@/components/storykeep/Dashboard_Content';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
@@ -49,6 +50,7 @@ try {
 
 <Layout title={title} slug="storykeep" isStoryKeep={true}>
   <main id="main-content" class="min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
     <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"

package/templates/src/pages/storykeep.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '@/layouts/Layout.astro';
+import StoryKeepBackdrop from '@/components/storykeep/StoryKeepBackdrop.astro';
 import StoryKeepDashboard from '@/components/storykeep/Dashboard';
 import StoryKeepDashboard_Analytics from '@/components/storykeep/Dashboard_Analytics';
 import { requireAdminOrEditor, isAuthenticated, isAdmin } from '@/utils/auth';
@@ -50,7 +51,8 @@ try {
 ---
 
 <Layout title={title} isStoryKeep={true} slug="storykeep">
-  <main id="main-content" class="min-h-screen w-full">
+  <main id="main-content" class="relative min-h-screen w-full">
+    <StoryKeepBackdrop brandConfig={brandConfig} />
     <div class="max-w-5xl p-3.5 md:p-8">
       <StoryKeepDashboard
         client:only="react"

package/templates/src/stores/nodes.ts

@@ -340,6 +340,18 @@ export class NodesContext {
         handleClickEventDefault(node, dblClick, this.clickedParentLayer.get());
         break;
       case `text`:
+        if (
+          node.nodeType === 'TagElement' &&
+          'tagName' in node &&
+          (node.tagName === 'a' || node.tagName === 'button')
+        ) {
+          this.toolModeValStore.set({ value: 'styles' });
+          handleClickEventDefault(
+            node,
+            dblClick,
+            this.clickedParentLayer.get()
+          );
+        }
         if (dblClick && ![`Markdown`].includes(node.nodeType)) {
           this.toolModeValStore.set({ value: 'styles' });
           handleClickEventDefault(

package/utils/inject-files.ts

@@ -479,10 +479,6 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/components/edit/pane/PanePanel_path.tsx'),
       dest: 'src/components/edit/pane/PanePanel_path.tsx',
     },
-    {
-      src: resolve('../templates/src/components/edit/pane/PanePanel_slug.tsx'),
-      dest: 'src/components/edit/pane/PanePanel_slug.tsx',
-    },
     {
       src: resolve('../templates/src/components/edit/pane/PanePanel_title.tsx'),
       dest: 'src/components/edit/pane/PanePanel_title.tsx',
@@ -1046,6 +1042,12 @@ export async function injectTemplateFiles(
     },
 
     // StoryKeep Dashboard Components
+    {
+      src: resolve(
+        '../templates/src/components/storykeep/StoryKeepBackdrop.astro'
+      ),
+      dest: 'src/components/storykeep/StoryKeepBackdrop.astro',
+    },
     {
       src: resolve('../templates/src/components/storykeep/Dashboard.tsx'),
       dest: 'src/components/storykeep/Dashboard.tsx',

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

@@ -1,219 +0,0 @@
-import { useState, useEffect, type Dispatch, type SetStateAction } from 'react';
-import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
-import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
-import { getCtx } from '@/stores/nodes';
-import { cloneDeep } from '@/utils/helpers';
-import { PaneConfigMode, type PaneNode } from '@/types/compositorTypes';
-
-interface PaneSlugPanelProps {
-  nodeId: string;
-  setMode: Dispatch<SetStateAction<PaneConfigMode>>;
-}
-
-const PaneSlugPanel = ({ nodeId, setMode }: PaneSlugPanelProps) => {
-  const [slug, setSlug] = useState('');
-  const [isValid, setIsValid] = useState(false);
-  const [warning, setWarning] = useState(false);
-  const [charCount, setCharCount] = useState(0);
-  const [validationError, setValidationError] = useState<string | null>(null);
-  const [canSave, setCanSave] = useState(false);
-
-  const ctx = getCtx();
-  const allNodes = ctx.allNodes.get();
-  const paneNode = allNodes.get(nodeId) as PaneNode;
-  if (!paneNode) return null;
-
-  useEffect(() => {
-    setSlug(paneNode.slug);
-    setCharCount(paneNode.slug.length);
-    checkLiveValidity(paneNode.slug);
-  }, [paneNode.slug]);
-
-  // More permissive validation for typing
-  const checkLiveValidity = (value: string) => {
-    const length = value.length;
-    setCharCount(length);
-
-    // Basic format check for allowed characters
-    if (!/^[a-z0-9-]*$/.test(value)) {
-      setValidationError(
-        'Only lowercase letters, numbers, and hyphens allowed'
-      );
-      setIsValid(false);
-      setCanSave(false);
-      return false;
-    }
-
-    // Length checks
-    setIsValid(length >= 3 && length <= 40);
-    setWarning(length > 40 && length <= 50);
-    setValidationError(null);
-
-    // Check if we can save
-    if (length >= 3) {
-      const saveValidation = checkSaveValidity(value);
-      setCanSave(saveValidation.isValid);
-      if (!saveValidation.isValid) {
-        setValidationError(saveValidation.error || null);
-      }
-    } else {
-      setCanSave(false);
-    }
-
-    return true;
-  };
-
-  // Strict validation for saving
-  const checkSaveValidity = (
-    value: string
-  ): { isValid: boolean; error?: string } => {
-    // Strict pattern that prevents leading/trailing hyphens and multiple consecutive hyphens
-    if (!/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(value)) {
-      return {
-        isValid: false,
-        error:
-          'Slug must start and end with letters or numbers, and no consecutive hyphens',
-      };
-    }
-
-    // Check duplicates and reserved slugs
-    return ctx.isSlugValid(value, nodeId);
-  };
-
-  const handleSlugChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newSlug = e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
-
-    if (newSlug.length <= 50) {
-      setSlug(newSlug);
-      checkLiveValidity(newSlug);
-    }
-  };
-
-  const handleSlugBlur = () => {
-    if (canSave) {
-      const ctx = getCtx();
-      const updatedNode = { ...cloneDeep(paneNode), slug, isChanged: true };
-      ctx.modifyNodes([updatedNode]);
-    }
-  };
-
-  return (
-    <div className="group mb-4 w-full rounded-b-md bg-white px-1.5 py-6 shadow-inner">
-      <div className="px-3.5">
-        <div className="mb-4 flex justify-between">
-          <h3 className="text-lg font-bold">Pane Slug</h3>
-          <button
-            onClick={() => setMode(PaneConfigMode.DEFAULT)}
-            className="text-myblue hover:text-black"
-          >
-            ← Go Back
-          </button>
-        </div>
-
-        <div className="relative">
-          <input
-            type="text"
-            value={slug}
-            onChange={handleSlugChange}
-            onBlur={handleSlugBlur}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                e.currentTarget.blur();
-              }
-            }}
-            className={`w-full rounded-md border px-2 py-1 pr-16 ${
-              validationError || charCount < 3
-                ? 'border-red-500 bg-red-50'
-                : isValid && canSave
-                  ? 'border-green-500 bg-green-50'
-                  : warning
-                    ? 'border-yellow-500 bg-yellow-50'
-                    : 'border-gray-300'
-            }`}
-            placeholder="Enter pane slug (3-40 characters recommended)"
-          />
-          <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-2">
-            {validationError || charCount < 3 ? (
-              <ExclamationTriangleIcon className="h-5 w-5 text-red-500" />
-            ) : isValid && canSave ? (
-              <CheckIcon className="h-5 w-5 text-green-500" />
-            ) : warning ? (
-              <ExclamationTriangleIcon className="h-5 w-5 text-yellow-500" />
-            ) : null}
-            <span
-              className={`text-sm ${
-                validationError || charCount < 3
-                  ? 'text-red-500'
-                  : isValid && canSave
-                    ? 'text-green-500'
-                    : warning
-                      ? 'text-yellow-500'
-                      : 'text-gray-500'
-              }`}
-            >
-              {charCount}/50
-            </span>
-          </div>
-        </div>
-        {validationError && (
-          <div className="mt-2 text-sm text-red-600">
-            <ExclamationTriangleIcon className="mr-1 inline h-4 w-4" />
-            {validationError}
-          </div>
-        )}
-        <div className="mt-4 space-y-4 text-lg">
-          <div className="text-gray-600">
-            This is solely used for analytics!
-            <ul className="ml-4 mt-1">
-              <li>
-                <CheckIcon className="inline h-4 w-4" /> Keep it concise and
-                descriptive
-              </li>
-              <li>
-                <CheckIcon className="inline h-4 w-4" /> Use lowercase letters
-                and numbers
-              </li>
-              <li>
-                <CheckIcon className="inline h-4 w-4" /> Use hyphens between
-                words
-              </li>
-              <li>
-                <CheckIcon className="inline h-4 w-4" /> Must start and end with
-                a letter or number
-              </li>
-            </ul>
-          </div>
-          <div className="py-4">
-            {charCount < 3 && (
-              <span className="text-red-500">
-                Slug must be at least 3 characters
-              </span>
-            )}
-            {charCount >= 3 && charCount < 5 && !validationError && (
-              <span className="text-gray-500">
-                Consider adding more characters for better description
-              </span>
-            )}
-            {warning && !validationError && (
-              <span className="text-yellow-500">
-                Slug is getting long - consider shortening it
-              </span>
-            )}
-            {isValid && canSave && charCount >= 5 && !validationError && (
-              <span className="text-green-500">
-                Good slug length and format!
-              </span>
-            )}
-            {isValid && !canSave && !validationError && (
-              <span className="text-gray-500">
-                Valid characters but needs proper formatting to save
-              </span>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default PaneSlugPanel;