astro-tractstack 2.0.0-rc.0

package/templates/src/components/edit/ToolMode.tsx

@@ -0,0 +1,121 @@
+import { useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
+import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
+import TrashIcon from '@heroicons/react/24/outline/TrashIcon';
+import ArrowsUpDownIcon from '@heroicons/react/24/outline/ArrowsUpDownIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import BugAntIcon from '@heroicons/react/24/outline/BugAntIcon';
+import { settingsPanelStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import type { ToolModeVal } from '@/types/compositorTypes';
+
+const storykeepToolModes = [
+  {
+    key: 'styles' as const,
+    Icon: PaintBrushIcon,
+    title: 'Styles',
+    description: 'Click to edit styles',
+  },
+  {
+    key: 'text' as const,
+    Icon: PencilSquareIcon,
+    title: 'Write',
+    description: 'Click to edit text',
+  },
+  {
+    key: 'insert' as const,
+    Icon: PlusIcon,
+    title: 'Add',
+    description: 'Add new element, e.g. paragraph or image',
+  },
+  {
+    key: 'eraser' as const,
+    Icon: TrashIcon,
+    title: 'Eraser',
+    description: 'Erase any element(s)',
+  },
+  {
+    key: 'move' as const,
+    Icon: ArrowsUpDownIcon,
+    title: 'Move',
+    description: 'Keyboard accessible re-order',
+  },
+  {
+    key: 'debug' as const,
+    Icon: BugAntIcon,
+    title: 'Debug',
+    description: 'Debug node ids',
+  },
+] as const;
+
+interface StoryKeepToolModeProps {
+  isContext: boolean;
+}
+
+const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
+  //const signal = useStore(settingsPanelStore);
+  const ctx = getCtx();
+  const { value: toolModeVal } = useStore(ctx.toolModeValStore);
+
+  const hasTitle = useStore(ctx.hasTitle);
+  const hasPanes = useStore(ctx.hasPanes);
+
+  const className =
+    'w-8 h-8 py-1 rounded-xl bg-white text-myblue hover:bg-mygreen/20 hover:text-black hover:rotate-3 cursor-pointer transition-all';
+  const classNameActive = 'w-8 h-8 py-1.5 rounded-md bg-myblue text-white';
+
+  const currentToolMode =
+    storykeepToolModes.find((mode) => mode.key === toolModeVal) ??
+    storykeepToolModes[0];
+
+  const handleClick = (mode: ToolModeVal) => {
+    settingsPanelStore.set(null);
+    ctx.toolModeValStore.set({ value: mode });
+    ctx.showGuids.set(mode === `debug`);
+    ctx.notifyNode('root');
+  };
+
+  // Escape key listener
+  useEffect(() => {
+    const handleEscapeKey = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        ctx.toolModeValStore.set({ value: 'text' });
+        console.log('Tool mode reset to text via Escape');
+      }
+    };
+    document.addEventListener('keydown', handleEscapeKey);
+    return () => {
+      document.removeEventListener('keydown', handleEscapeKey);
+    };
+  }, [ctx]);
+
+  if (!hasTitle || (!hasPanes && !isContext)) return null;
+
+  return (
+    <nav
+      id="mainNav"
+      className="z-102 bg-mywhite fixed bottom-0 left-0 right-0 pt-1.5 md:sticky md:bottom-auto md:left-0 md:top-24 md:h-screen md:w-16 md:pt-0"
+    >
+      <div className="flex flex-wrap justify-around gap-4 py-3.5 md:mt-0 md:flex-col md:items-center md:gap-8 md:space-x-0 md:space-y-2 md:py-2">
+        <div className="text-mydarkgrey h-16 text-center text-sm font-bold">
+          mode:
+          <div className="font-action text-myblue pt-1.5 text-center text-xs">
+            {currentToolMode.title}
+          </div>
+        </div>
+        {storykeepToolModes.map(({ key, Icon, description }) => (
+          <div title={description} key={key}>
+            {key === toolModeVal ? (
+              <Icon className={classNameActive} />
+            ) : (
+              <Icon className={className} onClick={() => handleClick(key)} />
+            )}
+          </div>
+        ))}
+      </div>
+    </nav>
+  );
+};
+
+export default StoryKeepToolMode;

package/templates/src/components/edit/context/ContextPaneConfig.tsx

@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import { useStore } from '@nanostores/react';
+import { getCtx } from '@/stores/nodes';
+import { settingsPanelStore } from '@/stores/storykeep';
+import ContextPaneTitlePanel from './ContextPaneConfig_title';
+import ContextPaneSlugPanel from './ContextPaneConfig_slug';
+import { ContextPaneMode, type PaneNode } from '@/types/compositorTypes';
+
+const ContextPaneConfig = ({ nodeId }: { nodeId: string }) => {
+  const [isNodeAvailable, setIsNodeAvailable] = useState(false);
+  const [paneNode, setPaneNode] = useState<PaneNode | null>(null);
+
+  const nodesCtx = getCtx();
+  const activePaneMode = useStore(nodesCtx.activePaneMode);
+
+  const isActive =
+    activePaneMode.panel === 'context' && activePaneMode.paneId === nodeId;
+
+  const mode =
+    isActive && activePaneMode.mode
+      ? (activePaneMode.mode as ContextPaneMode)
+      : ContextPaneMode.DEFAULT;
+
+  const setMode = (newMode: ContextPaneMode) => {
+    nodesCtx.setPanelMode(nodeId, 'context', newMode);
+    settingsPanelStore.set(null);
+  };
+
+  useEffect(() => {
+    const checkNode = () => {
+      const ctx = getCtx();
+      const allNodes = ctx.allNodes.get();
+      const node = allNodes.get(nodeId) as PaneNode;
+
+      if (node) {
+        setPaneNode(node);
+        setIsNodeAvailable(true);
+      }
+    };
+
+    checkNode();
+
+    const intervalId = setInterval(() => {
+      if (!isNodeAvailable) {
+        checkNode();
+      } else {
+        clearInterval(intervalId);
+      }
+    }, 100);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [nodeId, isNodeAvailable]);
+
+  if (!isNodeAvailable || !paneNode) {
+    return null;
+  }
+
+  if (mode === ContextPaneMode.TITLE) {
+    return <ContextPaneTitlePanel nodeId={nodeId} setMode={setMode} />;
+  } else if (mode === ContextPaneMode.SLUG) {
+    return <ContextPaneSlugPanel nodeId={nodeId} setMode={setMode} />;
+  }
+
+  return (
+    <div className="mb-4">
+      <div className="w-full rounded-b-md bg-white p-4">
+        <div className="flex flex-wrap items-center gap-2">
+          {/* Title control */}
+          <button
+            onClick={() => setMode(ContextPaneMode.TITLE)}
+            className="text-md min-h-9 rounded border border-cyan-200 bg-white px-3 text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+          >
+            Title: <span className="font-bold">{paneNode.title}</span>
+          </button>
+
+          {/* Slug control */}
+          <button
+            onClick={() => setMode(ContextPaneMode.SLUG)}
+            className="text-md h-9 rounded border border-cyan-200 bg-white px-3 text-cyan-700 shadow-sm transition-colors hover:bg-cyan-700 hover:text-white focus:bg-cyan-700 focus:text-white"
+          >
+            Slug: <span className="font-bold">{paneNode.slug}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContextPaneConfig;

package/templates/src/components/edit/context/ContextPaneConfig_slug.tsx

@@ -0,0 +1,174 @@
+import { useState, useEffect } 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 { ContextPaneMode, type PaneNode } from '@/types/compositorTypes';
+
+interface PaneSlugPanelProps {
+  nodeId: string;
+  setMode: (mode: ContextPaneMode) => void;
+}
+
+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 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);
+  }, [paneNode.slug]);
+
+  const validateSlug = (value: string): string => {
+    // Convert to lowercase and replace spaces with hyphens
+    return (
+      value
+        .toLowerCase()
+        // Replace spaces and underscores with hyphens
+        .replace(/[\s_]+/g, '-')
+        // Remove any characters that aren't alphanumeric or hyphens
+        .replace(/[^a-z0-9-]/g, '')
+    );
+    // Replace multiple consecutive hyphens with a single hyphen
+    //.replace(/-+/g, '-')
+    // Remove hyphens from start and end
+    //.replace(/^-+|-+$/g, '');
+  };
+
+  const handleSlugChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newSlug = validateSlug(e.target.value);
+    if (newSlug.length <= 75) {
+      // Prevent more than 75 chars
+      setSlug(newSlug);
+      setCharCount(newSlug.length);
+      setIsValid(newSlug.length >= 3 && newSlug.length <= 60);
+      setWarning(newSlug.length > 60 && newSlug.length <= 75);
+    }
+  };
+
+  const handleSlugBlur = () => {
+    if (slug.length >= 3) {
+      // Only update if meets minimum length
+      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">
+      <div className="px-3.5">
+        <div className="mb-4 flex justify-between">
+          <h3 className="text-lg font-bold">Slug (url)</h3>
+          <button
+            onClick={() => setMode(ContextPaneMode.DEFAULT)}
+            className="text-myblue hover:text-black"
+          >
+            ← Go Back
+          </button>
+        </div>
+
+        <div className="relative max-w-96">
+          <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 ${
+              charCount < 3
+                ? '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 URL slug (3-60 characters recommended)"
+          />
+          <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-2">
+            {charCount < 3 ? (
+              <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 < 3
+                  ? 'text-red-500'
+                  : isValid
+                    ? 'text-green-500'
+                    : warning
+                      ? 'text-yellow-500'
+                      : 'text-gray-500'
+              }`}
+            >
+              {charCount}/75
+            </span>
+          </div>
+        </div>
+        <div className="mt-4 text-lg">
+          <div className="text-gray-600">
+            Create a clean, descriptive URL slug that helps users and search
+            engines understand the page content.
+            <ul className="ml-4 mt-1">
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Use hyphens to separate
+                words
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Keep it short and
+                descriptive
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Use only lowercase
+                letters, numbers, and hyphens
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Avoid special
+                characters or spaces
+              </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 && (
+              <span className="text-gray-500">
+                Consider adding more characters for better description
+              </span>
+            )}
+            {warning && (
+              <span className="text-yellow-500">
+                Slug is getting long - consider shortening it
+              </span>
+            )}
+            {isValid && charCount >= 5 && (
+              <span className="text-green-500">
+                Good URL length and format!
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PaneSlugPanel;

package/templates/src/components/edit/context/ContextPaneConfig_title.tsx

@@ -0,0 +1,186 @@
+import { useState, useEffect, type ChangeEvent } from 'react';
+import ExclamationTriangleIcon from '@heroicons/react/24/outline/ExclamationTriangleIcon';
+import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
+import { cloneDeep, titleToSlug, findUniqueSlug } from '@/utils/helpers';
+import { getCtx } from '@/stores/nodes';
+import { fullContentMapStore } from '@/stores/storykeep';
+import { ContextPaneMode, type PaneNode } from '@/types/compositorTypes';
+
+interface ContextPaneTitlePanelProps {
+  nodeId: string;
+  setMode?: (mode: ContextPaneMode) => void;
+}
+
+const ContextPaneTitlePanel = ({
+  nodeId,
+  setMode,
+}: ContextPaneTitlePanelProps) => {
+  const [title, setTitle] = useState('');
+  const [isValid, setIsValid] = useState(false);
+  const [warning, setWarning] = useState(false);
+  const [charCount, setCharCount] = useState(0);
+
+  const ctx = getCtx();
+  const allNodes = ctx.allNodes.get();
+  const paneNode = allNodes.get(nodeId) as PaneNode;
+  if (!paneNode) return null;
+
+  useEffect(() => {
+    setTitle(paneNode.title);
+    setCharCount(paneNode.title.length);
+  }, [paneNode.title]);
+
+  const handleTitleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const newTitle = e.target.value;
+    if (newTitle.length <= 70) {
+      // Prevent more than 70 chars
+      setTitle(newTitle);
+      setCharCount(newTitle.length);
+      setIsValid(newTitle.length >= 35 && newTitle.length <= 60);
+      setWarning(newTitle.length > 60 && newTitle.length <= 70);
+    }
+  };
+
+  const handleTitleBlur = () => {
+    if (title.length >= 10) {
+      // Only update if meets minimum length
+      const ctx = getCtx();
+      const existingSlugs = fullContentMapStore
+        .get()
+        .filter((item) => ['Pane', 'StoryFragment'].includes(item.type))
+        .map((item) => item.slug);
+      const newSlug =
+        paneNode.slug === ``
+          ? findUniqueSlug(titleToSlug(title), existingSlugs)
+          : null;
+      const updatedNode = cloneDeep({
+        ...paneNode,
+        title,
+        ...(newSlug ? { slug: newSlug } : {}),
+        isChanged: true,
+      });
+      ctx.modifyNodes([updatedNode]);
+    }
+  };
+
+  return (
+    <div className="group mb-4 w-full rounded-b-md bg-white px-1.5 py-6">
+      <div className="px-3.5">
+        <div className="mb-4 flex justify-between">
+          <h3 className="text-lg font-bold">Page Title</h3>
+          {setMode && (
+            <button
+              onClick={() => setMode && setMode(ContextPaneMode.DEFAULT)}
+              className="text-myblue hover:text-black"
+            >
+              ← Go Back
+            </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 < 10
+                ? '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 page title (35-60 characters recommended)"
+          />
+          <div className="absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-2">
+            {charCount < 10 ? (
+              <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 < 10
+                  ? 'text-red-500'
+                  : isValid
+                    ? 'text-green-500'
+                    : warning
+                      ? 'text-yellow-500'
+                      : 'text-gray-500'
+              }`}
+            >
+              {charCount}/70
+            </span>
+          </div>
+        </div>
+        <div className="mt-2 flex items-center gap-2">
+          <button
+            onClick={handleTitleBlur}
+            disabled={title.length < 10}
+            className={`rounded bg-cyan-700 px-3 py-1 text-sm text-white transition-colors hover:bg-cyan-800 ${
+              title !== paneNode.title ? 'inline-flex' : 'hidden'
+            } items-center ${title.length < 10 ? 'cursor-not-allowed opacity-50' : ''}`}
+          >
+            <CheckIcon className="mr-1 h-4 w-4" />
+            Save
+          </button>
+          <span
+            className={`text-sm ${title !== paneNode.title ? 'inline' : 'hidden'} text-gray-500`}
+          >
+            or press Enter
+          </span>
+        </div>
+        <div className="mt-4 text-lg">
+          <div className="text-gray-600">
+            Write a clear, descriptive title that accurately represents your
+            page content.
+            <ul className="ml-4 mt-1">
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Include relevant
+                keywords
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Avoid unnecessary words
+                like "welcome to" or "the"
+              </li>
+              <li>
+                <CheckIcon className="inline h-4 w-4" /> Unique titles across
+                your website
+              </li>
+            </ul>
+          </div>
+          <div className="py-4">
+            {charCount < 10 && (
+              <span className="text-red-500">
+                Title must be at least 10 characters
+              </span>
+            )}
+            {charCount >= 10 && charCount < 35 && (
+              <span className="text-gray-500">
+                Add {35 - charCount} more characters for optimal length
+              </span>
+            )}
+            {warning && (
+              <span className="text-yellow-500">Title is getting long</span>
+            )}
+            {isValid && (
+              <span className="text-green-500">Perfect title length!</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ContextPaneTitlePanel;