astro-tractstack 2.0.0-rc.62 → 2.0.0-rc.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.0-rc.62",
+  "version": "2.0.0-rc.64",
   "description": "Astro integration for TractStack - redeeming the web from boring experiences",
   "type": "module",
   "main": "dist/index.js",
@@ -55,7 +55,7 @@
     "@ark-ui/react": "^5.21.0",
     "@astrojs/react": "^3.6.3",
     "@heroicons/react": "^2.1.1",
-    "@internationalized/date": "3.8.2",
+    "@internationalized/date": "^3.9.0",
     "@mhsdesign/jit-browser-tailwindcss": "^0.4.2",
     "@nanostores/persistent": "^1.1.0",
     "@nanostores/react": "^1.0.0",

package/templates/src/client/belief-events.js

@@ -1,8 +1,10 @@
 const VERBOSE = false;
 
-// This function now contains all essential one-time and recurring HTMX setup.
 function configureHtmx() {
-  if (!window.htmx) return;
+  if (!window.htmx || window.HTMX_LISTENER_ATTACHED) {
+    return;
+  }
+  window.HTMX_LISTENER_ATTACHED = true;
 
   if (!window.HTMX_CONFIGURED) {
     window.htmx.config.selfRequestsOnly = false;
@@ -11,13 +13,12 @@ function configureHtmx() {
 
   window.htmx.on(document.body, 'htmx:configRequest', function (evt) {
     const config = window.TRACTSTACK_CONFIG;
-    if (!config || !config.sessionId) return; // Check for config and session ID
+    if (!config || !config.sessionId) return;
 
     if (evt.detail.path && evt.detail.path.startsWith('/api/v1/')) {
       evt.detail.path = config.backendUrl + evt.detail.path;
     }
 
-    // MODIFIED: Use session ID from the global config object
     const sessionId = config.sessionId;
     evt.detail.headers['X-Tenant-ID'] = config.tenantId;
     evt.detail.headers['X-StoryFragment-ID'] = config.storyfragmentId;
@@ -25,6 +26,27 @@ function configureHtmx() {
       evt.detail.headers['X-TractStack-Session-ID'] = sessionId;
     }
   });
+
+  window.htmx.on(document.body, 'htmx:beforeRequest', async function (evt) {
+    const params = evt.detail.requestConfig.parameters;
+    if (params && params.beliefVerb === 'IDENTIFY_AS') {
+      evt.preventDefault();
+
+      const originalPayload = params;
+      const unsetPayload = {
+        unsetBeliefIds: originalPayload.beliefId,
+        paneId: originalPayload.paneId || '',
+      };
+
+      try {
+        await sendBeliefUpdate(unsetPayload);
+        await sendBeliefUpdate(originalPayload);
+      } catch (error) {
+        if (VERBOSE)
+          console.error('🔴 BELIEF: Two-step identifyAs update failed', error);
+      }
+    }
+  });
 }
 
 const pageBeliefs = {};
@@ -32,7 +54,6 @@ let activeStoryfragmentId = null;
 
 function waitForSessionReady() {
   return new Promise((resolve) => {
-    // This event is fired by sse.ts after the handshake is complete.
     if (window.TRACTSTACK_CONFIG?.session?.isReady) {
       resolve();
     } else {
@@ -54,7 +75,7 @@ function initializeBeliefs() {
       '🔧 BELIEF: First-time initialization of belief handlers and HTMX config.'
     );
 
-  configureHtmx(); // Run config on initial load.
+  configureHtmx();
 
   document.addEventListener('change', function (event) {
     const target = event.target;
@@ -96,7 +117,6 @@ async function handleBeliefChange(element) {
 
   trackBeliefState(beliefId, beliefValue);
 
-  // Pass the current page's beliefs to the backend
   await sendBeliefUpdate({
     beliefId,
     beliefType,
@@ -110,7 +130,7 @@ async function sendBeliefUpdate(data) {
 
   try {
     const config = window.TRACTSTACK_CONFIG;
-    if (!config || !config.sessionId) return; // Check for config and session ID
+    if (!config || !config.sessionId) return;
 
     if (VERBOSE)
       console.log('🚨 FRONTEND DEBUG: Sending belief update with headers:', {
@@ -170,7 +190,7 @@ function setActiveStoryFragment() {
       console.log(
         `📖 BELIEF: Active story fragment set to ${activeStoryfragmentId}`
       );
-    // Ensure a state object exists for the newly active page
+
     if (!pageBeliefs[activeStoryfragmentId]) {
       pageBeliefs[activeStoryfragmentId] = {};
     }
@@ -184,7 +204,6 @@ document.addEventListener('astro:page-load', () => {
   setActiveStoryFragment();
 });
 
-// Also set the active story on the very first page load.
 document.addEventListener('DOMContentLoaded', setActiveStoryFragment);
 
 if (VERBOSE)

package/templates/src/client/sse.js

@@ -481,23 +481,41 @@ function processStoryfragmentUpdate(update) {
   log(`📊 Refresh summary: ${refreshedCount} successful, ${errorCount} failed`);
 
   if (update.gotoPaneId) {
-    const targetElement = document.getElementById(`pane-${update.gotoPaneId}`);
-    if (targetElement) {
-      log(`🔍 Scrolling to target pane: ${update.gotoPaneId}`);
-      try {
-        targetElement.scrollIntoView({ behavior: 'smooth' });
-        log('✅ Scroll completed successfully');
-      } catch (error) {
-        log('❌ Scroll failed:', error);
+    // Wait a brief moment for the DOM to update and the element to become visible.
+    setTimeout(() => {
+      const targetElement = document.getElementById(
+        `pane-${update.gotoPaneId}`
+      );
+      if (targetElement) {
+        log(`🔍 Smart scrolling to target pane: ${update.gotoPaneId}`);
+        try {
+          const elementRect = targetElement.getBoundingClientRect();
+          const viewportHeight = window.innerHeight;
+
+          // If the element is taller than the viewport, just scroll to the top of it.
+          if (elementRect.height > viewportHeight) {
+            targetElement.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start',
+            });
+            log('✅ Scroll completed (long element - align to top).');
+          } else {
+            // Otherwise, center it in the viewport.
+            targetElement.scrollIntoView({
+              behavior: 'smooth',
+              block: 'center',
+            });
+            log('✅ Scroll completed (short element - align to center).');
+          }
+        } catch (error) {
+          log('❌ Smart scroll failed:', error);
+        }
+      } else {
+        log(
+          `⚠️  Target pane element not found after delay: pane-${update.gotoPaneId}`
+        );
       }
-    } else {
-      log(`⚠️  Target pane element not found: pane-${update.gotoPaneId}`, {
-        expectedId: `pane-${update.gotoPaneId}`,
-        availablePaneElements: Array.from(
-          document.querySelectorAll('[id^="pane-"]')
-        ).map((el) => el.id),
-      });
-    }
+    }, 100);
   }
 
   log('🔄 === UPDATE PROCESSING COMPLETE ===');

package/templates/src/components/Menu.tsx

@@ -64,7 +64,6 @@ const MenuComponent = (props: MenuProps) => {
   const { payload, slug, isContext, brandConfig } = props;
   const thisPayload = payload.optionsPayload;
 
-  // Helper function to process menu links - MODIFIED to build the correct hx-vals payload
   function processMenuLink(e: MenuLink): ProcessedMenuLinkDatum {
     const item = { ...e } as ProcessedMenuLinkDatum;
     const actionLisp = item.actionLisp?.trim();
@@ -83,35 +82,36 @@ const MenuComponent = (props: MenuProps) => {
         return item;
       }
 
-      if (
-        actionLisp.startsWith('(declare') ||
-        actionLisp.startsWith('(identifyAs')
-      ) {
-        const tokens = lispLexer(actionLisp);
-        const commandExpression = (
-          tokens?.[0] as LispToken[]
-        )?.[0] as LispToken[];
-        const command = commandExpression?.[0] as string;
-        const parameters = commandExpression?.[1] as (string | number)[];
-        const beliefId = parameters?.[0];
-        const value = parameters?.[1];
+      const [lispTokens] = lispLexer(actionLisp);
+
+      if (lispTokens && lispTokens.length > 0) {
+        // Deconstruct the nested structure: e.g., ['declare', ['HotLead', 'BELIEVES_YES']]
+        const tokens = lispTokens[0] as LispToken[];
+
+        if (
+          (tokens[0] === 'declare' || tokens[0] === 'identifyAs') &&
+          Array.isArray(tokens[1]) &&
+          tokens[1].length >= 2
+        ) {
+          const command = tokens[0] as string;
+          const params = tokens[1] as (string | number)[];
+          const beliefId = params[0] as string;
+          const value = params[1] as string;
 
-        if (command && beliefId !== undefined && value !== undefined) {
           let hxValsMap: { [key: string]: string } = {};
 
-          // CORRECTED: Build the hx-vals payload to match server expectations.
           if (command === 'declare') {
             hxValsMap = {
-              beliefId: String(beliefId),
-              beliefType: 'Belief', // This was the missing required field.
-              beliefValue: String(value), // Key changed from beliefVerb to beliefValue.
+              beliefId: beliefId,
+              beliefType: 'Belief',
+              beliefValue: value,
             };
           } else if (command === 'identifyAs') {
             hxValsMap = {
-              beliefId: String(beliefId),
-              beliefType: 'Belief', // This was the missing required field.
-              beliefVerb: 'IDENTIFY_AS', // This is specific to identifyAs.
-              beliefObject: String(value),
+              beliefId: beliefId,
+              beliefType: 'Belief',
+              beliefVerb: 'IDENTIFY_AS',
+              beliefObject: value,
             };
           }
 
@@ -129,12 +129,10 @@ const MenuComponent = (props: MenuProps) => {
       );
     }
 
-    // Fallback for unknown commands or parsing failures
     item.renderAs = 'span';
     return item;
   }
 
-  // Process featured and additional links using the modified helper
   const featuredLinks = thisPayload
     .filter((e: MenuLink) => e.featured)
     .map(processMenuLink);
@@ -142,7 +140,6 @@ const MenuComponent = (props: MenuProps) => {
     .filter((e: MenuLink) => !e.featured)
     .map(processMenuLink);
 
-  // Helper component to render either a link or a button, avoiding repetition.
   const InteractiveMenuItem = ({ item }: { item: ProcessedMenuLinkDatum }) => {
     if (item.renderAs === 'button') {
       return (
@@ -173,7 +170,6 @@ const MenuComponent = (props: MenuProps) => {
       );
     }
 
-    // Fallback for 'span'
     return (
       <span
         className="text-mydarkgrey block text-2xl font-bold leading-6 opacity-50"

package/templates/src/components/edit/pane/PanePanel_path.tsx

@@ -60,7 +60,6 @@ const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
       if (!idsResponse.ok) throw new Error('Failed to fetch belief IDs');
 
       const idsResult = await idsResponse.json();
-      // CORRECTED: The key from the backend is "beliefIds", not "beliefs"
       if (!idsResult.beliefIds || idsResult.beliefIds.length === 0) {
         setAvailableBeliefs([]);
         setIsLoading(false);
@@ -74,7 +73,6 @@ const PaneMagicPathPanel = ({ nodeId, setMode }: PaneMagicPathPanelProps) => {
           'Content-Type': 'application/json',
           'X-Tenant-ID': tenantId,
         },
-        // CORRECTED: Pass the array from the correct key "beliefIds"
         body: JSON.stringify({ beliefIds: idsResult.beliefIds }),
       });
 

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

@@ -18,22 +18,30 @@ import ArrowUturnLeftIcon from '@heroicons/react/24/outline/ArrowUturnLeftIcon';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import CheckIcon from '@heroicons/react/24/outline/CheckIcon';
 import ChevronUpDownIcon from '@heroicons/react/24/outline/ChevronUpDownIcon';
+import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
+import ArrowUpIcon from '@heroicons/react/24/outline/ArrowUpIcon';
+import ArrowDownIcon from '@heroicons/react/24/outline/ArrowDownIcon';
 
 interface DisclosureItem {
   id: string;
   beliefValue: string;
+  isCustom: boolean;
   title: string;
   description?: string;
   icon: string;
   actionLisp: string;
   isDisabled?: boolean;
 }
+
 interface WidgetStyles {
   textColor: string;
   bgColor: string;
   bgOpacity: number;
 }
-type StoredDisclosureItem = Omit<DisclosureItem, 'id' | 'isDisabled'>;
+type StoredDisclosureItem = Omit<
+  DisclosureItem,
+  'id' | 'isDisabled' | 'isCustom'
+>;
 interface InteractiveDisclosureWidgetProps {
   node: FlatNode;
   onUpdate: (params: string[]) => void;
@@ -42,6 +50,13 @@ interface InteractiveDisclosureWidgetProps {
 
 const generateId = (): string => Math.random().toString(36).substring(2, 9);
 
+const quoteIfNecessary = (command: string, value: string): string => {
+  if (command === 'identifyAs' && value.includes(' ')) {
+    return `"${value}"`;
+  }
+  return value;
+};
+
 const IconSelector = ({
   value,
   onChange,
@@ -61,12 +76,7 @@ const IconSelector = ({
     () => createListCollection({ items: filteredIcons }),
     [filteredIcons]
   );
-
-  const iconSelectorStyles = `
-    .icon-item .icon-indicator { display: none; }
-    .icon-item[data-state="checked"] .icon-indicator { display: flex; }
-  `;
-
+  const iconSelectorStyles = `.icon-item .icon-indicator { display: none; } .icon-item[data-state="checked"] .icon-indicator { display: flex; }`;
   return (
     <div>
       <style>{iconSelectorStyles}</style>
@@ -88,8 +98,8 @@ const IconSelector = ({
           </Combobox.Trigger>
         </Combobox.Control>
         <Portal>
-          <Combobox.Positioner style={{ zIndex: 9010 }}>
-            <Combobox.Content className="max-h-60 w-[--reference-width] overflow-y-auto rounded-md bg-white shadow-lg">
+          <Combobox.Positioner style={{ zIndex: 9010, minWidth: '250px' }}>
+            <Combobox.Content className="max-h-60 w-full overflow-y-auto rounded-md bg-white shadow-lg">
               {filteredIcons.map((icon) => (
                 <Combobox.Item
                   key={icon}
@@ -117,27 +127,59 @@ const DisclosureItemEditor = ({
   onUpdate,
   onToggle,
   config,
+  onMoveUp,
+  onMoveDown,
+  isFirst,
+  isLast,
 }: {
   item: DisclosureItem;
   onUpdate: (updates: Partial<DisclosureItem>) => void;
   onToggle: () => void;
   config: BrandConfig;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  isFirst: boolean;
+  isLast: boolean;
 }) => {
   return (
     <div
-      className={`space-y-4 rounded-lg border bg-white p-4 shadow-sm transition-opacity ${item.isDisabled ? 'border-gray-100 opacity-40' : 'border-gray-200'}`}
+      className={`space-y-4 rounded-lg border bg-white p-4 shadow-sm transition-opacity ${
+        item.isDisabled ? 'border-gray-100 opacity-40' : 'border-gray-200'
+      }`}
     >
       <div className="flex items-center justify-between">
-        <h4 className="font-bold text-gray-800">
-          {item.title}{' '}
-          <span className="text-xs font-normal text-gray-500">
-            (for value: {item.beliefValue})
-          </span>
-        </h4>
+        <div className="flex items-center gap-2">
+          <div className="flex flex-col">
+            <button
+              type="button"
+              onClick={onMoveUp}
+              disabled={isFirst}
+              className="rounded p-0.5 text-gray-500 hover:bg-gray-100 disabled:opacity-25"
+            >
+              <ArrowUpIcon className="h-4 w-4" />
+            </button>
+            <button
+              type="button"
+              onClick={onMoveDown}
+              disabled={isLast}
+              className="rounded p-0.5 text-gray-500 hover:bg-gray-100 disabled:opacity-25"
+            >
+              <ArrowDownIcon className="h-4 w-4" />
+            </button>
+          </div>
+          <h4 className="font-bold text-gray-800">
+            {item.title}{' '}
+            <span className="text-xs font-normal text-gray-500">
+              (Key: {item.beliefValue})
+            </span>
+          </h4>
+        </div>
         <button
           type="button"
           onClick={onToggle}
-          className={`rounded p-1 hover:bg-gray-100 ${item.isDisabled ? 'text-blue-600' : 'text-red-600'}`}
+          className={`rounded p-1 hover:bg-gray-100 ${
+            item.isDisabled ? 'text-blue-600' : 'text-red-600'
+          }`}
         >
           {item.isDisabled ? (
             <ArrowUturnLeftIcon className="h-4 w-4" />
@@ -147,6 +189,13 @@ const DisclosureItemEditor = ({
         </button>
       </div>
       <fieldset disabled={item.isDisabled} className="space-y-4">
+        {item.isCustom && (
+          <SingleParam
+            label="Key / Value"
+            value={item.beliefValue}
+            onChange={(value) => onUpdate({ beliefValue: value })}
+          />
+        )}
         <SingleParam
           label="Display Title"
           value={item.title}
@@ -161,13 +210,25 @@ const DisclosureItemEditor = ({
           value={item.icon}
           onChange={(value) => onUpdate({ icon: value })}
         />
-        <div className="relative rounded-md border p-3">
-          <ActionBuilderField
-            value={item.actionLisp}
-            onChange={(value) => onUpdate({ actionLisp: value })}
-            contentMap={fullContentMapStore.get()}
-          />
-        </div>
+
+        {item.isCustom ? (
+          <div className="relative rounded-md border p-3">
+            <ActionBuilderField
+              value={item.actionLisp}
+              onChange={(value) => onUpdate({ actionLisp: value })}
+              contentMap={fullContentMapStore.get()}
+            />
+          </div>
+        ) : (
+          <div>
+            <label className="block text-xs font-bold text-gray-600">
+              Action (Locked)
+            </label>
+            <div className="mt-1 rounded-md border border-gray-200 bg-gray-50 p-2 font-mono text-xs text-gray-500">
+              {item.actionLisp}
+            </div>
+          </div>
+        )}
       </fieldset>
     </div>
   );
@@ -187,6 +248,7 @@ export default function InteractiveDisclosureWidget({
     bgOpacity: 100,
   });
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDataLoaded, setIsDataLoaded] = useState(false);
 
   const selectedBelief = beliefs.find((b) => b.slug === selectedBeliefTag);
   const hasRealSelection = !!selectedBelief;
@@ -194,8 +256,12 @@ export default function InteractiveDisclosureWidget({
   useEffect(() => {
     const beliefTag = String(node.codeHookParams?.[0] || '');
     const payloadJson = String(node.codeHookParams?.[1] || '');
-    setSelectedBeliefTag(beliefTag && beliefTag !== 'BELIEF' ? beliefTag : '');
 
+    if (beliefs.length === 0 && beliefTag && beliefTag !== 'BELIEF') {
+      return;
+    }
+
+    setSelectedBeliefTag(beliefTag && beliefTag !== 'BELIEF' ? beliefTag : '');
     const currentBelief = beliefs.find((b) => b.slug === beliefTag);
 
     if (payloadJson && currentBelief) {
@@ -204,9 +270,10 @@ export default function InteractiveDisclosureWidget({
         setWidgetStyles(
           parsed.styles || { textColor: '', bgColor: '', bgOpacity: 100 }
         );
-        const loadedDisclosures = parsed.disclosures || {};
+        const loadedDisclosures =
+          (parsed.disclosures as StoredDisclosureItem[]) || [];
 
-        const possibleKeys =
+        const scaleKeys =
           currentBelief.scale === 'custom'
             ? (currentBelief.customValues || []).map((v) => ({
                 slug: v,
@@ -216,34 +283,47 @@ export default function InteractiveDisclosureWidget({
                 currentBelief.scale as keyof typeof heldBeliefsScales
               ] || [];
 
-        const allDisclosures = possibleKeys.map(({ slug, name }) => {
-          if (loadedDisclosures[slug]) {
+        const actionCommand =
+          currentBelief.scale === 'custom' ? 'identifyAs' : 'declare';
+        const finalDisclosures: DisclosureItem[] = loadedDisclosures.map(
+          (loadedItem) => {
+            const isFromScale = scaleKeys.some(
+              (sk) => sk.slug === loadedItem.beliefValue
+            );
             return {
-              ...(loadedDisclosures[slug] as StoredDisclosureItem),
+              ...loadedItem,
               id: generateId(),
-              beliefValue: slug,
+              isCustom: !isFromScale,
+              actionLisp: isFromScale
+                ? `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, loadedItem.beliefValue)})`
+                : loadedItem.actionLisp,
               isDisabled: false,
             };
           }
-          return {
-            id: generateId(),
-            beliefValue: slug,
-            title: name,
-            description: '',
-            icon: 'app',
-            actionLisp: '',
-            isDisabled: true,
-          };
+        );
+        scaleKeys.forEach(({ slug, name }) => {
+          if (!finalDisclosures.some((d) => d.beliefValue === slug)) {
+            finalDisclosures.push({
+              id: generateId(),
+              beliefValue: slug,
+              title: name,
+              description: '',
+              icon: 'app',
+              actionLisp: `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, slug)})`,
+              isCustom: false,
+              isDisabled: true,
+            });
+          }
         });
-        setDisclosures(allDisclosures);
+        setDisclosures(finalDisclosures);
       } catch (e) {
-        setDisclosures([]);
-        setWidgetStyles({ textColor: '', bgColor: '', bgOpacity: 100 });
+        console.error('Error parsing disclosure payload:', e);
       }
     } else {
       setDisclosures([]);
       setWidgetStyles({ textColor: '', bgColor: '', bgOpacity: 100 });
     }
+    setIsDataLoaded(true);
   }, [node, beliefs]);
 
   useEffect(() => {
@@ -253,30 +333,26 @@ export default function InteractiveDisclosureWidget({
         const {
           data: { beliefIds },
         } = await api.get('/api/v1/nodes/beliefs');
-        if (!beliefIds?.length) return;
+        if (!beliefIds?.length) {
+          setBeliefs([]);
+          return;
+        }
         const {
           data: { beliefs },
         } = await api.post('/api/v1/nodes/beliefs', { beliefIds });
         setBeliefs(beliefs || []);
       } catch (error) {
         console.error('Error fetching beliefs:', error);
+        setBeliefs([]);
       }
     };
     fetchData();
-  }, []);
+  }, [node]);
 
   const handleUpdate = () => {
-    const disclosuresToStore: Record<
-      string,
-      Omit<StoredDisclosureItem, 'beliefValue'>
-    > = {};
-    disclosures
+    const disclosuresToStore: StoredDisclosureItem[] = disclosures
       .filter((d) => !d.isDisabled)
-      .forEach(({ id, beliefValue, isDisabled, ...rest }) => {
-        if (beliefValue) {
-          disclosuresToStore[beliefValue] = rest;
-        }
-      });
+      .map(({ id, isCustom, isDisabled, ...rest }) => rest);
     const payload = { styles: widgetStyles, disclosures: disclosuresToStore };
     onUpdate([selectedBeliefTag, JSON.stringify(payload)]);
   };
@@ -286,30 +362,62 @@ export default function InteractiveDisclosureWidget({
     const belief = beliefs.find((b) => b.slug === tag);
     let newDisclosures: DisclosureItem[] = [];
     if (belief) {
+      const actionCommand =
+        belief.scale === 'custom' ? 'identifyAs' : 'declare';
       const keys =
         belief.scale === 'custom'
           ? (belief.customValues || []).map((v) => ({ slug: v, name: v }))
           : heldBeliefsScales[belief.scale as keyof typeof heldBeliefsScales] ||
             [];
+
       newDisclosures = keys.map(({ slug, name }) => ({
         id: generateId(),
         beliefValue: slug,
         title: name,
         description: '',
         icon: 'app',
-        actionLisp: '',
+        actionLisp: `(${actionCommand} ${tag} ${quoteIfNecessary(actionCommand, slug)})`,
+        isCustom: false,
         isDisabled: false,
       }));
     }
     setDisclosures(newDisclosures);
   };
 
+  const moveDisclosure = (id: string, direction: 'up' | 'down') => {
+    const index = disclosures.findIndex((d) => d.id === id);
+    if (index === -1) return;
+    const newIndex = direction === 'up' ? index - 1 : index + 1;
+    if (newIndex < 0 || newIndex >= disclosures.length) return;
+
+    const newDisclosures = [...disclosures];
+    const [movedItem] = newDisclosures.splice(index, 1);
+    newDisclosures.splice(newIndex, 0, movedItem);
+    setDisclosures(newDisclosures);
+  };
+
+  const addCustomDisclosure = () => {
+    const newItem: DisclosureItem = {
+      id: generateId(),
+      beliefValue: `custom-key-${disclosures.length + 1}`,
+      title: 'New Custom Item',
+      description: '',
+      icon: 'plus-circle',
+      actionLisp: '',
+      isCustom: true,
+      isDisabled: false,
+    };
+    setDisclosures([...disclosures, newItem]);
+  };
+
   const updateDisclosure = (id: string, updates: Partial<DisclosureItem>) =>
     setDisclosures(
       disclosures.map((d) => (d.id === id ? { ...d, ...updates } : d))
     );
+
   const updateWidgetStyles = (updates: Partial<WidgetStyles>) =>
     setWidgetStyles((prev) => ({ ...prev, ...updates }));
+
   const toggleDisclosure = (id: string) =>
     setDisclosures(
       disclosures.map((d) =>
@@ -317,6 +425,13 @@ export default function InteractiveDisclosureWidget({
       )
     );
 
+  const handleColorChange = (
+    key: 'textColor' | 'bgColor',
+    hex: string | null
+  ) => {
+    updateWidgetStyles({ [key]: hex || '' });
+  };
+
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-2">
@@ -347,7 +462,6 @@ export default function InteractiveDisclosureWidget({
           </button>
         )}
       </div>
-
       {hasRealSelection && (
         <div className="mt-4 border-t border-gray-200 pt-4">
           <button
@@ -393,64 +507,94 @@ export default function InteractiveDisclosureWidget({
                   </Dialog.Title>
                 </div>
                 <div className="flex-1 space-y-6 overflow-y-auto p-4">
-                  <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
-                    <h3 className="font-bold text-gray-800">Widget Styles</h3>
-                    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-                      <div>
-                        <ColorPickerCombo
-                          title="Background Color"
-                          defaultColor={widgetStyles.bgColor}
-                          onColorChange={(hex) =>
-                            updateWidgetStyles({ bgColor: hex })
-                          }
-                          config={config}
-                          allowNull={true}
-                        />
+                  {isDataLoaded ? (
+                    <>
+                      <div className="space-y-4 rounded-lg border border-gray-200 bg-white p-4 shadow-sm">
+                        <h3 className="font-bold text-gray-800">
+                          Widget Styles
+                        </h3>
+                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                          <div>
+                            <ColorPickerCombo
+                              title="Background Color"
+                              defaultColor={widgetStyles.bgColor}
+                              onColorChange={(hex) =>
+                                handleColorChange('bgColor', hex)
+                              }
+                              config={config}
+                              allowNull={true}
+                              skipTailwind={false}
+                            />
+                          </div>
+                          <div>
+                            <ColorPickerCombo
+                              title="Text Color"
+                              defaultColor={widgetStyles.textColor}
+                              onColorChange={(hex) =>
+                                handleColorChange('textColor', hex)
+                              }
+                              config={config}
+                              allowNull={true}
+                              skipTailwind={false}
+                            />
+                          </div>
+                          <div>
+                            <label className="block text-xs font-bold text-gray-600">
+                              BG Opacity (%)
+                            </label>
+                            <div className="mt-1 flex items-center gap-2">
+                              <input
+                                type="range"
+                                min="0"
+                                max="100"
+                                value={widgetStyles.bgOpacity}
+                                onChange={(e) =>
+                                  updateWidgetStyles({
+                                    bgOpacity: parseInt(e.target.value),
+                                  })
+                                }
+                                className="w-full"
+                              />
+                              <span className="w-12 text-center font-mono text-sm">
+                                {widgetStyles.bgOpacity}%
+                              </span>
+                            </div>
+                          </div>
+                        </div>
                       </div>
-                      <div>
-                        <ColorPickerCombo
-                          title="Text Color"
-                          defaultColor={widgetStyles.textColor}
-                          onColorChange={(hex) =>
-                            updateWidgetStyles({ textColor: hex })
+
+                      {disclosures.map((item, index) => (
+                        <DisclosureItemEditor
+                          key={item.id}
+                          item={item}
+                          onUpdate={(updates) =>
+                            updateDisclosure(item.id, updates)
                           }
+                          onToggle={() => toggleDisclosure(item.id)}
                           config={config}
-                          allowNull={true}
+                          onMoveUp={() => moveDisclosure(item.id, 'up')}
+                          onMoveDown={() => moveDisclosure(item.id, 'down')}
+                          isFirst={index === 0}
+                          isLast={index === disclosures.length - 1}
                         />
+                      ))}
+
+                      <div className="pt-4">
+                        <button
+                          type="button"
+                          onClick={addCustomDisclosure}
+                          className="flex w-full items-center justify-center rounded-md border-2 border-dashed border-gray-300 bg-white px-3 py-2 text-sm font-bold text-gray-500 hover:border-cyan-600 hover:text-cyan-600"
+                        >
+                          <PlusIcon className="mr-2 h-5 w-5" />
+                          Add Custom Disclosure
+                        </button>
                       </div>
-                      <div>
-                        <label className="block text-xs font-bold text-gray-600">
-                          BG Opacity (%)
-                        </label>
-                        <div className="mt-1 flex items-center gap-2">
-                          <input
-                            type="range"
-                            min="0"
-                            max="100"
-                            value={widgetStyles.bgOpacity}
-                            onChange={(e) =>
-                              updateWidgetStyles({
-                                bgOpacity: parseInt(e.target.value),
-                              })
-                            }
-                            className="w-full"
-                          />
-                          <span className="w-12 text-center font-mono text-sm">
-                            {widgetStyles.bgOpacity}%
-                          </span>
-                        </div>
-                      </div>
+                    </>
+                  ) : (
+                    <div className="p-8 text-center">
+                      Loading configuration...
                     </div>
-                  </div>
-                  {disclosures.map((item) => (
-                    <DisclosureItemEditor
-                      key={item.id}
-                      item={item}
-                      onUpdate={(updates) => updateDisclosure(item.id, updates)}
-                      onToggle={() => toggleDisclosure(item.id)}
-                      config={config}
-                    />
-                  ))}
+                  )}
                 </div>
                 <div className="flex-shrink-0 justify-end border-t border-gray-200 bg-white px-6 py-3">
                   <Dialog.CloseTrigger asChild>

package/templates/src/components/form/ActionBuilderField.tsx

@@ -80,10 +80,27 @@ export default function ActionBuilderField({
 
   const handleParamChange = (newParams: string) => {
     setParams(newParams);
-    if (newParams && newParams.trim() !== '' && newParams.trim() !== '()') {
-      onChange(`(${command} ${newParams})`);
-    } else {
+    const trimmedParams = newParams.trim();
+
+    if (!trimmedParams || trimmedParams === '()') {
       onChange('');
+      return;
+    }
+
+    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);
+        const value = trimmedParams.substring(firstSpaceIndex + 1);
+        const finalValue = value.includes(' ') ? `"${value}"` : value;
+        onChange(`(${command} ${beliefId} ${finalValue})`);
+      }
+    } else {
+      // Original behavior for all other commands
+      onChange(`(${command} ${trimmedParams})`);
     }
   };
 

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

@@ -37,16 +37,14 @@ export default function BeliefForm({
   onClose,
 }: BeliefFormProps) {
   const [customValue, setCustomValue] = useState('');
+  const [customValueError, setCustomValueError] = useState<string | null>(null);
 
-  // Subscribe to orphan analysis store
   const orphanState = useStore(orphanAnalysisStore);
 
-  // Load orphan analysis on component mount
   useEffect(() => {
     loadOrphanAnalysis();
   }, []);
 
-  // Get usage information for this belief
   const getBeliefUsage = (): string[] => {
     if (!belief?.id || !orphanState.data || !orphanState.data.beliefs) {
       return [];
@@ -54,7 +52,6 @@ export default function BeliefForm({
     return orphanState.data.beliefs[belief.id] || [];
   };
 
-  // Check if belief is in use
   const isBeliefInUse = (): boolean => {
     if (isCreate || !belief?.id) return false;
     return getBeliefUsage().length > 0;
@@ -63,7 +60,6 @@ export default function BeliefForm({
   const beliefInUse = isBeliefInUse();
   const usageCount = getBeliefUsage().length;
 
-  // Initialize form state
   const initialState: BeliefNodeState = belief
     ? convertToLocalState(belief)
     : {
@@ -85,7 +81,6 @@ export default function BeliefForm({
           data
         );
 
-        // Call success callback after save (original pattern)
         setTimeout(() => {
           onClose?.(true);
         }, 1000);
@@ -102,23 +97,30 @@ export default function BeliefForm({
     },
   });
 
-  const handleAddCustomValue = () => {
-    if (!customValue.trim()) return;
+  const handleCustomValueChange = (value: string) => {
+    setCustomValue(value);
+    const valueRegex = /^[a-zA-Z]([a-zA-Z0-9?!]| (?=[a-zA-Z0-9?!]))*$/;
+    if (value && !valueRegex.test(value)) {
+      setCustomValueError(
+        'Must start with a letter. No double or trailing spaces.'
+      );
+    } else {
+      setCustomValueError(null);
+    }
+  };
 
+  const handleAddCustomValue = () => {
+    if (!customValue.trim() || customValueError) return;
     const newState = addCustomValue(formState.state, customValue);
     formState.updateField('customValues', newState.customValues);
     setCustomValue('');
   };
 
   const handleRemoveCustomValue = (index: number) => {
-    // Check if this is a newly added value (not saved yet)
     const currentValue = formState.state.customValues[index];
     const originalValues = formState.originalState.customValues || [];
     const isNewValue = !originalValues.includes(currentValue);
 
-    // Allow removal if:
-    // 1. Belief is not in use, OR
-    // 2. This is a new value that hasn't been saved yet
     if (!beliefInUse || isNewValue) {
       const newState = removeCustomValue(formState.state, index);
       formState.updateField('customValues', newState.customValues);
@@ -188,7 +190,6 @@ export default function BeliefForm({
 
   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 Belief' : 'Edit Belief'}
@@ -200,10 +201,8 @@ export default function BeliefForm({
         </p>
       </div>
 
-      {/* Usage Warning */}
       {renderUsageWarning()}
 
-      {/* Info Box */}
       <div className="rounded-md bg-blue-50 p-4">
         <div className="text-sm text-blue-700">
           <p className="font-bold">What are Beliefs?</p>
@@ -225,7 +224,6 @@ export default function BeliefForm({
         </div>
       </div>
 
-      {/* Basic Fields */}
       <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
         <StringInput
           value={formState.state.title}
@@ -254,7 +252,6 @@ export default function BeliefForm({
         </div>
       </div>
 
-      {/* Scale Selection */}
       <div className="space-y-4">
         <div className="relative">
           <EnumSelect
@@ -276,7 +273,6 @@ export default function BeliefForm({
         {renderScalePreview()}
       </div>
 
-      {/* Custom Values Section */}
       {formState.state.scale === 'custom' && (
         <div className="space-y-4">
           <div>
@@ -286,31 +282,41 @@ export default function BeliefForm({
             </p>
           </div>
 
-          {/* Add Custom Value */}
           <div className="flex gap-2">
             <div className="flex-1">
-              <div className="flex-1">
-                <input
-                  type="text"
-                  value={customValue}
-                  onChange={(e) => setCustomValue(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  placeholder="Enter custom value"
-                  className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-cyan-600 sm:text-sm sm:leading-6"
-                />
-              </div>
+              <input
+                type="text"
+                value={customValue}
+                onChange={(e) => handleCustomValueChange(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Enter custom value"
+                className={`block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 ${
+                  customValueError
+                    ? 'ring-red-500 focus:ring-red-600'
+                    : 'ring-gray-300 focus:ring-cyan-600'
+                }`}
+              />
             </div>
             <button
               type="button"
               onClick={handleAddCustomValue}
-              disabled={!customValue.trim()}
+              disabled={!customValue.trim() || !!customValueError}
               className="inline-flex items-center rounded-md bg-cyan-600 px-3 py-2 text-sm font-bold text-white shadow-sm hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-600 disabled:cursor-not-allowed disabled:opacity-50"
             >
               <PlusIcon className="h-4 w-4" />
             </button>
           </div>
 
-          {/* Custom Values List */}
+          {customValueError && (
+            <p className="mt-1 text-sm text-red-600">{customValueError}</p>
+          )}
+
+          {formState.errors.customValues && (
+            <p className="text-sm text-red-600">
+              {formState.errors.customValues}
+            </p>
+          )}
+
           {formState.state.customValues.length > 0 && (
             <div className="space-y-2">
               {formState.state.customValues.map((value, index) => {
@@ -355,7 +361,6 @@ export default function BeliefForm({
         </div>
       )}
 
-      {/* Save/Cancel Bar */}
       <UnsavedChangesBar
         formState={formState}
         message="You have unsaved belief changes"
@@ -363,7 +368,6 @@ export default function BeliefForm({
         cancelLabel="Discard Changes"
       />
 
-      {/* Cancel Navigation Button */}
       <div className="flex justify-start">
         <button
           type="button"

package/templates/src/utils/actions/preParse_Action.ts

@@ -17,6 +17,9 @@ export const preParseAction = (
   //const parameterFour = (parameters && parameters[3]) || null;
 
   switch (command) {
+    case `declare`:
+    case `identifyAs`:
+      return ``;
     case `goto`:
       switch (parameterOne) {
         case `storykeep`:

package/templates/src/utils/api/beliefHelpers.ts

@@ -4,9 +4,6 @@ import type {
   FieldErrors,
 } from '@/types/tractstack';
 
-/**
- * Convert backend BeliefNode to frontend BeliefNodeState
- */
 export function convertToLocalState(beliefNode: BeliefNode): BeliefNodeState {
   return {
     id: beliefNode.id,
@@ -17,9 +14,6 @@ export function convertToLocalState(beliefNode: BeliefNode): BeliefNodeState {
   };
 }
 
-/**
- * Convert frontend BeliefNodeState to backend BeliefNode format
- */
 export function convertToBackendFormat(state: BeliefNodeState): BeliefNode {
   return {
     id: state.id,
@@ -31,47 +25,45 @@ export function convertToBackendFormat(state: BeliefNodeState): BeliefNode {
   };
 }
 
-/**
- * Validate belief node state
- */
 export function validateBeliefNode(state: BeliefNodeState): FieldErrors {
   const errors: FieldErrors = {};
 
-  // Validate title
   if (!state.title?.trim()) {
     errors.title = 'Title is required';
   }
 
-  // Validate slug
   if (!state.slug?.trim()) {
     errors.slug = 'Slug is required';
+  } else {
+    const slugRegex = /^[a-zA-Z]+$/;
+    if (!slugRegex.test(state.slug)) {
+      errors.slug = 'Slug must contain only letters (a-z, A-Z)';
+    }
   }
 
-  // Validate scale
   if (!state.scale?.trim()) {
     errors.scale = 'Scale is required';
   }
 
-  // Validate custom values if scale is custom
   if (state.scale === 'custom') {
     if (!state.customValues || state.customValues.length === 0) {
       errors.customValues =
         'At least one custom value is required for custom scale';
     } else {
-      state.customValues.forEach((value, index) => {
-        if (!value?.trim()) {
-          errors[`customValues.${index}`] = 'Custom value cannot be empty';
+      const valueRegex = /^[a-zA-Z]([a-zA-Z0-9?!]| (?=[a-zA-Z0-9?!]))*$/;
+      for (const value of state.customValues) {
+        if (value.trim() && !valueRegex.test(value)) {
+          errors.customValues =
+            'Values must start with a letter, have no double or trailing spaces, and use valid characters.';
+          break;
         }
-      });
+      }
     }
   }
 
   return errors;
 }
 
-/**
- * State interceptor for form state management
- */
 export function beliefStateIntercept(
   state: BeliefNodeState,
   field: keyof BeliefNodeState,
@@ -88,7 +80,6 @@ export function beliefStateIntercept(
       break;
     case 'scale':
       newState.scale = value || '';
-      // Clear custom values when scale changes away from custom
       if (value !== 'custom') {
         newState.customValues = [];
       }
@@ -103,9 +94,6 @@ export function beliefStateIntercept(
   return newState;
 }
 
-/**
- * Add a new custom value to the state
- */
 export function addCustomValue(
   state: BeliefNodeState,
   value: string
@@ -118,9 +106,6 @@ export function addCustomValue(
   };
 }
 
-/**
- * Remove a custom value from the state
- */
 export function removeCustomValue(
   state: BeliefNodeState,
   index: number
@@ -131,9 +116,6 @@ export function removeCustomValue(
   };
 }
 
-/**
- * Update a specific custom value in the state
- */
 export function updateCustomValue(
   state: BeliefNodeState,
   index: number,
@@ -148,9 +130,6 @@ export function updateCustomValue(
   };
 }
 
-/**
- * Scale options for the belief form
- */
 export const SCALE_OPTIONS = [
   { value: 'likert', label: 'Likert Scale (1-5)' },
   { value: 'agreement', label: 'Agreement (Agree/Disagree)' },
@@ -160,9 +139,6 @@ export const SCALE_OPTIONS = [
   { value: 'custom', label: 'Custom Values' },
 ];
 
-/**
- * Get scale preview data for displaying scale options
- */
 export function getScalePreview(scale: string) {
   const scalePreviewData: {
     [key: string]: Array<{ id: number; name: string; color: string }>;