astro-tractstack 2.0.3 → 2.0.7

package/dist/index.js

@@ -1,6 +1,6 @@
 import { fileURLToPath as d } from "node:url";
 import { dirname as i, resolve as l } from "node:path";
-import { existsSync as r, mkdirSync as x, copyFileSync as k, writeFileSync as u } from "node:fs";
+import { existsSync as n, mkdirSync as x, copyFileSync as k, writeFileSync as u } from "node:fs";
 import { resolve as a } from "path";
 function b(t) {
   const e = i(d(t));
@@ -10,7 +10,7 @@ function b(t) {
 }
 function g(t, e) {
   e.info("TractStack configuration applied"), t.enableMultiTenant && e.info("Multi-tenant mode enabled"), t.includeExamples && e.info("Example components will be included");
-  const c = process.env.PUBLIC_GO_BACKEND, o = process.env.PUBLIC_TENANTID;
+  const c = process.env.PUBLIC_GO_BACKEND, r = process.env.PUBLIC_TENANTID;
   if (!c)
     e.warn("PUBLIC_GO_BACKEND not set - this will be required at runtime");
   else
@@ -19,11 +19,11 @@ function g(t, e) {
     } catch {
       e.error(`PUBLIC_GO_BACKEND is not a valid URL: ${c}`);
     }
-  return o ? /^[a-zA-Z0-9_-]+$/.test(o) ? e.info(`Tenant ID validated: ${o}`) : e.error(`PUBLIC_TENANTID contains invalid characters: ${o}`) : e.warn("PUBLIC_TENANTID not set - this will be required at runtime"), t;
+  return r ? /^[a-zA-Z0-9_-]+$/.test(r) ? e.info(`Tenant ID validated: ${r}`) : e.error(`PUBLIC_TENANTID contains invalid characters: ${r}`) : e.warn("PUBLIC_TENANTID not set - this will be required at runtime"), t;
 }
 async function w(t, e, c) {
   e.info("TractStack: Injecting template files");
-  const o = [
+  const r = [
     // Core Configuration
     {
       src: t("../templates/env.example"),
@@ -564,6 +564,10 @@ async function w(t, e, c) {
       src: t("../templates/src/stores/backend.ts"),
       dest: "src/stores/backend.ts"
     },
+    {
+      src: t("../templates/src/stores/resources.ts"),
+      dest: "src/stores/resources.ts"
+    },
     // Compositor stores
     {
       src: t("../templates/src/stores/nodes.ts"),
@@ -1298,6 +1302,10 @@ async function w(t, e, c) {
       src: t("../templates/src/lib/session.ts"),
       dest: "src/lib/session.ts"
     },
+    {
+      src: t("../templates/src/lib/resources.ts"),
+      dest: "src/lib/resources.ts"
+    },
     // Client Scripts
     {
       src: t("../templates/src/client/htmx.min.js"),
@@ -2056,6 +2064,13 @@ async function w(t, e, c) {
       dest: "src/custom/CustomRoutes.astro",
       protected: !0
     },
+    {
+      src: t(
+        c?.includeExamples ? "../templates/custom/with-examples/HeaderWidget.astro" : "../templates/custom/minimal/HeaderWidget.astro"
+      ),
+      dest: "src/custom/HeaderWidget.astro",
+      protected: !0
+    },
     {
       src: t("../templates/src/utils/customHelpers.ts"),
       dest: "src/utils/customHelpers.ts",
@@ -2099,13 +2114,13 @@ async function w(t, e, c) {
       }
     ] : []
   ];
-  for (const s of o)
+  for (const s of r)
     try {
       const p = i(s.dest);
-      r(p) || x(p, { recursive: !0 });
-      const n = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
-      if (!r(s.dest) || n)
-        if (r(s.src))
+      n(p) || x(p, { recursive: !0 });
+      const o = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
+      if (!n(s.dest) || o)
+        if (n(s.src))
           k(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
           const m = _(s.dest);
@@ -2113,8 +2128,8 @@ async function w(t, e, c) {
         }
       else s.protected ? e.info(`Protected: ${s.dest} (skipped overwrite)`) : e.info(`Skipped existing ${s.dest}`);
     } catch (p) {
-      const n = p instanceof Error ? p.message : String(p);
-      e.error(`Failed to create ${s.dest}: ${n}`);
+      const o = p instanceof Error ? p.message : String(p);
+      e.error(`Failed to create ${s.dest}: ${o}`);
     }
 }
 function _(t) {
@@ -2133,7 +2148,7 @@ function C(t = {}) {
   return {
     name: "astro-tractstack",
     hooks: {
-      "astro:config:setup": async ({ config: c, updateConfig: o, logger: s }) => {
+      "astro:config:setup": async ({ config: c, updateConfig: r, logger: s }) => {
         g(t, s);
         const p = t.enableMultiTenant || !1;
         if (s.info(
@@ -2153,7 +2168,7 @@ function C(t = {}) {
           ), new Error(
             "TractStack requires an SSR adapter. Please add @astrojs/node adapter to your astro.config.mjs"
           );
-        o({
+        r({
           vite: {
             define: {
               __TRACTSTACK_VERSION__: JSON.stringify("2.0.0-alpha.1"),

package/package.json

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

package/templates/custom/minimal/HeaderWidget.astro

@@ -0,0 +1,35 @@
+---
+/*
+// ========================================================================================
+// CUSTOM HEADER WIDGET
+// ========================================================================================
+// This widget is rendered on every page above the main header. It is designed to
+// fetch and display site-wide content, such as promotional banners or alerts.
+//
+// To activate this component:
+// 1. Uncomment all the code within these '---' fences.
+// 2. Define your desired resource categories in the `resourceCategories` array.
+// 3. Add your Astro/HTML markup in the empty space after the closing '---' below.
+// ========================================================================================
+
+// --- UNCOMMENT BELOW TO ACTIVATE ---
+
+// import { getHeaderResources } from '@/lib/resources';
+// import type { ResourceNode } from '@/types/compositorTypes';
+
+// export interface Props {
+//   tenantId: string;
+// }
+// const { tenantId } = Astro.props;
+
+// // Add the slugs of the resource categories you want to fetch here.
+// const resourceCategories = []; // e.g., ['promotions', 'site-alerts']
+
+// // This function automatically fetches and caches the resources.
+// const resources: ResourceNode[] =
+//   resourceCategories.length > 0
+//     ? await getHeaderResources(tenantId, resourceCategories)
+//     : [];
+
+*/
+---

package/templates/custom/with-examples/HeaderWidget.astro

@@ -0,0 +1,35 @@
+---
+/*
+// ========================================================================================
+// CUSTOM HEADER WIDGET
+// ========================================================================================
+// This widget is rendered on every page above the main header. It is designed to
+// fetch and display site-wide content, such as promotional banners or alerts.
+//
+// To activate this component:
+// 1. Uncomment all the code within these '---' fences.
+// 2. Define your desired resource categories in the `resourceCategories` array.
+// 3. Add your Astro/HTML markup in the empty space after the closing '---' below.
+// ========================================================================================
+
+// --- UNCOMMENT BELOW TO ACTIVATE ---
+
+// import { getHeaderResources } from '@/lib/resources';
+// import type { ResourceNode } from '@/types/compositorTypes';
+
+// export interface Props {
+//   tenantId: string;
+// }
+// const { tenantId } = Astro.props;
+
+// // Add the slugs of the resource categories you want to fetch here.
+// const resourceCategories = []; // e.g., ['promotions', 'site-alerts']
+
+// // This function automatically fetches and caches the resources.
+// const resources: ResourceNode[] =
+//   resourceCategories.length > 0
+//     ? await getHeaderResources(tenantId, resourceCategories)
+//     : [];
+
+*/
+---

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/panels/StyleLinkPanel_config.tsx

@@ -67,8 +67,20 @@ const StyleLinkConfigPanel = ({ node, config }: StyleLinkConfigPanelProps) => {
         linkNode.tagName = 'button';
       } else if (callbackPayload.startsWith('(bunnyMoment')) {
         linkNode.tagName = 'button';
-        newButtonPayload.bunnyPayload =
-          (tokens && preParseBunny([tokens])) ?? undefined;
+        if (
+          tokens &&
+          Array.isArray(tokens) &&
+          tokens[0] === 'bunnyMoment' &&
+          Array.isArray(tokens[1])
+        ) {
+          const params = tokens[1];
+          if (params.length === 2) {
+            newButtonPayload.bunnyPayload = {
+              videoId: String(params[0]),
+              t: String(params[1]),
+            };
+          }
+        }
       } else if (callbackPayload.startsWith('(goto')) {
         const targetUrl =
           tokens && preParseAction([tokens], slug, isContext, config);

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/form/ActionBuilderField.tsx

@@ -87,10 +87,11 @@ export default function ActionBuilderField({
       return;
     }
 
-    if (command === 'identifyAs') {
+    if (command === 'bunnyMoment') {
+      onChange(trimmedParams);
+    } else if (command === 'identifyAs') {
       const firstSpaceIndex = trimmedParams.indexOf(' ');
       if (firstSpaceIndex === -1) {
-        // Handle case with only beliefId and no value
         onChange(`(${command} ${trimmedParams})`);
       } else {
         const beliefId = trimmedParams.substring(0, firstSpaceIndex);
@@ -99,7 +100,6 @@ export default function ActionBuilderField({
         onChange(`(${command} ${beliefId} ${finalValue})`);
       }
     } else {
-      // Original behavior for all other commands
       onChange(`(${command} ${trimmedParams})`);
     }
   };

package/templates/src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import { ClientRouter } from 'astro:transitions';
+import HeaderWidget from '@/custom/HeaderWidget.astro';
 import Header from '@/components/Header.astro';
 import Footer from '@/components/Footer.astro';
 import { getBrandConfig } from '@/utils/api/brandConfig';
@@ -22,6 +23,7 @@ export interface Props {
   brandConfig?: any;
   storyfragmentId?: string;
   sessionId?: string;
+  description?: string;
   impressions?: ImpressionNode[];
 }
 
@@ -237,6 +239,7 @@ const enableBunny = import.meta.env.PUBLIC_ENABLE_BUNNY === 'true';
   </head>
   <body class="font-main w-full">
     <div class="overflow-hidden">
+      {!isStoryKeep && !isEditor && <HeaderWidget tenantId={tenantId} />}
       {
         !isEditor && (
           <Header

package/templates/src/lib/resources.ts

@@ -0,0 +1,69 @@
+import { headerResourcesStore, HEADER_RESOURCES_TTL } from '@/stores/resources';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+/**
+ * Fetches resource nodes based on categories, with server-side in-memory caching
+ * to prevent redundant API calls for high-traffic, site-wide components.
+ *
+ * @param tenantId The ID of the current tenant.
+ * @param categories An array of resource category slugs to fetch.
+ * @param ttl Optional. The Time-To-Live for the cache in milliseconds. Defaults to 5 minutes.
+ * @returns A promise that resolves to an array of ResourceNode objects.
+ */
+export async function getHeaderResources(
+  tenantId: string,
+  categories: string[],
+  ttl: number = HEADER_RESOURCES_TTL
+): Promise<ResourceNode[]> {
+  const cache = headerResourcesStore.get();
+  const now = Date.now();
+
+  // If we have fresh data in the cache, return it immediately.
+  if (cache.data.length > 0 && now - cache.lastFetched < ttl) {
+    return cache.data;
+  }
+
+  // If no categories are requested, there's nothing to fetch.
+  if (!categories || categories.length === 0) {
+    return [];
+  }
+
+  const goBackend =
+    import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+
+  try {
+    // THIS IS THE CORRECTED ENDPOINT
+    const response = await fetch(`${goBackend}/api/v1/nodes/resources`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-Tenant-ID': tenantId,
+      },
+      body: JSON.stringify({ categories }),
+    });
+
+    if (!response.ok) {
+      console.error(
+        `Failed to fetch header resources. Status: ${response.status}`
+      );
+      // Gracefully degrade: return old data if we have it, otherwise an empty array.
+      return cache.data;
+    }
+
+    // The backend returns a payload like { resources: [...] }
+    const responsePayload = await response.json();
+    const resources: ResourceNode[] = responsePayload.resources || [];
+
+    // Update the store with the new data and timestamp.
+    headerResourcesStore.set({
+      data: resources,
+      lastFetched: now,
+    });
+
+    return resources;
+  } catch (error) {
+    console.error('Error fetching header resources:', error);
+    // On network error, also return stale data if available.
+    return cache.data;
+  }
+}

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/stores/resources.ts

@@ -0,0 +1,17 @@
+import { atom } from 'nanostores';
+import type { ResourceNode } from '@/types/compositorTypes';
+
+export interface ResourcesCache {
+  data: ResourceNode[];
+  lastFetched: number;
+}
+
+// Initialize with an empty state. This atom will live on the server and persist
+// across page requests for the lifetime of the server instance.
+export const headerResourcesStore = atom<ResourcesCache>({
+  data: [],
+  lastFetched: 0,
+});
+
+// Default Time-To-Live for the cache: 5 minutes in milliseconds.
+export const HEADER_RESOURCES_TTL = 5 * 60 * 1000;

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);

package/utils/inject-files.ts

@@ -566,6 +566,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/stores/backend.ts'),
       dest: 'src/stores/backend.ts',
     },
+    {
+      src: resolve('../templates/src/stores/resources.ts'),
+      dest: 'src/stores/resources.ts',
+    },
 
     // Compositor stores
     {
@@ -1322,6 +1326,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/lib/session.ts'),
       dest: 'src/lib/session.ts',
     },
+    {
+      src: resolve('../templates/src/lib/resources.ts'),
+      dest: 'src/lib/resources.ts',
+    },
 
     // Client Scripts
     {
@@ -2098,6 +2106,15 @@ export async function injectTemplateFiles(
       dest: 'src/custom/CustomRoutes.astro',
       protected: true,
     },
+    {
+      src: resolve(
+        config?.includeExamples
+          ? '../templates/custom/with-examples/HeaderWidget.astro'
+          : '../templates/custom/minimal/HeaderWidget.astro'
+      ),
+      dest: 'src/custom/HeaderWidget.astro',
+      protected: true,
+    },
     {
       src: resolve('../templates/src/utils/customHelpers.ts'),
       dest: 'src/utils/customHelpers.ts',