astro-tractstack 2.0.0-rc.8 → 2.0.0

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-bold">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-bold">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/panels/StyleBreakPanel.tsx

@@ -155,25 +155,23 @@ const StyleBreakPanel = ({ node, parentNode, config }: BasePanelProps) => {
       </div>
 
       <div className="space-y-4">
-        <div className="grid grid-cols-2 gap-4">
-          <ColorPickerCombo
-            title="Shape Color"
-            defaultColor={settings.svgFill}
-            onColorChange={(color: string) =>
-              setSettings((prev) => ({ ...prev, svgFill: color }))
-            }
-            config={config!}
-          />
-          <ColorPickerCombo
-            title="Background Color"
-            defaultColor={settings.bgColor}
-            onColorChange={(color: string) =>
-              setSettings((prev) => ({ ...prev, bgColor: color }))
-            }
-            config={config!}
-            allowNull={true}
-          />
-        </div>
+        <ColorPickerCombo
+          title="Shape Color"
+          defaultColor={settings.svgFill}
+          onColorChange={(color: string) =>
+            setSettings((prev) => ({ ...prev, svgFill: color }))
+          }
+          config={config!}
+        />
+        <ColorPickerCombo
+          title="Background Color"
+          defaultColor={settings.bgColor}
+          onColorChange={(color: string) =>
+            setSettings((prev) => ({ ...prev, bgColor: color }))
+          }
+          config={config!}
+          allowNull={true}
+        />
       </div>
     </div>
   );

package/templates/src/components/edit/panels/StyleCodeHookPanel.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useMemo, useRef } from 'react';
-import { Combobox, Switch } from '@ark-ui/react';
+import { Combobox, Switch, Portal } from '@ark-ui/react';
 import { createListCollection } from '@ark-ui/react/collection';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
@@ -8,7 +8,7 @@ import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTria
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
-import { cloneDeep } from '@/utils/helpers';
+import { cloneDeep, useDropdownDirection } from '@/utils/helpers';
 import { isPaneNode } from '@/utils/compositor/typeGuards';
 import type { PaneNode, BasePanelProps } from '@/types/compositorTypes';
 
@@ -30,7 +30,8 @@ const StyleCodeHookPanel = ({
 
   const [localTarget, setLocalTarget] = useState(node.codeHookTarget || '');
   const [query, setQuery] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
+  const comboboxRef = useRef<HTMLDivElement>(null);
+  const { openAbove } = useDropdownDirection(comboboxRef);
 
   // Parse the nested options from JSON string
   const [localOptions, setLocalOptions] = useState<OptionState[]>(() => {
@@ -320,42 +321,52 @@ const StyleCodeHookPanel = ({
               loopFocus={true}
               openOnKeyPress={true}
               composite={true}
+              positioning={{
+                placement: openAbove ? 'top' : 'bottom',
+                gutter: 4,
+                sameWidth: true,
+              }}
             >
-              <div className="relative">
-                <Combobox.Input
-                  ref={inputRef}
-                  className={commonInputClass}
-                  placeholder="Select a code hook..."
-                  onBlur={handleBlur}
-                />
-                <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
-                  <ChevronUpDownIcon
-                    className="text-mydarkgrey h-5 w-5"
-                    aria-hidden="true"
+              <Combobox.Control ref={comboboxRef}>
+                <div className="relative">
+                  <Combobox.Input
+                    className={commonInputClass}
+                    placeholder="Select a code hook..."
+                    onBlur={handleBlur}
                   />
-                </Combobox.Trigger>
-              </div>
-
-              <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
-                {collection.items.length === 0 ? (
-                  <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
-                    Nothing found.
-                  </div>
-                ) : (
-                  collection.items.map((hook) => (
-                    <Combobox.Item
-                      key={hook}
-                      item={hook}
-                      className="codehook-item relative cursor-default select-none py-2 pl-10 pr-4"
-                    >
-                      <span className="block truncate">{hook}</span>
-                      <span className="codehook-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
-                        <CheckIcon className="h-5 w-5" aria-hidden="true" />
-                      </span>
-                    </Combobox.Item>
-                  ))
-                )}
-              </Combobox.Content>
+                  <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
+                    <ChevronUpDownIcon
+                      className="text-mydarkgrey h-5 w-5"
+                      aria-hidden="true"
+                    />
+                  </Combobox.Trigger>
+                </div>
+              </Combobox.Control>
+
+              <Portal>
+                <Combobox.Positioner style={{ zIndex: 1002 }}>
+                  <Combobox.Content className="z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
+                    {collection.items.length === 0 ? (
+                      <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                        Nothing found.
+                      </div>
+                    ) : (
+                      collection.items.map((hook) => (
+                        <Combobox.Item
+                          key={hook}
+                          item={hook}
+                          className="codehook-item relative cursor-default select-none py-2 pl-10 pr-4"
+                        >
+                          <span className="block truncate">{hook}</span>
+                          <span className="codehook-indicator absolute inset-y-0 left-0 flex items-center pl-3 text-cyan-600">
+                            <CheckIcon className="h-5 w-5" aria-hidden="true" />
+                          </span>
+                        </Combobox.Item>
+                      ))
+                    )}
+                  </Combobox.Content>
+                </Combobox.Positioner>
+              </Portal>
             </Combobox.Root>
           </div>
           {!isValidCodeHook && localTarget && (