astro-tractstack 2.0.0-rc.69 → 2.0.0-rc.70

package/dist/index.js

@@ -10,7 +10,7 @@ function b(t) {
 }
 function g(t, e) {
   e.info("TractStack configuration applied"), t.enableMultiTenant && e.info("Multi-tenant mode enabled"), t.includeExamples && e.info("Example components will be included");
-  const c = process.env.PUBLIC_GO_BACKEND, n = process.env.PUBLIC_TENANTID;
+  const c = process.env.PUBLIC_GO_BACKEND, o = process.env.PUBLIC_TENANTID;
   if (!c)
     e.warn("PUBLIC_GO_BACKEND not set - this will be required at runtime");
   else
@@ -19,11 +19,11 @@ function g(t, e) {
     } catch {
       e.error(`PUBLIC_GO_BACKEND is not a valid URL: ${c}`);
     }
-  return n ? /^[a-zA-Z0-9_-]+$/.test(n) ? e.info(`Tenant ID validated: ${n}`) : e.error(`PUBLIC_TENANTID contains invalid characters: ${n}`) : e.warn("PUBLIC_TENANTID not set - this will be required at runtime"), t;
+  return o ? /^[a-zA-Z0-9_-]+$/.test(o) ? e.info(`Tenant ID validated: ${o}`) : e.error(`PUBLIC_TENANTID contains invalid characters: ${o}`) : e.warn("PUBLIC_TENANTID not set - this will be required at runtime"), t;
 }
 async function w(t, e, c) {
   e.info("TractStack: Injecting template files");
-  const n = [
+  const o = [
     // Core Configuration
     {
       src: t("../templates/env.example"),
@@ -1254,6 +1254,18 @@ async function w(t, e, c) {
       ),
       dest: "src/components/codehooks/ListContentSetup.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/codehooks/ProductCardSetup.tsx"
+      ),
+      dest: "src/components/codehooks/ProductCardSetup.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/codehooks/ProductGridSetup.tsx"
+      ),
+      dest: "src/components/codehooks/ProductGridSetup.tsx"
+    },
     {
       src: t(
         "../templates/src/components/codehooks/BunnyVideoWrapper.astro"
@@ -2056,6 +2068,23 @@ async function w(t, e, c) {
         dest: "src/custom/CustomHero.astro",
         protected: !0
       },
+      {
+        src: t("../templates/custom/with-examples/ProductGrid.astro"),
+        dest: "src/custom/ProductGrid.astro",
+        protected: !0
+      },
+      {
+        src: t(
+          "../templates/custom/with-examples/ProductCardWrapper.astro"
+        ),
+        dest: "src/custom/ProductCardWrapper.astro",
+        protected: !0
+      },
+      {
+        src: t("../templates/custom/with-examples/ProductCard.astro"),
+        dest: "src/custom/ProductCard.astro",
+        protected: !0
+      },
       {
         src: t(
           "../templates/custom/with-examples/pages/Collections.astro"
@@ -2070,12 +2099,12 @@ async function w(t, e, c) {
       }
     ] : []
   ];
-  for (const s of n)
+  for (const s of o)
     try {
       const p = i(s.dest);
       r(p) || x(p, { recursive: !0 });
-      const o = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
-      if (!r(s.dest) || o)
+      const n = !s.protected && (s.dest === "tailwind.config.cjs" || s.dest.startsWith("src/components/codehooks/") || s.dest.startsWith("src/components/widgets/") || s.dest.startsWith("src/") || s.dest.startsWith("public/client/") || s.dest === ".gitignore");
+      if (!r(s.dest) || n)
         if (r(s.src))
           k(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
@@ -2084,8 +2113,8 @@ async function w(t, e, c) {
         }
       else s.protected ? e.info(`Protected: ${s.dest} (skipped overwrite)`) : e.info(`Skipped existing ${s.dest}`);
     } catch (p) {
-      const o = p instanceof Error ? p.message : String(p);
-      e.error(`Failed to create ${s.dest}: ${o}`);
+      const n = p instanceof Error ? p.message : String(p);
+      e.error(`Failed to create ${s.dest}: ${n}`);
     }
 }
 function _(t) {
@@ -2104,7 +2133,7 @@ function C(t = {}) {
   return {
     name: "astro-tractstack",
     hooks: {
-      "astro:config:setup": async ({ config: c, updateConfig: n, logger: s }) => {
+      "astro:config:setup": async ({ config: c, updateConfig: o, logger: s }) => {
         g(t, s);
         const p = t.enableMultiTenant || !1;
         if (s.info(
@@ -2124,7 +2153,7 @@ function C(t = {}) {
           ), new Error(
             "TractStack requires an SSR adapter. Please add @astrojs/node adapter to your astro.config.mjs"
           );
-        n({
+        o({
           vite: {
             define: {
               __TRACTSTACK_VERSION__: JSON.stringify("2.0.0-alpha.1"),

package/package.json

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

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

@@ -5,6 +5,8 @@ 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 type { FullContentMapItem } from '@/types/tractstack';
 import type { ResourceNode } from '@/types/compositorTypes';
 
@@ -19,20 +21,26 @@ export interface Props {
   };
 }
 
-const { target, options, fullContentMap /*, resourcesPayload */ } = Astro.props;
+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,
   'bunny-video': import.meta.env.PUBLIC_ENABLE_BUNNY === 'true',
   epinet: true,
 };
 ---
 
 {
-  target === 'list-content' ? (
+  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} />

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

@@ -0,0 +1,29 @@
+---
+import type { ResourceNode } from '@/types/compositorTypes';
+
+export interface Props {
+  product?: ResourceNode;
+}
+
+const { product } = Astro.props;
+---
+
+<div class="rounded-lg border bg-white p-6 shadow-sm">
+  <h2 class="mb-4 text-xl font-bold text-gray-900">
+    Product Card (Parameter Dump)
+  </h2>
+
+  {
+    product ? (
+      <pre class="whitespace-pre-wrap rounded-md bg-gray-50 p-4 text-xs text-gray-700">
+        {JSON.stringify(product, null, 2)}
+      </pre>
+    ) : (
+      <div class="rounded-md bg-red-50 p-4 text-center">
+        <p class="font-bold text-red-800">
+          Error: ProductCard component received no product data.
+        </p>
+      </div>
+    )
+  }
+</div>

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

@@ -0,0 +1,43 @@
+---
+import type { ResourceNode } from '@/types/compositorTypes';
+import ProductCard from './ProductCard.astro';
+
+export interface Props {
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+  resourcesPayload?: Record<string, ResourceNode[]>;
+}
+
+const { options, resourcesPayload } = Astro.props;
+
+let product: ResourceNode | undefined = undefined;
+let parsedOptions: { slug?: string } = {};
+
+if (options?.params?.options && typeof options.params.options === 'string') {
+  try {
+    parsedOptions = JSON.parse(options.params.options);
+  } catch (e) {
+    console.error('Failed to parse ProductCard options JSON:', e);
+  }
+}
+
+const targetSlug = parsedOptions?.slug;
+
+if (targetSlug && resourcesPayload) {
+  for (const key in resourcesPayload) {
+    const resourceArray = resourcesPayload[key] as ResourceNode[];
+    const found = resourceArray.find(
+      (resource) => resource.slug === targetSlug
+    );
+    if (found) {
+      product = found;
+      break;
+    }
+  }
+}
+---
+
+<ProductCard product={product} />

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

@@ -0,0 +1,64 @@
+---
+import type { ResourceNode } from '@/types/compositorTypes';
+import ProductCard from './ProductCard.astro';
+
+export interface Props {
+  options?: {
+    params?: {
+      options?: string;
+    };
+  };
+  resourcesPayload?: Record<string, ResourceNode[]>;
+}
+
+const { options, resourcesPayload } = Astro.props;
+
+let productsToDisplay: ResourceNode[] = [];
+let allFetchedProducts: ResourceNode[] = [];
+let parsedOptions: { productType?: string; category?: string; slugs?: string } =
+  {};
+
+if (options?.params?.options && typeof options.params.options === 'string') {
+  try {
+    parsedOptions = JSON.parse(options.params.options);
+  } catch (e) {
+    console.error('Failed to parse ProductGrid options JSON:', e);
+  }
+}
+
+if (resourcesPayload) {
+  for (const key in resourcesPayload) {
+    allFetchedProducts = resourcesPayload[key] as ResourceNode[];
+    break;
+  }
+}
+
+if (parsedOptions?.productType) {
+  productsToDisplay = allFetchedProducts.filter(
+    (product) =>
+      product.optionsPayload?.productType === parsedOptions.productType
+  );
+} else {
+  productsToDisplay = allFetchedProducts;
+}
+---
+
+<div class="space-y-6">
+  {
+    productsToDisplay.length > 0 ? (
+      <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+        {productsToDisplay.map((product) => (
+          <ProductCard product={product} />
+        ))}
+      </div>
+    ) : (
+      <div class="rounded-lg border bg-yellow-50 p-6 text-center shadow-sm">
+        <p class="font-medium text-yellow-800">No products to display.</p>
+        <p class="mt-1 text-sm text-yellow-700">
+          Check the grid configuration or ensure products match the specified
+          filters.
+        </p>
+      </div>
+    )
+  }
+</div>

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

@@ -0,0 +1,152 @@
+import { useState, useMemo } from 'react';
+import { Combobox } from '@ark-ui/react/combobox';
+import { Portal } from '@ark-ui/react/portal';
+import { createListCollection } from '@ark-ui/react/collection';
+import { useStore } from '@nanostores/react';
+import { fullContentMapStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import type { PaneNode } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
+
+interface ProductCardSetupProps {
+  nodeId: string;
+  params: Record<string, any> | null;
+  config: BrandConfig;
+}
+
+export const ProductCardSetup = (props: ProductCardSetupProps) => {
+  const { nodeId, params } = props;
+  const ctx = getCtx();
+  const $contentMap = useStore(fullContentMapStore);
+
+  const [showSelector, setShowSelector] = useState(false);
+
+  const products = useMemo(() => {
+    return $contentMap
+      .filter(
+        (item) => item.type === 'Resource' && item.categorySlug === 'product'
+      )
+      .map((item) => ({ label: item.title, value: item.slug }));
+  }, [$contentMap]);
+
+  const productCollection = useMemo(() => {
+    return createListCollection({
+      items: products,
+      itemToValue: (item) => item.value,
+      itemToString: (item) => item.label,
+    });
+  }, [products]);
+
+  const [selectedItem, setSelectedItem] = useState<{
+    label: string;
+    value: string;
+  } | null>(() => {
+    const currentSlug = params?.slug;
+    if (currentSlug) {
+      return products.find((p) => p.value === currentSlug) || null;
+    }
+    return null;
+  });
+
+  const updatePayload = (newPayload: Record<string, any>) => {
+    const paneNode = ctx.allNodes.get().get(nodeId) as PaneNode;
+    if (!paneNode) return;
+
+    const updatedPaneNode = {
+      ...paneNode,
+      codeHookPayload: {
+        target: paneNode.codeHookPayload?.target,
+        options: JSON.stringify(newPayload),
+      },
+      isChanged: true,
+    };
+    ctx.modifyNodes([updatedPaneNode]);
+  };
+
+  const handleSelect = (details: { value: string[] }) => {
+    const slug = details.value[0];
+    const selected = products.find((p) => p.value === slug);
+    if (selected) {
+      setSelectedItem(selected);
+      updatePayload({ slug: selected.value });
+      setShowSelector(false);
+    }
+  };
+
+  const handleClear = () => {
+    setSelectedItem(null);
+    updatePayload({});
+  };
+
+  return (
+    <div className="space-y-4 p-2">
+      <h3 className="font-bold text-gray-800">Product Card Configuration</h3>
+
+      <div className="rounded-md border bg-gray-50 p-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-bold text-gray-600">Selected Product</p>
+            <p className="truncate font-bold text-gray-900">
+              {selectedItem ? selectedItem.label : 'None'}
+            </p>
+          </div>
+          <div className="flex gap-x-2">
+            <button
+              type="button"
+              onClick={() => setShowSelector(!showSelector)}
+              className="rounded bg-white px-3 py-1 text-sm font-bold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            >
+              {showSelector ? 'Cancel' : 'Change'}
+            </button>
+            <button
+              type="button"
+              onClick={handleClear}
+              className="rounded bg-white px-3 py-1 text-sm font-bold text-red-600 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+              disabled={!selectedItem}
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {showSelector && (
+        <div className="space-y-2 rounded-md border p-3">
+          <Combobox.Root
+            collection={productCollection}
+            onValueChange={handleSelect}
+            lazyMount
+            unmountOnExit
+          >
+            <Combobox.Label className="text-sm font-bold text-gray-700">
+              Find a product
+            </Combobox.Label>
+            <Combobox.Control>
+              <Combobox.Input
+                className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                placeholder="Search products..."
+              />
+            </Combobox.Control>
+            <Portal>
+              <Combobox.Positioner>
+                <Combobox.Content className="z-50 max-h-60 overflow-y-auto rounded-md border bg-white shadow-lg">
+                  {products.map((item) => (
+                    <Combobox.Item
+                      key={item.value}
+                      item={item}
+                      className="relative cursor-pointer select-none px-4 py-2 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                    >
+                      <Combobox.ItemText>{item.label}</Combobox.ItemText>
+                    </Combobox.Item>
+                  ))}
+                </Combobox.Content>
+              </Combobox.Positioner>
+            </Portal>
+          </Combobox.Root>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductCardSetup;

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

@@ -0,0 +1,274 @@
+import { useState, useMemo, useEffect, useRef } from 'react';
+import {
+  RadioGroup,
+  type RadioGroup as RadioGroupNamespace,
+} from '@ark-ui/react/radio-group';
+import { Combobox } from '@ark-ui/react/combobox';
+import { Portal } from '@ark-ui/react/portal';
+import { createListCollection } from '@ark-ui/react/collection';
+import { useStore } from '@nanostores/react';
+import { fullContentMapStore } from '@/stores/storykeep';
+import { getCtx } from '@/stores/nodes';
+import CheckCircleIcon from '@heroicons/react/20/solid/CheckCircleIcon';
+import type { PaneNode } from '@/types/compositorTypes';
+import type { BrandConfig } from '@/types/tractstack';
+
+interface ProductGridSetupProps {
+  nodeId: string;
+  params: Record<string, any> | null;
+  config: BrandConfig;
+}
+
+const modes = [
+  {
+    id: 'all',
+    title: 'All Products',
+    description: 'Display all products from the catalog.',
+  },
+  {
+    id: 'type',
+    title: 'By Product Type',
+    description: 'Filter products by a specific type.',
+  },
+  {
+    id: 'specific',
+    title: 'Specific Products',
+    description: 'Manually select individual products.',
+  },
+];
+
+export const ProductGridSetup = (props: ProductGridSetupProps) => {
+  const { nodeId, params } = props;
+  const ctx = getCtx();
+  const $contentMap = useStore(fullContentMapStore);
+  const isInitialMount = useRef(true);
+
+  const products = useMemo(() => {
+    return $contentMap
+      .filter(
+        (item) => item.type === 'Resource' && item.categorySlug === 'product'
+      )
+      .map((item) => ({ label: item.title, value: item.slug }));
+  }, [$contentMap]);
+
+  const productCollection = useMemo(() => {
+    return createListCollection({
+      items: products,
+      itemToValue: (item) => item.value,
+      itemToString: (item) => item.label,
+    });
+  }, [products]);
+
+  const [selectionMode, setSelectionMode] = useState<
+    'all' | 'type' | 'specific'
+  >(() => {
+    if (params?.slugs !== undefined) return 'specific';
+    if (params?.productType !== undefined) return 'type';
+    return 'all';
+  });
+
+  const [productType, setProductType] = useState(
+    () => params?.productType || ''
+  );
+
+  const [selectedItems, setSelectedItems] = useState<
+    { label: string; value: string }[]
+  >(() => {
+    if (params?.slugs !== undefined) {
+      const slugs =
+        typeof params.slugs === 'string' && params.slugs
+          ? params.slugs.split(',')
+          : [];
+      return products.filter((p) => slugs.includes(p.value));
+    }
+    return [];
+  });
+
+  const [showSelector, setShowSelector] = useState(false);
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+
+    const constructPayload = () => {
+      if (selectionMode === 'all') {
+        return { category: 'product' };
+      }
+      if (selectionMode === 'type') {
+        return { category: 'product', productType: productType };
+      }
+      if (selectionMode === 'specific') {
+        const slugs = selectedItems.map((item) => item.value).join(',');
+        if (slugs) {
+          return { slugs };
+        }
+        return {}; // Return empty if no slugs are selected
+      }
+      return {};
+    };
+
+    const timeoutId = setTimeout(() => {
+      const paneNode = ctx.allNodes.get().get(nodeId) as PaneNode;
+      if (!paneNode) return;
+
+      const updatedPaneNode = {
+        ...paneNode,
+        codeHookPayload: {
+          target: paneNode.codeHookPayload?.target,
+          options: JSON.stringify(constructPayload()),
+        },
+        isChanged: true,
+      };
+      ctx.modifyNodes([updatedPaneNode]);
+    }, 500);
+
+    return () => clearTimeout(timeoutId);
+  }, [selectionMode, productType, selectedItems]);
+
+  const handleModeChange = (
+    details: RadioGroupNamespace.ValueChangeDetails
+  ) => {
+    if (details.value) {
+      setSelectionMode(details.value as 'all' | 'type' | 'specific');
+      setShowSelector(false);
+    }
+  };
+
+  const handleMultiSelectChange = (details: { value: string[] }) => {
+    const newSelection = products.filter((p) =>
+      details.value.includes(p.value)
+    );
+    setSelectedItems(newSelection);
+  };
+
+  const radioGroupStyles = `
+    .radio-item[data-state="checked"] { background-color: #f0f9ff; border-color: #0284c7; }
+    .radio-item[data-state="checked"] .check-icon { display: flex; }
+    .radio-item .check-icon { display: none; }
+  `;
+
+  return (
+    <div className="space-y-4 p-2">
+      <style>{radioGroupStyles}</style>
+      <h3 className="font-bold text-gray-800">Product Grid Configuration</h3>
+
+      <RadioGroup.Root
+        className="grid grid-cols-1 gap-4"
+        defaultValue={selectionMode}
+        onValueChange={handleModeChange}
+      >
+        {modes.map((option) => (
+          <RadioGroup.Item
+            key={option.id}
+            value={option.id}
+            className="radio-item relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none"
+          >
+            <div className="flex w-full items-center justify-between">
+              <div className="flex items-center">
+                <RadioGroup.ItemControl className="hidden" />
+                <div className="flex flex-col">
+                  <RadioGroup.ItemText className="block text-sm font-bold text-gray-900">
+                    {option.title}
+                  </RadioGroup.ItemText>
+                  <RadioGroup.ItemText className="flex items-center text-sm text-gray-500">
+                    {option.description}
+                  </RadioGroup.ItemText>
+                </div>
+              </div>
+              <div className="check-icon hidden shrink-0">
+                <CheckCircleIcon className="h-5 w-5 text-cyan-600" />
+              </div>
+            </div>
+            <RadioGroup.ItemHiddenInput />
+          </RadioGroup.Item>
+        ))}
+      </RadioGroup.Root>
+
+      {selectionMode === 'type' && (
+        <div className="space-y-2 rounded-md border p-3">
+          <label
+            htmlFor="productType"
+            className="text-sm font-medium text-gray-700"
+          >
+            Product Type
+          </label>
+          <input
+            type="text"
+            id="productType"
+            value={productType}
+            onChange={(e) => setProductType(e.target.value)}
+            placeholder="e.g., 'electronics'"
+            className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+          />
+        </div>
+      )}
+
+      {selectionMode === 'specific' && (
+        <div className="rounded-md border bg-gray-50 p-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm font-medium text-gray-600">
+                Selected Products
+              </p>
+              <p className="font-bold text-gray-900">
+                {selectedItems.length} item(s) selected
+              </p>
+            </div>
+            <button
+              type="button"
+              onClick={() => setShowSelector(!showSelector)}
+              className="rounded bg-white px-3 py-1 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            >
+              {showSelector ? 'Close' : 'Change Selection'}
+            </button>
+          </div>
+
+          {showSelector && (
+            <div className="mt-4 space-y-2">
+              <Combobox.Root
+                collection={productCollection}
+                value={selectedItems.map((item) => item.value)}
+                onValueChange={handleMultiSelectChange}
+                multiple
+                lazyMount
+                unmountOnExit
+              >
+                <Combobox.Label className="text-sm font-medium text-gray-700">
+                  Find products to include
+                </Combobox.Label>
+                <Combobox.Control>
+                  <Combobox.Input
+                    className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                    placeholder="Search products..."
+                  />
+                </Combobox.Control>
+                <Portal>
+                  <Combobox.Positioner>
+                    <Combobox.Content className="z-50 max-h-60 overflow-y-auto rounded-md border bg-white shadow-lg">
+                      {products.map((item) => (
+                        <Combobox.Item
+                          key={item.value}
+                          item={item}
+                          className="relative flex cursor-pointer select-none items-center px-4 py-2 text-gray-900 data-[highlighted]:bg-cyan-600 data-[highlighted]:text-white"
+                        >
+                          <Combobox.ItemText>{item.label}</Combobox.ItemText>
+                          <Combobox.ItemIndicator className="ml-auto">
+                            <CheckCircleIcon className="h-5 w-5" />
+                          </Combobox.ItemIndicator>
+                        </Combobox.Item>
+                      ))}
+                    </Combobox.Content>
+                  </Combobox.Positioner>
+                </Portal>
+              </Combobox.Root>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ProductGridSetup;

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

@@ -5,10 +5,18 @@ import { RenderChildren } from './RenderChildren';
 import FeaturedArticleSetup from '@/components/codehooks/FeaturedArticleSetup';
 import ListContentSetup from '@/components/codehooks/ListContentSetup';
 import BunnyVideoSetup from '@/components/codehooks/BunnyVideoSetup';
+import { ProductCardSetup } from '@/components/codehooks/ProductCardSetup';
+import { ProductGridSetup } from '@/components/codehooks/ProductGridSetup';
 import type { BgImageNode, ArtpackImageNode } from '@/types/compositorTypes';
 import type { NodeProps } from '@/types/nodeProps';
 
-const TARGETS = ['list-content', 'featured-article', 'bunny-video'];
+const TARGETS = [
+  'list-content',
+  'featured-article',
+  'bunny-video',
+  'product-card',
+  'product-grid',
+];
 
 const CodeHookContainer = ({
   payload,
@@ -157,7 +165,19 @@ const Pane = memo(
           id={getCtx(props).getNodeSlug(props.nodeId)}
           className={useFlexLayout ? '' : wrapperClasses}
         >
-          {codeHookPayload && codeHookTarget === 'featured-article' ? (
+          {codeHookPayload && codeHookTarget === 'product-card' ? (
+            <ProductCardSetup
+              nodeId={props.nodeId}
+              params={codeHookParams}
+              config={props.config!}
+            />
+          ) : codeHookPayload && codeHookTarget === 'product-grid' ? (
+            <ProductGridSetup
+              nodeId={props.nodeId}
+              params={codeHookParams}
+              config={props.config!}
+            />
+          ) : codeHookPayload && codeHookTarget === 'featured-article' ? (
             <FeaturedArticleSetup
               nodeId={props.nodeId}
               params={codeHookParams}

package/utils/inject-files.ts

@@ -1276,6 +1276,18 @@ 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'
@@ -2100,6 +2112,23 @@ export async function injectTemplateFiles(
             dest: 'src/custom/CustomHero.astro',
             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',
+            protected: true,
+          },
+          {
+            src: resolve('../templates/custom/with-examples/ProductCard.astro'),
+            dest: 'src/custom/ProductCard.astro',
+            protected: true,
+          },
           {
             src: resolve(
               '../templates/custom/with-examples/pages/Collections.astro'