astro-tractstack 2.0.2 → 2.0.5

package/package.json

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

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

@@ -353,7 +353,7 @@ const EpinetWrapper = ({
         }
       >
         <div className="space-y-6">
-          <div className="rounded-lg bg-white p-6 shadow">
+          <div className="rounded-lg bg-white p-2 shadow md:p-6">
             <div className="mb-4 flex items-center justify-between">
               {(isLoading || status === 'loading') && (
                 <div className="flex items-center space-x-2 text-sm text-gray-500">

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

@@ -3,7 +3,8 @@ import * as d3 from 'd3';
 import { sankey, sankeyLinkHorizontal } from 'd3-sankey';
 
 const MAX_HEIGHT = 1600;
-const COMPRESSED_HEIGHT = 256; // Fixed height for compressed view
+const COMPRESSED_HEIGHT = 256;
+const MIN_DIAGRAM_WIDTH = 800; // Define a minimum width for the diagram
 
 const colors = [
   '#ef4444',
@@ -52,7 +53,7 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const hasScrolledRef = useRef(false);
   const [dimensions, setDimensions] = useState({
-    width: 800,
+    width: MIN_DIAGRAM_WIDTH,
     height: 500,
   });
   const [isExpanded, setIsExpanded] = useState(false);
@@ -60,7 +61,11 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
   useEffect(() => {
     const updateDimensions = () => {
       if (containerRef.current) {
-        const containerWidth = containerRef.current.offsetWidth;
+        // Ensure the diagram width is the larger of the container or our defined minimum
+        const containerWidth = Math.max(
+          MIN_DIAGRAM_WIDTH,
+          containerRef.current.offsetWidth
+        );
         const nodeCount = data.nodes.length || 1;
         const optimalHeight = nodeCount * (40 + 10) + 50;
         const finalHeight = Math.min(MAX_HEIGHT, optimalHeight);
@@ -245,7 +250,6 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
 
   return (
     <div ref={containerRef} className="relative w-full">
-      {/* Expand/Compress Controls */}
       <div className="mb-3 flex items-center justify-between">
         <div className="text-sm text-gray-600">
           {data.nodes.length} nodes • {data.links.length} connections
@@ -292,23 +296,21 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
         </button>
       </div>
 
-      {/* Compression Warning */}
       {needsCompression && (
         <div className="mb-2 rounded bg-amber-50 px-3 py-2 text-sm text-amber-800">
           <strong>Compressed view</strong> - click anywhere to expand!
         </div>
       )}
 
-      {/* SVG Container - Clickable when compressed */}
       <div
-        className={`transition-all duration-300 ${
+        className={`overflow-x-auto transition-all duration-300 md:overflow-visible ${
           needsCompression
             ? 'cursor-pointer hover:bg-gray-50 hover:shadow-md'
             : ''
         }`}
         style={{
           height: `${displayHeight}px`,
-          overflow: 'hidden',
+          overflowY: 'hidden',
         }}
         onClick={needsCompression ? handleExpand : undefined}
         role={needsCompression ? 'button' : undefined}
@@ -333,7 +335,7 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
           height={dimensions.height}
           style={{
             display: 'block',
-            width: '100%',
+            minWidth: `${dimensions.width}px`, // Ensure SVG itself doesn't shrink
             height: `${dimensions.height}px`,
             transform: needsCompression
               ? `scaleY(${displayHeight / dimensions.height})`
@@ -345,6 +347,10 @@ const SankeyDiagram = ({ data, isLoading = false }: SankeyDiagramProps) => {
         ></svg>
       </div>
 
+      <div className="mt-2 text-center text-xs text-gray-500 md:hidden">
+        &larr; Scroll to see full journey map &rarr;
+      </div>
+
       {isLoading && (
         <div className="absolute inset-0 flex items-center justify-center rounded bg-black bg-opacity-80">
           <div className="flex items-center space-x-2 text-white">

package/templates/src/components/compositor/nodes/Widget.tsx

@@ -22,15 +22,16 @@ const getWidgetElement = (
   classNames: string
 ): ReactElement | null => {
   const { hook, value1, value2, value3, nodeId } = props;
-  if (!hook || !value1) return null;
+  if (!hook) return null;
 
   switch (hook) {
     case 'youtube':
-      return value2 ? (
-        <div className={`${classNames} pointer-events-none`}>
-          <YouTubeWrapper embedCode={value1} title={value2} />
-        </div>
-      ) : null;
+      if (value1)
+        return value2 ? (
+          <div className={`${classNames} pointer-events-none`}>
+            <YouTubeWrapper embedCode={value1} title={value2} />
+          </div>
+        ) : null;
 
     case 'signup':
       return (
@@ -45,19 +46,21 @@ const getWidgetElement = (
       );
 
     case 'belief':
-      return value2 ? (
-        <div className={`${classNames} pointer-events-none`}>
-          <Belief value={{ slug: value1, scale: value2, extra: value3 }} />
-        </div>
-      ) : null;
+      if (value1)
+        return value2 ? (
+          <div className={`${classNames} pointer-events-none`}>
+            <Belief value={{ slug: value1, scale: value2, extra: value3 }} />
+          </div>
+        ) : null;
 
     case 'identifyAs':
-      return value2 ? (
-        <IdentifyAs
-          classNames={`${classNames} pointer-events-none`}
-          value={{ slug: value1, target: value2, extra: value3 || `` }}
-        />
-      ) : null;
+      if (value1)
+        return value2 ? (
+          <IdentifyAs
+            classNames={`${classNames} pointer-events-none`}
+            value={{ slug: value1, target: value2, extra: value3 || `` }}
+          />
+        ) : null;
 
     case 'toggle':
       return value2 ? (
@@ -90,9 +93,16 @@ const getWidgetElement = (
             <p className="text-sm font-bold text-gray-700">
               Interactive Disclosure
             </p>
-            <p className="mt-1 text-xs text-gray-500">
-              Belief Trigger: <code className="font-bold">{value1}</code>
-            </p>
+            {value1 ? (
+              <p className="mt-1 text-xs text-gray-500">
+                Mode: Belief-Driven (<code className="font-bold">{value1}</code>
+                )
+              </p>
+            ) : (
+              <p className="mt-1 text-xs text-gray-500">
+                Mode: Open (Custom Actions)
+              </p>
+            )}
           </div>
         </div>
       );

package/templates/src/components/edit/storyfragment/StoryFragmentPanel_og.tsx

@@ -187,21 +187,27 @@ const StoryFragmentOpenGraphPanel = ({
         (item) => item.type === 'Topic' && item.id === 'all-topics'
       );
 
-      // Convert topic strings to Topic objects with mock IDs (since V2 doesn't expose topic IDs in content map)
+      // Convert topic strings to Topic objects with mock IDs
       const allTopicsArray = topicsContent?.topics || [];
       const topicsWithIds: Topic[] = allTopicsArray.map(
         (topicTitle, index) => ({
-          id: index + 1, // Mock ID - in V2 we don't have access to actual topic IDs from content map
+          id: index + 1,
           title: topicTitle,
         })
       );
 
       setExistingTopics(topicsWithIds);
 
+      // Prioritize the description from the definitive fullContentMap
+      const sfContent = $contentMap.find(
+        (item) => item.type === 'StoryFragment' && item.id === nodeId
+      );
+      const initialDescription = sfContent?.description || '';
+      setDraftDetails(initialDescription);
+
       let initialTopics: Topic[] = [];
-      let initialDescription = '';
 
-      // Check stored draft data first
+      // Check stored draft data for topics
       if (storedData) {
         initialTopics = Array.isArray(storedData.topics)
           ? storedData.topics.map((t) => ({
@@ -209,29 +215,18 @@ const StoryFragmentOpenGraphPanel = ({
               title: t.title,
             }))
           : [];
-        initialDescription = storedData.description || '';
         setDraftTopics(initialTopics);
-        setDraftDetails(initialDescription);
+      } else if (sfContent && sfContent.topics && sfContent.topics.length > 0) {
+        // Fall back to content map data for initial topics if no draft exists
+        initialTopics = sfContent.topics.map((topicTitle) => {
+          const existingTopic = topicsWithIds.find(
+            (t) => t.title.toLowerCase() === topicTitle.toLowerCase()
+          );
+          return existingTopic || { id: -1, title: topicTitle };
+        });
+        setDraftTopics(initialTopics);
       } else {
-        // Fall back to content map data
-        const sfContent = $contentMap.find(
-          (item) => item.type === 'StoryFragment' && item.id === nodeId
-        );
-
-        if (sfContent && sfContent.topics && sfContent.topics.length > 0) {
-          initialTopics = sfContent.topics.map((topicTitle) => {
-            const existingTopic = topicsWithIds.find(
-              (t) => t.title.toLowerCase() === topicTitle.toLowerCase()
-            );
-            return existingTopic || { id: -1, title: topicTitle };
-          });
-          initialDescription = sfContent.description || '';
-          setDraftTopics(initialTopics);
-          setDraftDetails(initialDescription);
-        } else {
-          setDraftTopics([]);
-          setDraftDetails('');
-        }
+        setDraftTopics([]);
       }
 
       if (initialState.current) {

package/templates/src/components/edit/widgets/InteractiveDisclosureWidget.tsx

@@ -124,7 +124,6 @@ const DisclosureItemEditor = ({
   item,
   onUpdate,
   onToggle,
-  config,
   onMoveUp,
   onMoveDown,
   isFirst,
@@ -133,7 +132,6 @@ const DisclosureItemEditor = ({
   item: DisclosureItem;
   onUpdate: (updates: Partial<DisclosureItem>) => void;
   onToggle: () => void;
-  config: BrandConfig;
   onMoveUp: () => void;
   onMoveDown: () => void;
   isFirst: boolean;
@@ -258,6 +256,7 @@ export default function InteractiveDisclosureWidget({
   onUpdate,
   config,
 }: InteractiveDisclosureWidgetProps) {
+  const [mode, setMode] = useState<'belief' | 'open'>('belief');
   const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
   const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
   const [disclosures, setDisclosures] = useState<DisclosureItem[]>([]);
@@ -276,14 +275,16 @@ export default function InteractiveDisclosureWidget({
     const beliefTag = String(node.codeHookParams?.[0] || '');
     const payloadJson = String(node.codeHookParams?.[1] || '');
 
-    if (beliefs.length === 0 && beliefTag && beliefTag !== 'BELIEF') {
-      return;
+    if (beliefTag && beliefTag !== 'BELIEF') {
+      setMode('belief');
+    } else {
+      setMode('open');
     }
 
     setSelectedBeliefTag(beliefTag && beliefTag !== 'BELIEF' ? beliefTag : '');
     const currentBelief = beliefs.find((b) => b.slug === beliefTag);
 
-    if (payloadJson && currentBelief) {
+    if (payloadJson) {
       try {
         const parsed = JSON.parse(payloadJson);
         setWidgetStyles(
@@ -296,50 +297,62 @@ export default function InteractiveDisclosureWidget({
         const loadedDisclosures =
           (parsed.disclosures as StoredDisclosureItem[]) || [];
 
-        const scaleKeys =
-          currentBelief.scale === 'custom'
-            ? (currentBelief.customValues || []).map((v) => ({
-                slug: v,
-                name: v,
-              }))
-            : heldBeliefsScales[
-                currentBelief.scale as keyof typeof heldBeliefsScales
-              ] || [];
-
-        const actionCommand =
-          currentBelief.scale === 'custom' ? 'identifyAs' : 'declare';
-        const finalDisclosures: DisclosureItem[] = loadedDisclosures.map(
-          (loadedItem) => {
-            const isFromScale = scaleKeys.some(
-              (sk) => sk.slug === loadedItem.beliefValue
-            );
-
-            return {
+        if (currentBelief) {
+          const scaleKeys =
+            currentBelief.scale === 'custom'
+              ? (currentBelief.customValues || []).map((v) => ({
+                  slug: v,
+                  name: v,
+                }))
+              : heldBeliefsScales[
+                  currentBelief.scale as keyof typeof heldBeliefsScales
+                ] || [];
+
+          const actionCommand =
+            currentBelief.scale === 'custom' ? 'identifyAs' : 'declare';
+          const finalDisclosures: DisclosureItem[] = loadedDisclosures.map(
+            (loadedItem) => {
+              const isFromScale = scaleKeys.some(
+                (sk) => sk.slug === loadedItem.beliefValue
+              );
+
+              return {
+                ...loadedItem,
+                id: generateId(),
+                isCustom: !isFromScale,
+                actionLisp: isFromScale
+                  ? `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, loadedItem.beliefValue)})`
+                  : loadedItem.actionLisp,
+                isDisabled: false,
+              };
+            }
+          );
+          scaleKeys.forEach(({ slug, name }) => {
+            if (!finalDisclosures.some((d) => d.beliefValue === slug)) {
+              finalDisclosures.push({
+                id: generateId(),
+                beliefValue: slug,
+                title: name,
+                description: '',
+                icon: 'chat-heart-fill',
+                actionLisp: `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, slug)})`,
+                isCustom: false,
+                isDisabled: true,
+              });
+            }
+          });
+          setDisclosures(finalDisclosures);
+        } else {
+          const finalDisclosures: DisclosureItem[] = loadedDisclosures.map(
+            (loadedItem) => ({
               ...loadedItem,
               id: generateId(),
-              isCustom: !isFromScale,
-              actionLisp: isFromScale
-                ? `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, loadedItem.beliefValue)})`
-                : loadedItem.actionLisp,
+              isCustom: true,
               isDisabled: false,
-            };
-          }
-        );
-        scaleKeys.forEach(({ slug, name }) => {
-          if (!finalDisclosures.some((d) => d.beliefValue === slug)) {
-            finalDisclosures.push({
-              id: generateId(),
-              beliefValue: slug,
-              title: name,
-              description: '',
-              icon: 'chat-heart-fill',
-              actionLisp: `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, slug)})`,
-              isCustom: false,
-              isDisabled: true,
-            });
-          }
-        });
-        setDisclosures(finalDisclosures);
+            })
+          );
+          setDisclosures(finalDisclosures);
+        }
       } catch (e) {
         console.error('Error parsing disclosure payload:', e);
       }
@@ -417,6 +430,25 @@ export default function InteractiveDisclosureWidget({
     setDisclosures(newDisclosures);
   };
 
+  const handleModeChange = (newMode: 'belief' | 'open') => {
+    if (mode === newMode) return;
+
+    setMode(newMode);
+    setSelectedBeliefTag('');
+    setDisclosures([]);
+    setWidgetStyles({
+      textColor: '#000000',
+      bgColor: '#ffffff',
+      bgOpacity: 100,
+    });
+
+    if (newMode === 'open') {
+      onUpdate(['', '{}']);
+    } else {
+      onUpdate(['BELIEF', '{}']);
+    }
+  };
+
   const moveDisclosure = (id: string, direction: 'up' | 'down') => {
     const index = disclosures.findIndex((d) => d.id === id);
     if (index === -1) return;
@@ -477,35 +509,66 @@ export default function InteractiveDisclosureWidget({
 
   return (
     <div className="space-y-4">
-      <div className="flex items-center gap-2">
-        <select
-          value={selectedBeliefTag}
-          onChange={(e) => handleBeliefChange(e.target.value)}
-          className="flex-1 rounded-md border-gray-300 shadow-sm"
-          disabled={hasRealSelection}
-        >
-          <option value="">Select a Belief...</option>
-          {beliefs.map((b) => (
-            <option key={b.slug} value={b.slug}>
-              {b.title} ({b.scale})
-            </option>
-          ))}
-        </select>
-        {hasRealSelection && (
+      <div>
+        <label className="block text-xs font-bold text-gray-600">
+          Configuration Mode
+        </label>
+        <div className="isolate mt-1 inline-flex rounded-md shadow-sm">
           <button
             type="button"
-            onClick={() => {
-              setSelectedBeliefTag('');
-              setDisclosures([]);
-              onUpdate(['BELIEF', '{}']);
-            }}
-            className="rounded p-1 text-red-600 hover:bg-gray-100"
+            onClick={() => handleModeChange('belief')}
+            className={`relative inline-flex items-center rounded-l-md px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 focus:z-10 ${
+              mode === 'belief'
+                ? 'bg-cyan-600 text-white'
+                : 'bg-white text-gray-900 hover:bg-gray-50'
+            }`}
           >
-            <XMarkIcon className="h-5 w-5" />
+            Belief-Driven
           </button>
-        )}
+          <button
+            type="button"
+            onClick={() => handleModeChange('open')}
+            className={`relative -ml-px inline-flex items-center rounded-r-md px-3 py-2 text-sm font-semibold ring-1 ring-inset ring-gray-300 focus:z-10 ${
+              mode === 'open'
+                ? 'bg-cyan-600 text-white'
+                : 'bg-white text-gray-900 hover:bg-gray-50'
+            }`}
+          >
+            Open
+          </button>
+        </div>
       </div>
-      {hasRealSelection && (
+      {mode === 'belief' && (
+        <div className="flex items-center gap-2">
+          <select
+            value={selectedBeliefTag}
+            onChange={(e) => handleBeliefChange(e.target.value)}
+            className="flex-1 rounded-md border-gray-300 shadow-sm"
+            disabled={hasRealSelection}
+          >
+            <option value="">Select a Belief...</option>
+            {beliefs.map((b) => (
+              <option key={b.slug} value={b.slug}>
+                {b.title} ({b.scale})
+              </option>
+            ))}
+          </select>
+          {hasRealSelection && (
+            <button
+              type="button"
+              onClick={() => {
+                setSelectedBeliefTag('');
+                setDisclosures([]);
+                onUpdate(['BELIEF', '{}']);
+              }}
+              className="rounded p-1 text-red-600 hover:bg-gray-100"
+            >
+              <XMarkIcon className="h-5 w-5" />
+            </button>
+          )}
+        </div>
+      )}
+      {(hasRealSelection || mode === 'open') && (
         <div className="mt-4 border-t border-gray-200 pt-4">
           <button
             type="button"
@@ -513,8 +576,8 @@ export default function InteractiveDisclosureWidget({
             className="flex w-full items-center justify-center rounded-md bg-gray-100 px-3 py-2 text-sm font-bold text-gray-700 hover:bg-gray-200"
           >
             <ChevronDownIcon className="mr-2 h-5 w-5" />
-            Configure {disclosures.filter((d) => !d.isDisabled).length} of{' '}
-            {disclosures.length} Disclosure(s) & Styles
+            Configure {disclosures.filter((d) => !d.isDisabled).length}{' '}
+            Disclosure(s) & Styles
           </button>
         </div>
       )}
@@ -546,7 +609,8 @@ export default function InteractiveDisclosureWidget({
               <div className="flex h-full flex-col">
                 <div className="flex-shrink-0 border-b border-gray-200 bg-white px-6 py-3">
                   <Dialog.Title className="text-lg font-bold text-gray-900">
-                    Disclosure Configuration: {selectedBelief?.title}
+                    Disclosure Configuration
+                    {selectedBelief && `: ${selectedBelief.title}`}
                   </Dialog.Title>
                 </div>
                 <div className="flex-1 space-y-6 overflow-y-auto p-4">
@@ -614,7 +678,6 @@ export default function InteractiveDisclosureWidget({
                             updateDisclosure(item.id, updates)
                           }
                           onToggle={() => toggleDisclosure(item.id)}
-                          config={config}
                           onMoveUp={() => moveDisclosure(item.id, 'up')}
                           onMoveDown={() => moveDisclosure(item.id, 'down')}
                           isFirst={index === 0}

package/templates/src/components/storykeep/controls/content/KnownResourceForm.tsx

@@ -39,36 +39,25 @@ const FIELD_TYPES = [
   { value: 'image', label: 'Image' },
 ];
 
-const KnownResourceForm = ({
+const KnownResourceFormRenderer = ({
   categorySlug,
   contentMap,
   onClose,
-}: KnownResourceFormProps) => {
+  brandConfig,
+}: KnownResourceFormProps & { brandConfig: BrandConfig }) => {
   const [newFieldName, setNewFieldName] = useState('');
   const [showAddField, setShowAddField] = useState(false);
-  const [brandConfig, setBrandConfig] = useState<BrandConfig | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  useEffect(() => {
-    if (!brandConfig && !loading) {
-      setLoading(true);
-      getBrandConfig(window.TRACTSTACK_CONFIG?.tenantId || 'default')
-        .then(setBrandConfig)
-        .catch(console.error)
-        .finally(() => setLoading(false));
-    }
-  }, [brandConfig, loading]);
 
-  const knownResources = brandConfig?.KNOWN_RESOURCES || {};
   const isCreate = categorySlug === 'new';
-  const currentCategory = isCreate ? {} : knownResources[categorySlug] || {};
+  const knownResources = brandConfig.KNOWN_RESOURCES || {};
+  const currentCategory = isCreate ? {} : knownResources[categorySlug];
 
   const hasExistingResources =
     !isCreate && contentMap.some((item) => item.categorySlug === categorySlug);
 
   const initialState: KnownResourceState = {
     categorySlug: isCreate ? '' : categorySlug,
-    fields: isCreate ? {} : currentCategory,
+    fields: currentCategory,
   };
 
   const validator = (state: KnownResourceState): FieldErrors => {
@@ -90,8 +79,6 @@ const KnownResourceForm = ({
     validator,
     onSave: async (data) => {
       try {
-        // Update known resources in brand config
-        if (!brandConfig) throw new Error('Brand config not loaded');
         const brandState = convertToLocalState(brandConfig);
         const updatedKnownResources = {
           ...brandState.knownResources,
@@ -108,7 +95,6 @@ const KnownResourceForm = ({
           updatedBrandState
         );
 
-        // Call success callback after save (original pattern)
         setTimeout(() => {
           onClose?.(true);
         }, 1000);
@@ -179,7 +165,6 @@ const KnownResourceForm = ({
 
   return (
     <div className="space-y-8">
-      {/* Header */}
       <div className="border-b border-gray-200 pb-4">
         <h2 className="text-2xl font-bold text-gray-900">
           {isCreate ? 'Create Resource Category' : `Edit ${categorySlug}`}
@@ -200,7 +185,6 @@ const KnownResourceForm = ({
       </div>
 
       <div className="space-y-6">
-        {/* Category Name */}
         <StringInput
           label="Category Name"
           value={formState.state.categorySlug}
@@ -214,7 +198,6 @@ const KnownResourceForm = ({
           Must be lowercase with hyphens. Cannot be changed after creation.
         </p>
 
-        {/* Fields Section */}
         <div className="space-y-6">
           <div className="flex items-center justify-between">
             <h3 className="text-lg font-bold text-gray-900">Fields</h3>
@@ -228,7 +211,6 @@ const KnownResourceForm = ({
             </button>
           </div>
 
-          {/* Add Field Form */}
           {showAddField && (
             <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
               <h4 className="mb-3 text-sm font-bold text-gray-900">
@@ -264,7 +246,6 @@ const KnownResourceForm = ({
             </div>
           )}
 
-          {/* Existing Fields */}
           {Object.keys(formState.state.fields).length === 0 ? (
             <div className="py-6 text-center text-gray-500">
               No fields defined yet. Click "Add Field" to create your first
@@ -275,7 +256,6 @@ const KnownResourceForm = ({
               {Object.entries(formState.state.fields).map(
                 ([fieldName, fieldDef]) => {
                   const locked = isFieldLocked(fieldName);
-
                   return (
                     <div
                       key={fieldName}
@@ -304,7 +284,6 @@ const KnownResourceForm = ({
                           </button>
                         )}
                       </div>
-
                       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                         <EnumSelect
                           label="Type"
@@ -315,7 +294,6 @@ const KnownResourceForm = ({
                           options={FIELD_TYPES}
                           disabled={locked}
                         />
-
                         <BooleanToggle
                           label="Optional"
                           value={fieldDef.optional || false}
@@ -324,7 +302,6 @@ const KnownResourceForm = ({
                           }
                           disabled={locked}
                         />
-
                         {fieldDef.type === 'categoryReference' && (
                           <EnumSelect
                             label="Reference Category"
@@ -341,7 +318,6 @@ const KnownResourceForm = ({
                             disabled={locked}
                           />
                         )}
-
                         {fieldDef.type === 'number' && (
                           <>
                             <NumberInput
@@ -372,7 +348,6 @@ const KnownResourceForm = ({
         </div>
       </div>
 
-      {/* Save/Cancel Bar */}
       <UnsavedChangesBar
         formState={formState}
         message="You have unsaved resource category changes"
@@ -380,7 +355,6 @@ const KnownResourceForm = ({
         cancelLabel="Discard Changes"
       />
 
-      {/* Cancel Navigation Button */}
       <div className="flex justify-start">
         <button
           type="button"
@@ -394,4 +368,60 @@ const KnownResourceForm = ({
   );
 };
 
+const KnownResourceForm = ({
+  categorySlug,
+  contentMap,
+  onClose,
+}: KnownResourceFormProps) => {
+  const [brandConfig, setBrandConfig] = useState<BrandConfig | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    getBrandConfig(window.TRACTSTACK_CONFIG?.tenantId || 'default')
+      .then(setBrandConfig)
+      .catch((err) => {
+        console.error('Failed to load brand configuration:', err);
+        setError(
+          'Could not load resource category configuration. Please try again.'
+        );
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="py-12 text-center text-gray-500">
+        Loading configuration...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-md bg-red-50 p-4 text-center text-red-700">
+        {error}
+      </div>
+    );
+  }
+
+  const isCreate = categorySlug === 'new';
+  if (!isCreate && !(brandConfig?.KNOWN_RESOURCES || {})[categorySlug]) {
+    return (
+      <div className="py-12 text-center text-gray-500">
+        Resource category "{categorySlug}" not found.
+      </div>
+    );
+  }
+
+  return (
+    <KnownResourceFormRenderer
+      categorySlug={categorySlug}
+      contentMap={contentMap}
+      onClose={onClose}
+      brandConfig={brandConfig!}
+    />
+  );
+};
+
 export default KnownResourceForm;

package/templates/src/layouts/Layout.astro

@@ -22,6 +22,7 @@ export interface Props {
   brandConfig?: any;
   storyfragmentId?: string;
   sessionId?: string;
+  description?: string;
   impressions?: ImpressionNode[];
 }
 

package/templates/src/pages/[...slug]/edit.astro

@@ -125,6 +125,9 @@ const ogImage = storyFragment?.socialImagePath
 const fullContentMap = await getFullContentMap(
   Astro.locals.tenant?.id || import.meta.env.PUBLIC_TENANTID || 'default'
 );
+const description = fullContentMap.find(
+  (item) => item.id === storyFragmentID
+)?.description;
 const urlParams: Record<string, string | boolean> = {};
 for (const [key, value] of Astro.url.searchParams) {
   urlParams[key] = value === '' ? true : value;
@@ -133,6 +136,7 @@ for (const [key, value] of Astro.url.searchParams) {
 
 <Layout
   title={title}
+  description={description}
   slug={slug}
   canonicalURL={canonicalURL}
   pubDatetime={pubDatetime}
@@ -219,5 +223,5 @@ for (const [key, value] of Astro.url.searchParams) {
 
 <script>
   import { setupLayoutObservers } from '@/utils/layout';
-  setupLayoutObservers();
+  document.addEventListener('astro:page-load', setupLayoutObservers);
 </script>

package/templates/src/pages/[...slug].astro

@@ -99,6 +99,9 @@ if (!fragmentsData) {
 }
 
 const fullContentMap = await getFullContentMap(tenantId);
+const description = fullContentMap.find(
+  (item) => item.id === storyfragmentId
+)?.description;
 const brandConfig = await getBrandConfig(tenantId);
 
 if (!brandConfig.SITE_INIT) {
@@ -118,6 +121,7 @@ paneIds.forEach((paneId: string) => {
 
 <Layout
   title={storyfragmentTitle}
+  description={description}
   slug={lookup || brandConfig.HOME_SLUG}
   ogImage={ogImage}
   menu={storyData.menu || null}

package/templates/src/utils/layout.ts

@@ -8,15 +8,41 @@ import {
 import { debounce } from '@/utils/helpers';
 
 let hasScrolledForSettingsPanel = false;
+let currentPaneObserver: IntersectionObserver | null = null;
+let settingsPanelSubscription: (() => void) | null = null;
+let debouncedUpdateListener: (() => void) | null = null;
+
+function cleanupLayoutObservers() {
+  if (currentPaneObserver) {
+    currentPaneObserver.disconnect();
+    currentPaneObserver = null;
+  }
+  if (settingsPanelSubscription) {
+    settingsPanelSubscription();
+    settingsPanelSubscription = null;
+  }
+  if (debouncedUpdateListener) {
+    window.removeEventListener('scroll', debouncedUpdateListener);
+    window.removeEventListener('resize', debouncedUpdateListener);
+    debouncedUpdateListener = null;
+  }
+  const storykeepHeader = document.getElementById('storykeepHeader');
+  if (storykeepHeader) {
+    document.body.style.paddingTop = '';
+    storykeepHeader.style.position = '';
+    storykeepHeader.style.top = '';
+  }
+}
 
-// Replace your existing setupPaneObserver with this one.
 function setupPaneObserver() {
-  let currentObserver: IntersectionObserver | null = null;
+  if (currentPaneObserver) {
+    currentPaneObserver.disconnect();
+  }
 
-  settingsPanelStore.subscribe((signalValue) => {
-    if (currentObserver) {
-      currentObserver.disconnect();
-      currentObserver = null;
+  settingsPanelSubscription = settingsPanelStore.subscribe((signalValue) => {
+    if (currentPaneObserver) {
+      currentPaneObserver.disconnect();
+      currentPaneObserver = null;
     }
 
     if (signalValue && signalValue.nodeId) {
@@ -28,7 +54,7 @@ function setupPaneObserver() {
           document.querySelector(`[data-node-id="${nodeId}"]`);
 
         if (targetElement) {
-          currentObserver = new IntersectionObserver(
+          currentPaneObserver = new IntersectionObserver(
             ([entry]) => {
               const signal = settingsPanelStore.get();
               const now = Date.now();
@@ -41,7 +67,7 @@ function setupPaneObserver() {
             },
             { threshold: 0 }
           );
-          currentObserver.observe(targetElement);
+          currentPaneObserver.observe(targetElement);
         }
       }, 100);
     }
@@ -49,6 +75,8 @@ function setupPaneObserver() {
 }
 
 export function setupLayoutObservers(): void {
+  cleanupLayoutObservers();
+
   const storykeepHeader = document.getElementById('storykeepHeader');
   const settingsControls = document.getElementById('settingsControls');
   const standardHeader = document.querySelector('header');
@@ -86,7 +114,7 @@ export function setupLayoutObservers(): void {
     }
   };
 
-  const debouncedUpdate = debounce(() => {
+  debouncedUpdateListener = debounce(() => {
     updateStandardHeaderHeight();
     handleScroll();
     updatePanelPosition();
@@ -98,8 +126,8 @@ export function setupLayoutObservers(): void {
     }
   };
 
-  window.addEventListener('scroll', debouncedUpdate, { passive: true });
-  window.addEventListener('resize', debouncedUpdate);
+  window.addEventListener('scroll', debouncedUpdateListener, { passive: true });
+  window.addEventListener('resize', debouncedUpdateListener);
   settingsPanelOpenStore.subscribe(handleSettingsPanelChange);
 
   setupPaneObserver();
@@ -128,3 +156,5 @@ export function handleSettingsPanelMobile(isOpen: boolean): void {
     hasScrolledForSettingsPanel = false;
   }
 }
+
+document.addEventListener('astro:before-swap', cleanupLayoutObservers);