astro-tractstack 2.3.4 → 2.4.0

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

@@ -1,6 +1,12 @@
 ---
 import Layout from '@/layouts/Layout.astro';
 import { getBrandConfig } from '@/utils/api/brandConfig';
+import { getFullContentMap } from '@/stores/analytics';
+import {
+  buildCodeHookBladePath,
+  fetchCodeHookBladeHtml,
+  resolveSSRFetchOrigin,
+} from '@/lib/codeHookHelper';
 import { handleFailedResponse } from '@/utils/backend';
 import { preHealthCheck } from '@/utils/backend';
 
@@ -56,6 +62,8 @@ try {
 
 const paneId = contextPaneData.id;
 const paneTitle = contextPaneData.title || 'Context';
+const codeHookTarget = contextPaneData.codeHookTarget;
+const codeHookOptions = contextPaneData.codeHookPayload?.options;
 
 // Get rendered fragment for the context pane
 let fragmentData = '';
@@ -94,6 +102,23 @@ const brandConfig = await getBrandConfig(tenantId);
 if (!brandConfig.SITE_INIT) {
   return Astro.redirect('/storykeep');
 }
+
+// Warm the in-process content-map store before SSR-fetching the codehook blade.
+await getFullContentMap(tenantId);
+
+let codeHookBladeHtml = '';
+if (codeHookTarget) {
+  const bladePath = buildCodeHookBladePath(codeHookTarget, {
+    paneId,
+    tenantId,
+    optionsStr: codeHookOptions || '',
+  });
+  codeHookBladeHtml = await fetchCodeHookBladeHtml(
+    bladePath,
+    Astro.request,
+    resolveSSRFetchOrigin(Astro.url, brandConfig.SITE_URL)
+  );
+}
 ---
 
 <Layout
@@ -108,16 +133,28 @@ if (!brandConfig.SITE_INIT) {
   storyfragmentId={paneId}
 >
   <main id="main-content" class="w-full">
-    <div
-      id={`pane-${paneId}`}
-      data-pane-id={paneId}
-      class="context-pane-container"
-      hx-get={`/api/v1/fragments/panes/${paneId}`}
-      hx-trigger="refresh"
-      hx-swap="innerHTML scroll:none"
-    >
-      <Fragment set:html={fragmentData} />
-    </div>
+    {
+      codeHookTarget ? (
+        <div
+          id={`pane-${paneId}`}
+          data-pane-id={paneId}
+          class="context-pane-container"
+        >
+          <Fragment set:html={codeHookBladeHtml} />
+        </div>
+      ) : (
+        <div
+          id={`pane-${paneId}`}
+          data-pane-id={paneId}
+          class="context-pane-container"
+          hx-get={`/api/v1/fragments/panes/${paneId}`}
+          hx-trigger="refresh"
+          hx-swap="innerHTML scroll:none"
+        >
+          <Fragment set:html={fragmentData} />
+        </div>
+      )
+    }
 
     <div class="py-12 text-center text-2xl md:text-3xl">
       <button

package/templates/src/pages/sandbox.astro

@@ -5,9 +5,7 @@ import Layout from '@/layouts/Layout.astro';
 import Header from '@/components/Header.astro';
 import { getFullContentMap } from '@/stores/analytics';
 import { getBrandConfig } from '@/utils/api/brandConfig';
-import CodeHook, {
-  components as codeHookComponents,
-} from '@/custom/CodeHook.astro';
+import { availableCodeHookIds } from '@/custom/codehooks';
 import StoryKeepHeader from '@/components/edit/Header';
 import StoryKeepToolBar from '@/components/edit/ToolBar';
 import StoryKeepToolMode from '@/components/edit/ToolMode';
@@ -64,15 +62,6 @@ const sandboxToken = `${timestamp}.${signature}`;
   isStoryKeep={true}
   isEditor={true}
 >
-  <CodeHook
-    target="get-tractstack"
-    options={{
-      params: {
-        options: JSON.stringify({ isEmbedded: false }),
-      },
-    }}
-  />
-
   <Header
     title={title}
     slug="sandbox"
@@ -115,7 +104,7 @@ const sandboxToken = `${timestamp}.${signature}`;
             fullContentMap={fullContentMap}
             fullCanonicalURL="/sandbox"
             urlParams={urlParams}
-            availableCodeHooks={Object.keys(codeHookComponents)}
+            availableCodeHooks={availableCodeHookIds}
             isSandboxMode={true}
             sandboxToken={sandboxToken}
             client:only="react"
@@ -137,7 +126,7 @@ const sandboxToken = `${timestamp}.${signature}`;
 
     <div class="pointer-events-auto max-h-full">
       <SettingsPanel
-        availableCodeHooks={Object.keys(codeHookComponents)}
+        availableCodeHooks={availableCodeHookIds}
         client:only="react"
       />
     </div>

package/templates/src/stores/analytics.ts

@@ -1,4 +1,4 @@
-import { atom } from 'nanostores';
+import { atom, computed } from 'nanostores';
 import { TractStackAPI } from '@/utils/api';
 
 interface AvailableFilter {
@@ -11,43 +11,38 @@ export interface AppliedFilter {
   value: string;
 }
 
-const tenantEpinetCustomFilters = atom<
-  Record<
+export interface EpinetFiltersState {
+  enabled: boolean;
+  visitorType: 'all' | 'anonymous' | 'known';
+  selectedUserId: string | null;
+  startTimeUTC: string | null;
+  endTimeUTC: string | null;
+  userCounts: Array<{ id: string; count: number; isKnown: boolean }>;
+  hourlyNodeActivity: Record<
     string,
-    {
-      enabled: boolean;
-      visitorType: 'all' | 'anonymous' | 'known';
-      selectedUserId: string | null;
-      startTimeUTC: string | null;
-      endTimeUTC: string | null;
-      userCounts: Array<{ id: string; count: number; isKnown: boolean }>;
-      hourlyNodeActivity: Record<
-        string,
-        Record<
-          string,
-          {
-            events: Record<string, number>;
-            visitorIds: string[];
-          }
-        >
-      >;
-      availableFilters: AvailableFilter[];
-      appliedFilters: AppliedFilter[];
-    }
-  >
->({});
+    Record<
+      string,
+      {
+        events: Record<string, number>;
+        visitorIds: string[];
+      }
+    >
+  >;
+  availableFilters: AvailableFilter[];
+  appliedFilters: AppliedFilter[];
+}
 
-const tenantFullContentMaps = atom<
-  Record<
-    string,
-    {
-      data: any[];
-      lastUpdated: number;
-    }
-  >
->({});
+export interface TenantFullContentMapState {
+  data: any[];
+  lastUpdated: number;
+}
+
+const tenantEpinetCustomFilters = atom<Record<string, EpinetFiltersState>>({});
+
+const tenantFullContentMaps = atom<Record<string, TenantFullContentMapState>>(
+  {}
+);
 
-// Helper to get current tenant ID
 function getCurrentTenantId(): string {
   const resolvedTenantId =
     (typeof window !== 'undefined' && window.TRACTSTACK_CONFIG?.tenantId) ||
@@ -56,9 +51,9 @@ function getCurrentTenantId(): string {
   return resolvedTenantId;
 }
 
-const defaultEpinetFilters = {
+const defaultEpinetFilters: EpinetFiltersState = {
   enabled: false,
-  visitorType: 'all' as 'all' | 'anonymous' | 'known',
+  visitorType: 'all',
   selectedUserId: null,
   startTimeUTC: null,
   endTimeUTC: null,
@@ -68,81 +63,56 @@ const defaultEpinetFilters = {
   appliedFilters: [],
 };
 
-const createEpinetFiltersStore = () => {
-  const store = {
-    get: () => {
-      const tenantId = getCurrentTenantId();
-      return tenantEpinetCustomFilters.get()[tenantId] || defaultEpinetFilters;
-    },
-
-    set: (tenantId: string, updates: any) => {
-      const currentFilters =
-        tenantEpinetCustomFilters.get()[tenantId] || defaultEpinetFilters;
-      tenantEpinetCustomFilters.set({
-        ...tenantEpinetCustomFilters.get(),
-        [tenantId]: {
-          ...currentFilters,
-          ...updates,
-        },
-      });
-    },
-
-    subscribe: (callback: (value: any) => void) => {
-      const tenantId = getCurrentTenantId();
-      return tenantEpinetCustomFilters.subscribe((filters) => {
-        callback(filters[tenantId] || defaultEpinetFilters);
-      });
-    },
-    lc: 0,
-    listen: function (callback: any) {
-      return this.subscribe(callback);
-    },
-    notify: function () {},
-    off: function () {},
-    get value() {
-      return this.get();
-    },
-  };
-
-  return store;
-};
-
-const createFullContentMapStore = () => {
-  const store = {
-    get: () => {
-      const tenantId = getCurrentTenantId();
-      return tenantFullContentMaps.get()[tenantId] || null;
-    },
+export const epinetCustomFilters = computed(
+  tenantEpinetCustomFilters,
+  (filters) => {
+    const tenantId = getCurrentTenantId();
+    return filters[tenantId] || defaultEpinetFilters;
+  }
+);
 
-    set: (tenantId: string, data: { data: any[]; lastUpdated: number }) => {
-      tenantFullContentMaps.set({
-        ...tenantFullContentMaps.get(),
-        [tenantId]: data,
-      });
-    },
+export function getEpinetCustomFilters(): EpinetFiltersState {
+  return epinetCustomFilters.get();
+}
 
-    subscribe: (callback: (value: any) => void) => {
-      const tenantId = getCurrentTenantId();
-      return tenantFullContentMaps.subscribe((maps) => {
-        callback(maps[tenantId] || null);
-      });
-    },
-    lc: 0,
-    listen: function (callback: any) {
-      return this.subscribe(callback);
-    },
-    notify: function () {},
-    off: function () {},
-    get value() {
-      return this.get();
+export function setEpinetCustomFilters(
+  tenantId: string,
+  updates: Partial<EpinetFiltersState>
+): void {
+  const currentFilters =
+    tenantEpinetCustomFilters.get()[tenantId] || defaultEpinetFilters;
+  tenantEpinetCustomFilters.set({
+    ...tenantEpinetCustomFilters.get(),
+    [tenantId]: {
+      ...currentFilters,
+      ...updates,
     },
-  };
+  });
+}
 
-  return store;
-};
+export const fullContentMapStore = computed(tenantFullContentMaps, (maps) => {
+  const tenantId = getCurrentTenantId();
+  return maps[tenantId] || null;
+});
+
+export function setTenantFullContentMap(
+  tenantId: string,
+  data: TenantFullContentMapState
+): void {
+  tenantFullContentMaps.set({
+    ...tenantFullContentMaps.get(),
+    [tenantId]: data,
+  });
+}
 
-export const epinetCustomFilters = createEpinetFiltersStore();
-export const fullContentMapStore = createFullContentMapStore();
+// Synchronous in-process accessor for the warm content-map atom, keyed on an
+// explicit tenantId (unlike fullContentMapStore.get(), which keys on
+// getCurrentTenantId() and resolves the wrong tenant during SSR sub-requests).
+// Returns [] on a cold miss; codehook blades fall back to the async
+// getFullContentMap(tenantId) when this is empty.
+export function getCachedFullContentMap(tenantId: string): any[] {
+  return tenantFullContentMaps.get()[tenantId]?.data ?? [];
+}
 
 export async function getFullContentMap(tenantId: string): Promise<any[]> {
   const api = new TractStackAPI(tenantId);

package/utils/inject-files.ts

@@ -1518,18 +1518,6 @@ export async function injectTemplateFiles(
       ),
       dest: 'src/components/codehooks/ListContentSetup.tsx',
     },
-    {
-      src: resolve(
-        '../templates/src/components/codehooks/ProductCardSetup.tsx'
-      ),
-      dest: 'src/components/codehooks/ProductCardSetup.tsx',
-    },
-    {
-      src: resolve(
-        '../templates/src/components/codehooks/ProductGridSetup.tsx'
-      ),
-      dest: 'src/components/codehooks/ProductGridSetup.tsx',
-    },
     {
       src: resolve(
         '../templates/src/components/codehooks/BunnyVideoWrapper.astro'
@@ -1541,6 +1529,32 @@ export async function injectTemplateFiles(
       dest: 'src/components/codehooks/BunnyVideoSetup.tsx',
     },
 
+    // CodeHook Blades (partial routes; core hooks overwritable)
+    {
+      src: resolve('../templates/src/pages/codehooks/featured-article.astro'),
+      dest: 'src/pages/codehooks/featured-article.astro',
+    },
+    {
+      src: resolve('../templates/src/pages/codehooks/list-content.astro'),
+      dest: 'src/pages/codehooks/list-content.astro',
+    },
+    {
+      src: resolve('../templates/src/pages/codehooks/search-widget.astro'),
+      dest: 'src/pages/codehooks/search-widget.astro',
+    },
+    {
+      src: resolve('../templates/src/pages/codehooks/bunny-video.astro'),
+      dest: 'src/pages/codehooks/bunny-video.astro',
+    },
+    {
+      src: resolve('../templates/src/pages/codehooks/epinet.astro'),
+      dest: 'src/pages/codehooks/epinet.astro',
+    },
+    {
+      src: resolve('../templates/src/pages/codehooks/[...hookId].astro'),
+      dest: 'src/pages/codehooks/[...hookId].astro',
+    },
+
     // Widget Components
     {
       src: resolve('../templates/src/components/widgets/Impression.tsx'),
@@ -1568,6 +1582,10 @@ export async function injectTemplateFiles(
       src: resolve('../templates/src/lib/resources.ts'),
       dest: 'src/lib/resources.ts',
     },
+    {
+      src: resolve('../templates/src/lib/codeHookHelper.ts'),
+      dest: 'src/lib/codeHookHelper.ts',
+    },
 
     // Client Scripts
     {
@@ -2357,15 +2375,6 @@ export async function injectTemplateFiles(
     },
 
     // Custom Components (Conditional)
-    {
-      src: resolve(
-        config?.includeExamples
-          ? '../templates/custom/with-examples/CodeHook.astro'
-          : '../templates/custom/minimal/CodeHook.astro'
-      ),
-      dest: 'src/custom/CodeHook.astro',
-      protected: true,
-    },
     {
       src: resolve(
         config?.includeExamples
@@ -2376,22 +2385,28 @@ export async function injectTemplateFiles(
       protected: true,
     },
     {
-      src: resolve(
-        config?.includeExamples
-          ? '../templates/custom/with-examples/HeaderWidget.astro'
-          : '../templates/custom/minimal/HeaderWidget.astro'
-      ),
+      src: resolve('../templates/custom/minimal/HeaderWidget.astro'),
       dest: 'src/custom/HeaderWidget.astro',
       protected: true,
     },
     {
-      src: resolve('../templates/src/utils/customHelpers.ts'),
-      dest: 'src/utils/customHelpers.ts',
+      src: resolve('../templates/custom/customHelpers.ts'),
+      dest: 'src/custom/customHelpers.ts',
+      protected: true,
+    },
+    {
+      src: resolve('../templates/custom/shopify/shopifyCustomHelper.ts'),
+      dest: 'src/custom/shopify/shopifyCustomHelper.ts',
       protected: true,
     },
     {
-      src: resolve('../templates/src/utils/booking/appointmentMode.ts'),
-      dest: 'src/utils/booking/appointmentMode.ts',
+      src: resolve('../templates/custom/shopify/shopifyHelpers.ts'),
+      dest: 'src/custom/shopify/shopifyHelpers.ts',
+      protected: true,
+    },
+    {
+      src: resolve('../templates/custom/shopify/appointmentMode.ts'),
+      dest: 'src/custom/shopify/appointmentMode.ts',
       protected: true,
     },
     {
@@ -2440,6 +2455,33 @@ export async function injectTemplateFiles(
       protected: true,
     },
 
+    // CodeHook manifest (frontend capability list; hand-maintained, protected)
+    {
+      src: resolve(
+        config?.includeExamples
+          ? '../templates/custom/with-examples/codehooks.ts'
+          : '../templates/custom/minimal/codehooks.ts'
+      ),
+      dest: 'src/custom/codehooks.ts',
+      protected: true,
+    },
+
+    // CodeHook Blades (userland hooks; protected once installed)
+    {
+      src: resolve(
+        '../templates/src/pages/codehooks/shopify-product-grid.astro'
+      ),
+      dest: 'src/pages/codehooks/shopify-product-grid.astro',
+      protected: true,
+    },
+    {
+      src: resolve(
+        '../templates/src/pages/codehooks/shopify-service-list.astro'
+      ),
+      dest: 'src/pages/codehooks/shopify-service-list.astro',
+      protected: true,
+    },
+
     // Example Components (Conditional)
     ...(config?.includeExamples
       ? [
@@ -2456,20 +2498,13 @@ export async function injectTemplateFiles(
             protected: true,
           },
           {
-            src: resolve('../templates/custom/with-examples/ProductGrid.astro'),
-            dest: 'src/custom/ProductGrid.astro',
-            protected: true,
-          },
-          {
-            src: resolve(
-              '../templates/custom/with-examples/ProductCardWrapper.astro'
-            ),
-            dest: 'src/custom/ProductCardWrapper.astro',
+            src: resolve('../templates/src/pages/codehooks/custom-hero.astro'),
+            dest: 'src/pages/codehooks/custom-hero.astro',
             protected: true,
           },
           {
-            src: resolve('../templates/custom/with-examples/ProductCard.astro'),
-            dest: 'src/custom/ProductCard.astro',
+            src: resolve('../templates/src/pages/codehooks/get-crafting.astro'),
+            dest: 'src/pages/codehooks/get-crafting.astro',
             protected: true,
           },
           {

package/templates/custom/minimal/CodeHook.astro

@@ -1,72 +0,0 @@
----
-import FeaturedArticle from '@/components/codehooks/FeaturedArticle.astro';
-import ListContent from '@/components/codehooks/ListContent.astro';
-import SearchWidget from '@/components/codehooks/SearchWidget.tsx';
-import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
-import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
-import ShopifyProductGrid from '@/custom/shopify/ShopifyProductGrid';
-import ShopifyServiceList from '@/custom/shopify/ShopifyServiceList';
-import type { FullContentMapItem } from '@/types/tractstack';
-import type { ResourceNode } from '@/types/compositorTypes';
-// import CustomHero from './CustomHero.astro';
-// Uncomment to add custom components
-
-export interface Props {
-  target: string;
-  paneId: string;
-  fullContentMap: FullContentMapItem[];
-  resourcesPayload?: Record<string, ResourceNode[]>;
-  options?: {
-    params?: {
-      options?: string;
-    };
-  };
-}
-
-const { target, options, fullContentMap, resourcesPayload = {} } = Astro.props;
-
-export const components = {
-  'featured-article': true,
-  'featured-content': true,
-  'list-content': true,
-  'search-widget': true,
-  'bunny-video': import.meta.env.PUBLIC_ENABLE_BUNNY === 'true',
-  epinet: true,
-  'shopify-product-grid': true,
-  'shopify-service-list': true,
-  // "custom-hero": true,  // Uncomment when you create CustomHero.astro
-};
----
-
-{
-  target === 'list-content' ? (
-    <ListContent options={options} contentMap={fullContentMap} />
-  ) : target === 'featured-article' ? (
-    <FeaturedArticle options={options} contentMap={fullContentMap} />
-  ) : target === 'search-widget' ? (
-    <SearchWidget fullContentMap={fullContentMap} client:load />
-  ) : target === 'bunny-video' && import.meta.env.PUBLIC_ENABLE_BUNNY ? (
-    <BunnyVideoWrapper options={options} />
-  ) : target === 'epinet' ? (
-    <EpinetWrapper fullContentMap={fullContentMap} client:only="react" />
-  ) : target === 'shopify-product-grid' ? (
-    <ShopifyProductGrid
-      options={options}
-      resources={resourcesPayload}
-      client:only="react"
-    />
-  ) : target === 'shopify-service-list' ? (
-    <ShopifyServiceList
-      options={options}
-      resources={resourcesPayload}
-      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>
-    </div>
-  )
-}

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

@@ -1,81 +0,0 @@
----
-import CustomHero from './CustomHero.astro';
-import SearchWidget from '@/components/codehooks/SearchWidget.tsx';
-import FeaturedArticle from '@/components/codehooks/FeaturedArticle.astro';
-import ListContent from '@/components/codehooks/ListContent.astro';
-import BunnyVideoWrapper from '@/components/codehooks/BunnyVideoWrapper.astro';
-import EpinetWrapper from '@/components/codehooks/EpinetWrapper';
-import ProductCardWrapper from './ProductCardWrapper.astro';
-import ProductGrid from './ProductGrid.astro';
-import SandboxLauncher from './SandboxLauncher';
-import ShopifyProductGrid from '@/custom/shopify/ShopifyProductGrid';
-import ShopifyServiceList from '@/custom/shopify/ShopifyServiceList';
-import type { FullContentMapItem } from '@/types/tractstack';
-import type { ResourceNode } from '@/types/compositorTypes';
-
-export interface Props {
-  target: string;
-  paneId: string;
-  fullContentMap: FullContentMapItem[];
-  resourcesPayload?: Record<string, ResourceNode[]>;
-  options?: {
-    params?: {
-      options?: string;
-    };
-  };
-}
-
-const { target, options, fullContentMap, resourcesPayload = {} } = Astro.props;
-
-export const components = {
-  'custom-hero': true,
-  'featured-article': true,
-  'list-content': true,
-  'search-widget': true,
-  'product-card': true,
-  'product-grid': true,
-  'get-crafting': true,
-  'bunny-video': import.meta.env.PUBLIC_ENABLE_BUNNY === 'true',
-  epinet: true,
-  'shopify-product-grid': true,
-  'shopify-service-list': true,
-};
----
-
-{
-  target === 'product-card' ? (
-    <ProductCardWrapper options={options} resourcesPayload={resourcesPayload} />
-  ) : target === 'product-grid' ? (
-    <ProductGrid options={options} resourcesPayload={resourcesPayload} />
-  ) : target === 'list-content' ? (
-    <ListContent options={options} contentMap={fullContentMap} />
-  ) : target === 'featured-article' ? (
-    <FeaturedArticle options={options} contentMap={fullContentMap} />
-  ) : target === 'search-widget' ? (
-    <SearchWidget fullContentMap={fullContentMap} client:load />
-  ) : target === 'bunny-video' && import.meta.env.PUBLIC_ENABLE_BUNNY ? (
-    <BunnyVideoWrapper options={options} />
-  ) : target === 'get-crafting' ? (
-    <SandboxLauncher client:only="react" />
-  ) : target === 'custom-hero' ? (
-    <CustomHero />
-  ) : target === 'epinet' ? (
-    <EpinetWrapper fullContentMap={fullContentMap} client:only="react" />
-  ) : target === 'shopify-product-grid' ? (
-    <ShopifyProductGrid
-      options={options}
-      resources={resourcesPayload}
-      client:only="react"
-    />
-  ) : target === 'shopify-service-list' ? (
-    <ShopifyServiceList
-      options={options}
-      resources={resourcesPayload}
-      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>
-  )
-}