astro-tractstack 2.0.0-rc.8 → 2.0.0

package/templates/src/components/codehooks/SearchWidget.tsx

@@ -0,0 +1,453 @@
+import {
+  useState,
+  useMemo,
+  useEffect,
+  useRef,
+  type KeyboardEvent,
+} from 'react';
+import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
+import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
+import { useSearch } from '@/hooks/useSearch';
+import type {
+  FullContentMapItem,
+  DiscoverySuggestion,
+} from '@/types/tractstack';
+import {
+  getResourceUrl,
+  getResourceImage,
+  getResourceDescription,
+} from '@/utils/customHelpers';
+
+// --- TYPES ---
+interface SearchWidgetProps {
+  fullContentMap: FullContentMapItem[];
+}
+
+interface ResultItem {
+  id: string;
+  url: string;
+  title: string;
+  imageSrc: string;
+  thumbSrcSet?: string;
+  description?: string;
+  topics?: string[];
+}
+
+const ITEMS_PER_PAGE = 10;
+
+function ResultItemCard({ item }: { item: ResultItem }) {
+  return (
+    <a href={item.url} className="group block">
+      <div className="flex items-start space-x-4 rounded-md p-2 group-hover:bg-slate-200/20">
+        <div
+          className="w-36 flex-shrink-0 rounded-md bg-gray-200 md:w-48 xl:w-72"
+          style={{ aspectRatio: '1200 / 630' }}
+        >
+          <img
+            src={item.imageSrc}
+            srcSet={item.thumbSrcSet}
+            alt={item.title}
+            style={{ aspectRatio: 1200 / 630 }}
+            className="w-36 flex-shrink-0 rounded-md md:w-48 xl:w-72"
+          />
+        </div>
+        <div className="flex-1">
+          <h3 className="text-lg font-bold text-black transition-colors group-hover:text-gray-900">
+            {item.title}
+          </h3>
+          {item.description && (
+            <p className="line-clamp-2 text-sm text-gray-800">
+              {item.description}
+            </p>
+          )}
+          {item.topics && item.topics.length > 0 && (
+            <div className="mt-4 flex flex-wrap gap-1">
+              {item.topics.slice(0, 3).map((topic: string) => (
+                <span
+                  key={topic}
+                  className="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-bold text-gray-800"
+                >
+                  {topic}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </a>
+  );
+}
+
+function CustomPagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+}: {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}) {
+  return (
+    <div className="mt-8 flex items-center justify-center">
+      <div className="mr-4 text-sm text-gray-700">
+        Page {currentPage} of {totalPages}
+      </div>
+      <nav className="inline-flex rounded-md shadow-sm" aria-label="Pagination">
+        <button
+          onClick={() => onPageChange(currentPage - 1)}
+          disabled={currentPage === 1}
+          className="rounded-l-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-gray-800 hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Previous
+        </button>
+        <button
+          onClick={() => onPageChange(currentPage + 1)}
+          disabled={currentPage >= totalPages}
+          className="rounded-r-md border border-cyan-600 bg-cyan-600 px-4 py-2 text-sm font-bold text-white hover:bg-cyan-700 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          Next
+        </button>
+      </nav>
+    </div>
+  );
+}
+
+export default function SearchWidget({ fullContentMap }: SearchWidgetProps) {
+  const [query, setQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const [activeSearch, setActiveSearch] = useState<DiscoverySuggestion | null>(
+    null
+  );
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const {
+    suggestions,
+    isDiscovering,
+    searchResults,
+    isRetrieving,
+    retrieveError,
+    discoverTerms,
+    selectSuggestion,
+    selectExactMatch,
+    clearAll,
+  } = useSearch();
+
+  useEffect(() => {
+    if (query.trim().length >= 3) {
+      discoverTerms(query);
+    }
+  }, [query]);
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchResults]);
+
+  const handleSuggestionSelect = (suggestion: DiscoverySuggestion) => {
+    setActiveSearch(suggestion);
+    selectSuggestion(suggestion);
+    setQuery('');
+  };
+
+  const handleExactMatch = (term: string) => {
+    const searchObj = { term, type: 'EXACT' as const };
+    setActiveSearch(searchObj);
+    selectExactMatch(term);
+    setQuery('');
+  };
+
+  const handleSuggestionClick = (suggestion: DiscoverySuggestion) => {
+    handleSuggestionSelect(suggestion);
+  };
+
+  const handleNewSearch = () => {
+    setActiveSearch(null);
+    clearAll();
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter' && query.trim()) {
+      e.preventDefault();
+      if (query.trim().length < 3) return;
+
+      if (suggestions.length > 0) {
+        const exactMatch = suggestions.find(
+          (s) => s.term.toLowerCase() === query.trim().toLowerCase()
+        );
+        if (exactMatch) {
+          handleSuggestionSelect(exactMatch);
+        } else {
+          handleSuggestionSelect(suggestions[0]);
+        }
+      } else {
+        handleExactMatch(query.trim());
+      }
+    }
+  };
+
+  const getTypeColor = (type: string) => {
+    switch (type) {
+      case 'TITLE':
+        return 'bg-blue-100 text-blue-800 border-blue-200';
+      case 'EXACT':
+        return 'bg-orange-100 text-orange-800 border-orange-200';
+      case 'TOPIC':
+        return 'bg-purple-100 text-purple-800 border-purple-200';
+      case 'TEXT':
+        return 'bg-green-100 text-green-800 border-green-200';
+      default:
+        return 'bg-gray-100 text-gray-800 border-gray-200';
+    }
+  };
+
+  const suggestionForDisplay = useMemo(() => {
+    if (query.length < 3 || suggestions.length === 0) {
+      return null;
+    }
+    const exactMatch = suggestions.find(
+      (s) => s.term.toLowerCase() === query.trim().toLowerCase()
+    );
+    return exactMatch || suggestions[0];
+  }, [suggestions, query]);
+
+  const bestCompletion = suggestionForDisplay ? suggestionForDisplay.term : '';
+
+  const showCompletion =
+    bestCompletion.toLowerCase().startsWith(query.toLowerCase()) &&
+    query.length >= 3 &&
+    bestCompletion.length > query.length;
+
+  let preservedCompletion = '';
+  if (showCompletion) {
+    const completionText = bestCompletion.slice(query.length);
+    preservedCompletion = completionText.startsWith(' ')
+      ? '\u00A0' + completionText.slice(1)
+      : completionText;
+  }
+
+  const allResultItems = useMemo((): ResultItem[] => {
+    if (!searchResults) return [];
+    const items: ResultItem[] = [];
+    const combined = [
+      ...searchResults.storyFragmentResults,
+      ...searchResults.contextPaneResults,
+      ...searchResults.resourceResults,
+    ];
+    combined.forEach((ftsResult) => {
+      const item = fullContentMap.find(
+        (mapItem) => mapItem.id === ftsResult.ID
+      );
+      if (item) {
+        if (item.type === 'StoryFragment') {
+          items.push({
+            id: item.id,
+            title: item.title,
+            url: `/${item.slug}`,
+            imageSrc: item.thumbSrc || '/static.jpg',
+            thumbSrcSet: item.thumbSrcSet,
+            description: item.description,
+            topics: item.topics,
+          });
+        } else if (item.type === 'Pane' && item.isContext) {
+          items.push({
+            id: item.id,
+            title: item.title,
+            url: `/context/${item.slug}`,
+            imageSrc: '/static.jpg',
+            description: 'Contextual information page.',
+          });
+        } else if (item.type === 'Resource') {
+          items.push({
+            id: item.id,
+            title: item.title,
+            url: getResourceUrl(item.categorySlug || '', item.slug),
+            imageSrc:
+              getResourceImage(item.id, item.slug, item.categorySlug || '') ||
+              '/static.jpg',
+            description:
+              getResourceDescription(
+                item.id,
+                item.slug,
+                item.categorySlug || ''
+              ) || undefined,
+          });
+        }
+      }
+    });
+    return items;
+  }, [searchResults, fullContentMap]);
+
+  const totalResults = allResultItems.length;
+  const totalPages = Math.ceil(totalResults / ITEMS_PER_PAGE);
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const paginatedItems = allResultItems.slice(
+    startIndex,
+    startIndex + ITEMS_PER_PAGE
+  );
+  const leftColItems = paginatedItems.slice(
+    0,
+    Math.ceil(paginatedItems.length / 2)
+  );
+  const rightColItems = paginatedItems.slice(
+    Math.ceil(paginatedItems.length / 2)
+  );
+
+  return (
+    <div className="mx-auto max-w-7xl px-4 py-2">
+      <div className={searchResults ? `rounded-xl border-2 p-6 md:p-12` : ``}>
+        <div
+          className={`relative mx-auto mb-8 ${!searchResults ? `max-w-5xl` : ``}`}
+        >
+          {/* PHASE 1: DISCOVERY (WHEN THERE ARE NO RESULTS) */}
+          {!searchResults && (
+            <div>
+              <div className="relative">
+                <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-5">
+                  <MagnifyingGlassIcon className="h-8 w-8 text-gray-400" />
+                </div>
+
+                {showCompletion && (
+                  <div className="pointer-events-none absolute inset-y-0 left-0 flex h-full w-full items-center py-5 pl-16 pr-5 text-3xl text-gray-400">
+                    <span
+                      className="font-bold"
+                      style={{ visibility: 'hidden', whiteSpace: 'pre' }}
+                    >
+                      {query}
+                    </span>
+                    <span>{preservedCompletion}</span>
+                  </div>
+                )}
+
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder="Search for content..."
+                  className="relative z-10 w-full rounded-xl border-2 border-gray-300 bg-transparent py-5 pl-16 pr-5 text-3xl font-bold text-gray-800 placeholder-gray-400 shadow-sm transition-shadow focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/50"
+                />
+              </div>
+
+              {isDiscovering && (
+                <div className="mx-auto mt-2 max-w-5xl rounded-xl border border-gray-200 bg-white p-4 text-center text-gray-500 shadow-lg">
+                  Discovering...
+                </div>
+              )}
+              {suggestions.length > 0 && !isDiscovering && (
+                <div className="mx-auto mt-2 max-w-5xl rounded-xl border border-gray-200 bg-white p-4 shadow-lg">
+                  <p className="mb-3 text-sm font-bold text-gray-600">
+                    Suggestions
+                  </p>
+                  <div className="flex flex-wrap gap-2">
+                    {suggestions.map((suggestion, index) => (
+                      <button
+                        key={index}
+                        onClick={() => handleSuggestionClick(suggestion)}
+                        className={`inline-flex items-center rounded-lg border px-3 py-1.5 text-sm font-bold transition-all hover:shadow-md ${getTypeColor(
+                          suggestion.type
+                        )}`}
+                      >
+                        {suggestion.term}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {/* Show this block only when discovery is finished, the user has typed, and there are no suggestions. */}
+              {!isDiscovering &&
+                suggestions.length === 0 &&
+                query.trim().length >= 3 && (
+                  <div className="mx-auto mt-2 max-w-5xl rounded-xl border border-gray-200 bg-white p-4 text-center shadow-lg">
+                    <p className="text-gray-600">
+                      No suggestions found for "
+                      <span className="font-bold">{query}</span>".
+                    </p>
+                  </div>
+                )}
+            </div>
+          )}
+
+          {/* PHASE 2: RESULTS (WHEN A SEARCH HAS BEEN MADE) */}
+          {searchResults && activeSearch && (
+            <div
+              className={`inline-flex items-center gap-2 rounded-lg border-2 px-4 py-2 text-lg font-bold ${getTypeColor(activeSearch.type)}`}
+            >
+              <span>{activeSearch.term}</span>
+              <button
+                onClick={handleNewSearch}
+                className="flex items-center justify-center rounded-full text-gray-600 hover:text-gray-800"
+                aria-label={`Remove ${activeSearch.term}`}
+              >
+                <XMarkIcon className="h-5 w-5" />
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="mt-8">
+          {isRetrieving && (
+            <div className="flex justify-center p-8">
+              <div className="h-10 w-10 animate-spin rounded-full border-b-2 border-blue-600" />
+            </div>
+          )}
+          {retrieveError && (
+            <div className="rounded-md bg-red-50 p-4 text-red-700">
+              <p>Error: {retrieveError}</p>
+            </div>
+          )}
+
+          {searchResults && !isRetrieving && (
+            <div>
+              <div className="mb-4">
+                <h2 className="text-lg font-bold text-black">
+                  {totalResults} result{totalResults !== 1 ? 's' : ''} found
+                </h2>
+                {totalResults > 0 && (
+                  <p className="mt-1 text-sm text-gray-800">
+                    Showing {startIndex + 1}-
+                    {Math.min(startIndex + ITEMS_PER_PAGE, totalResults)} of{' '}
+                    {totalResults}
+                  </p>
+                )}
+              </div>
+              {totalResults > 0 ? (
+                <>
+                  <div className="block space-y-6 md:hidden">
+                    {paginatedItems.map((item) => (
+                      <ResultItemCard key={item.id} item={item} />
+                    ))}
+                  </div>
+                  <div className="hidden md:flex md:space-x-6">
+                    <div className="space-y-6 md:w-1/2">
+                      {leftColItems.map((item) => (
+                        <ResultItemCard key={item.id} item={item} />
+                      ))}
+                    </div>
+                    <div className="space-y-6 md:w-1/2">
+                      {rightColItems.map((item) => (
+                        <ResultItemCard key={item.id} item={item} />
+                      ))}
+                    </div>
+                  </div>
+                  {totalPages > 1 && (
+                    <CustomPagination
+                      currentPage={currentPage}
+                      totalPages={totalPages}
+                      onPageChange={setCurrentPage}
+                    />
+                  )}
+                </>
+              ) : (
+                <div className="rounded-lg bg-gray-50 px-4 py-12 text-center">
+                  <p className="text-lg italic text-gray-600">
+                    No results found.
+                  </p>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -30,6 +30,7 @@ import StoryFragmentConfigPanel from '@/components/edit/storyfragment/StoryFragm
 import StoryFragmentTitlePanel from '@/components/edit/storyfragment/StoryFragmentPanel_title';
 import ContextPanePanel from '@/components/edit/context/ContextPaneConfig';
 import ContextPaneTitlePanel from '@/components/edit/context/ContextPaneConfig_title';
+import { regexpHook } from '@/constants';
 import type {
   StoryFragmentNode,
   PaneNode,
@@ -40,8 +41,6 @@ import type { NodeProps } from '@/types/nodeProps';
 
 function parseCodeHook(node: BaseNode | FlatNode) {
   if ('codeHookParams' in node && Array.isArray(node.codeHookParams)) {
-    const regexpHook =
-      /^(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|signup)\((.*)\)$/;
     const hookMatch = node.copy?.match(regexpHook);
 
     if (!hookMatch) return null;
@@ -58,8 +57,6 @@ function parseCodeHook(node: BaseNode | FlatNode) {
     const firstChild = node.children[0];
     if (!firstChild?.value) return null;
 
-    const regexpHook =
-      /(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|signup)\((.*?)\)/;
     const regexpValues = /((?:[^\\|]+|\\\|?)+)/g;
     const hookMatch = firstChild.value.match(regexpHook);
 
@@ -87,7 +84,7 @@ const getElement = (
   const isPreview = getCtx(props).rootNodeId.get() === `tmp`;
   const hasPanes = useStore(getCtx(props).hasPanes);
   const isTemplate = useStore(getCtx(props).isTemplate);
-  const sharedProps = { nodeId: node.id, ctx: props.ctx };
+  const sharedProps = { nodeId: node.id, ctx: props.ctx, config: props.config };
   const type = getType(node);
 
   switch (type) {
@@ -312,7 +309,7 @@ const getElement = (
     case 'impression':
       return <></>;
     default:
-      console.warn(`Node.tsx miss on ${type}`);
+      console.warn(`Node.tsx miss on ${type}`, node);
       return <></>;
   }
 };

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

@@ -51,26 +51,36 @@ const PanelVisibilityWrapper = ({
     const currentWrapper = wrapperRef.current;
     if (!currentWrapper) return;
 
-    // Always observe the panel, regardless of active state
+    // Skip intersection observer for 'add' panels - they behave differently
+    if (panelType === 'add') {
+      return;
+    }
+
     const observer = new IntersectionObserver(
       (entries) => {
-        // Only take action if this panel is currently active and not intersecting
-        if (!entries[0].isIntersecting && isActive) {
-          nodesCtx.closeAllPanels();
+        // Add delay to prevent immediate closing during panel activation
+        if (isActive) {
+          setTimeout(() => {
+            // Double-check the panel is still active before closing
+            const currentActiveMode = nodesCtx.activePaneMode.get();
+            const stillActive =
+              currentActiveMode.panel === panelType &&
+              currentActiveMode.paneId === nodeId;
+            if (!entries[0].isIntersecting && stillActive) {
+              nodesCtx.closeAllPanels();
+            }
+          }, 100); // Small delay to allow panel to render
         }
       },
       {
-        threshold: 0.1, // Close when 90% of the panel is out of view
-        rootMargin: '-10px', // Small margin to make detection a bit more forgiving
+        threshold: 0.1,
+        rootMargin: '-10px',
       }
     );
 
     observer.observe(currentWrapper);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [nodeId, panelType, nodesCtx, isActive]); // Include isActive in dependencies
+    return () => observer.disconnect();
+  }, [nodeId, panelType, nodesCtx, isActive]);
 
   return (
     <div

package/templates/src/components/compositor/elements/BunnyVideo.tsx

@@ -1,49 +1,50 @@
 interface BunnyVideoProps {
-  embedUrl: string;
+  videoId: string;
   title: string;
   className?: string;
 }
 
-const BunnyVideo = ({ embedUrl, title, className = '' }: BunnyVideoProps) => {
-  // Check if a string is a valid URL
-  const isValidUrl = (url: string): boolean => {
-    try {
-      new URL(url);
-      return true;
-    } catch (e) {
-      return false;
-    }
-  };
+const BUNNY_EMBED_BASE_URL = 'https://iframe.mediadelivery.net/embed/';
 
-  // Render placeholder when URL is invalid
-  if (!isValidUrl(embedUrl)) {
+const isValidBunnyVideoId = (id: string): boolean => {
+  if (!id) return false;
+  const videoIdRegex = /^\d+\/[a-f0-9\-]{36}$/;
+  return videoIdRegex.test(id);
+};
+
+const BunnyVideo = ({ videoId, title, className = '' }: BunnyVideoProps) => {
+  // If the videoId is missing or has an invalid format, render the placeholder.
+  if (!isValidBunnyVideoId(videoId)) {
     return (
       <div
         className={`flex aspect-video w-full items-center justify-center bg-gray-100 ${className}`}
       >
         <div className="p-4 text-center">
-          <div className="text-mydarkgrey mb-2">Video URL not set</div>
+          <div className="text-mydarkgrey mb-2">Video ID not set</div>
           <div className="text-mygrey text-sm">
-            Configure this widget with a valid Bunny Stream URL
+            Configure this widget with a valid Bunny Video ID
           </div>
         </div>
       </div>
     );
   }
 
-  // Build URL with default parameters for preview
-  let videoUrl;
+  // Build the full, final URL from the videoId.
+  let finalVideoUrl;
   try {
-    videoUrl = new URL(embedUrl);
+    const baseURL = `${BUNNY_EMBED_BASE_URL}${videoId}`;
+    const videoUrl = new URL(baseURL);
     videoUrl.searchParams.set('autoplay', '0');
     videoUrl.searchParams.set('preload', 'false');
     videoUrl.searchParams.set('responsive', 'true');
+    finalVideoUrl = videoUrl.toString();
   } catch (e) {
+    // This handles cases where a malformed videoId might be passed.
     return (
       <div
         className={`flex aspect-video w-full items-center justify-center bg-gray-100 ${className}`}
       >
-        <div className="text-mydarkgrey text-center">Invalid video URL</div>
+        <div className="text-mydarkgrey text-center">Invalid Video ID</div>
       </div>
     );
   }
@@ -51,7 +52,7 @@ const BunnyVideo = ({ embedUrl, title, className = '' }: BunnyVideoProps) => {
   return (
     <div className={`relative w-full ${className}`}>
       <iframe
-        src={videoUrl.toString()}
+        src={finalVideoUrl}
         className="aspect-video w-full"
         title={title}
         allow="autoplay; fullscreen"