astro-tractstack 2.0.47 → 2.1.0

package/README.md

@@ -1,23 +1,43 @@
-# TractStack v2
+# TractStack v2.1
 
-**Redeeming the web from boring experiences**
+**The Digital Experience Platform (DXP) for the Missing Middle.**
 
-Free web press by [At Risk Media](https://atriskmedia.com)
+> "Static websites treat every visitor like a stranger. TractStack treats them like a relationship."
 
-## Epistemic Hypermedia Server
+## The Problem: The Legacy Web has Amnesia
 
-TractStack is a new species of web platform that makes it possible for millions of websites to adapt to each visitor instead of showing everyone the same thing. It's an **adaptive website builder** that creates fast, beautiful, SEO-ready, and accessible websites that respond intelligently to user behavior.
+Static technology forces you to serve the exact same generic monologue to everyone—whether they are a "tire kicker" or a "high-ticket buyer."
 
-Built on [Astro](https://astro.build/) with [HTMX](https://htmx.org/) and a [Golang](https://go.dev/) backend, TractStack uses SQLite by default with optional [Turso](https://app.turso.tech/) cloud database support.
+Legacy tools (Wix, WordPress) suffer from **Intent Blindness**. They were built for page views, not signal clarity. They force your best leads to dig through a haystack to find the "hidden door" they need, causing them to bounce.
 
-## Key Features
+## The Solution: A Living Funnel
 
-- **Adaptive Content**: Websites that dynamically respond to visitor behavior
-- **Multi-tenant Architecture**: Host multiple sites from a single installation
-- **Built-in CMS**: StoryKeep content management system
-- **Real-time Updates**: Server-sent events and HTMX for dynamic interactions
-- **Production Ready**: SSL certificates, nginx integration, systemd services
-- **Zero Config Database**: Works out of the box with SQLite3
+TractStack is an **Epistemic Hypermedia Server** that acts as a triage nurse, not a brochure. It turns a fragile "page view" into a powerful, privacy-first user journey.
+
+### Core Philosophy
+
+1. **The Recall (No Cookies Required):** We moved "memory" from fragile cookies to a proprietary server-side logic engine. This ensures the conversation persists across privacy blocks and browser refreshes.
+2. **Smart Triage:** Our logic engine identifies 'High-Intent' users instantly and accelerates them to conversion, while automatically nurturing the rest.
+3. **Hidden Doors:** Instead of a static page, you define content paths that only open when a user signals interest.
+
+---
+
+## The Tech Stack: "Convert OS"
+
+TractStack is a hybrid engine designed for performance and logic.
+
+- **Frontend:** [Astro](https://astro.build/) (The "Free" Web Press). Renders SEO-ready, indexable HTML.
+- **Backend:** [Golang](https://go.dev/) (The Logic Processor). A compiled, server-side engine that manages state, session continuity, and adaptive content.
+- **Glue:** [HTMX](https://htmx.org/). Enables real-time, dynamic interactions without heavy client-side frameworks.
+- **Database:** SQLite by default (Zero Config) with optional [Turso](https://app.turso.tech/) support.
+
+## For Agencies & Empire Builders
+
+TractStack was engineered for the "Missing Middle"—high-volume creators and agencies who have outgrown static sites but don't need enterprise bloat.
+
+- **Wholesale DXP:** An infrastructure-first model. Agencies pay a flat wholesale fee and own the recurring margin on "Growth Projects."
+- **Visual Journey Mapping:** Don't guess what works. See it. TractStack visualizes the narrative journey of your audience, showing exactly how they navigate your Hidden Doors.
+- **No Code Required:** Build engaging, interactive websites where the "general noise" fades and specific content triggers based on engagement.
 
 ## Quick Install
 
@@ -174,22 +194,6 @@ TractStack v2 includes powerful multi-tenant capabilities:
 - **Capacity Management**: Configurable tenant limits
 - **Email Activation**: Automated tenant activation emails
 
-## SSL Certificate Management
-
-### Cloudflare DNS (Automated)
-
-Create `/root/.secrets/certbot/cloudflare.ini`:
-
-```ini
-dns_cloudflare_api_token = YOUR_API_TOKEN_HERE
-```
-
-Certificates are obtained automatically during installation.
-
-### Manual DNS Verification
-
-Without Cloudflare, the installer guides you through manual DNS TXT record verification.
-
 ## Service Management
 
 ### Main Installation
@@ -291,17 +295,9 @@ sudo ~/t8k/src/tractstack-go/pkg/scripts/t8k-uninstall.sh
 ## License
 
 The frontend Astro integration is available via the MIT license.
-
-The backend epistemic hypermedia server is available via the **Functional Source License (FSL)** - Commercial use encouraged!
-
-The only restriction is no re-selling TractStack as-a-service. Perfect for:
-
-- Agency client projects
-- Corporate websites
-- Personal projects
-- Open source contributions
+The backend epistemic hypermedia server is available via the **O'Sassy Open Source License**
 
 ---
 
-_TractStack v2 - Making the web adaptive, one site at a time_  
+TractStack v2.1
 _Made with ❤️ by [At Risk Media](https://atriskmedia.com)_

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "astro-tractstack",
-  "version": "2.0.47",
-  "description": "Astro integration for TractStack - redeeming the web from boring experiences",
+  "version": "2.1.0",
+  "description": "Astro integration for TractStack - the digital experience platform (DXP) for the missing middle",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -44,42 +44,46 @@
     "registry": "https://registry.npmjs.org/"
   },
   "peerDependencies": {
-    "@astrojs/react": "^4.0.0",
-    "astro": "^5.0.0"
+    "@astrojs/react": "^4.4.2",
+    "astro": "^5.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
     "kleur": "^4.1.5",
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@ark-ui/react": "^5.26.0",
-    "@astrojs/react": "^3.6.3",
+    "@ark-ui/react": "^5.30.0",
+    "@astrojs/react": "^4.4.2",
     "@heroicons/react": "^2.1.1",
-    "@internationalized/date": "^3.10.0",
+    "@internationalized/date": "^3.10.1",
     "@mhsdesign/jit-browser-tailwindcss": "^0.4.2",
-    "@nanostores/persistent": "^1.1.0",
+    "@nanostores/persistent": "^1.2.0",
     "@nanostores/react": "^1.0.0",
     "@types/d3": "^7.4.3",
-    "@types/d3-sankey": "^0.12.3",
+    "@types/d3-sankey": "^0.12.5",
     "@types/node": "^22.18.0",
     "@types/prompts": "^2.4.9",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
     "@types/tinycolor2": "^1.4.6",
-    "astro": "^5.13.3",
+    "astro": "^5.16.6",
     "d3": "^7.9.0",
     "d3-sankey": "^0.12.3",
     "html-to-image": "^1.11.13",
-    "nanostores": "^1.0.1",
+    "nanostores": "^1.1.0",
     "player.js": "^0.1.0",
-    "prettier": "3.3.3",
+    "prettier": "3.7.4",
     "prettier-plugin-astro": "0.14.1",
-    "prettier-plugin-tailwindcss": "0.6.8",
-    "recharts": "^3.1.2",
+    "prettier-plugin-tailwindcss": "0.7.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "recharts": "^3.6.0",
     "tinycolor2": "^1.6.0",
-    "typescript": "^5.9.2",
-    "ulid": "^3.0.1",
-    "vite": "^7.1.3",
+    "typescript": "^5.9.3",
+    "ulid": "^3.0.2",
+    "vite": "^7.3.0",
     "vite-plugin-dts": "^4.5.4"
   },
   "engines": {
@@ -88,7 +92,8 @@
   "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0",
   "pnpm": {
     "overrides": {
-      "esbuild@<=0.24.2": ">=0.25.0"
+      "esbuild@<=0.24.2": ">=0.25.0",
+      "@internationalized/date": "3.10.1"
     }
   }
 }

package/templates/src/components/Footer.astro

@@ -106,7 +106,7 @@ const createdDate = created ? new Date(created) : new Date();
             {allLinks.map((item: any) => (
               <a
                 href={item.to}
-                class="bg-brand-7 hover:bg-myblack focus:bg-brand-7 z-10 whitespace-nowrap rounded px-3.5 py-1.5 text-lg text-white shadow-sm transition-colors hover:text-white focus:text-white"
+                class="z-10 whitespace-nowrap rounded bg-brand-7 px-3.5 py-1.5 text-lg text-white shadow-sm transition-colors hover:bg-myblack hover:text-white focus:bg-brand-7 focus:text-white"
                 title={item.description}
               >
                 <span class="font-bold">{item.name}</span>
@@ -126,7 +126,7 @@ const createdDate = created ? new Date(created) : new Date();
             .map((social: string[]) => (
               <a
                 href={social[1]}
-                class="hover:text-myblue group my-1 inline-block p-2 hover:rotate-6"
+                class="group my-1 inline-block p-2 hover:rotate-6 hover:text-myblue"
                 target="_blank"
                 title={social[2] ?? social[1]}
               >
@@ -146,7 +146,7 @@ const createdDate = created ? new Date(created) : new Date();
     }
 
     <div
-      class="text-myblue xs:flex-row my-2 flex flex-col items-center justify-center"
+      class="my-2 flex flex-col items-center justify-center text-myblue xs:flex-row"
     >
       <div class="px-4 text-center text-2xl md:px-12">
         Copyright &#169; {createdDate.getFullYear()}{
@@ -159,7 +159,7 @@ const createdDate = created ? new Date(created) : new Date();
       </div>
     </div>
     <div
-      class="text-myblue my-2 flex flex-row items-center justify-center md:flex-col"
+      class="my-2 flex flex-row items-center justify-center text-myblue md:flex-col"
     >
       <div class="px-4 text-center text-lg md:px-12">
         pressed with

package/templates/src/components/Header.astro

@@ -107,15 +107,15 @@ const authStatus = {
 
   <!-- BOTTOM ROW: Title + Action Icons -->
   <div
-    class="bg-mywhite flex flex-row flex-nowrap justify-between px-4 pb-3 pt-4 shadow-inner md:px-8"
+    class="flex flex-row flex-nowrap justify-between bg-mywhite px-4 pb-3 pt-4 shadow-inner md:px-8"
   >
-    <h1 class="text-mydarkgrey truncate text-xl">{title}</h1>
+    <h1 class="truncate text-xl text-mydarkgrey">{title}</h1>
     <div class="flex flex-row flex-nowrap items-center gap-x-2">
       {
         !isHome ? (
           <a
             href="/"
-            class="text-myblue/80 hover:text-myblue hover:rotate-6"
+            class="text-myblue/80 hover:rotate-6 hover:text-myblue"
             title="Go to home page"
           >
             <svg
@@ -139,11 +139,11 @@ const authStatus = {
         authStatus.isAdmin || authStatus.isAuthenticated ? (
           <a
             href="/storykeep"
-            class="hover:text-myblue hover:rotate-6"
+            class="hover:rotate-6 hover:text-myblue"
             title="Your Story Keep Dashboard"
           >
             <svg
-              class="text-myblue/80 h-6 w-6"
+              class="h-6 w-6 text-myblue/80"
               fill="none"
               viewBox="0 0 24 24"
               stroke-width="1.5"
@@ -165,7 +165,7 @@ const authStatus = {
           <a
             data-astro-reload
             href={!isContext ? `/${slug}/edit` : `/context/${slug}/edit`}
-            class="text-myblue/80 hover:text-myblue hover:rotate-6"
+            class="text-myblue/80 hover:rotate-6 hover:text-myblue"
             title={!isContext ? 'Edit this story' : 'Edit this page'}
           >
             <svg

package/templates/src/components/Menu.tsx

@@ -145,7 +145,7 @@ const MenuComponent = (props: MenuProps) => {
       return (
         <button
           type="button"
-          className="text-mydarkgrey focus:ring-myblue block text-2xl font-bold leading-6 hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2"
+          className="block text-2xl font-bold leading-6 text-mydarkgrey hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2 focus:ring-myblue"
           title={item.description}
           aria-label={`${item.name} - ${item.description}`}
           hx-post="/api/v1/state"
@@ -161,7 +161,7 @@ const MenuComponent = (props: MenuProps) => {
       return (
         <a
           href={item.href}
-          className="text-mydarkgrey focus:ring-myblue block text-2xl font-bold leading-6 hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2"
+          className="block text-2xl font-bold leading-6 text-mydarkgrey hover:text-black hover:underline hover:decoration-dashed hover:decoration-4 hover:underline-offset-4 focus:text-black focus:outline-none focus:ring-2 focus:ring-myblue"
           title={item.description}
           aria-label={`${item.name} - ${item.description}`}
         >
@@ -172,7 +172,7 @@ const MenuComponent = (props: MenuProps) => {
 
     return (
       <span
-        className="text-mydarkgrey block text-2xl font-bold leading-6 opacity-50"
+        className="block text-2xl font-bold leading-6 text-mydarkgrey opacity-50"
         title={item.description}
         aria-label={`${item.name} - ${item.description}`}
       >
@@ -186,7 +186,7 @@ const MenuComponent = (props: MenuProps) => {
       <style dangerouslySetInnerHTML={{ __html: menuStyles }} />
 
       {/* Desktop Navigation */}
-      <nav className="font-action ml-6 hidden flex-wrap items-center justify-end space-x-3 md:flex md:space-x-6">
+      <nav className="ml-6 hidden flex-wrap items-center justify-end space-x-3 font-action md:flex md:space-x-6">
         {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
           <div key={item.name} className="relative py-1.5">
             <InteractiveMenuItem item={item} />
@@ -198,7 +198,7 @@ const MenuComponent = (props: MenuProps) => {
       <div className="font-action md:hidden">
         <Menu.Root>
           <Menu.Trigger
-            className="text-myblue focus:ring-myblue inline-flex rounded-md px-3 py-2 text-xl font-bold hover:text-black focus:outline-none focus:ring-2"
+            className="inline-flex rounded-md px-3 py-2 text-xl font-bold text-myblue hover:text-black focus:outline-none focus:ring-2 focus:ring-myblue"
             aria-label="Open navigation menu"
           >
             <span>MENU</span>
@@ -209,20 +209,20 @@ const MenuComponent = (props: MenuProps) => {
             <Menu.Positioner>
               <Menu.Content className="menu-content mt-5 flex">
                 <div className="w-screen">
-                  <div className="text-md ring-mydarkgrey/5 flex-auto overflow-hidden rounded-3xl bg-white p-4 leading-6 shadow-lg ring-1">
+                  <div className="text-md flex-auto overflow-hidden rounded-3xl bg-white p-4 leading-6 shadow-lg ring-1 ring-mydarkgrey/5">
                     {/* Featured Links Section */}
                     <div className="px-8">
                       {featuredLinks.map((item: ProcessedMenuLinkDatum) => (
                         <Menu.Item
                           key={item.name}
                           value={item.name}
-                          className="menu-item hover:bg-mygreen/20 group relative flex gap-x-6 rounded-lg p-4"
+                          className="menu-item group relative flex gap-x-6 rounded-lg p-4 hover:bg-mygreen/20"
                         >
                           <div>
                             {item.renderAs === 'button' ? (
                               <button
                                 type="button"
-                                className="font-action text-myblack text-xl hover:text-black focus:text-black focus:outline-none"
+                                className="font-action text-xl text-myblack hover:text-black focus:text-black focus:outline-none"
                                 aria-label={`${item.name} - ${item.description}`}
                                 hx-post="/api/v1/state"
                                 hx-swap="none"
@@ -234,7 +234,7 @@ const MenuComponent = (props: MenuProps) => {
                             ) : item.renderAs === 'a' ? (
                               <a
                                 href={item.href}
-                                className="font-action text-myblack text-xl hover:text-black focus:text-black focus:outline-none"
+                                className="font-action text-xl text-myblack hover:text-black focus:text-black focus:outline-none"
                                 aria-label={`${item.name} - ${item.description}`}
                               >
                                 {item.name}
@@ -242,13 +242,13 @@ const MenuComponent = (props: MenuProps) => {
                               </a>
                             ) : (
                               <span
-                                className="font-action text-myblack text-xl opacity-50"
+                                className="font-action text-xl text-myblack opacity-50"
                                 aria-label={`${item.name} - ${item.description}`}
                               >
                                 {item.name}
                               </span>
                             )}
-                            <p className="text-mydarkgrey mt-1">
+                            <p className="mt-1 text-mydarkgrey">
                               {item.description}
                             </p>
                           </div>
@@ -261,7 +261,7 @@ const MenuComponent = (props: MenuProps) => {
                       <div className="bg-slate-50 p-8">
                         <div className="flex justify-between">
                           <h3
-                            className="text-myblue mt-4 text-sm leading-6"
+                            className="mt-4 text-sm leading-6 text-myblue"
                             id="additional-links-heading"
                           >
                             Additional Links
@@ -282,7 +282,7 @@ const MenuComponent = (props: MenuProps) => {
                                   {item.renderAs === 'button' ? (
                                     <button
                                       type="button"
-                                      className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 hover:text-black focus:text-black focus:underline focus:outline-none"
+                                      className="block truncate rounded p-2 text-sm font-bold leading-6 text-mydarkgrey hover:text-black focus:text-black focus:underline focus:outline-none"
                                       title={item.description}
                                       aria-label={`${item.name} - ${item.description}`}
                                       hx-post="/api/v1/state"
@@ -295,7 +295,7 @@ const MenuComponent = (props: MenuProps) => {
                                   ) : item.renderAs === 'a' ? (
                                     <a
                                       href={item.href}
-                                      className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 hover:text-black focus:text-black focus:underline focus:outline-none"
+                                      className="block truncate rounded p-2 text-sm font-bold leading-6 text-mydarkgrey hover:text-black focus:text-black focus:underline focus:outline-none"
                                       title={item.description}
                                       aria-label={`${item.name} - ${item.description}`}
                                     >
@@ -304,7 +304,7 @@ const MenuComponent = (props: MenuProps) => {
                                     </a>
                                   ) : (
                                     <span
-                                      className="text-mydarkgrey block truncate rounded p-2 text-sm font-bold leading-6 opacity-50"
+                                      className="block truncate rounded p-2 text-sm font-bold leading-6 text-mydarkgrey opacity-50"
                                       title={item.description}
                                       aria-label={`${item.name} - ${item.description}`}
                                     >

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

@@ -353,7 +353,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                 <input
                   type="text"
                   id="videoUrl"
-                  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 sm:text-sm ${videoUrl && !isValidBunnyUrl(videoUrl) ? 'border-red-300 focus:border-red-500 focus:ring-red-500' : ''}`}
+                  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' : ''}`}
                   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="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 sm:text-sm"
+                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"
                 value={videoTitle}
                 onChange={(e) => setVideoTitle(e.target.value)}
                 onKeyDown={(e) => {
@@ -524,7 +524,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                           }
                         }}
                         onBlur={() => saveChanges()}
-                        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 sm:text-sm ${
+                        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 ${
                           formErrors[`title-${index}`] ? 'border-red-300' : ''
                         }`}
                       />
@@ -551,7 +551,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                           }
                         }}
                         onBlur={() => saveChanges()}
-                        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 sm:text-sm"
+                        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"
                       />
                     </div>
                   </div>
@@ -577,7 +577,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                             e.currentTarget.blur();
                           }
                         }}
-                        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 sm:text-sm ${
+                        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 ${
                           formErrors[`startTime-${index}`]
                             ? 'border-red-300'
                             : ''
@@ -611,7 +611,7 @@ const BunnyVideoSetup = ({ nodeId, params }: BunnyVideoSetupProps) => {
                             e.currentTarget.blur();
                           }
                         }}
-                        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 sm:text-sm ${
+                        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 ${
                           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="absolute z-10 mt-1 w-full rounded-md bg-white p-2 shadow-lg sm:w-auto">
+                          <div className="sm:w-auto absolute z-10 mt-1 w-full rounded-md bg-white p-2 shadow-lg">
                             <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="flex flex-col gap-4 sm:flex-row">
+                            <div className="sm:flex-row flex flex-col gap-4">
                               <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="relative mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
+          <div className="sm:px-6 lg:px-8 relative mx-auto max-w-7xl px-4 py-4">
             <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/FeaturedArticle.astro

@@ -44,7 +44,7 @@ const bgColor = parsedOptions.bgColor || '';
         <div class="w-full">
           <a href={`/${featuredStory.slug}`} class="block">
             <div class="max-w-lg pr-12">
-              <p class="font-action mb-4 text-lg font-bold uppercase text-gray-500">
+              <p class="mb-4 font-action text-lg font-bold uppercase text-gray-500">
                 Featured Article
               </p>
               <div class="space-y-6">

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

@@ -143,7 +143,7 @@ const FeaturedArticleSetup = ({
       return (
         <div className="flex flex-col gap-8 pt-4">
           <div className="w-full">
-            <p className="font-action text-md mb-4 font-bold uppercase text-gray-500">
+            <p className="text-md mb-4 font-action font-bold uppercase text-gray-500">
               Featured Article
             </p>
             <div className="space-y-6">
@@ -173,7 +173,7 @@ const FeaturedArticleSetup = ({
     return (
       <div className="flex flex-row items-center gap-12 pt-4">
         <div className="w-3/5">
-          <p className="font-action text-md mb-4 font-bold uppercase text-gray-500">
+          <p className="text-md mb-4 font-action font-bold uppercase text-gray-500">
             Featured Article
           </p>
           <div className="space-y-6">
@@ -264,7 +264,7 @@ const FeaturedArticleSetup = ({
               />
             </Combobox.Trigger>
           </div>
-          <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 sm:text-sm">
+          <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">
             {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="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-600 focus:ring-cyan-600 sm:text-sm"
+              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"
               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="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 sm:text-sm"
+              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"
               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="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                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"
                 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="w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+            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"
           />
         </div>
       )}
@@ -238,7 +238,7 @@ export const ProductGridSetup = (props: ProductGridSetupProps) => {
                 </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"
+                    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"
                     placeholder="Search products..."
                   />
                 </Combobox.Control>

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

@@ -123,7 +123,7 @@ export default function SandboxRegisterForm({
             value={firstname}
             onChange={(e) => setFirstname(e.target.value)}
             disabled={isLoading}
-            className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+            className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
             required
           />
         </div>
@@ -140,7 +140,7 @@ export default function SandboxRegisterForm({
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             disabled={isLoading}
-            className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+            className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
             required
           />
         </div>
@@ -157,7 +157,7 @@ export default function SandboxRegisterForm({
             value={codeword}
             onChange={(e) => setCodeword(e.target.value)}
             disabled={isLoading}
-            className="mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+            className="sm:text-sm mt-1 block w-full rounded-md border-gray-300 px-3 py-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
             required
           />
         </div>

package/templates/src/components/compositor/Compositor.tsx

@@ -485,7 +485,7 @@ export const Compositor = (props: CompositorProps) => {
       {/* Selection drag box */}
       {selectionRect && (
         <div
-          className="bg-mygreen/20 fixed z-50 border border-blue-600"
+          className="fixed z-50 border border-blue-600 bg-mygreen/20"
           style={{
             left: `${selectionRect.left}px`,
             top: `${selectionRect.top}px`,

package/templates/src/components/compositor/elements/Belief.tsx

@@ -104,7 +104,7 @@ export const Belief = ({
               </span>
               <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
                 <ChevronUpDownIcon
-                  className="text-mylightgrey h-5 w-5"
+                  className="h-5 w-5 text-mylightgrey"
                   aria-hidden="true"
                 />
               </span>

package/templates/src/components/compositor/elements/BunnyVideo.tsx

@@ -20,7 +20,7 @@ const BunnyVideo = ({ videoId, title, className = '' }: BunnyVideoProps) => {
         className={`flex aspect-video w-full items-center justify-center bg-gray-100 ${className}`}
       >
         <div className="p-4 text-center">
-          <div className="text-mydarkgrey mb-2">Video ID not set</div>
+          <div className="mb-2 text-mydarkgrey">Video ID not set</div>
           <div className="text-mygrey text-sm">
             Configure this widget with a valid Bunny Video ID
           </div>
@@ -44,7 +44,7 @@ const BunnyVideo = ({ videoId, title, className = '' }: BunnyVideoProps) => {
       <div
         className={`flex aspect-video w-full items-center justify-center bg-gray-100 ${className}`}
       >
-        <div className="text-mydarkgrey text-center">Invalid Video ID</div>
+        <div className="text-center text-mydarkgrey">Invalid Video ID</div>
       </div>
     );
   }