astro-tractstack 2.0.0-rc.65 → 2.0.0-rc.67

package/package.json

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

package/templates/src/client/view.js

@@ -327,7 +327,7 @@ function processStoryfragmentUpdate(update, config) {
           `Target pane element for scrolling not found: #pane-${update.gotoPaneId}`
         );
       }
-    }, 150);
+    }, 350);
   }
 }
 
@@ -361,6 +361,7 @@ function initializeCurrentView() {
 
 function resetViewState() {
   log('Resetting view state before new page preparation.');
+  flushPendingPaneEvents();
   isPageInitialized = false;
   paneViewTimes.clear();
 }
@@ -385,8 +386,13 @@ if (!window.tractstackViewLifecycleListenersAttached) {
 
       let beliefValue;
       if (target.type === 'checkbox') {
-        // TEMPORARY HARDCODING: Use YES/NO for all toggles.
-        beliefValue = target.checked ? 'BELIEVES_YES' : 'BELIEVES_NO';
+        const onVerb = target.getAttribute('data-verb');
+        const offVerb = target.getAttribute('data-off-verb');
+        if (onVerb && offVerb) {
+          beliefValue = target.checked ? onVerb : offVerb;
+        } else {
+          beliefValue = target.checked ? 'BELIEVES_YES' : 'BELIEVES_NO';
+        }
       } else {
         beliefValue = target.value;
       }

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

@@ -414,6 +414,7 @@ const EpinetWrapper = ({
           <EpinetDurationSelector
             fullContentMap={fullContentMap}
             isLoading={isLoading || status === 'loading'}
+            hourlyNodeActivity={$epinetCustomFilters.hourlyNodeActivity}
           />
         </div>
       </ErrorBoundary>

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

@@ -27,7 +27,7 @@ const SettingsPanel = ({ config, availableCodeHooks }: SettingsPanelProps) => {
 
   return (
     <div
-      className="bg-mydarkgrey flex h-full max-w-sm flex-col rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
+      className="bg-mydarkgrey min-w-xs flex h-full max-w-sm flex-col rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
       style={
         {
           animation: window.matchMedia(

package/templates/src/components/edit/state/SaveModal.tsx

@@ -931,6 +931,12 @@ export default function SaveModal({
                       >
                         Keep Editing
                       </button>
+                      <a
+                        href="/storykeep/content"
+                        className={`rounded bg-black px-4 py-2 text-white transition-colors hover:bg-white hover:text-black`}
+                      >
+                        Dashboard
+                      </a>
                     </>
                   )}
                   {stage === 'ERROR' && (

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

@@ -38,10 +38,7 @@ interface WidgetStyles {
   bgColor: string;
   bgOpacity: number;
 }
-type StoredDisclosureItem = Omit<
-  DisclosureItem,
-  'id' | 'isDisabled' | 'isCustom'
->;
+type StoredDisclosureItem = Omit<DisclosureItem, 'id' | 'isDisabled'>;
 interface InteractiveDisclosureWidgetProps {
   node: FlatNode;
   onUpdate: (params: string[]) => void;
@@ -91,6 +88,7 @@ const IconSelector = ({
           <Combobox.Input
             className="w-full rounded-md border-gray-300 py-1.5 pl-3 pr-10 shadow-sm"
             placeholder="Search icons..."
+            autoFocus
           />
           <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
             <i className={`bi bi-${value} mr-2 text-lg`}></i>
@@ -141,6 +139,13 @@ const DisclosureItemEditor = ({
   isFirst: boolean;
   isLast: boolean;
 }) => {
+  const [isEditingIcon, setIsEditingIcon] = useState(false);
+
+  const handleIconChange = (newIcon: string) => {
+    onUpdate({ icon: newIcon });
+    setIsEditingIcon(false);
+  };
+
   return (
     <div
       className={`space-y-4 rounded-lg border bg-white p-4 shadow-sm transition-opacity ${
@@ -169,9 +174,11 @@ const DisclosureItemEditor = ({
           </div>
           <h4 className="font-bold text-gray-800">
             {item.title}{' '}
-            <span className="text-xs font-normal text-gray-500">
-              (Key: {item.beliefValue})
-            </span>
+            {!item.isCustom && (
+              <span className="text-xs font-normal text-gray-500">
+                (Key: {item.beliefValue})
+              </span>
+            )}
           </h4>
         </div>
         <button
@@ -189,13 +196,6 @@ 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}
@@ -206,10 +206,29 @@ const DisclosureItemEditor = ({
           value={item.description || ''}
           onChange={(value) => onUpdate({ description: value })}
         />
-        <IconSelector
-          value={item.icon}
-          onChange={(value) => onUpdate({ icon: value })}
-        />
+
+        {isEditingIcon ? (
+          <IconSelector value={item.icon} onChange={handleIconChange} />
+        ) : (
+          <div>
+            <label className="block text-xs font-bold text-gray-600">
+              Icon
+            </label>
+            <div className="mt-1 flex items-center justify-between rounded-md border border-gray-300 bg-white px-3 py-1.5 shadow-sm">
+              <div className="flex items-center gap-2">
+                <i className={`bi bi-${item.icon} text-lg`}></i>
+                <span className="text-sm">{item.icon}</span>
+              </div>
+              <button
+                type="button"
+                onClick={() => setIsEditingIcon(true)}
+                className="text-sm font-bold text-cyan-600 hover:text-cyan-800"
+              >
+                Change
+              </button>
+            </div>
+          </div>
+        )}
 
         {item.isCustom ? (
           <div className="relative rounded-md border p-3">
@@ -243,8 +262,8 @@ export default function InteractiveDisclosureWidget({
   const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
   const [disclosures, setDisclosures] = useState<DisclosureItem[]>([]);
   const [widgetStyles, setWidgetStyles] = useState<WidgetStyles>({
-    textColor: '',
-    bgColor: '',
+    textColor: '#000000',
+    bgColor: '#ffffff',
     bgOpacity: 100,
   });
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -268,7 +287,11 @@ export default function InteractiveDisclosureWidget({
       try {
         const parsed = JSON.parse(payloadJson);
         setWidgetStyles(
-          parsed.styles || { textColor: '', bgColor: '', bgOpacity: 100 }
+          parsed.styles || {
+            textColor: '#000000',
+            bgColor: '#ffffff',
+            bgOpacity: 100,
+          }
         );
         const loadedDisclosures =
           (parsed.disclosures as StoredDisclosureItem[]) || [];
@@ -290,6 +313,7 @@ export default function InteractiveDisclosureWidget({
             const isFromScale = scaleKeys.some(
               (sk) => sk.slug === loadedItem.beliefValue
             );
+
             return {
               ...loadedItem,
               id: generateId(),
@@ -308,7 +332,7 @@ export default function InteractiveDisclosureWidget({
               beliefValue: slug,
               title: name,
               description: '',
-              icon: 'app',
+              icon: 'chat-heart-fill',
               actionLisp: `(${actionCommand} ${beliefTag} ${quoteIfNecessary(actionCommand, slug)})`,
               isCustom: false,
               isDisabled: true,
@@ -321,7 +345,11 @@ export default function InteractiveDisclosureWidget({
       }
     } else {
       setDisclosures([]);
-      setWidgetStyles({ textColor: '', bgColor: '', bgOpacity: 100 });
+      setWidgetStyles({
+        textColor: '#000000',
+        bgColor: '#ffffff',
+        bgOpacity: 100,
+      });
     }
     setIsDataLoaded(true);
   }, [node, beliefs]);
@@ -352,13 +380,18 @@ export default function InteractiveDisclosureWidget({
   const handleUpdate = () => {
     const disclosuresToStore: StoredDisclosureItem[] = disclosures
       .filter((d) => !d.isDisabled)
-      .map(({ id, isCustom, isDisabled, ...rest }) => rest);
+      .map(({ id, isDisabled, ...rest }) => rest);
     const payload = { styles: widgetStyles, disclosures: disclosuresToStore };
     onUpdate([selectedBeliefTag, JSON.stringify(payload)]);
   };
 
   const handleBeliefChange = (tag: string) => {
     setSelectedBeliefTag(tag);
+    setWidgetStyles({
+      textColor: '#000000',
+      bgColor: '#ffffff',
+      bgOpacity: 100,
+    });
     const belief = beliefs.find((b) => b.slug === tag);
     let newDisclosures: DisclosureItem[] = [];
     if (belief) {
@@ -375,7 +408,7 @@ export default function InteractiveDisclosureWidget({
         beliefValue: slug,
         title: name,
         description: '',
-        icon: 'app',
+        icon: 'chat-heart-fill',
         actionLisp: `(${actionCommand} ${tag} ${quoteIfNecessary(actionCommand, slug)})`,
         isCustom: false,
         isDisabled: false,
@@ -399,10 +432,12 @@ export default function InteractiveDisclosureWidget({
   const addCustomDisclosure = () => {
     const newItem: DisclosureItem = {
       id: generateId(),
-      beliefValue: `custom-key-${disclosures.length + 1}`,
+      beliefValue: `custom-${Date.now()}-${Math.random()
+        .toString(36)
+        .substring(2, 6)}`,
       title: 'New Custom Item',
       description: '',
-      icon: 'plus-circle',
+      icon: 'chat-heart-fill',
       actionLisp: '',
       isCustom: true,
       isDisabled: false,
@@ -418,12 +453,20 @@ export default function InteractiveDisclosureWidget({
   const updateWidgetStyles = (updates: Partial<WidgetStyles>) =>
     setWidgetStyles((prev) => ({ ...prev, ...updates }));
 
-  const toggleDisclosure = (id: string) =>
-    setDisclosures(
-      disclosures.map((d) =>
-        d.id === id ? { ...d, isDisabled: !d.isDisabled } : d
-      )
-    );
+  const toggleDisclosure = (id: string) => {
+    const itemToToggle = disclosures.find((d) => d.id === id);
+    if (!itemToToggle) return;
+
+    if (itemToToggle.isCustom) {
+      setDisclosures(disclosures.filter((d) => d.id !== id));
+    } else {
+      setDisclosures(
+        disclosures.map((d) =>
+          d.id === id ? { ...d, isDisabled: !d.isDisabled } : d
+        )
+      );
+    }
+  };
 
   const handleColorChange = (
     key: 'textColor' | 'bgColor',

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

@@ -12,28 +12,27 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
   const [beliefs, setBeliefs] = useState<BeliefNode[]>([]);
   const [selectedBeliefTag, setSelectedBeliefTag] = useState<string>('');
   const [currentPrompt, setCurrentPrompt] = useState<string>('');
+  const [currentScale, setCurrentScale] = useState<string>('');
   const [isInitialized, setIsInitialized] = useState(false);
 
-  // Get parameter metadata from the widgetMeta constant
   const widgetInfo = widgetMeta.toggle;
 
   const params = node.codeHookParams || [];
   const beliefTag = String(params[0] || '');
   const prompt = String(params[1] || '');
+  const scale = String(params[2] || '');
 
-  // Check if beliefTag is the placeholder value
   const isPlaceholder = beliefTag === 'BeliefTag';
 
-  // Update local state when props change
   useEffect(() => {
     if (!isPlaceholder && beliefTag) {
       setSelectedBeliefTag(beliefTag);
     }
     setCurrentPrompt(prompt);
+    setCurrentScale(scale);
     setIsInitialized(true);
-  }, [beliefTag, prompt, isPlaceholder]);
+  }, [beliefTag, prompt, scale, isPlaceholder]);
 
-  // Fetch beliefs using new Go backend pattern
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -41,7 +40,6 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
           import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
         const tenantId = import.meta.env.PUBLIC_TENANTID || 'default';
 
-        // Step 1: Get all belief IDs
         const idsResponse = await fetch(`${goBackend}/api/v1/nodes/beliefs`, {
           headers: {
             'X-Tenant-ID': tenantId,
@@ -60,7 +58,6 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
           return;
         }
 
-        // Step 2: Get belief data by IDs
         const beliefsResponse = await fetch(
           `${goBackend}/api/v1/nodes/beliefs`,
           {
@@ -92,34 +89,30 @@ export default function ToggleWidget({ node, onUpdate }: ToggleWidgetProps) {
   const handleBeliefChange = (selectedValue: string) => {
     if (!isInitialized) return;
     setSelectedBeliefTag(selectedValue);
-    onUpdate([selectedValue, currentPrompt]);
+    const selectedBelief = beliefs.find((b) => b.slug === selectedValue);
+    const newScale = selectedBelief ? selectedBelief.scale || '' : '';
+    setCurrentScale(newScale);
+    onUpdate([selectedValue, currentPrompt, newScale]);
   };
 
   const handlePromptChange = (value: string) => {
     if (!isInitialized) return;
-    // Sanitize the input value (remove newlines and pipe characters)
     const sanitizedValue = value.replace(/[\n\r|]/g, '');
     setCurrentPrompt(sanitizedValue);
-
-    // Use the actual selected tag (from state) or the original belief tag as fallback
     const tagToUse = selectedBeliefTag || (isPlaceholder ? '' : beliefTag);
-    onUpdate([tagToUse, sanitizedValue]);
+    onUpdate([tagToUse, sanitizedValue, currentScale]);
   };
 
-  // Show beliefs that can be selected for the toggle
   const filteredBeliefs = beliefs.filter(
     (b) => b.scale === 'yn' || b.scale === 'tf'
   );
 
-  // Find the selected belief (if any)
   const selectedBelief = beliefs.find(
     (b) => b.slug === (selectedBeliefTag || (isPlaceholder ? '' : beliefTag))
   );
 
-  // Determine if we have a real selection - either from state or props
   const hasRealSelection = !!selectedBelief || (!isPlaceholder && !!beliefTag);
 
-  // Calculate the current value to show in the select dropdown
   const selectValue = selectedBeliefTag || (isPlaceholder ? '' : beliefTag);
 
   return (

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

@@ -171,7 +171,7 @@ for (const [key, value] of Astro.url.searchParams) {
     <main id="mainContent" class="relative flex-1 overflow-x-auto">
       <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
         <div
-          class="h-fit min-h-screen pb-24"
+          class="h-fit min-h-screen pb-96"
           style={{
             backgroundImage:
               'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',

package/templates/src/pages/context/[...contextSlug]/edit.astro

@@ -159,16 +159,10 @@ for (const [key, value] of Astro.url.searchParams) {
     <StoryKeepToolMode isContext={true} client:only="react" />
 
     <!-- Main Content Area -->
-    <main
-      id="mainContent"
-      class="relative flex-1 overflow-x-auto"
-      style={{
-        paddingBottom: 'var(--bottom-right-controls-bottom-offset, 16px)',
-      }}
-    >
+    <main id="mainContent" class="relative flex-1 overflow-x-auto">
       <div class="bg-myblue/20 bg-mylightgrey h-full p-1.5">
         <div
-          class="h-fit min-h-screen"
+          class="h-fit min-h-screen pb-96"
           style={{
             backgroundImage:
               'repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px)',