astro-tractstack 2.0.0-rc.33 → 2.0.0-rc.35

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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.0-rc.33",
+  "version": "2.0.0-rc.35",
   "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/storykeep/StoryKeepBackdrop.astro

@@ -58,14 +58,15 @@ const logoPositions = generatePositions();
 {
   assetUrl && (
     <div
-      class="pointer-events-none absolute overflow-hidden rounded-2xl p-1.5 md:p-3.5"
+      class="pointer-events-none absolute mr-6 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)',
+        'mix-blend-mode': 'multiply',
+        opacity: '0.07',
+        border: '2px dashed rgba(0, 0, 0, 1)',
       }}
     >
       {logoPositions.map((position) => (

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',

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;