astro-tractstack 2.0.46 → 2.1.0

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

@@ -135,7 +135,7 @@ export const SignUp = ({
               </Select.Control>
               <Portal>
                 <Select.Positioner>
-                  <Select.Content className="z-50 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
+                  <Select.Content className="sm:text-sm z-50 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none">
                     {personaCollection.items.map((option) => (
                       <Select.Item
                         key={option.id}

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

@@ -19,7 +19,7 @@ export const ToggleBelief = ({ prompt }: { prompt: string }) => {
         >
           <Switch.Thumb
             className={classNames(
-              `motion-safe:animate-wig translate-x-0`,
+              `translate-x-0 motion-safe:animate-wig`,
               `pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition-transform duration-200 ease-in-out`
             )}
           />

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

@@ -108,7 +108,7 @@ export const GhostInsertBlock = memo((props: GhostInsertBlockProps) => {
   );
 
   const ElementButtons = () => (
-    <div className="grid grid-cols-2 gap-2 p-2 sm:grid-cols-3">
+    <div className="sm:grid-cols-3 grid grid-cols-2 gap-2 p-2">
       {$toolAddModes
         .filter((mode) => !['p', 'h2', 'h3', 'h4'].includes(mode))
         .filter((mode) => allowedModes.includes(mode as ToolAddMode))

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, type JSX } from 'react';
 import { useStore } from '@nanostores/react';
 import { getCtx } from '@/stores/nodes';
 import { RenderChildren } from './RenderChildren';

package/templates/src/components/compositor/nodes/tagElements/TabIndicator.tsx

@@ -25,7 +25,7 @@ export default function TabIndicator({
 
   return (
     <div
-      className="animate-fadeIn mt-1.5 flex cursor-pointer items-center border-t border-dashed border-cyan-500 py-1 text-sm hover:bg-cyan-50/20"
+      className="mt-1.5 flex animate-fadeIn cursor-pointer items-center border-t border-dashed border-cyan-500 py-1 text-sm hover:bg-cyan-50/20"
       onClick={handleClick}
       onKeyDown={handleKeyDown}
       tabIndex={0}

package/templates/src/components/compositor/preview/ListContentPreview.tsx

@@ -58,7 +58,7 @@ const StoryItem = ({
     <div className="flex-1">
       <h3 className="text-lg font-bold text-black">{story.title}</h3>
       {story.description && (
-        <p className="text-myblack line-clamp-2 text-sm">{story.description}</p>
+        <p className="line-clamp-2 text-sm text-myblack">{story.description}</p>
       )}
       {showTopics && story.topics && story.topics.length > 0 && (
         <div className="mt-1 flex flex-wrap gap-1">
@@ -72,7 +72,7 @@ const StoryItem = ({
           ))}
         </div>
       )}
-      <p className="text-mydarkgrey mt-1 text-xs">
+      <p className="mt-1 text-xs text-mydarkgrey">
         {formatDate(story.changed)}
       </p>
     </div>
@@ -136,8 +136,8 @@ const ListContentPreview = ({
             className={`px-4 py-2 text-sm font-bold ${
               currentMode === 'recent'
                 ? 'bg-myblue text-white'
-                : 'text-myblack bg-white hover:bg-gray-100'
-            } border-myblue rounded-l-md border transition-colors`}
+                : 'bg-white text-myblack hover:bg-gray-100'
+            } rounded-l-md border border-myblue transition-colors`}
             onClick={() => {
               setCurrentMode('recent');
               setCurrentPage(1);
@@ -149,8 +149,8 @@ const ListContentPreview = ({
             className={`px-4 py-2 text-sm font-bold ${
               currentMode === 'popular'
                 ? 'bg-myblue text-white'
-                : 'text-myblack bg-white hover:bg-gray-100'
-            } border-myblue rounded-r-md border transition-colors`}
+                : 'bg-white text-myblack hover:bg-gray-100'
+            } rounded-r-md border border-myblue transition-colors`}
             onClick={() => {
               setCurrentMode('popular');
               setCurrentPage(1);
@@ -190,14 +190,14 @@ const ListContentPreview = ({
             aria-label="Pagination"
           >
             <button
-              className="text-myblack rounded-l-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
+              className="rounded-l-md border border-gray-300 bg-white px-4 py-2 text-sm font-bold text-myblack hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50"
               disabled={currentPage <= 1}
               onClick={() => setCurrentPage((prev) => prev - 1)}
             >
               Previous
             </button>
             <button
-              className="hover:bg-myblue-dark border-myblue bg-myblue rounded-r-md border px-4 py-2 text-sm font-bold text-white disabled:cursor-not-allowed disabled:opacity-50"
+              className="hover:bg-myblue-dark rounded-r-md border border-myblue bg-myblue px-4 py-2 text-sm font-bold text-white disabled:cursor-not-allowed disabled:opacity-50"
               disabled={currentPage >= totalPages}
               onClick={() => setCurrentPage((prev) => prev + 1)}
             >

package/templates/src/components/edit/Header.tsx

@@ -176,7 +176,7 @@ const StoryKeepHeader = ({
           <div className="flex flex-wrap items-center justify-center gap-2 text-sm">
             <button
               onClick={handleSave}
-              className="bg-myblue font-action hover:bg-myorange rounded-md px-3.5 py-1.5 font-bold text-white"
+              className="rounded-md bg-myblue px-3.5 py-1.5 font-action font-bold text-white hover:bg-myorange"
             >
               Save
             </button>

package/templates/src/components/edit/SettingsPanel.tsx

@@ -24,7 +24,7 @@ const SettingsPanel = ({ availableCodeHooks }: SettingsPanelProps) => {
 
   return (
     <div
-      className="bg-mydarkgrey flex h-full min-w-96 max-w-sm flex-col rounded-xl bg-opacity-20 p-0.5 backdrop-blur-sm"
+      className="flex h-full min-w-96 max-w-sm flex-col rounded-xl bg-mydarkgrey bg-opacity-20 p-0.5 backdrop-blur-sm"
       style={
         {
           animation: window.matchMedia(
@@ -50,10 +50,10 @@ const SettingsPanel = ({ availableCodeHooks }: SettingsPanelProps) => {
         {/* Header Section (fixed height) */}
         <div className="flex-shrink-0 p-1.5 md:p-2.5">
           <div className="mb-4 flex items-center justify-between">
-            <h3 className="text-myblue text-lg font-bold">{panelTitle}</h3>
+            <h3 className="text-lg font-bold text-myblue">{panelTitle}</h3>
             <button
               onClick={() => settingsPanelStore.set(null)}
-              className="hover:text-myblue text-gray-500"
+              className="text-gray-500 hover:text-myblue"
             >
               <XMarkIcon className="h-5 w-5" />
             </button>

package/templates/src/components/edit/ToolBar.tsx

@@ -27,7 +27,7 @@ const AddElementsPanel = ({
           className={`rounded px-3 py-1.5 text-sm font-bold transition-colors ${
             currentToolAddMode === mode
               ? 'bg-myblue text-white'
-              : 'text-myblue hover:bg-myblue/10 border border-gray-200 bg-white'
+              : 'border border-gray-200 bg-white text-myblue hover:bg-myblue/10'
           }`}
         >
           {toolAddModeTitles[mode]}
@@ -52,13 +52,13 @@ const StoryKeepToolBar = () => {
   return (
     <div className="w-full max-w-lg rounded-lg border border-gray-200 bg-white p-4 shadow-xl">
       <div className="mb-4 flex items-center justify-between">
-        <h3 className="text-myblue text-lg font-bold">Add Elements</h3>
+        <h3 className="text-lg font-bold text-myblue">Add Elements</h3>
         <button
           onClick={() => {
             ctx.toolModeValStore.set({ value: `text` });
             toggleSettingsPanel;
           }}
-          className="hover:text-myblue text-gray-500"
+          className="text-gray-500 hover:text-myblue"
         >
           <XMarkIcon className="h-5 w-5" />
         </button>

package/templates/src/components/edit/ToolMode.tsx

@@ -135,15 +135,15 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
         id="mainNav"
         ref={navRef}
         className={classNames(
-          'z-102 bg-mywhite md:bg-mywhite/70 fixed bottom-0 left-0 right-0 p-1.5 md:bottom-2 md:right-auto md:h-auto md:w-auto md:rounded-r-xl md:border md:border-black/5 md:p-2 md:shadow-lg md:backdrop-blur-sm',
+          'fixed bottom-0 left-0 right-0 z-102 bg-mywhite p-1.5 md:bottom-2 md:right-auto md:h-auto md:w-auto md:rounded-r-xl md:border md:border-black/5 md:bg-mywhite/70 md:p-2 md:shadow-lg md:backdrop-blur-sm',
           isSelectionActive ? `outline-dashed outline-4 outline-red-600` : ``
         )}
       >
         {!isSelectionActive && (
           <div className="flex flex-wrap justify-around gap-4 py-0.5 md:flex-nowrap md:justify-start md:gap-4 md:p-0">
-            <div className="text-mydarkgrey text-center text-sm font-bold">
+            <div className="text-center text-sm font-bold text-mydarkgrey">
               mode:
-              <div className="font-action text-myblue pt-1.5 text-center text-xs">
+              <div className="pt-1.5 text-center font-action text-xs text-myblue">
                 {currentToolMode.title}
               </div>
             </div>
@@ -164,9 +164,9 @@ const StoryKeepToolMode = ({ isContext }: StoryKeepToolModeProps) => {
 
         {isSelectionActive && (
           <div className="flex items-center justify-around gap-x-2 py-0.5 md:justify-start md:p-0">
-            <div className="text-mydarkgrey text-center text-sm font-bold">
+            <div className="text-center text-sm font-bold text-mydarkgrey">
               mode:
-              <div className="font-action text-myblue pt-1.5 text-center text-xs">
+              <div className="pt-1.5 text-center font-action text-xs text-myblue">
                 Action Pending
               </div>
             </div>

package/templates/src/components/edit/pane/AddPanePanel.tsx

@@ -58,9 +58,9 @@ const AddPanePanel = ({
   };
 
   return (
-    <div className="add-pane-panel-wrapper border-mydarkgrey border-b-2 border-t-2 border-dotted">
+    <div className="add-pane-panel-wrapper border-b-2 border-t-2 border-dotted border-mydarkgrey">
       {isExpanded && (
-        <div className="border-mylightgrey border-t border-dotted">
+        <div className="border-t border-dotted border-mylightgrey">
           <div className="group flex w-full flex-wrap items-center gap-2 px-1.5 pb-0.5 pt-1.5">
             <button
               onClick={() => {
@@ -112,7 +112,7 @@ const AddPanePanel = ({
           isContextPane={isContextPane}
         />
       ) : isExpanded ? (
-        <div className="border-mylightgrey border-t border-dotted">
+        <div className="border-t border-dotted border-mylightgrey">
           <div className="group flex w-full flex-wrap items-center gap-2 px-1.5 pb-0.5 pt-1.5">
             <div className={`flex flex-wrap gap-1 transition-opacity`}>
               <button
@@ -157,13 +157,13 @@ const AddPanePanel = ({
           </div>
         </div>
       ) : (
-        <div className="border-mylightgrey flex border-t border-dotted p-0.5">
+        <div className="flex border-t border-dotted border-mylightgrey p-0.5">
           <button
             onClick={() => setIsExpanded(true)}
             title="Insert Pane here"
             className="group w-full text-gray-500"
           >
-            <div className="text-mydarkgrey hover:bg-myoffwhite rounded-md transition-colors duration-150 ease-in-out hover:bg-opacity-50 hover:mix-blend-difference">
+            <div className="rounded-md text-mydarkgrey transition-colors duration-150 ease-in-out hover:bg-myoffwhite hover:bg-opacity-50 hover:mix-blend-difference">
               <PlusCircleIcon className="mx-auto h-8 w-8" />
             </div>
           </button>

package/templates/src/components/edit/pane/AddPanePanel_break.tsx

@@ -307,7 +307,7 @@ const AddPaneBreakPanel = ({
         </button>
 
         <div className="ml-4 flex flex-wrap items-center gap-x-6 gap-y-2 py-2">
-          <div className="font-action flex-none rounded px-2 py-2.5 text-sm font-bold text-cyan-700 shadow-sm">
+          <div className="flex-none rounded px-2 py-2.5 font-action text-sm font-bold text-cyan-700 shadow-sm">
             + Visual Break
           </div>
 
@@ -327,7 +327,7 @@ const AddPaneBreakPanel = ({
               composite={true}
             >
               <div className="relative">
-                <div className="relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300 sm:text-sm">
+                <div className="sm:text-sm relative w-full cursor-default overflow-hidden rounded-lg bg-white text-left shadow-md focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-teal-300">
                   <Combobox.Input
                     autoComplete="off"
                     className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0"
@@ -341,7 +341,7 @@ const AddPaneBreakPanel = ({
                   </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/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/5 focus:outline-none">
                   {collection.items.length === 0 ? (
                     <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                       Nothing found.
@@ -369,7 +369,7 @@ const AddPaneBreakPanel = ({
         </div>
       </div>
 
-      <h3 className="font-action px-3.5 pb-1.5 pt-4 text-xl font-bold text-black">
+      <h3 className="px-3.5 pb-1.5 pt-4 font-action text-xl font-bold text-black">
         Click on a break design to use:
       </h3>
 
@@ -390,7 +390,7 @@ const AddPaneBreakPanel = ({
             onClick={() =>
               handleVisualBreakInsert(preview.variant, nodeId, first)
             }
-            className={`bg-mywhite group relative w-full cursor-pointer rounded-sm shadow-inner transition-all duration-200 ${
+            className={`group relative w-full cursor-pointer rounded-sm bg-mywhite shadow-inner transition-all duration-200 ${
               preview.snapshot
                 ? 'hover:outline-solid hover:outline hover:outline-4'
                 : ''
@@ -434,7 +434,7 @@ const AddPaneBreakPanel = ({
                     className="w-full"
                   />
                 </div>
-                <div className="bg-mydarkgrey group-hover:bg-myblack absolute bottom-0 left-0 right-0 rounded-t-md px-2 py-1 text-sm text-white">
+                <div className="absolute bottom-0 left-0 right-0 rounded-t-md bg-mydarkgrey px-2 py-1 text-sm text-white group-hover:bg-myblack">
                   {preview.variant}
                 </div>
               </>

package/templates/src/components/edit/pane/AddPanePanel_codehook.tsx

@@ -182,7 +182,7 @@ const AddPaneCodeHookPanel = ({
               ← Go Back
             </button>
 
-            <div className="font-action flex-none rounded px-2 py-2.5 text-sm font-bold text-cyan-700 shadow-sm">
+            <div className="flex-none rounded px-2 py-2.5 font-action text-sm font-bold text-cyan-700 shadow-sm">
               Add Code Hook
             </div>
           </div>
@@ -212,7 +212,7 @@ const AddPaneCodeHookPanel = ({
                   </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.length === 0 ? (
                     <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
                       Nothing found.

package/templates/src/components/edit/pane/AddPanePanel_new.tsx

@@ -621,7 +621,7 @@ const AddPaneNewPanel = ({
 
   const renderInitialStep = () => (
     <div className="p-4">
-      <h3 className="font-action mb-4 text-center text-xl font-bold text-gray-800">
+      <h3 className="mb-4 text-center font-action text-xl font-bold text-gray-800">
         How would you like to design your new pane?
       </h3>
       <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
@@ -854,7 +854,7 @@ const AddPaneNewPanel = ({
         >
           ← Go Back
         </button>
-        <div className="font-action ml-4 flex-none rounded px-2 py-2.5 text-sm font-bold text-cyan-700 shadow-sm">
+        <div className="ml-4 flex-none rounded px-2 py-2.5 font-action text-sm font-bold text-cyan-700 shadow-sm">
           + Design New Pane
         </div>
       </div>

package/templates/src/components/edit/pane/AddPanePanel_reuse.tsx

@@ -309,7 +309,7 @@ const AddPaneReUsePanel = ({
               ← Go Back
             </button>
 
-            <div className="font-action flex-none rounded px-2 py-2.5 text-sm font-bold text-cyan-700 shadow-sm">
+            <div className="flex-none rounded px-2 py-2.5 font-action text-sm font-bold text-cyan-700 shadow-sm">
               Re-use Existing Pane
             </div>
           </div>
@@ -340,7 +340,7 @@ const AddPaneReUsePanel = ({
         </div>
       </div>
 
-      <h3 className="font-action px-3.5 pb-1.5 pt-4 text-xl font-bold text-black">
+      <h3 className="px-3.5 pb-1.5 pt-4 font-action text-xl font-bold text-black">
         Click on a pane to reuse:
       </h3>
 
@@ -349,7 +349,7 @@ const AddPaneReUsePanel = ({
           <div key={preview.pane.id} className="flex flex-col items-center">
             <div
               onClick={() => handlePaneReuse(preview.pane.id, nodeId, first)}
-              className="hover:outline-solid bg-mywhite group relative w-full cursor-pointer rounded-sm shadow-inner transition-all duration-200 hover:outline hover:outline-4"
+              className="hover:outline-solid group relative w-full cursor-pointer rounded-sm bg-mywhite shadow-inner transition-all duration-200 hover:outline hover:outline-4"
               style={{
                 ...(!preview.snapshot ? { minHeight: '75px' } : {}),
               }}
@@ -391,7 +391,7 @@ const AddPaneReUsePanel = ({
                 </div>
               )}
             </div>
-            <p className="bg-mydarkgrey mt-2 w-full break-words p-2 text-center text-sm text-white">
+            <p className="mt-2 w-full break-words bg-mydarkgrey p-2 text-center text-sm text-white">
               {preview.pane.title}
             </p>
           </div>

package/templates/src/components/edit/pane/AiRestylePaneModal.tsx

@@ -163,8 +163,8 @@ export const AiRestylePaneModal = ({
       open={isAiRestyleModalOpen}
       onOpenChange={(e) => !e.open && handleClose()}
     >
-      <Dialog.Backdrop className="z-103 fixed inset-0 bg-black bg-opacity-75" />
-      <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center p-4">
+      <Dialog.Backdrop className="fixed inset-0 z-103 bg-black bg-opacity-75" />
+      <Dialog.Positioner className="fixed inset-0 z-104 flex items-center justify-center p-4">
         <Dialog.Content className="flex max-w-2xl flex-col rounded-lg bg-white shadow-2xl">
           <div className="flex items-center justify-between border-b p-4">
             <h3 className="flex items-center gap-2 text-lg font-bold">

package/templates/src/components/edit/pane/ConfigPanePanel.tsx

@@ -109,7 +109,7 @@ const ConfigPanePanel = ({ nodeId }: ConfigPanePanelProps) => {
 
   return (
     <div
-      className="border-mylightgrey bg-myoffwhite border-t border-dotted"
+      className="border-t border-dotted border-mylightgrey bg-myoffwhite"
       style={bgColorStyles}
     >
       <div className="group w-full rounded-t-md px-1.5 pb-0.5 pt-1.5">

package/templates/src/components/edit/pane/PanePanel_impression.tsx

@@ -182,7 +182,7 @@ const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
 
         <div className="space-y-4">
           <div>
-            <label className="text-mydarkgrey block text-sm">Title</label>
+            <label className="block text-sm text-mydarkgrey">Title</label>
             <input
               type="text"
               value={formData.title}
@@ -194,7 +194,7 @@ const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
           </div>
 
           <div>
-            <label className="text-mydarkgrey block text-sm">Body</label>
+            <label className="block text-sm text-mydarkgrey">Body</label>
             <textarea
               value={formData.body}
               onChange={(e) => handleInputChange('body', e.target.value)}
@@ -205,7 +205,7 @@ const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
           </div>
 
           <div>
-            <label className="text-mydarkgrey block text-sm">Button Text</label>
+            <label className="block text-sm text-mydarkgrey">Button Text</label>
             <input
               type="text"
               value={formData.buttonText}
@@ -217,7 +217,7 @@ const PaneImpressionPanel = ({ nodeId, setMode }: PaneImpressionPanelProps) => {
           </div>
 
           <div className="relative">
-            <label className="text-mydarkgrey block text-sm">Actions</label>
+            <label className="block text-sm text-mydarkgrey">Actions</label>
             <ActionBuilderField
               value={formData.actionsLisp}
               onChange={(value) => handleInputChange('actionsLisp', value)}

package/templates/src/components/edit/pane/RestylePaneModal.tsx

@@ -354,8 +354,8 @@ export const RestylePaneModal = () => {
       modal={true}
       preventScroll={true}
     >
-      <Dialog.Backdrop className="z-103 fixed inset-0 bg-black bg-opacity-75" />
-      <Dialog.Positioner className="z-104 fixed inset-0 flex items-center justify-center">
+      <Dialog.Backdrop className="fixed inset-0 z-103 bg-black bg-opacity-75" />
+      <Dialog.Positioner className="fixed inset-0 z-104 flex items-center justify-center">
         <Dialog.Content
           ref={contentRef}
           className="flex max-w-5xl flex-col rounded-lg bg-white shadow-2xl xl:max-w-7xl"
@@ -450,7 +450,7 @@ export const RestylePaneModal = () => {
                 <p className="text-gray-500">No designs found.</p>
               </div>
             ) : (
-              <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+              <div className="lg:grid-cols-3 grid grid-cols-1 gap-6 md:grid-cols-2">
                 {mergedTemplates.map(({ template }) => (
                   <TemplatePreviewItem
                     key={template.id}

package/templates/src/components/edit/pane/steps/AiDesignStep.tsx

@@ -78,7 +78,7 @@ export const AiDesignStep = ({
         </div>
       </div>
 
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+      <div className="sm:grid-cols-2 grid grid-cols-1 gap-4">
         <div>
           <ColorPickerCombo
             title="Base Color (Optional)"
@@ -141,7 +141,7 @@ export const AiDesignStep = ({
           onChange={(e) => updateField('additionalNotes', e.target.value)}
           placeholder="Enter additional notes..."
           rows={3}
-          className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+          className="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
         />
       </div>
     </div>

package/templates/src/components/edit/pane/steps/CopyInputStep.tsx

@@ -154,7 +154,7 @@ export const CopyInputStep = ({
           onChange={(e) => onTopicChange(e.target.value)}
           placeholder="e.g. a SaaS product for team collaboration"
           rows={2}
-          className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+          className="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
         />
       </div>
 
@@ -178,7 +178,7 @@ export const CopyInputStep = ({
                 value={promptValue}
                 onChange={(e) => onPromptValueChange(e.target.value)}
                 rows={4}
-                className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                className="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
               />
               <p className="mt-1 text-xs text-gray-500">
                 Leave [topic] as it will be replaced with your prompt.
@@ -194,7 +194,7 @@ export const CopyInputStep = ({
                   value={overallPrompt}
                   onChange={(e) => onOverallPromptChange(e.target.value)}
                   rows={3}
-                  className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                  className="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
                 />
               </div>
               <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
@@ -206,7 +206,7 @@ export const CopyInputStep = ({
                     value={promptValueCol1}
                     onChange={(e) => onPromptValueCol1Change(e.target.value)}
                     rows={4}
-                    className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                    className="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
                   />
                 </div>
                 <div>
@@ -217,7 +217,7 @@ export const CopyInputStep = ({
                     value={promptValueCol2}
                     onChange={(e) => onPromptValueCol2Change(e.target.value)}
                     rows={4}
-                    className="block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500 sm:text-sm"
+                    className="sm:text-sm block w-full rounded-md border-gray-300 p-2 shadow-sm focus:border-cyan-500 focus:ring-cyan-500"
                   />
                 </div>
               </div>

package/templates/src/components/edit/panels/StyleBreakPanel.tsx

@@ -115,7 +115,7 @@ const StyleBreakPanel = ({ node, parentNode }: BasePanelProps) => {
     <div className="space-y-4">
       {collections.length > 1 && (
         <div className="space-y-2">
-          <span className="text-mydarkgrey block text-sm">Collection</span>
+          <span className="block text-sm text-mydarkgrey">Collection</span>
           <PaneBreakCollectionSelector
             selectedCollection={settings.collection}
             onChange={(collection) =>
@@ -126,7 +126,7 @@ const StyleBreakPanel = ({ node, parentNode }: BasePanelProps) => {
       )}
 
       <div className="space-y-2">
-        <span className="text-mydarkgrey block text-sm">
+        <span className="block text-sm text-mydarkgrey">
           Shapes (for each screen size)
         </span>
         <div className="space-y-1">

package/templates/src/components/edit/panels/StyleCodeHookPanel.tsx

@@ -310,7 +310,7 @@ const StyleCodeHookPanel = ({
       <div className="space-y-4">
         {/* Target ComboBox */}
         <div className="max-w-md">
-          <label className="text-mydarkgrey block text-sm">Target</label>
+          <label className="block text-sm text-mydarkgrey">Target</label>
           <div className="relative mt-1">
             <Combobox.Root
               collection={collection}
@@ -336,7 +336,7 @@ const StyleCodeHookPanel = ({
                   />
                   <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
                     <ChevronUpDownIcon
-                      className="text-mydarkgrey h-5 w-5"
+                      className="h-5 w-5 text-mydarkgrey"
                       aria-hidden="true"
                     />
                   </Combobox.Trigger>
@@ -345,9 +345,9 @@ const StyleCodeHookPanel = ({
 
               <Portal>
                 <Combobox.Positioner style={{ zIndex: 1002 }}>
-                  <Combobox.Content className="z-10 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 z-10 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.length === 0 ? (
-                      <div className="text-mydarkgrey relative cursor-default select-none px-4 py-2">
+                      <div className="relative cursor-default select-none px-4 py-2 text-mydarkgrey">
                         Nothing found.
                       </div>
                     ) : (
@@ -381,7 +381,7 @@ const StyleCodeHookPanel = ({
 
         {/* Options section */}
         <div>
-          <label className="text-mydarkgrey block text-sm">Options</label>
+          <label className="block text-sm text-mydarkgrey">Options</label>
           {localOptions.map((option, index) => (
             <div key={index} className="mt-2 flex items-center space-x-2">
               <input
@@ -436,7 +436,7 @@ const StyleCodeHookPanel = ({
           ))}
           <button
             onClick={addOption}
-            className="text-myblue mt-2 flex items-center hover:text-cyan-600"
+            className="mt-2 flex items-center text-myblue hover:text-cyan-600"
           >
             <PlusIcon className="mr-1 h-5 w-5" />
             Add Option

package/templates/src/components/edit/panels/StyleElementPanel.tsx

@@ -254,7 +254,7 @@ const StyleElementPanel = ({
     <div className="space-y-4">
       {node.wordCarouselPayload && (
         <div className="pb-2">
-          <div className="text-myblack hover:bg-mygreen/20 w-fit rounded border border-slate-200 p-2 text-sm">
+          <div className="w-fit rounded border border-slate-200 p-2 text-sm text-myblack hover:bg-mygreen/20">
             <div
               title="Configure Word Carousel"
               className="flex items-center gap-2 font-bold"
@@ -279,7 +279,7 @@ const StyleElementPanel = ({
       {shouldShowQuickStyles ? (
         <div className="space-y-6">
           <div className="space-y-2">
-            <h3 className="text-mydarkgrey text-sm font-bold">
+            <h3 className="text-sm font-bold text-mydarkgrey">
               Quick Style Selection
             </h3>
             <p className="text-xs text-gray-500">
@@ -313,7 +313,7 @@ const StyleElementPanel = ({
           <div className="border-t border-gray-100 pt-4">
             <button
               onClick={() => setShowPresets(false)}
-              className="text-myblue w-full text-center text-sm underline hover:text-black"
+              className="w-full text-center text-sm text-myblue underline hover:text-black"
             >
               Apply your own styles manually
             </button>
@@ -340,14 +340,14 @@ const StyleElementPanel = ({
           )}
 
           <div className="space-y-4">
-            <ul className="text-mydarkgrey flex flex-wrap gap-x-4 gap-y-1">
+            <ul className="flex flex-wrap gap-x-4 gap-y-1 text-mydarkgrey">
               <li>
                 <em>Actions:</em>
               </li>
               <li>
                 <button
                   onClick={() => handleClickAdd()}
-                  className="text-myblue font-bold underline hover:text-black"
+                  className="font-bold text-myblue underline hover:text-black"
                 >
                   Add Style
                 </button>