astro-tractstack 2.0.0-rc.0

package/templates/src/components/widgets/Impression.tsx

@@ -0,0 +1,102 @@
+import { navigate } from 'astro:transitions/client';
+import { lispLexer } from '@/utils/actions/lispLexer';
+import { preParseAction } from '@/utils/actions/preParse_Action';
+import { preParseImpression } from '@/utils/actions/preParse_Impression';
+import type { ImpressionNode } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
+
+interface ImpressionProps {
+  payload: ImpressionNode;
+  currentPage: {
+    id: string;
+    slug: string;
+    title: string;
+  };
+  config: BrandConfig;
+}
+
+const Impression = ({ payload, currentPage, config }: ImpressionProps) => {
+  // Parse the actionsLisp to get button payload and action URL
+  const thisButtonPayload = lispLexer(payload.actionsLisp);
+  const actionPayload = preParseAction(
+    thisButtonPayload,
+    currentPage.slug,
+    false, // isContext - using false as default
+    config
+  );
+
+  // Create impression event using legacy logic
+  const event = preParseImpression(
+    payload.id,
+    payload.title,
+    currentPage.id, // using currentPage.id as parentId equivalent
+    thisButtonPayload,
+    config
+  );
+
+  const pushEvent = async function (): Promise<void> {
+    if (!event) return;
+
+    // Send analytics event (simplified V2 pattern)
+    try {
+      const tractStackConfig = window.TRACTSTACK_CONFIG;
+      if (tractStackConfig?.sessionId) {
+        const formData: { [key: string]: string } = {
+          beliefId: payload.id,
+          beliefType: 'Impression',
+          beliefValue: 'CLICKED',
+          paneId: payload.parentId || '',
+        };
+
+        await fetch(`${tractStackConfig.backendUrl}/api/v1/state`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'X-Tenant-ID': tractStackConfig.tenantId,
+            'X-TractStack-Session-ID': tractStackConfig.sessionId,
+            'X-StoryFragment-ID': tractStackConfig.storyfragmentId,
+          },
+          body: new URLSearchParams(formData),
+        });
+      }
+    } catch (error) {
+      console.error('Failed to send impression analytics event:', error);
+    }
+
+    // Navigate to action URL if available
+    if (actionPayload) {
+      navigate(actionPayload);
+    }
+  };
+
+  // Validate payload
+  if (typeof payload !== 'object' || !payload) {
+    return <div className="hidden" />;
+  }
+
+  // Legacy styling: simple container with inline text and link
+  return (
+    <div className="p-3">
+      <h3 className="text-md font-action leading-6 text-black">
+        {payload.title}
+      </h3>
+      <div className="xs:flex xs:items-start xs:justify-between mt-2">
+        <div className="max-w-xl text-sm text-black">
+          <p>
+            {payload.body}
+            {` `}
+            <a
+              onClick={() => pushEvent()}
+              className="hover:text-myorange cursor-pointer text-black underline underline-offset-4"
+              href={actionPayload || '#'}
+            >
+              {payload.buttonText}
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Impression;

package/templates/src/components/widgets/ImpressionWrapper.tsx

@@ -0,0 +1,214 @@
+import { useState, useEffect, useRef } from 'react';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import Impression from './Impression';
+import type { ImpressionNode } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
+
+interface ImpressionWrapperProps {
+  payload: ImpressionNode[];
+  currentPage: {
+    id: string;
+    slug: string;
+    title: string;
+  };
+  config: BrandConfig;
+  icon?: boolean;
+}
+
+const ImpressionWrapper = ({
+  payload,
+  currentPage,
+  config,
+  icon = true,
+}: ImpressionWrapperProps) => {
+  const [visibleImpressions, setVisibleImpressions] = useState<
+    ImpressionNode[]
+  >([]);
+  const [seenPaneIds, setSeenPaneIds] = useState<Set<string>>(new Set());
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [currentImpressionIndex, setCurrentImpressionIndex] = useState(0);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Pane visibility tracking (existing logic)
+  useEffect(() => {
+    if (payload.length === 0) return;
+
+    const impressionPaneIds = new Set(
+      payload
+        .map((impression) => impression.parentId)
+        .filter((id): id is string => Boolean(id))
+    );
+
+    const unseenPaneIds = Array.from(impressionPaneIds).filter(
+      (paneId) => !seenPaneIds.has(paneId)
+    );
+
+    if (unseenPaneIds.length === 0) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const paneId = entry.target.getAttribute('data-pane-id');
+            if (paneId && impressionPaneIds.has(paneId)) {
+              setSeenPaneIds((prev) => new Set(prev).add(paneId));
+              observer.unobserve(entry.target);
+            }
+          }
+        });
+      },
+      {
+        threshold: 0.1,
+        rootMargin: '0px',
+      }
+    );
+
+    unseenPaneIds.forEach((paneId) => {
+      const paneElement = document.querySelector(`[data-pane-id="${paneId}"]`);
+      if (paneElement) {
+        observer.observe(paneElement);
+      }
+    });
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [payload, seenPaneIds]);
+
+  // Update visible impressions when seen panes change
+  useEffect(() => {
+    const newVisibleImpressions = payload.filter(
+      (impression) =>
+        impression.parentId && seenPaneIds.has(impression.parentId)
+    );
+    setVisibleImpressions(newVisibleImpressions);
+
+    // Reset index when impressions change
+    if (
+      newVisibleImpressions.length > 0 &&
+      currentImpressionIndex >= newVisibleImpressions.length
+    ) {
+      setCurrentImpressionIndex(0);
+    }
+  }, [payload, seenPaneIds, currentImpressionIndex]);
+
+  // Cycling logic for multiple impressions
+  useEffect(() => {
+    if (isExpanded && visibleImpressions.length > 1) {
+      intervalRef.current = setInterval(() => {
+        setCurrentImpressionIndex(
+          (prevIndex) => (prevIndex + 1) % visibleImpressions.length
+        );
+      }, 5000); // 5 second interval
+    } else {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, [isExpanded, visibleImpressions.length]);
+
+  // No impressions to show
+  if (visibleImpressions.length === 0) {
+    return null;
+  }
+
+  // Header icon mode (when icon=true and not expanded)
+  if (icon && !isExpanded) {
+    return (
+      <div className="impression-header-icon">
+        <button
+          type="button"
+          title="Click for notifications"
+          className="bg-brand-1 hover:bg-brand-3 flex h-6 w-6 items-center justify-center rounded-full text-sm font-bold text-white transition-colors motion-safe:animate-bounce"
+          onClick={() => setIsExpanded(true)}
+        >
+          <span className="sr-only">Show impressions</span>
+          <span>{visibleImpressions.length}</span>
+        </button>
+      </div>
+    );
+  }
+
+  // Expanded overlay mode (bottom-right)
+  if (isExpanded) {
+    const currentImpression = visibleImpressions[currentImpressionIndex];
+
+    return (
+      <div className="impression-overlay fixed bottom-4 right-4 z-50 w-96 max-w-[calc(100vw-2rem)]">
+        <div className="relative rounded-lg border border-gray-200 bg-white shadow-lg">
+          {/* Close button */}
+          <button
+            type="button"
+            className="focus:ring-brand-1 absolute right-2 top-2 z-10 rounded-md bg-white text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2"
+            onClick={() => setIsExpanded(false)}
+          >
+            <span className="sr-only">Close impressions</span>
+            <XMarkIcon className="h-5 w-5" aria-hidden="true" />
+          </button>
+
+          {/* Impression content */}
+          {currentImpression && (
+            <div className="p-4">
+              <Impression
+                payload={currentImpression}
+                currentPage={currentPage}
+                config={config}
+              />
+            </div>
+          )}
+
+          {/* Multiple impressions indicator */}
+          {visibleImpressions.length > 1 && (
+            <div className="flex justify-center space-x-1 border-t border-gray-100 px-4 py-2">
+              {visibleImpressions.map((_, index) => (
+                <button
+                  key={index}
+                  className={`h-2 w-2 rounded-full transition-colors ${
+                    index === currentImpressionIndex
+                      ? 'bg-brand-1'
+                      : 'bg-gray-300 hover:bg-gray-400'
+                  }`}
+                  onClick={() => setCurrentImpressionIndex(index)}
+                  aria-label={`Show impression ${index + 1}`}
+                />
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Fallback to existing behavior when icon=false
+  return (
+    <div
+      className="impressions-wrapper pointer-events-none fixed z-50"
+      style={{
+        bottom: 'var(--bottom-right-controls-bottom-offset, 16px)',
+        right: '16px',
+      }}
+    >
+      <div className="impressions-container pointer-events-auto">
+        <div className="impressions-list space-y-3">
+          {visibleImpressions.map((impression) => (
+            <Impression
+              key={impression.id}
+              payload={impression}
+              currentPage={currentPage}
+              config={config}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ImpressionWrapper;

package/templates/src/constants/beliefs.ts

@@ -0,0 +1,61 @@
+import type { BeliefOptionDatum } from '@/types/compositorTypes';
+
+const likert: BeliefOptionDatum[] = [
+  {
+    id: 1,
+    slug: `STRONGLY_AGREES`,
+    name: `Strongly agree`,
+    color: `bg-teal-400`,
+  },
+  { id: 2, slug: `AGREES`, name: `Agree`, color: `bg-lime-400` },
+  {
+    id: 3,
+    slug: `NEITHER_AGREES_NOR_DISAGREES`,
+    name: `Neither agree nor disagree`,
+    color: `bg-slate-200`,
+  },
+  { id: 4, slug: `DISAGREES`, name: `Disagree`, color: `bg-amber-400` },
+  {
+    id: 5,
+    slug: `STRONGLY_DISAGREES`,
+    name: `Strongly disagree`,
+    color: `bg-red-400`,
+  },
+];
+
+const agreement: BeliefOptionDatum[] = [
+  { id: 1, slug: `AGREES`, name: `Agree`, color: `bg-lime-400` },
+  { id: 2, slug: `DISAGREES`, name: `Disagree`, color: `bg-amber-400` },
+];
+
+const interest: BeliefOptionDatum[] = [
+  { id: 1, slug: `INTERESTED`, name: `Interested`, color: `bg-lime-400` },
+  {
+    id: 2,
+    slug: `NOT_INTERESTED`,
+    name: `Not Interested`,
+    color: `bg-amber-400`,
+  },
+];
+
+const yn: BeliefOptionDatum[] = [
+  { id: 1, slug: `BELIEVES_YES`, name: `Yes`, color: `bg-lime-400` },
+  { id: 2, slug: `BELIEVES_NO`, name: `No`, color: `bg-amber-400` },
+];
+
+const tf: BeliefOptionDatum[] = [
+  { id: 1, slug: `BELIEVES_TRUE`, name: `True`, color: `bg-lime-400` },
+  { id: 2, slug: `BELIEVES_FALSE`, name: `False`, color: `bg-amber-400` },
+];
+
+const heldBeliefsTitles: { [key: string]: string } = {
+  likert: `Agree or Disagree?`,
+  agreement: `Agree or Disagree?`,
+  interest: `Are you Interested?`,
+  yn: `Yes or No?`,
+  tf: `True or False?`,
+};
+
+const heldBeliefsScales = { likert, agreement, interest, yn, tf };
+
+export { heldBeliefsScales, heldBeliefsTitles };

package/templates/src/constants/brandThemes.ts

@@ -0,0 +1,133 @@
+import type { ArtpacksStore } from '@/types/tractstack';
+
+// Brand Colors --> POSITIONAL MAPPING SYSTEM:
+// Position 1: Very dark (primary black) - pairs with 2,8 for text contrast
+// Position 2: Very light (primary white) - pairs with 1,5,7 for background contrast
+// Position 3: Bright foreground/background color (accent)
+// Position 4: Bright foreground/background color (secondary accent)
+// Position 5: Darker background color - pairs with 2,6,8 for content areas
+// Position 6: Middle color - general purpose, pairs with 1,5 for subtle contrast
+// Position 7: Dark utility color
+// Position 8: Off-white - pairs with 1,5,7 for softer contrast than position 2
+
+export const PUBLIC_THEME = 'light-bold';
+
+export const THEME_OPTIONS = [
+  'Default',
+  'Monet',
+  'Dali',
+  'Hiphop',
+  'Grey',
+  'Custom',
+] as const;
+
+export type ThemeOption = (typeof THEME_OPTIONS)[number];
+
+// Theme presets with exactly 8 brand colors each - using YOUR actual selections
+export const THEME_PRESETS: Record<string, string[]> = {
+  Default: [
+    '10120d',
+    'fcfcfc',
+    'f58333',
+    'c8df8c',
+    '293f58',
+    'a7b1b7',
+    '393d34',
+    'e3e3e3',
+  ],
+  Monet: [
+    '0f1912',
+    'f6f4f3',
+    'cfae97',
+    'ded2c3',
+    '24423c',
+    'a8cd20',
+    '452a3d',
+    'f3f5f6',
+  ],
+  Dali: [
+    '150c02',
+    'fffef9',
+    'fef6d1',
+    'e2e5d4',
+    '4b3703',
+    'dddcca',
+    '382c0d',
+    'fefcee',
+  ],
+  Hiphop: [
+    '0d0d09',
+    'faf7f3',
+    'ffd201',
+    'a3bfd4',
+    '39304d',
+    'f6e5ce',
+    '3c2a25',
+    'f0e7d5',
+  ],
+  Grey: [
+    '101010',
+    'f0f0f0',
+    '888888',
+    'aaaaaa',
+    '333333',
+    'bbbbbb',
+    '444444',
+    'dddddd',
+  ],
+};
+
+// Validate that all presets have exactly 8 colors
+Object.entries(THEME_PRESETS).forEach(([themeName, colors]) => {
+  if (colors.length !== 8) {
+    throw new Error(
+      `Theme "${themeName}" must have exactly 8 colors, found ${colors.length}`
+    );
+  }
+});
+
+// Helper function to get theme colors
+export function getThemeColors(theme: string): string[] {
+  return THEME_PRESETS[theme] || THEME_PRESETS.Default;
+}
+
+// Helper function to check if theme is custom
+export function isCustomTheme(theme: string): boolean {
+  return theme === 'Custom' || !THEME_OPTIONS.includes(theme as ThemeOption);
+}
+
+export const ARTPACKS: ArtpacksStore = {
+  kCz: [
+    'captainBreakfast',
+    'cleanDrips',
+    'crispwaves',
+    'dragon',
+    'dragonSkin',
+    'nightcity',
+    'pattern1',
+    'pattern2',
+    'skindrips',
+    'slimetime',
+    'snake',
+    'toxicshock',
+    'tractstack',
+    'tripdrips',
+    'wavedrips',
+  ],
+  t8k: [
+    'beach',
+    'blast',
+    'bokeh',
+    'cartoon',
+    'darkeggshell',
+    'explosion',
+    'floral',
+    'flower',
+    'foliage',
+    'mist',
+    'portal',
+    'storytime',
+    'tacky',
+    'wallpaper',
+  ],
+};

package/templates/src/constants/prompts.json

@@ -0,0 +1,55 @@
+{
+  "formatPrompt": "Create a markdown summary following this structure: Start with a ## Heading 2 containing a catchy, concise title that encapsulates the main theme. Follow with a single paragraph that provides an overall short description, setting the context for the entire piece. Create 3-5 ### Heading 3 sections, each focusing on a key aspect or subtopic of the main theme. Each heading should be followed by any appropriate number of paragraphs expanding on that subtopic. Optionally, include a #### Heading 4 subsection under one or more of the ### Heading 3 sections if there's a need to dive deeper into a specific point. This should also be followed by one or two paragraphs. Ensure all content is in pure markdown format, without any HTML tags or special formatting.",
+  "paneFormatPrompt": "Create a markdown artifact following this structure: If appropriate start with a ## Heading 2 containing a catchy, concise title that encapsulates the main theme. Follow with a single paragraph that provides an overall short description, setting the context for the entire piece. Create a ### Heading 3 section focusing on the main theme. This heading should be followed by any appropriate number of paragraphs expanding on the topic. Optionally, include a #### Heading 4 subsection if there's a need to dive deeper into a specific point. This should also be followed by one or two paragraphs. Ensure all content is in pure markdown format, without any HTML tags or special formatting.",
+  "contextPanePrompts": {
+    "shortformcontext": "You are writing a focused, contextual page that needs to quickly orient and inform readers about a specific topic or concept in 500 words or less. Prioritize clarity and immediate relevance over comprehensive coverage. Use a direct, efficient writing style that frontloads key information. Keep sections brief but substantive, focusing on what readers need to know in this specific context. Maintain a helpful, straightforward tone that respects the reader's time while ensuring they grasp essential points."
+  },
+  "panePrompts": {
+    "shortformcontext": "You are writing focused, contextual paragraph(s) that quickly orient and inform readers about a specific topic or concept in 50-150 words. Do not include *everything* from the raw notes. Summarize selectively to meet word length target while prioritizing clarity and immediate relevance over comprehensive coverage. Use a direct, efficient writing style that frontloads key information. Keep sections brief but substantive, focusing on what readers need to know in this specific context. Maintain a helpful, straightforward tone that respects the reader's time while ensuring they grasp essential points."
+  },
+  "pagePrompts": {
+    "landing": "You are writing copy for a high-traffic internet website landing page. Write for an audience who is reading this website copy and is very interested in what it has to offer. Focus on compelling value propositions, clear benefits, and strong calls-to-action. Maintain a direct, engaging tone that builds trust and encourages conversion. Each section should naturally lead visitors toward taking action. Keep paragraphs concise and impactful.",
+    "longform": "You are writing an in-depth, long-form blog article or content piece of up to two thousand words. Take a comprehensive, authoritative approach that demonstrates deep expertise while remaining accessible. Build your argument methodically, using a clear narrative structure that guides readers through complex ideas. Focus on delivering valuable insights and thorough analysis. Use a professional yet conversational tone that maintains reader engagement throughout the extended length. Each section should build upon previous points while introducing new dimensions of the topic.",
+    "shortformcontext": "You are writing a focused, contextual page that needs to quickly orient and inform readers about a specific topic or concept in 500 words or less. Prioritize clarity and immediate relevance over comprehensive coverage. Use a direct, efficient writing style that frontloads key information. Keep sections brief but substantive, focusing on what readers need to know in this specific context. Maintain a helpful, straightforward tone that respects the reader's time while ensuring they grasp essential points.",
+    "product": "You are detailing a product page for an e-commerce site. Focus on highlighting unique selling points, specifications, and benefits of the product. Use persuasive language to showcase how the product solves problems or enhances the user's life. Include clear calls-to-action towards purchasing or adding to cart. Ensure the tone is enthusiastic yet informative, with concise sections for easy scanning.",
+    "aboutus": "You're crafting the 'About Us' page for a company website. Narrate the company's history, mission, vision, and values in a storytelling manner that resonates with visitors. Highlight key milestones, team culture, and what sets the company apart. Use a warm, approachable tone that builds trust and connection with the visitor. Include subtle calls-to-action encouraging contact or further exploration of the site.",
+    "contact": "You are writing for a contact page that must be approachable and reassuring. Outline all available contact methods clearly - phone, email, social media, etc. Provide concise instructions or forms for inquiries, emphasizing quick responses and customer satisfaction. Use a friendly, service-oriented tone to make potential clients feel welcome and valued.",
+    "service": "You are detailing a service page where clarity and benefit-focused content are key. Describe each service with emphasis on how it benefits the client, using case studies or testimonials if possible. Structure the content to guide the visitor from understanding the service to seeing its value, culminating in a strong call-to-action to get in touch or book a service. Keep the tone professional yet engaging.",
+    "faq": "You're compiling an FAQ page intended to preemptively answer common questions. Write in a straightforward, informative style, addressing questions succinctly but thoroughly. Organize questions by relevance or category for ease of use. Use a tone that reassures and educates, making users feel their queries are anticipated and valued."
+  },
+  "pagePromptsDetails": {
+    "landing": {
+      "title": "High-Traffic Landing Page",
+      "description": "Engage visitors with compelling offers and clear calls-to-action"
+    },
+    "longform": {
+      "title": "In-depth long-form Post",
+      "description": "Comprehensive, expert-driven analysis on complex topics"
+    },
+    "shortformcontext": {
+      "title": "Quick Context Piece",
+      "description": "Focused content delivering immediate clarity on specific concepts"
+    },
+    "product": {
+      "title": "Product Detail Page",
+      "description": "Highlighting unique features, benefits, and purchase options"
+    },
+    "aboutus": {
+      "title": "About Us",
+      "description": "Our story, mission, and what makes us unique"
+    },
+    "contact": {
+      "title": "Contact Us",
+      "description": "Get in touch with us easily and confidently"
+    },
+    "service": {
+      "title": "Services Overview",
+      "description": "Explore how our services can benefit you"
+    },
+    "faq": {
+      "title": "Frequently Asked Questions Page",
+      "description": "Answers to commonly asked questions"
+    }
+  },
+  "contextPrompt": "Using the following contextual information - both the broad topic/purpose you want to write about and any supporting details, documentation, or reference material - I will help craft appropriate content structured for your specific page type. Please provide both your high-level goal/topic and any relevant reference material you'd like incorporated:"
+}