astro-tractstack 2.1.3 → 2.2.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { fileURLToPath as d } from "node:url";
 import { dirname as i, resolve as l } from "node:path";
-import { existsSync as n, mkdirSync as x, copyFileSync as k, writeFileSync as u } from "node:fs";
+import { existsSync as o, mkdirSync as x, copyFileSync as k, writeFileSync as u } from "node:fs";
 import { resolve as a } from "path";
 function b(t) {
   const e = i(d(t));
@@ -95,8 +95,16 @@ async function w(t, e, c) {
       dest: "src/components/compositor/Node.tsx"
     },
     {
-      src: t("../templates/src/components/compositor/NodeWithGuid.tsx"),
-      dest: "src/components/compositor/NodeWithGuid.tsx"
+      src: t(
+        "../templates/src/components/compositor/tools/NodeOverlay.tsx"
+      ),
+      dest: "src/components/compositor/tools/NodeOverlay.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/compositor/tools/PaneOverlay.tsx"
+      ),
+      dest: "src/components/compositor/tools/PaneOverlay.tsx"
     },
     {
       src: t(
@@ -106,15 +114,15 @@ async function w(t, e, c) {
     },
     {
       src: t(
-        "../templates/src/components/compositor/nodes/GridLayout.tsx"
+        "../templates/src/components/compositor/nodes/CreativePane.tsx"
       ),
-      dest: "src/components/compositor/nodes/GridLayout.tsx"
+      dest: "src/components/compositor/nodes/CreativePane.tsx"
     },
     {
       src: t(
-        "../templates/src/components/compositor/nodes/GridLayout_eraser.tsx"
+        "../templates/src/components/compositor/nodes/GridLayout.tsx"
       ),
-      dest: "src/components/compositor/nodes/GridLayout_eraser.tsx"
+      dest: "src/components/compositor/nodes/GridLayout.tsx"
     },
     {
       src: t(
@@ -132,24 +140,6 @@ async function w(t, e, c) {
       src: t("../templates/src/components/compositor/nodes/Pane.tsx"),
       dest: "src/components/compositor/nodes/Pane.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/compositor/nodes/Pane_eraser.tsx"
-      ),
-      dest: "src/components/compositor/nodes/Pane_eraser.tsx"
-    },
-    {
-      src: t(
-        "../templates/src/components/compositor/nodes/Pane_DesignLibrary.tsx"
-      ),
-      dest: "src/components/compositor/nodes/Pane_DesignLibrary.tsx"
-    },
-    {
-      src: t(
-        "../templates/src/components/compositor/nodes/Pane_layout.tsx"
-      ),
-      dest: "src/components/compositor/nodes/Pane_layout.tsx"
-    },
     {
       src: t(
         "../templates/src/components/codehooks/SandboxRegisterForm.tsx"
@@ -160,12 +150,6 @@ async function w(t, e, c) {
       src: t("../templates/src/components/compositor/nodes/Markdown.tsx"),
       dest: "src/components/compositor/nodes/Markdown.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/compositor/nodes/Markdown_eraser.tsx"
-      ),
-      dest: "src/components/compositor/nodes/Markdown_eraser.tsx"
-    },
     {
       src: t(
         "../templates/src/components/compositor/nodes/BgPaneWrapper.tsx"
@@ -194,24 +178,6 @@ async function w(t, e, c) {
       ),
       dest: "src/components/compositor/nodes/tagElements/NodeBasicTag.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/compositor/nodes/tagElements/NodeBasicTag_insert.tsx"
-      ),
-      dest: "src/components/compositor/nodes/tagElements/NodeBasicTag_insert.tsx"
-    },
-    {
-      src: t(
-        "../templates/src/components/compositor/nodes/tagElements/NodeBasicTag_eraser.tsx"
-      ),
-      dest: "src/components/compositor/nodes/tagElements/NodeBasicTag_eraser.tsx"
-    },
-    {
-      src: t(
-        "../templates/src/components/compositor/nodes/tagElements/NodeBasicTag_settings.tsx"
-      ),
-      dest: "src/components/compositor/nodes/tagElements/NodeBasicTag_settings.tsx"
-    },
     {
       src: t(
         "../templates/src/components/compositor/nodes/tagElements/NodeText.tsx"
@@ -230,24 +196,12 @@ async function w(t, e, c) {
       ),
       dest: "src/components/compositor/nodes/tagElements/NodeA.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/compositor/nodes/tagElements/NodeA_eraser.tsx"
-      ),
-      dest: "src/components/compositor/nodes/tagElements/NodeA_eraser.tsx"
-    },
     {
       src: t(
         "../templates/src/components/compositor/nodes/tagElements/NodeButton.tsx"
       ),
       dest: "src/components/compositor/nodes/tagElements/NodeButton.tsx"
     },
-    {
-      src: t(
-        "../templates/src/components/compositor/nodes/tagElements/NodeButton_eraser.tsx"
-      ),
-      dest: "src/components/compositor/nodes/tagElements/NodeButton_eraser.tsx"
-    },
     {
       src: t(
         "../templates/src/components/compositor/nodes/tagElements/NodeImg.tsx"
@@ -482,6 +436,30 @@ async function w(t, e, c) {
       ),
       dest: "src/components/edit/pane/steps/CopyInputStep.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/steps/AiCreativeDesignStep.tsx"
+      ),
+      dest: "src/components/edit/pane/steps/AiCreativeDesignStep.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/steps/AiStandardDesignStep.tsx"
+      ),
+      dest: "src/components/edit/pane/steps/AiStandardDesignStep.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/steps/AiLibraryCopyStep.tsx"
+      ),
+      dest: "src/components/edit/pane/steps/AiLibraryCopyStep.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/steps/AiRefineDesignStep.tsx"
+      ),
+      dest: "src/components/edit/pane/steps/AiRefineDesignStep.tsx"
+    },
     {
       src: t(
         "../templates/src/components/edit/pane/steps/DesignLibraryStep.tsx"
@@ -500,6 +478,12 @@ async function w(t, e, c) {
       ),
       dest: "src/components/edit/pane/steps/DirectInjectStep.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/pane/steps/CreativeInjectStep.tsx"
+      ),
+      dest: "src/components/edit/pane/steps/CreativeInjectStep.tsx"
+    },
     {
       src: t(
         "../templates/src/components/edit/pane/AddPanePanel_newCustomCopy.tsx"
@@ -629,10 +613,22 @@ async function w(t, e, c) {
       dest: "src/utils/etl/loader.ts"
     },
     // Compositor utils
+    {
+      src: t("../templates/src/utils/compositor/savePipeline.ts"),
+      dest: "src/utils/compositor/savePipeline.ts"
+    },
     {
       src: t("../templates/src/utils/compositor/aiPaneParser.ts"),
       dest: "src/utils/compositor/aiPaneParser.ts"
     },
+    {
+      src: t("../templates/src/utils/compositor/aiGeneration.ts"),
+      dest: "src/utils/compositor/aiGeneration.ts"
+    },
+    {
+      src: t("../templates/src/utils/compositor/htmlAst.ts"),
+      dest: "src/utils/compositor/htmlAst.ts"
+    },
     {
       src: t(
         "../templates/src/utils/compositor/nodesMarkdownGenerator.ts"
@@ -710,6 +706,10 @@ async function w(t, e, c) {
       src: t("../templates/src/stores/storykeep.ts"),
       dest: "src/stores/storykeep.ts"
     },
+    {
+      src: t("../templates/src/stores/previews.ts"),
+      dest: "src/stores/previews.ts"
+    },
     {
       src: t("../templates/src/stores/analytics.ts"),
       dest: "src/stores/analytics.ts"
@@ -879,6 +879,10 @@ async function w(t, e, c) {
       src: t("../templates/src/pages/api/tailwind.ts"),
       dest: "src/pages/api/tailwind.ts"
     },
+    {
+      src: t("../templates/src/pages/api/css.ts"),
+      dest: "src/pages/api/css.ts"
+    },
     {
       src: t("../templates/src/pages/api/sandbox.ts"),
       dest: "src/pages/api/sandbox.ts"
@@ -947,6 +951,10 @@ async function w(t, e, c) {
       src: t("../templates/src/components/search/SearchResults.tsx"),
       dest: "src/components/search/SearchResults.tsx"
     },
+    {
+      src: t("../templates/src/hooks/usePaneFragments.ts"),
+      dest: "src/hooks/usePaneFragments.ts"
+    },
     {
       src: t("../templates/src/hooks/useSearch.ts"),
       dest: "src/hooks/useSearch.ts"
@@ -1169,6 +1177,12 @@ async function w(t, e, c) {
       ),
       dest: "src/components/storykeep/controls/content/StoryFragmentTable.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/storykeep/controls/content/PaneTable.tsx"
+      ),
+      dest: "src/components/storykeep/controls/content/PaneTable.tsx"
+    },
     {
       src: t(
         "../templates/src/components/storykeep/controls/content/ContentBrowser.tsx"
@@ -1394,6 +1408,18 @@ async function w(t, e, c) {
       src: t("../templates/src/components/edit/state/StylesMemory.tsx"),
       dest: "src/components/edit/state/StylesMemory.tsx"
     },
+    {
+      src: t(
+        "../templates/src/components/edit/panels/CreativeImagePanel.tsx"
+      ),
+      dest: "src/components/edit/panels/CreativeImagePanel.tsx"
+    },
+    {
+      src: t(
+        "../templates/src/components/edit/panels/CreativeLinkPanel.tsx"
+      ),
+      dest: "src/components/edit/panels/CreativeLinkPanel.tsx"
+    },
     {
       src: t(
         "../templates/src/components/edit/panels/StyleWordCarouselPanel.tsx"
@@ -1997,8 +2023,20 @@ async function w(t, e, c) {
       dest: "public/icons/image.svg"
     },
     {
-      src: t("../templates/icons/text.svg"),
-      dest: "public/icons/text.svg"
+      src: t("../templates/icons/link.svg"),
+      dest: "public/icons/link.svg"
+    },
+    {
+      src: t("../templates/icons/p.svg"),
+      dest: "public/icons/p.svg"
+    },
+    {
+      src: t("../templates/icons/li.svg"),
+      dest: "public/icons/li.svg"
+    },
+    {
+      src: t("../templates/icons/code.svg"),
+      dest: "public/icons/code.svg"
     },
     // Social Icons
     {
@@ -2157,22 +2195,22 @@ async function w(t, e, c) {
   for (const s of r)
     try {
       const p = i(s.dest);
-      n(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 (!n(s.dest) || o)
-        if (n(s.src))
+      o(p) || x(p, { recursive: !0 });
+      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 (!o(s.dest) || n)
+        if (o(s.src))
           k(s.src, s.dest), e.info(`Updated ${s.dest}`);
         else {
-          const m = _(s.dest);
+          const m = y(s.dest);
           u(s.dest, m), e.info(`Created placeholder ${s.dest}`);
         }
       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) {
+function y(t) {
   return t.endsWith(".astro") ? `---
 // TractStack placeholder component
 ---

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-tractstack",
-  "version": "2.1.3",
-  "description": "Astro integration for TractStack - the digital experience platform (DXP) for the missing middle",
+  "version": "2.2.0",
+  "description": "Astro integration for TractStack - the free web press by At Risk Media",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -74,6 +74,8 @@
     "html-to-image": "^1.11.13",
     "nanostores": "^1.1.0",
     "player.js": "^0.1.0",
+    "postcss": "^8.5.6",
+    "postcss-selector-parser": "^7.1.1",
     "prettier": "3.7.4",
     "prettier-plugin-astro": "0.14.1",
     "prettier-plugin-tailwindcss": "0.7.2",

package/templates/css/custom.css

@@ -43,3 +43,8 @@ body {
 @media (prefers-reduced-motion) {
   scroll-behavior: auto;
 }
+
+/* Force lite-youtube to fill the container, overriding the 720px library limit */
+lite-youtube {
+  max-width: 100% !important; 
+}

package/templates/icons/code.svg

@@ -0,0 +1,18 @@
+<?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 fill-rule="evenodd" clip-rule="evenodd" 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.676
+        c-2.406,0-4.557-0.984-6.124-2.553C0.984,118.032,0,115.845,0,113.476V8.675
+        C0,6.27,0.984,4.119,2.552,2.552C4.12,0.984,6.307,0,8.676,0L8.676,0z
+        
+        M11,11 h100.88 v100.15 h-100.88 z
+        
+        M40,35 L20,61 L40,87 L48,80 L32,61 L48,42 Z
+        M82,35 L102,61 L82,87 L74,80 L90,61 L74,42 Z
+        M66,30 L56,92 H64 L74,30 Z
+    "/>
+</g>
+</svg>

package/templates/icons/li.svg

@@ -0,0 +1,4 @@
+<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 330 276">
+  <path fill-rule="nonzero" d="M0 6.464h86.198v183.162h103.802v86.198H0z"/>
+  <path fill-rule="nonzero" d="M235 6.464h86.198v269.36H235z"/>
+</svg>

package/templates/icons/link.svg

@@ -0,0 +1,22 @@
+<?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 fill-rule="evenodd" clip-rule="evenodd" 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.676
+        c-2.406,0-4.557-0.984-6.124-2.553C0.984,118.032,0,115.845,0,113.476V8.675
+        C0,6.27,0.984,4.119,2.552,2.552C4.12,0.984,6.307,0,8.676,0L8.676,0z
+        
+        M11,11 h100.88 v100.15 h-100.88 z
+        
+        M78.5,33.5 l-10,10 l6,6 l10-10 c4.4-4.4,4.4-11.6,0-16 c-4.4-4.4-11.6-4.4-16,0 
+        L58.5,33.5 l6,6 l10-10 C76,28,77,28,78.5,29.5 C80,31,80,32,78.5,33.5 z
+        
+        M67.5,42.5 l-6,6 l16,16 l6-6 L67.5,42.5 z
+        
+        M44.5,67.5 l10-10 l-6-6 l-10,10 c-4.4,4.4-4.4,11.6,0,16 c4.4,4.4,11.6,4.4,16,0 
+        l10-10 l-6-6 l-10,10 C47,73,46,73,44.5,71.5 C43,70,43,69,44.5,67.5 z
+    "/>
+</g>
+</svg>

package/templates/icons/p.svg

@@ -0,0 +1,3 @@
+<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 260 276">
+  <path fill="black" fill-rule="evenodd" d="M0 275.824V0h160c45 0 85 20 85 90.29 0 70.29-40 90.29-85 90.29H86.198v95.244H0z M86.198 58v64.58h65c15 0 25-10 25-32.29 0-22.29-10-32.29-25-32.29h-65z"/>
+</svg>

package/templates/src/client/app.js

@@ -27,8 +27,69 @@ if (!window.TractStackApp) {
 
     initialize(config) {
       log('Initializing with config from first page load.', config);
+
+      // 1. Capture the existing local session BEFORE we potentially overwrite it
+      // This is the "Memory" the Healer uses.
+      const localSessionId = localStorage.getItem('tractstack_session_id');
+
       this.config = config;
-      if (config.sessionId && !this.eventSource) {
+
+      // 2. Pass the captured local ID into the reconciliation logic
+      this.reconcileAndStart(localSessionId);
+    },
+
+    async reconcileAndStart(lsSession) {
+      const ssrSession = this.config.sessionId;
+
+      // Check for Split-Brain (LocalStorage has an ID that doesn't match what Astro sent)
+      if (lsSession && lsSession !== ssrSession) {
+        log(
+          'Session mismatch detected (Split-Brain). Attempting reconciliation.',
+          {
+            local: lsSession,
+            server: ssrSession,
+          }
+        );
+
+        try {
+          const response = await fetch(
+            `${this.config.backendUrl}/api/v1/auth/visit`,
+            {
+              method: 'POST',
+              headers: {
+                'X-Tenant-ID': this.config.tenantId,
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify({ sessionId: lsSession }),
+            }
+          );
+
+          if (response.ok) {
+            const data = await response.json();
+            log('Reconciliation successful. Switching to local session.', data);
+
+            // This function handles updating Cookies AND LocalStorage
+            this.updateSession(data.sessionId, data.fingerprint);
+            return; // EXIT HERE so we don't overwrite with the server session below
+          } else {
+            log(
+              'Reconciliation failed (session likely expired). Adopting server session.'
+            );
+          }
+        } catch (e) {
+          logError('Reconciliation network error.', e);
+        }
+      }
+
+      // 3. Finalize state: Persist the "Winner" to LocalStorage
+      // This runs if:
+      // A) There was no mismatch (Clean Start) -> Seeds the storage
+      // B) Reconciliation failed -> Resets storage to new Server ID
+      if (ssrSession) {
+        localStorage.setItem('tractstack_session_id', ssrSession);
+      }
+
+      if (this.config.sessionId && !this.eventSource) {
         this.startSSE();
       } else {
         log(
@@ -37,6 +98,24 @@ if (!window.TractStackApp) {
       }
     },
 
+    updateSession(sessionId, fingerprintId) {
+      document.cookie = `tractstack_session_id=${sessionId}; path=/; SameSite=Lax; max-age=86400`;
+      if (fingerprintId) {
+        document.cookie = `tractstack_fingerprint=${fingerprintId}; path=/; SameSite=Lax; max-age=31536000`;
+      }
+
+      this.config.sessionId = sessionId;
+      if (fingerprintId) this.config.fingerprintId = fingerprintId;
+
+      localStorage.setItem('tractstack_session_id', sessionId);
+
+      if (this.eventSource) {
+        this.eventSource.close();
+        this.eventSource = null;
+      }
+      this.startSSE();
+    },
+
     updateConfig(newConfig) {
       const oldStoryfragmentId = this.config.storyfragmentId;
       this.config = { ...this.config, ...newConfig };

package/templates/src/components/Footer.astro

@@ -171,7 +171,7 @@ const createdDate = created ? new Date(created) : new Date();
         >
           Tract Stack</a
         >
-        &ndash; the &#8220;free web press&#8221; by{` `}
+        &ndash; the &#8220;free web&#8221; press by{` `}
         <a
           href="https://atriskmedia.com/?utm_source=tractstack&utm_medium=www&utm_campaign=community"
           class="font-bold underline hover:text-black"

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

@@ -353,7 +353,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                 <input
                   type="text"
                   id="videoUrl"
-                  className={`sm:text-sm block w-full rounded-md border-gray-300 px-2.5 py-1.5 pr-10 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 ${videoUrl && !isValidBunnyUrl(videoUrl) ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''}`}
+                  className={`block w-full rounded-md border-gray-300 px-2.5 py-1.5 pr-10 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm ${videoUrl && !isValidBunnyUrl(videoUrl) ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''}`}
                   value={videoUrl}
                   onChange={(e) => setVideoUrl(e.target.value)}
                   onKeyDown={(e) => {
@@ -396,7 +396,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
               <input
                 type="text"
                 id="videoTitle"
-                className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                className="mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
                 value={videoTitle}
                 onChange={(e) => setVideoTitle(e.target.value)}
                 onKeyDown={(e) => {
@@ -524,7 +524,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                           }
                         }}
                         onBlur={() => saveChanges()}
-                        className={`sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 ${
+                        className={`mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm ${
                           formErrors[`title-${index}`] ? 'border-red-300' : ''
                         }`}
                       />
@@ -551,7 +551,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                           }
                         }}
                         onBlur={() => saveChanges()}
-                        className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                        className="mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
                       />
                     </div>
                   </div>
@@ -577,7 +577,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                             e.currentTarget.blur();
                           }
                         }}
-                        className={`sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 ${
+                        className={`mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm ${
                           formErrors[`startTime-${index}`]
                             ? 'border-red-300'
                             : ''
@@ -611,7 +611,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                             e.currentTarget.blur();
                           }
                         }}
-                        className={`sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 ${
+                        className={`mt-1 block w-full rounded-md border-gray-300 px-2.5 py-1.5 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm ${
                           formErrors[`endTime-${index}`] ? 'border-red-300' : ''
                         }`}
                         placeholder="60"

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

@@ -607,7 +607,7 @@ const EpinetDurationSelector = ({
                             : 'Select date range'}
                         </button>
                         {isDatePickerOpen && (
-                          <div className="sm:w-auto absolute z-10 mt-1 w-full rounded-md bg-white p-2 shadow-lg">
+                          <div className="absolute z-10 mt-1 w-full rounded-md bg-white p-2 shadow-lg md:w-auto">
                             <div className="mb-2 flex flex-wrap justify-between gap-2">
                               <button
                                 className="rounded-md p-1 text-sm hover:bg-gray-100"
@@ -642,7 +642,7 @@ const EpinetDurationSelector = ({
                                 End date: {formatDateDisplay(endDate)}
                               </p>
                             </div>
-                            <div className="sm:flex-row flex flex-col gap-4">
+                            <div className="flex flex-col gap-4 md:flex-row">
                               <div className="flex-1">
                                 <label
                                   htmlFor="start-date"
@@ -884,7 +884,7 @@ const EpinetDurationSelector = ({
           className={`fixed bottom-0 left-0 right-0 z-50 transform pr-12 transition-all duration-300 ease-in-out ${isAnimating ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'}`}
         >
           <div className="absolute inset-0 bg-black/10 backdrop-blur-sm" />
-          <div className="sm:px-6 lg:px-8 relative mx-auto max-w-7xl px-4 py-4">
+          <div className="relative mx-auto max-w-7xl px-4 py-4 md:px-6 xl:px-8">
             <div
               className={`flex items-center justify-between rounded-lg border px-6 py-4 shadow-lg ${styling.bgColor} ${styling.borderColor}`}
             >

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

@@ -264,7 +264,7 @@ const FeaturedArticleSetup = ({
               />
             </Combobox.Trigger>
           </div>
-          <Combobox.Content className="sm:text-sm absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <Combobox.Content className="absolute z-50 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none md:text-sm">
             {collection.items.map((item) => (
               <Combobox.Item
                 key={item.slug}

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

@@ -288,7 +288,7 @@ const ListContentSetup = ({ params, nodeId }: ListContentSetupProps) => {
             <input
               type="text"
               id="list-title"
-              className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-600 focus:ring-cyan-600"
+              className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-600 focus:ring-cyan-600 md:text-sm"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
               placeholder="e.g., Recent Articles"
@@ -305,7 +305,7 @@ const ListContentSetup = ({ params, nodeId }: ListContentSetupProps) => {
             <select
               id="page-size"
               name="page-size"
-              className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-cyan-600 focus:outline-none focus:ring-cyan-600"
+              className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-cyan-600 focus:outline-none focus:ring-cyan-600 md:text-sm"
               value={pageSize}
               onChange={(e) => handlePageSizeChange(parseInt(e.target.value))}
             >

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

@@ -121,7 +121,7 @@ export const ProductCardSetup = (props: ProductCardSetupProps) => {
             </Combobox.Label>
             <Combobox.Control>
               <Combobox.Input
-                className="sm:text-sm w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
                 placeholder="Search products..."
               />
             </Combobox.Control>

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

@@ -198,7 +198,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
             value={productType}
             onChange={(e) => setProductType(e.target.value)}
             placeholder="e.g., 'electronics'"
-            className="sm:text-sm w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+            className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
           />
         </div>
       )}
@@ -238,7 +238,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
                 </Combobox.Label>
                 <Combobox.Control>
                   <Combobox.Input
-                    className="sm:text-sm w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
+                    className="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 md:text-sm"
                     placeholder="Search products..."
                   />
                 </Combobox.Control>