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

package/dist/index.js

@@ -229,6 +229,12 @@ async function w(t, e, c) {
       src: t("../templates/src/components/edit/widgets/BeliefWidget.tsx"),
       dest: "src/components/edit/widgets/BeliefWidget.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/widgets/InteractiveDisclosureWidget.tsx"
+      ),
+      dest: "src/components/edit/widgets/InteractiveDisclosureWidget.tsx"
+    },
     {
       src: t(
         "../templates/src/components/edit/widgets/IdentifyAsWidget.tsx"
@@ -988,6 +994,12 @@ async function w(t, e, c) {
       src: t("../templates/src/components/form/ActionBuilderField.tsx"),
       dest: "src/components/form/ActionBuilderField.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/form/ActionBuilderBeliefSelector.tsx"
+      ),
+      dest: "src/components/form/ActionBuilderBeliefSelector.tsx"
+    },
     {
       src: t("../templates/src/components/form/MagicPathBuilder.tsx"),
       dest: "src/components/form/MagicPathBuilder.tsx"

package/package.json

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

package/templates/src/components/Menu.tsx

@@ -2,7 +2,8 @@ import { Menu } from '@ark-ui/react';
 import { Portal } from '@ark-ui/react/portal';
 import ChevronDownIcon from '@heroicons/react/20/solid/ChevronDownIcon';
 import { lispLexer } from '@/utils/actions/lispLexer';
-import { preParseAction } from '@/utils/actions//preParse_Action';
+import { preParseAction } from '@/utils/actions/preParse_Action';
+import type { LispToken } from '@/types/compositorTypes';
 
 // CSS to style the menu items with hover and selection states
 const menuStyles = `
@@ -46,9 +47,10 @@ interface MenuDatum {
   optionsPayload: MenuLink[];
 }
 
-interface MenuLinkDatum extends MenuLink {
-  to: string;
-  internal: boolean;
+interface ProcessedMenuLinkDatum extends MenuLink {
+  renderAs: 'a' | 'button' | 'span';
+  href?: string;
+  htmxVals?: string;
 }
 
 interface MenuProps {
@@ -62,7 +64,77 @@ const MenuComponent = (props: MenuProps) => {
   const { payload, slug, isContext, brandConfig } = props;
   const thisPayload = payload.optionsPayload;
 
-  // Process featured and additional links
+  // 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();
+
+    if (!actionLisp) {
+      item.renderAs = 'span';
+      return item;
+    }
+
+    try {
+      if (actionLisp.startsWith('(goto')) {
+        const tokens = lispLexer(actionLisp);
+        const to = preParseAction(tokens, slug, isContext, brandConfig);
+        item.renderAs = 'a';
+        item.href = to || '#';
+        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];
+
+        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.
+            };
+          } 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),
+            };
+          }
+
+          if (Object.keys(hxValsMap).length > 0) {
+            item.renderAs = 'button';
+            item.htmxVals = JSON.stringify(hxValsMap);
+            return item;
+          }
+        }
+      }
+    } catch (error) {
+      console.error(
+        `Failed to process menu item for action: ${actionLisp}`,
+        error
+      );
+    }
+
+    // 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);
@@ -70,19 +142,48 @@ const MenuComponent = (props: MenuProps) => {
     .filter((e: MenuLink) => !e.featured)
     .map(processMenuLink);
 
-  // Helper function to process menu links
-  function processMenuLink(e: MenuLink): MenuLinkDatum {
-    const item = { ...e } as MenuLinkDatum;
-    const thisPayload = lispLexer(e.actionLisp);
-    const to = preParseAction(thisPayload, slug, isContext, brandConfig);
-    if (typeof to === `string`) {
-      item.to = to;
-      item.internal = true;
-    } else if (typeof to === `object`) {
-      item.to = to[0];
+  // Helper component to render either a link or a button, avoiding repetition.
+  const InteractiveMenuItem = ({ item }: { item: ProcessedMenuLinkDatum }) => {
+    if (item.renderAs === 'button') {
+      return (
+        <button
+          type="button"
+          className="text-mydarkgrey focus:ring-myblue block text-2xl font-bold leading-6 hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2"
+          title={item.description}
+          aria-label={`${item.name} - ${item.description}`}
+          hx-post="/api/v1/state"
+          hx-swap="none"
+          hx-vals={item.htmxVals}
+        >
+          {item.name}
+        </button>
+      );
+    }
+
+    if (item.renderAs === 'a') {
+      return (
+        <a
+          href={item.href}
+          className="text-mydarkgrey focus:ring-myblue block text-2xl font-bold leading-6 hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2"
+          title={item.description}
+          aria-label={`${item.name} - ${item.description}`}
+        >
+          {item.name}
+        </a>
+      );
     }
-    return item;
-  }
+
+    // Fallback for 'span'
+    return (
+      <span
+        className="text-mydarkgrey block text-2xl font-bold leading-6 opacity-50"
+        title={item.description}
+        aria-label={`${item.name} - ${item.description}`}
+      >
+        {item.name}
+      </span>
+    );
+  };
 
   return (
     <>
@@ -90,16 +191,9 @@ const MenuComponent = (props: MenuProps) => {
 
       {/* Desktop Navigation */}
       <nav className="font-action ml-6 hidden flex-wrap items-center justify-end space-x-3 md:flex md:space-x-6">
-        {featuredLinks.map((item: MenuLinkDatum) => (
+        {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
           <div key={item.name} className="relative py-1.5">
-            <a
-              href={item.to}
-              className="text-mydarkgrey focus:ring-myblue block text-2xl font-bold leading-6 hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2"
-              title={item.description}
-              aria-label={`${item.name} - ${item.description}`}
-            >
-              {item.name}
-            </a>
+            <InteractiveMenuItem item={item} />
           </div>
         ))}
       </nav>
@@ -122,21 +216,42 @@ const MenuComponent = (props: MenuProps) => {
                   <div className="text-md ring-mydarkgrey/5 flex-auto overflow-hidden rounded-3xl bg-white p-4 leading-6 shadow-lg ring-1">
                     {/* Featured Links Section */}
                     <div className="px-8">
-                      {featuredLinks.map((item: MenuLinkDatum) => (
+                      {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
                         <Menu.Item
                           key={item.name}
                           value={item.name}
                           className="menu-item hover:bg-mygreen/20 group relative flex gap-x-6 rounded-lg p-4"
                         >
                           <div>
-                            <a
-                              href={item.to}
-                              className="font-action text-myblack text-xl hover:text-black focus:text-black focus:outline-none"
-                              aria-label={`${item.name} - ${item.description}`}
-                            >
-                              {item.name}
-                              <span className="absolute inset-0" />
-                            </a>
+                            {item.renderAs === 'button' ? (
+                              <button
+                                type="button"
+                                className="font-action text-myblack text-xl hover:text-black focus:text-black focus:outline-none"
+                                aria-label={`${item.name} - ${item.description}`}
+                                hx-post="/api/v1/state"
+                                hx-swap="none"
+                                hx-vals={item.htmxVals}
+                              >
+                                {item.name}
+                                <span className="absolute inset-0" />
+                              </button>
+                            ) : item.renderAs === 'a' ? (
+                              <a
+                                href={item.href}
+                                className="font-action text-myblack text-xl hover:text-black focus:text-black focus:outline-none"
+                                aria-label={`${item.name} - ${item.description}`}
+                              >
+                                {item.name}
+                                <span className="absolute inset-0" />
+                              </a>
+                            ) : (
+                              <span
+                                className="font-action text-myblack text-xl opacity-50"
+                                aria-label={`${item.name} - ${item.description}`}
+                              >
+                                {item.name}
+                              </span>
+                            )}
                             <p className="text-mydarkgrey mt-1">
                               {item.description}
                             </p>
@@ -161,24 +276,49 @@ const MenuComponent = (props: MenuProps) => {
                           className="mt-6 space-y-6"
                           aria-labelledby="additional-links-heading"
                         >
-                          {additionalLinks.map((item: MenuLinkDatum) => (
-                            <li key={item.name} className="relative">
-                              <Menu.Item
-                                value={item.name}
-                                className="menu-item block w-full text-left"
-                              >
-                                <a
-                                  href={item.to}
-                                  className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 hover:text-black focus:text-black focus:underline focus:outline-none"
-                                  title={item.description}
-                                  aria-label={`${item.name} - ${item.description}`}
+                          {additionalLinks.map(
+                            (item: ProcessedMenuLinkDatum) => (
+                              <li key={item.name} className="relative">
+                                <Menu.Item
+                                  value={item.name}
+                                  className="menu-item block w-full text-left"
                                 >
-                                  {item.name}
-                                  <span className="absolute inset-0" />
-                                </a>
-                              </Menu.Item>
-                            </li>
-                          ))}
+                                  {item.renderAs === 'button' ? (
+                                    <button
+                                      type="button"
+                                      className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 hover:text-black focus:text-black focus:underline focus:outline-none"
+                                      title={item.description}
+                                      aria-label={`${item.name} - ${item.description}`}
+                                      hx-post="/api/v1/state"
+                                      hx-swap="none"
+                                      hx-vals={item.htmxVals}
+                                    >
+                                      {item.name}
+                                      <span className="absolute inset-0" />
+                                    </button>
+                                  ) : item.renderAs === 'a' ? (
+                                    <a
+                                      href={item.href}
+                                      className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 hover:text-black focus:text-black focus:underline focus:outline-none"
+                                      title={item.description}
+                                      aria-label={`${item.name} - ${item.description}`}
+                                    >
+                                      {item.name}
+                                      <span className="absolute inset-0" />
+                                    </a>
+                                  ) : (
+                                    <span
+                                      className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 opacity-50"
+                                      title={item.description}
+                                      aria-label={`${item.name} - ${item.description}`}
+                                    >
+                                      {item.name}
+                                    </span>
+                                  )}
+                                </Menu.Item>
+                              </li>
+                            )
+                          )}
                         </ul>
                       </div>
                     )}

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

@@ -30,6 +30,7 @@ import StoryFragmentConfigPanel from '@/components/edit/storyfragment/StoryFragm
 import StoryFragmentTitlePanel from '@/components/edit/storyfragment/StoryFragmentPanel_title';
 import ContextPanePanel from '@/components/edit/context/ContextPaneConfig';
 import ContextPaneTitlePanel from '@/components/edit/context/ContextPaneConfig_title';
+import { regexpHook } from '@/constants';
 import type {
   StoryFragmentNode,
   PaneNode,
@@ -40,8 +41,6 @@ import type { NodeProps } from '@/types/nodeProps';
 
 function parseCodeHook(node: BaseNode | FlatNode) {
   if ('codeHookParams' in node && Array.isArray(node.codeHookParams)) {
-    const regexpHook =
-      /^(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|signup)\((.*)\)$/;
     const hookMatch = node.copy?.match(regexpHook);
 
     if (!hookMatch) return null;
@@ -58,8 +57,6 @@ function parseCodeHook(node: BaseNode | FlatNode) {
     const firstChild = node.children[0];
     if (!firstChild?.value) return null;
 
-    const regexpHook =
-      /(identifyAs|youtube|bunny|bunnyContext|toggle|resource|belief|signup)\((.*?)\)/;
     const regexpValues = /((?:[^\\|]+|\\\|?)+)/g;
     const hookMatch = firstChild.value.match(regexpHook);
 

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

@@ -32,7 +32,7 @@ const CodeHookContainer = ({
               <Fragment key={key}>
                 <span className="min-w-24 font-bold text-gray-600">{key}:</span>
                 <div className="ml-2 flex flex-wrap gap-1">
-                  {value.split('|').map((item, index) => (
+                  {value.split(/,|\|/).map((item, index) => (
                     <span
                       key={index}
                       className="inline-block rounded bg-gray-200 px-2 py-0.5 text-xs text-gray-800"

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

@@ -83,8 +83,22 @@ const getWidgetElement = (
         </div>
       ) : null;
 
+    case 'interactiveDisclosure':
+      return (
+        <div className={`${classNames} pointer-events-none`}>
+          <div className="rounded-md border-2 border-dashed border-gray-300 bg-gray-50 p-4 text-center">
+            <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>
+          </div>
+        </div>
+      );
+
     default:
-      return null;
+      return <div>Widget {hook} not found.</div>;
   }
 };
 

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

@@ -313,7 +313,8 @@ const PanelSwitch = ({
       break;
 
     case 'style-code-config':
-      if (clickedNode) return <StyleWidgetConfigPanel node={clickedNode} />;
+      if (clickedNode)
+        return <StyleWidgetConfigPanel node={clickedNode} config={config} />;
       break;
 
     case 'style-code-add':

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

@@ -33,7 +33,7 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
           animation: window.matchMedia(
             '(prefers-reduced-motion: no-preference)'
           ).matches
-            ? 'fadeInFromHalf 150ms ease-in'
+            ? 'fadeInFromHalf 450ms ease-in'
             : 'none',
           '--fade-start': '0.5',
           '--fade-end': '1',

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

@@ -2,37 +2,10 @@ import { useStore } from '@nanostores/react';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';
 import { getCtx } from '@/stores/nodes';
 import { toggleSettingsPanel } from '@/stores/storykeep';
+import { toolAddModeTitles, toolAddModes } from '@/constants';
 
 import type { ToolAddMode } from '@/types/compositorTypes';
 
-const toolAddModeTitles: Record<ToolAddMode, string> = {
-  p: 'Paragraph',
-  h2: 'Heading 2',
-  h3: 'Heading 3',
-  h4: 'Heading 4',
-  img: 'Image',
-  signup: 'Email Sign-up Widget',
-  yt: 'YouTube Video',
-  bunny: 'Bunny Video',
-  belief: 'Belief Select',
-  identify: 'Identity As',
-  toggle: 'Toggle Belief',
-};
-
-const toolAddModes: ToolAddMode[] = [
-  'p',
-  'h2',
-  'h3',
-  'h4',
-  'img',
-  'signup',
-  'yt',
-  'bunny',
-  'belief',
-  'identify',
-  'toggle',
-];
-
 const AddElementsPanel = ({
   currentToolAddMode,
 }: {

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import { useStore } from '@nanostores/react';
 import PencilSquareIcon from '@heroicons/react/24/outline/PencilSquareIcon';
 import PaintBrushIcon from '@heroicons/react/24/outline/PaintBrushIcon';
@@ -8,11 +8,8 @@ import PlusIcon from '@heroicons/react/24/outline/PlusIcon';
 import BugAntIcon from '@heroicons/react/24/outline/BugAntIcon';
 import { settingsPanelStore } from '@/stores/storykeep';
 import { getCtx } from '@/stores/nodes';
-import { debounce } from '@/utils/helpers';
 import type { ToolModeVal } from '@/types/compositorTypes';
 
-const SHORT_THRESHOLD = 650;
-
 const storykeepToolModes = [
   {
     key: 'styles' as const,
@@ -84,34 +81,16 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
     const handleEscapeKey = (event: KeyboardEvent) => {
       if (event.key === 'Escape') {
         ctx.toolModeValStore.set({ value: 'text' });
+        ctx.notifyNode('root');
       }
     };
 
-    const toolModeNav = navRef.current;
-
-    // If the <nav> element hasn't been rendered yet, do nothing.
-    // The hook will re-run when hasTitle/hasPanes changes and it does render.
-    if (!toolModeNav) {
-      return;
-    }
-
-    const updateToolbarLayout = debounce(() => {
-      const isWideAndShort =
-        window.innerWidth >= 801 && window.innerHeight <= SHORT_THRESHOLD;
-      toolModeNav.classList.toggle('is-compact-widget', isWideAndShort);
-    }, 50);
-
     document.addEventListener('keydown', handleEscapeKey);
-    window.addEventListener('resize', updateToolbarLayout);
-
-    updateToolbarLayout(); // Initial check
 
     return () => {
       document.removeEventListener('keydown', handleEscapeKey);
-      window.removeEventListener('resize', updateToolbarLayout);
     };
-    // This dependency array is the key. The effect will re-run when the render conditions change.
-  }, [ctx, hasTitle, hasPanes, isContext]);
+  }, [ctx]);
 
   if (!hasTitle || (!hasPanes && !isContext)) {
     return null;
@@ -119,38 +98,12 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
 
   return (
     <>
-      <style>{`
-        #mainNav.is-compact-widget {
-          position: fixed;
-          bottom: 0.25rem;
-          left: 0rem;
-          top: auto;
-          right: auto;
-          height: auto;
-          width: auto;
-          padding: 0.5rem;
-          border-radius: 0 0.75rem 0.75rem 0;
-          box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-          background-color: rgba(252, 252, 252, 0.7);
-          backdrop-filter: blur(4px);
-          border: 1px solid rgba(0, 0, 0, 0.05);
-        }
-        #mainNav.is-compact-widget > div {
-          flex-direction: row;
-          flex-wrap: nowrap;
-          align-items: center;
-          gap: 1rem;
-          margin: 0;
-          padding: 0;
-          height: auto;
-        }
-      `}</style>
       <nav
         id="mainNav"
         ref={navRef}
-        className="z-102 bg-mywhite fixed bottom-0 left-0 right-0 pt-1.5 md:sticky md:bottom-auto md:left-0 md:top-24 md:h-screen md:w-16 md:pt-0"
+        className="z-102 bg-mywhite md:bg-mywhite/70 fixed bottom-0 left-0 right-0 p-1.5 md:bottom-2 md:right-auto md:h-auto md:w-auto md:rounded-r-xl md:border md:border-black/5 md:p-2 md:shadow-lg md:backdrop-blur-sm"
       >
-        <div className="flex flex-wrap justify-around gap-4 py-0.5 md:mt-0 md:flex-col md:items-center md:gap-8 md:space-x-0 md:space-y-2 md:py-2">
+        <div className="flex flex-wrap justify-around gap-4 py-0.5 md:flex-nowrap md:justify-start md:gap-4 md:p-0">
           <div className="text-mydarkgrey text-center text-sm font-bold">
             mode:
             <div className="font-action text-myblue pt-1.5 text-center text-xs">