astro-tractstack 2.0.0-rc.0

package/templates/custom/minimal/CodeHook.astro

@@ -0,0 +1,53 @@
+---
+// CodeHook Dispatcher - Minimal Version
+// Framework components are always available, custom components are commented for guidance
+
+import FeaturedContent from '@/components/codehooks/FeaturedContent.astro';
+import ListContent from '@/components/codehooks/ListContent.astro';
+import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
+import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
+import type { FullContentMapItem } from '@/types/tractstack';
+// import CustomHero from './CustomHero.astro';  // Uncomment to add custom components
+
+export interface Props {
+  target: string;
+  fullContentMap: FullContentMapItem[];
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+}
+
+const { target, options, fullContentMap } = Astro.props;
+
+export const components = {
+  'featured-content': true,
+  'list-content': true,
+  'bunny-video': true,
+  epinet: true,
+  // "custom-hero": true,  // Uncomment when you create CustomHero.astro
+};
+---
+
+{
+  target === 'list-content' ? (
+    <ListContent options={options} contentMap={fullContentMap} />
+  ) : target === 'featured-content' ? (
+    <FeaturedContent options={options} contentMap={fullContentMap} />
+  ) : target === 'bunny-video' ? (
+    <BunnyVideoWrapper options={options} />
+  ) : target === 'epinet' ? (
+    <EpinetWrapper fullContentMap={fullContentMap} client:only="react" /> /* 
+  : target === "custom-hero" ? (
+    <CustomHero />
+  ) */
+  ) : (
+    <div class="rounded-lg bg-gray-50 p-8 text-center">
+      <p class="text-gray-600">CodeHook target "{target}" not found</p>
+      <p class="mt-2 text-sm text-gray-500">
+        Available: list-content, featured-content, bunny-video, epinet
+      </p>
+    </div>
+  )
+}

package/templates/custom/minimal/CustomRoutes.astro

@@ -0,0 +1,46 @@
+---
+// V2 Custom Routes - Minimal Version
+// This is a stub - implement your custom routes here
+
+export interface Props {
+  route: string;
+  slug: string;
+  resources: any[];
+  variation?: string;
+}
+
+const { route, slug, resources } = Astro.props;
+
+// Define available routes here
+export const routes = {
+  // collections: true,  // Uncomment to enable collections route
+};
+
+// Example implementation for collections:
+// const payload = resources; // V2 resources are already filtered by backend
+---
+
+{
+  (
+    /* 
+  Uncomment and customize routes as needed:
+  
+  route === "collections" ? (
+    <Collections route={route} slug={slug} resources={payload} />
+  ) : 
+  */
+    <div class="rounded-lg bg-gray-50 p-8 text-center">
+      <p class="text-gray-600">Custom route "{route}" not implemented</p>
+      <p class="mt-2 text-sm text-gray-500">
+        Edit <code>src/custom/CustomRoutes.astro</code> to add your custom
+        routes
+      </p>
+      <div class="mt-4 rounded border bg-white p-4 text-left text-xs">
+        <p class="mb-2 font-bold">Route Data:</p>
+        <p>Route: {route}</p>
+        <p>Slug: {slug}</p>
+        <p>Resources: {resources.length} items</p>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,49 @@
+---
+// V2 CodeHook Dispatcher - With Examples
+// Framework components and custom examples are available
+
+import CustomHero from './CustomHero.astro';
+import FeaturedContent from '@/components/codehooks/FeaturedContent.astro';
+import ListContent from '@/components/codehooks/ListContent.astro';
+import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
+import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
+import type { FullContentMapItem } from '@/types/tractstack';
+
+export interface Props {
+  target: string;
+  fullContentMap: FullContentMapItem[];
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+}
+
+const { target, options, fullContentMap } = Astro.props;
+
+export const components = {
+  'custom-hero': true,
+  'featured-content': true,
+  'list-content': true,
+  'bunny-video': true,
+  epinet: true,
+};
+---
+
+{
+  target === 'list-content' ? (
+    <ListContent options={options} contentMap={fullContentMap} />
+  ) : target === 'featured-content' ? (
+    <FeaturedContent options={options} contentMap={fullContentMap} />
+  ) : target === 'bunny-video' ? (
+    <BunnyVideoWrapper options={options} />
+  ) : target === 'custom-hero' ? (
+    <CustomHero />
+  ) : target === 'epinet' ? (
+    <EpinetWrapper fullContentMap={fullContentMap} client:only="react" />
+  ) : (
+    <div class="rounded-lg bg-gray-50 p-8 text-center">
+      <p class="text-gray-600">CodeHook target "{target}" not found</p>
+    </div>
+  )
+}

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

@@ -0,0 +1,13 @@
+---
+// Custom Hero Component Example
+---
+
+<div class="flex h-80 items-center justify-center bg-yellow-300">
+  <div class="text-center">
+    <h1 class="mb-4 text-4xl font-bold text-gray-900">Custom Hero Component</h1>
+    <p class="text-lg text-gray-700">This is an example CodeHook component</p>
+    <p class="mt-2 text-sm text-gray-600">
+      Edit this in src/custom/CustomHero.astro
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,39 @@
+---
+// V2 Custom Routes - With Examples
+// Full Collections implementation included
+
+import Collections from './pages/Collections.astro';
+
+export interface Props {
+  route: string;
+  slug: string;
+  resources: any[];
+  variation?: string;
+}
+
+const { route, slug, resources } = Astro.props;
+
+export const routes = {
+  collections: true,
+};
+
+// V2: Resources are already filtered by backend, no client-side extraction needed
+const payload = resources;
+---
+
+{
+  route === 'collections' ? (
+    <Collections route={route} slug={slug} resources={payload} />
+  ) : (
+    <div class="rounded-lg bg-gray-50 p-8 text-center">
+      <p class="text-gray-600">Custom route "{route}" not found</p>
+      <p class="mt-2 text-sm text-gray-500">Available routes: collections</p>
+      <div class="mt-4 rounded border bg-white p-4 text-left text-xs">
+        <p class="mb-2 font-bold">Route Data:</p>
+        <p>Route: {route}</p>
+        <p>Slug: {slug}</p>
+        <p>Resources: {resources.length} items</p>
+      </div>
+    </div>
+  )
+}

package/templates/custom/with-examples/pages/Collections.astro

@@ -0,0 +1,110 @@
+---
+import Layout from '@/layouts/Layout.astro';
+//import type { MenuNode } from '@/types/tractstack';
+
+export interface Props {
+  route: string;
+  slug: string;
+  variation?: string;
+  resources: any[];
+}
+
+const { route, slug, resources } = Astro.props;
+
+// uncomment if you add a menu id
+//
+//let menuPayload: MenuNode | null = null;
+//const hardcodedMenuId = '';
+//const goBackend = import.meta.env.PUBLIC_GO_BACKEND || 'http://localhost:8080';
+//try {
+//  const menuResponse = await fetch(`${goBackend}/api/v1/nodes/menus/${hardcodedMenuId}`);
+//  if (menuResponse.ok) {
+//    menuPayload = await menuResponse.json();
+//  }
+//} catch (error) {
+//  console.error('Error fetching menu:', error);
+//}
+
+const targetSlug = `${route}-${slug}`;
+const categoryResources = resources || [];
+const activeResource = categoryResources.find(
+  (resource: any) => resource.slug === targetSlug
+);
+
+const pageTitle = `${route}=${slug}`;
+---
+
+<Layout title={pageTitle}>
+  <div class="border-b bg-gray-100 p-4">
+    <h1 class="text-2xl font-bold">{pageTitle}</h1>
+    <p class="text-sm text-gray-600">
+      Collections page - slug: {slug}
+    </p>
+  </div>
+
+  <main id="main-content" class="min-h-screen w-full">
+    <div class="bg-white p-8">
+      {
+        slug ? (
+          <div class="mx-auto max-w-4xl">
+            <h2 class="mb-4 text-xl font-bold">
+              Collection: {route}={slug}
+            </h2>
+
+            {activeResource ? (
+              <div class="mb-6 rounded-lg bg-blue-50 p-6">
+                <h3 class="mb-2 text-lg font-bold text-blue-900">
+                  {activeResource.title}
+                </h3>
+                <p class="mb-2 text-blue-800">{activeResource.oneliner}</p>
+                <div class="text-sm text-blue-600">
+                  <p>ID: {activeResource.id}</p>
+                  <p>Slug: {activeResource.slug}</p>
+                  <p>Category: {activeResource.categorySlug || 'none'}</p>
+                </div>
+              </div>
+            ) : (
+              <div class="mb-6 rounded-lg bg-yellow-50 p-6">
+                <p class="text-yellow-800">
+                  No active resource found for slug: {targetSlug}
+                </p>
+              </div>
+            )}
+
+            <div class="rounded-lg bg-gray-50 p-6">
+              <h3 class="mb-4 text-lg font-bold">
+                All Resources in Category ({categoryResources.length})
+              </h3>
+              {categoryResources.length > 0 ? (
+                <div class="grid gap-4 md:grid-cols-2">
+                  {categoryResources.map((resource: any) => (
+                    <div class="rounded border bg-white p-4">
+                      <h4 class="font-bold text-gray-900">{resource.title}</h4>
+                      <p class="mt-1 text-sm text-gray-600">
+                        {resource.oneliner}
+                      </p>
+                      <div class="mt-2 text-xs text-gray-500">
+                        <p>Slug: {resource.slug}</p>
+                        {resource.categorySlug && (
+                          <p>Category: {resource.categorySlug}</p>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <p class="text-gray-500">
+                  No resources found in this category.
+                </p>
+              )}
+            </div>
+          </div>
+        ) : null
+      }
+    </div>
+  </main>
+
+  <div class="border-t bg-gray-100 p-4">
+    <p class="text-sm text-gray-600">Collections footer</p>
+  </div>
+</Layout>

package/templates/env.example

@@ -0,0 +1,8 @@
+# For host project using TractStack integration --->
+## these are added via npx create-tractstack
+
+# REQUIRED
+PUBLIC_GO_BACKEND=http://localhost:8080
+PUBLIC_TENANTID=default
+# OPTIONAL: Multi-Tenant Configuration
+PUBLIC_ENABLE_MULTI_TENANT=false

package/templates/icons/h2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 275.824"><path fill-rule="nonzero" d="M150.843 275.824v-95.243H86.198v95.243H0V6.464h86.198v95.249h64.645V6.464h86.193v269.36h-86.193zM303.84 77.901l-11.204-61.526C328.838 5.462 364.897 0 400.809 0c14.365 0 26.362.433 35.988 1.293 9.625.86 19.607 3.019 29.95 6.464 10.344 3.447 18.534 8.191 24.566 14.223C505.107 35.769 512 56.888 512 85.333c0 28.444-8.043 49.42-24.133 62.925-16.09 13.499-49.996 29.014-101.713 46.545v12.064h121.539v68.957H286.599v-53.87c0-16.09 3.019-31.463 9.051-46.117 8.928-19.913 38.757-40.061 58.4-49.131 21.751-10.038 43.705-19.806 65.292-30.165V70.576c-39.24-4.372-76.974-1.792-115.502 7.325z"/></svg>

package/templates/icons/h3.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 280.87"><path fill-rule="nonzero" d="M150.086 274.438v-94.765H85.765v94.765H0V6.432h85.765v94.77h64.321V6.432h85.76v268.006h-85.76zM419.809 103.45V70.221c-35.124-5.87-78.74-.379-113.205 6.858l-11.153-60.786C330.332 5.434 364.062 0 396.653 0c28.013 0 48.312 1.717 60.887 5.145 12.581 3.429 21.869 7.577 27.876 12.434 13.148 11.153 19.727 28.018 19.727 50.601 0 28.59-11.866 49.173-35.594 61.749v2.147C497.85 143.795 512 165.092 512 195.966c0 15.154-2.355 28.089-7.075 38.806-4.715 10.721-10.646 19.012-17.792 24.872-7.151 5.86-16.582 10.504-28.306 13.938-17.438 4.857-41.951 7.288-73.539 7.288s-63.247-3.717-94.982-11.147l12.008-68.074c40.497 9.805 76.198 12.565 117.495 7.288v-32.804l-73.757-7.288v-56.82l73.757-8.575z"/></svg>

package/templates/icons/h4.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 262.508"><path fill-rule="nonzero" d="M147.007 262.508v-92.82H84.006v92.82H0V0h84.006v92.826h63.001V0h84.001v262.508h-84.001zm253.688 0v-42.002H271.334v-52.5L336.012 0h148.689v148.267H512v72.239h-27.299v42.002h-84.006zm-6.826-199.506l-40.003 85.265h52.078V63.002h-12.075z"/></svg>

package/templates/icons/h5.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 512 273.292"><path fill-rule="nonzero" d="M149.459 266.887v-94.369H85.406v94.369H0V0h85.406v94.374h64.053V0h85.401v266.887h-85.401zm137.501-4.696l11.958-70.457c27.043 6.546 50.743 9.819 71.098 9.819 20.356 0 37.08-.852 50.173-2.562v-24.017c-29.545-3.152-80.863-3.576-103.977-18.898-12.659-8.392-19.004-23.417-19.004-45.049 0-3.131 1.422-40.14 4.272-111.027h194.29l-6.405 73.448-101.202-5.976v29.782C450.546 104.642 512 102.514 512 177.642c0 17.935-2.42 33.09-7.262 45.477-4.837 12.382-10.602 21.778-17.294 28.183-6.688 6.406-16.155 11.313-28.395 14.732-12.241 3.415-22.988 5.478-32.243 6.188-9.25.712-21.561 1.07-36.934 1.07-37.009 0-71.315-3.702-102.912-11.101z"/></svg>

package/templates/icons/image.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+     viewBox="0 0 122.88 122.151" width="512" height="273.292" preserveAspectRatio="xMidYMid meet">
+<g>
+    <path d="M8.676,0h105.529c2.405,0,4.557,0.984,6.124,2.552c1.567,1.567,2.551,3.754,2.551,6.124v104.8 c0,2.405-0.983,4.557-2.551,6.124c-1.568,1.567-3.755,2.552-6.124,2.552H8.676c-2.406,0-4.557-0.984-6.124-2.553 C0.984,118.032,0,115.845,0,113.476V8.675C0,6.27,0.984,4.119,2.552,2.552C4.12,0.984,6.307,0,8.676,0L8.676,0z M9.097,88.323 l35.411-33.9c1.421-1.313,3.645-1.167,4.921,0.255c0.037,0.036,0.037,0.073,0.073,0.073l31.459,37.218l4.812-29.6 c0.328-1.896,2.114-3.208,4.01-2.879c0.729,0.109,1.385,0.474,1.895,0.948l22.07,23.184V10.773c0-0.474-0.183-0.875-0.511-1.166 c-0.291-0.292-0.729-0.511-1.166-0.511H10.737c-0.474,0-0.875,0.182-1.166,0.511c-0.292,0.291-0.511,0.729-0.511,1.166v77.55H9.097 L9.097,88.323z M90.526,19.866c3.464,0,6.635,1.422,8.895,3.682c2.297,2.296,3.682,5.431,3.682,8.895 c0,3.463-1.421,6.634-3.682,8.894c-2.296,2.297-5.431,3.682-8.895,3.682c-3.462,0-6.634-1.421-8.894-3.682 c-2.297-2.296-3.682-5.431-3.682-8.894c0-3.463,1.421-6.634,3.682-8.895C83.929,21.251,87.064,19.866,90.526,19.866L90.526,19.866z"/>
+</g>
+</svg>

package/templates/icons/text.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+     viewBox="0 0 100.16 122.88" width="512" height="273.292" preserveAspectRatio="xMidYMid meet">
+<style type="text/css">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style>
+<path class="st0" d="M89.06,18.28v101c0,1.98-1.64,3.6-3.66,3.6H74.43c-2.01,0-3.66-1.62-3.66-3.6v-101H58.24v100.99 c0,1.98-1.64,3.6-3.66,3.6H43.62c-2.01,0-3.66-1.62-3.66-3.6V79l-0.39,0C17.72,79,0,61.28,0,39.44C0,14.12,20.45,0,43.75,0H96.5 c2.01,0,3.66,1.64,3.66,3.66v10.97c0,2.01-1.65,3.66-3.66,3.66H89.06L89.06,18.28z"/>
+</svg>

package/templates/socials/codepen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 128 128" id="Social_Icons" version="1.1" viewBox="0 0 128 128" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="_x36__stroke"><g id="Codepen"><rect clip-rule="evenodd" fill="none" fill-rule="evenodd" height="128" width="128"/><path clip-rule="evenodd" d="M117,73.204L103.24,64L117,54.796V73.204z     M69.5,112.22V86.568L93.348,70.62l19.248,12.872L69.5,112.22z M64,77.012L44.548,64L64,50.988L83.456,64L64,77.012z M58.5,112.22    L15.404,83.492L34.656,70.62L58.5,86.568V112.22z M11,54.796L24.764,64L11,73.204V54.796z M58.5,15.78v25.652L34.656,57.384    L15.404,44.508L58.5,15.78z M69.5,15.78l43.096,28.728L93.348,57.384L69.5,41.432V15.78z M127.952,43.784    c-0.012-0.084-0.032-0.16-0.044-0.24c-0.028-0.156-0.056-0.312-0.096-0.46c-0.024-0.092-0.06-0.18-0.088-0.268    c-0.044-0.136-0.088-0.268-0.14-0.4c-0.036-0.092-0.08-0.184-0.124-0.268c-0.056-0.128-0.116-0.248-0.188-0.364    c-0.048-0.088-0.104-0.172-0.156-0.256c-0.072-0.116-0.148-0.228-0.232-0.336c-0.06-0.08-0.124-0.16-0.188-0.236    c-0.088-0.104-0.18-0.204-0.276-0.3c-0.072-0.072-0.14-0.148-0.216-0.212c-0.104-0.092-0.208-0.18-0.312-0.264    c-0.084-0.064-0.164-0.128-0.248-0.188c-0.032-0.02-0.06-0.048-0.092-0.068l-58.5-39c-1.848-1.232-4.252-1.232-6.104,0l-58.496,39    c-0.032,0.02-0.06,0.048-0.092,0.068c-0.088,0.06-0.168,0.124-0.248,0.188C2.004,40.264,1.9,40.352,1.8,40.444    c-0.076,0.064-0.148,0.14-0.22,0.212c-0.096,0.096-0.188,0.196-0.272,0.3c-0.068,0.076-0.132,0.156-0.192,0.236    c-0.08,0.108-0.156,0.22-0.228,0.336c-0.056,0.084-0.108,0.168-0.16,0.256C0.66,41.9,0.6,42.02,0.54,42.148    c-0.04,0.084-0.084,0.176-0.12,0.268c-0.056,0.132-0.1,0.264-0.144,0.4c-0.028,0.088-0.06,0.176-0.084,0.268    c-0.04,0.148-0.068,0.304-0.096,0.46c-0.016,0.08-0.036,0.156-0.044,0.24C0.02,44.016,0,44.256,0,44.5v39    c0,0.24,0.02,0.48,0.052,0.72c0.008,0.076,0.028,0.156,0.044,0.236c0.028,0.156,0.056,0.308,0.096,0.46    c0.024,0.092,0.056,0.18,0.084,0.268c0.044,0.132,0.088,0.268,0.144,0.404c0.036,0.088,0.08,0.176,0.12,0.264    c0.06,0.124,0.12,0.244,0.188,0.368c0.052,0.084,0.104,0.168,0.16,0.252c0.072,0.116,0.148,0.224,0.228,0.332    c0.06,0.084,0.124,0.164,0.192,0.24c0.084,0.1,0.176,0.204,0.272,0.296c0.072,0.076,0.144,0.148,0.22,0.216    c0.1,0.092,0.204,0.18,0.312,0.264c0.08,0.064,0.16,0.128,0.248,0.188c0.032,0.02,0.06,0.048,0.092,0.068l58.496,39    C61.872,127.692,62.936,128,64,128s2.128-0.308,3.052-0.924l58.5-39c0.032-0.02,0.06-0.048,0.092-0.068    c0.084-0.06,0.164-0.124,0.248-0.188c0.104-0.084,0.208-0.172,0.312-0.264c0.076-0.068,0.144-0.14,0.216-0.216    c0.096-0.092,0.188-0.196,0.276-0.296c0.064-0.076,0.128-0.156,0.188-0.24c0.084-0.108,0.16-0.216,0.232-0.332    c0.052-0.084,0.108-0.168,0.156-0.252c0.072-0.124,0.132-0.244,0.188-0.368c0.044-0.088,0.088-0.176,0.124-0.264    c0.052-0.136,0.096-0.272,0.14-0.404c0.028-0.088,0.064-0.176,0.088-0.268c0.04-0.152,0.068-0.304,0.096-0.46    c0.012-0.08,0.032-0.16,0.044-0.236c0.032-0.24,0.048-0.48,0.048-0.72v-39C128,44.256,127.984,44.016,127.952,43.784z" fill="#0B0B0A" fill-rule="evenodd" id="Codepen_1_"/></g></g></svg>

package/templates/socials/discord.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:none;}</style></defs><title/><g id="Discord"><path class="cls-1" d="M22.26,14.39l-.19.22a9.16,9.16,0,0,1,3.42,1.74A11.22,11.22,0,0,0,21.36,15a11.59,11.59,0,0,0-2.77,0l-.24,0a10.36,10.36,0,0,0-3.11.86c-.51.24-.81.4-.81.4A9.27,9.27,0,0,1,18,14.56l-.14-.17a6.77,6.77,0,0,0-3.85,1.44,18.34,18.34,0,0,0-2,8,5,5,0,0,0,4.19,2.08l.91-1.14a4.27,4.27,0,0,1-2.4-1.62s.14.1.39.24l.05,0,.13.07a7.31,7.31,0,0,0,1,.46,11.3,11.3,0,0,0,2,.59,9.61,9.61,0,0,0,3.56,0,8.85,8.85,0,0,0,2-.59,7.92,7.92,0,0,0,1.58-.81A4.32,4.32,0,0,1,23,24.8c.41.52.9,1.11.9,1.11a5,5,0,0,0,4.2-2.08,18.41,18.41,0,0,0-2-8A6.81,6.81,0,0,0,22.26,14.39Zm-4.74,8.16A1.53,1.53,0,1,1,18.92,21,1.47,1.47,0,0,1,17.52,22.55Zm5,0a1.53,1.53,0,0,1,0-3,1.53,1.53,0,0,1,0,3Z"/><path d="M29.19,8H10.81A2.82,2.82,0,0,0,8,10.83V29.17A2.82,2.82,0,0,0,10.81,32H26.36l-.72-2.54,1.75,1.83,1.66,1.53L32,35.43V10.83A2.82,2.82,0,0,0,29.19,8Zm-5.3,17.91s-.49-.59-.9-1.11a4.32,4.32,0,0,0,2.48-1.63,7.92,7.92,0,0,1-1.58.81,8.85,8.85,0,0,1-2,.59,9.61,9.61,0,0,1-3.56,0,11.3,11.3,0,0,1-2-.59,7.31,7.31,0,0,1-1-.46l-.13-.07-.05,0c-.25-.14-.39-.24-.39-.24a4.27,4.27,0,0,0,2.4,1.62l-.91,1.14a5,5,0,0,1-4.19-2.08,18.34,18.34,0,0,1,2-8,6.77,6.77,0,0,1,3.85-1.44l.14.17a9.27,9.27,0,0,0-3.61,1.79s.3-.16.81-.4a10.36,10.36,0,0,1,3.11-.86l.24,0a11.59,11.59,0,0,1,2.77,0,11.22,11.22,0,0,1,4.13,1.31,9.16,9.16,0,0,0-3.42-1.74l.19-.22a6.81,6.81,0,0,1,3.86,1.44,18.41,18.41,0,0,1,2,8A5,5,0,0,1,23.89,25.91Z"/><ellipse cx="22.52" cy="21.03" rx="1.4" ry="1.52"/><path d="M17.52,19.51A1.53,1.53,0,1,0,18.92,21,1.46,1.46,0,0,0,17.52,19.51Z"/></g></svg>

package/templates/socials/facebook.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook</title><path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/></svg>

package/templates/socials/github.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>

package/templates/socials/instagram.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"/></svg>

package/templates/socials/linkedin.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M30.071,27.101v-0.077c-0.016,0.026-0.033,0.052-0.05,0.077H30.071z"/><path d="M49.265,4.667H7.145c-2.016,0-3.651,1.596-3.651,3.563v42.613c0,1.966,1.635,3.562,3.651,3.562h42.12   c2.019,0,3.654-1.597,3.654-3.562V8.23C52.919,6.262,51.283,4.667,49.265,4.667z M18.475,46.304h-7.465V23.845h7.465V46.304z    M14.743,20.777h-0.05c-2.504,0-4.124-1.725-4.124-3.88c0-2.203,1.67-3.88,4.223-3.88c2.554,0,4.125,1.677,4.175,3.88   C18.967,19.052,17.345,20.777,14.743,20.777z M45.394,46.304h-7.465V34.286c0-3.018-1.08-5.078-3.781-5.078   c-2.062,0-3.29,1.389-3.831,2.731c-0.197,0.479-0.245,1.149-0.245,1.821v12.543h-7.465c0,0,0.098-20.354,0-22.459h7.465v3.179   c0.992-1.53,2.766-3.709,6.729-3.709c4.911,0,8.594,3.211,8.594,10.11V46.304z"/></g></svg>

package/templates/socials/mail.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="mail email e-mail letter" id="mail_email_e-mail_letter"><path d="M28,13a1,1,0,0,0-1,1v8a1,1,0,0,1-1,1H6a1,1,0,0,1-1-1V14a1,1,0,0,0-2,0v8a3,3,0,0,0,.88,2.12A3,3,0,0,0,6,25H26a3,3,0,0,0,2.12-.88A3,3,0,0,0,29,22V14A1,1,0,0,0,28,13Z"/><path d="M15.4,18.8a1,1,0,0,0,1.2,0L28.41,9.94a1,1,0,0,0,.3-1.23,3.06,3.06,0,0,0-.59-.83A3,3,0,0,0,26,7H6a3,3,0,0,0-2.12.88,3.06,3.06,0,0,0-.59.83,1,1,0,0,0,.3,1.23ZM6,9H26a.9.9,0,0,1,.28,0L16,16.75,5.72,9A.9.9,0,0,1,6,9Z"/></g></svg>

package/templates/socials/rumble.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Rumble</title><path d="M14.4528 13.5458c.8064-.6542.9297-1.8381.2756-2.6445a1.8802 1.8802 0 0 0-.2756-.2756 21.2127 21.2127 0 0 0-4.3121-2.776c-1.066-.51-2.256.2-2.4261 1.414a23.5226 23.5226 0 0 0-.14 5.5021c.116 1.23 1.292 1.964 2.372 1.492a19.6285 19.6285 0 0 0 4.5062-2.704v-.008zm6.9322-5.4002c2.0335 2.228 2.0396 5.637.014 7.8723A26.1487 26.1487 0 0 1 8.2946 23.846c-2.6848.6713-5.4168-.914-6.1662-3.5781-1.524-5.2002-1.3-11.0803.17-16.3045.772-2.744 3.3521-4.4661 6.0102-3.832 4.9242 1.174 9.5443 4.196 13.0764 8.0121v.002z"/></svg>

package/templates/socials/tiktok.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title/><g data-name="Layer 15" id="Layer_15"><path d="M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5H24a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Zm3,21a3,3,0,0,1-3,3H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3Z"/><path d="M22,12a3,3,0,0,1-3-3,1,1,0,0,0-2,0V19a3,3,0,1,1-3-3,1,1,0,0,0,0-2,5,5,0,1,0,5,5V13a4.92,4.92,0,0,0,3,1,1,1,0,0,0,0-2Z"/></g></svg>

package/templates/socials/twitch.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg data-name="Layer 1" id="Layer_1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#062b31;}</style></defs><title/><path class="cls-1" d="M116.32,10.5H19L11.48,29.74V106.2H37.13v14.3H52.31l14.1-14.3H87.68S115.87,78,116.32,78,116.32,10.5,116.32,10.5ZM106.8,72.91,90.86,89.24s-26.43-.51-26.94,0L49.73,103.38V89.24H28.35V20.39H106.8Z"/><rect class="cls-1" height="28.94" width="9.73" x="54.27" y="39.01"/><rect class="cls-1" height="28.94" width="9.73" x="80.4" y="39.01"/></svg>

package/templates/socials/twitter.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M161.014,464.013c193.208,0 298.885,-160.071 298.885,-298.885c0,-4.546 0,-9.072 -0.307,-13.578c20.558,-14.871 38.305,-33.282 52.408,-54.374c-19.171,8.495 -39.51,14.065 -60.334,16.527c21.924,-13.124 38.343,-33.782 46.182,-58.102c-20.619,12.235 -43.18,20.859 -66.703,25.498c-19.862,-21.121 -47.602,-33.112 -76.593,-33.112c-57.682,0 -105.145,47.464 -105.145,105.144c0,8.002 0.914,15.979 2.722,23.773c-84.418,-4.231 -163.18,-44.161 -216.494,-109.752c-27.724,47.726 -13.379,109.576 32.522,140.226c-16.715,-0.495 -33.071,-5.005 -47.677,-13.148l0,1.331c0.014,49.814 35.447,93.111 84.275,102.974c-15.464,4.217 -31.693,4.833 -47.431,1.802c13.727,42.685 53.311,72.108 98.14,72.95c-37.19,29.227 -83.157,45.103 -130.458,45.056c-8.358,-0.016 -16.708,-0.522 -25.006,-1.516c48.034,30.825 103.94,47.18 161.014,47.104" style="fill-rule:nonzero;"/></svg>

package/templates/socials/x.svg

@@ -0,0 +1 @@
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>X</title><path d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></svg>

package/templates/socials/youtube.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="100%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" version="1.1" viewBox="0 0 512 512" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M501.303,132.765c-5.887,-22.03 -23.235,-39.377 -45.265,-45.265c-39.932,-10.7 -200.038,-10.7 -200.038,-10.7c0,0 -160.107,0 -200.039,10.7c-22.026,5.888 -39.377,23.235 -45.264,45.265c-10.697,39.928 -10.697,123.238 -10.697,123.238c0,0 0,83.308 10.697,123.232c5.887,22.03 23.238,39.382 45.264,45.269c39.932,10.696 200.039,10.696 200.039,10.696c0,0 160.106,0 200.038,-10.696c22.03,-5.887 39.378,-23.239 45.265,-45.269c10.696,-39.924 10.696,-123.232 10.696,-123.232c0,0 0,-83.31 -10.696,-123.238Zm-296.506,200.039l0,-153.603l133.019,76.802l-133.019,76.801Z" style="fill-rule:nonzero;"/></svg>

package/templates/src/client/analytics-events.ts

@@ -0,0 +1,213 @@
+import { VERBOSE } from './sse';
+import { THRESHOLD_GLOSSED, THRESHOLD_READ } from '@/constants';
+
+interface AnalyticsEvent {
+  contentId: string;
+  contentType: 'Pane' | 'StoryFragment';
+  eventVerb: string;
+  duration?: number;
+}
+
+const paneViewTimes = new Map<string, number>();
+let hasTrackedEntered =
+  localStorage.getItem('tractstack_entered_tracked') === 'true';
+let currentStoryfragmentId: string | null = null;
+let isPageInitialized = false;
+let globalObserver: IntersectionObserver | null = null;
+
+function waitForSessionReady(): Promise<void> {
+  return new Promise((resolve) => {
+    if (window.TRACTSTACK_CONFIG?.session?.isReady) {
+      resolve();
+    } else {
+      window.addEventListener('tractstack:session-ready', () => resolve(), {
+        once: true,
+      });
+    }
+  });
+}
+
+export async function initAnalyticsTracking(storyfragmentId?: string) {
+  if (isPageInitialized) return;
+  isPageInitialized = true;
+
+  if (VERBOSE)
+    console.log('📊 ANALYTICS: Initializing tracking for page view.');
+  currentStoryfragmentId = storyfragmentId || null;
+  initPaneVisibilityTracking();
+  await waitForSessionReady();
+  trackEnteredEvent();
+  trackPageViewedEvent();
+}
+
+function trackEnteredEvent() {
+  if (!hasTrackedEntered && currentStoryfragmentId) {
+    sendAnalyticsEvent({
+      contentId: currentStoryfragmentId,
+      contentType: 'StoryFragment',
+      eventVerb: 'ENTERED',
+    });
+    hasTrackedEntered = true;
+    localStorage.setItem('tractstack_entered_tracked', 'true');
+  }
+}
+
+function trackPageViewedEvent() {
+  if (currentStoryfragmentId) {
+    // This event is now PURELY for analytics. It no longer triggers
+    // a synchronization workaround on the backend.
+    sendAnalyticsEvent({
+      contentId: currentStoryfragmentId,
+      contentType: 'StoryFragment',
+      eventVerb: 'PAGEVIEWED',
+    });
+  }
+}
+
+function initPaneVisibilityTracking() {
+  if (globalObserver) {
+    globalObserver.disconnect();
+  }
+  globalObserver = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        const paneId = getPaneIdFromElement(entry.target as HTMLElement);
+        if (!paneId) return;
+        if (entry.isIntersecting) {
+          if (!paneViewTimes.has(paneId)) {
+            paneViewTimes.set(paneId, Date.now());
+          }
+        } else {
+          const startTime = paneViewTimes.get(paneId);
+          if (startTime) {
+            const duration = Date.now() - startTime;
+            paneViewTimes.delete(paneId);
+            let eventVerb: string | null = null;
+            if (duration >= THRESHOLD_READ) eventVerb = 'READ';
+            else if (duration >= THRESHOLD_GLOSSED) eventVerb = 'GLOSSED';
+            if (eventVerb) {
+              sendAnalyticsEvent({
+                contentId: paneId,
+                contentType: 'Pane',
+                eventVerb,
+                duration,
+              });
+            }
+          }
+        }
+      });
+    },
+    { threshold: 0.1, rootMargin: '0px' }
+  );
+  observeAllPanes();
+}
+
+function observeAllPanes() {
+  if (!globalObserver) return;
+  const panes = document.querySelectorAll('[data-pane-id]');
+  panes.forEach((pane) => globalObserver!.observe(pane));
+}
+
+function setupLifecycleListeners() {
+  if (window.ANALYTICS_INITIALIZED) return;
+  window.ANALYTICS_INITIALIZED = true;
+
+  if (VERBOSE)
+    console.log(
+      '📊 ANALYTICS: Setting up lifecycle listeners for the first time.'
+    );
+
+  window.addEventListener('beforeunload', () => {
+    flushPendingPaneEvents();
+  });
+
+  document.addEventListener('astro:page-load', () => {
+    isPageInitialized = false;
+    flushPendingPaneEvents();
+    if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
+      initAnalyticsTracking(window.TRACTSTACK_CONFIG.storyfragmentId);
+    }
+  });
+
+  if (document.readyState === 'complete') {
+    if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
+      initAnalyticsTracking(window.TRACTSTACK_CONFIG.storyfragmentId);
+    }
+  } else {
+    document.addEventListener(
+      'DOMContentLoaded',
+      () => {
+        if (window.TRACTSTACK_CONFIG?.storyfragmentId) {
+          initAnalyticsTracking(window.TRACTSTACK_CONFIG.storyfragmentId);
+        }
+      },
+      { once: true }
+    );
+  }
+}
+
+function flushPendingPaneEvents() {
+  if (paneViewTimes.size === 0) return;
+  const flushTime = Date.now();
+  paneViewTimes.forEach((startTime, paneId) => {
+    const duration = flushTime - startTime;
+    let eventVerb: string | null = null;
+    if (duration >= THRESHOLD_READ) eventVerb = 'READ';
+    else if (duration >= THRESHOLD_GLOSSED) eventVerb = 'GLOSSED';
+    if (eventVerb) {
+      sendAnalyticsEvent({
+        contentId: paneId,
+        contentType: 'Pane',
+        eventVerb,
+        duration,
+      });
+    }
+  });
+  paneViewTimes.clear();
+}
+
+async function sendAnalyticsEvent(event: AnalyticsEvent): Promise<void> {
+  try {
+    const config = window.TRACTSTACK_CONFIG;
+    if (!config || !config.sessionId) return; // Use server-provided session ID
+
+    const sessionId = config.sessionId;
+    const formData: { [key: string]: string } = {
+      beliefId: event.contentId,
+      beliefType: event.contentType,
+      beliefValue: event.eventVerb,
+      paneId: '',
+    };
+
+    if (event.duration !== undefined) {
+      formData.duration = event.duration.toString();
+    }
+
+    await fetch(`${config.backendUrl}/api/v1/state`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'X-Tenant-ID': config.tenantId,
+        'X-TractStack-Session-ID': sessionId,
+        'X-StoryFragment-ID': config.storyfragmentId,
+      },
+      body: new URLSearchParams(formData),
+    });
+  } catch (error) {
+    console.error('❌ API ERROR: Analytics event failed', error, event);
+  }
+}
+
+function getPaneIdFromElement(element: HTMLElement): string | null {
+  return element.getAttribute('data-pane-id');
+}
+
+(window as any).initAnalyticsTracking = initAnalyticsTracking;
+
+setupLifecycleListeners();
+
+if (VERBOSE) {
+  console.log(
+    '📊 ANALYTICS: Analytics events module loaded and is persistent.'
+  );
+}