astro-tractstack 2.0.47 → 2.1.1

package/templates/src/components/fields/ColorPickerCombo.tsx

@@ -156,12 +156,12 @@ const ColorPickerCombo = ({
   return (
     <div>
       {title && (
-        <span className="text-mydarkgrey block py-2 text-sm">{title}</span>
+        <span className="block py-2 text-sm text-mydarkgrey">{title}</span>
       )}
       <div className="flex items-center space-x-2">
         {allowNull && !hexColor ? (
           // Show empty state with angled stripes pattern when allowNull is true and no color is set
-          <div className="border-mydarkgrey relative h-9 w-12 overflow-hidden rounded">
+          <div className="relative h-9 w-12 overflow-hidden rounded border-mydarkgrey">
             {/* Angled stripes pattern to represent transparency */}
             <div
               className="absolute inset-0"
@@ -189,15 +189,15 @@ const ColorPickerCombo = ({
             type="color"
             value={hexColor || '#ffffff'}
             onChange={(e) => handleHexColorChange(e.target.value)}
-            className="border-mydarkgrey h-9 w-12 rounded"
+            className="h-9 w-12 rounded border-mydarkgrey"
           />
         )}
         {allowNull && (
           <button
             onClick={handleRemoveColor}
-            className="border-mydarkgrey flex h-9 w-9 items-center justify-center rounded"
+            className="flex h-9 w-9 items-center justify-center rounded border-mydarkgrey"
           >
-            <XMarkIcon className="text-mydarkgrey h-5 w-5" aria-hidden="true" />
+            <XMarkIcon className="h-5 w-5 text-mydarkgrey" aria-hidden="true" />
           </button>
         )}
         {!skipTailwind && (
@@ -222,13 +222,13 @@ const ColorPickerCombo = ({
               <Combobox.Control ref={comboboxRef}>
                 <div className="relative">
                   <Combobox.Input
-                    className="border-mydarkgrey focus:border-myblue focus:ring-myblue xs:text-sm w-full max-w-xl rounded-md py-2 pl-3 pr-10 shadow-sm"
+                    className="w-full max-w-xl rounded-md border-mydarkgrey py-2 pl-3 pr-10 shadow-sm focus:border-myblue focus:ring-myblue xs:text-sm"
                     placeholder="Search Tailwind colors..."
                     autoComplete="off"
                   />
                   <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>
@@ -237,7 +237,7 @@ const ColorPickerCombo = ({
 
               <Portal>
                 <Combobox.Positioner style={{ zIndex: 1002 }}>
-                  <Combobox.Content className="xs:text-sm max-h-64 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="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none xs:text-sm">
                     {filteredColors.length === 0 ? (
                       <div className="relative cursor-default select-none py-2 pl-3 pr-4 text-black">
                         Nothing found.

package/templates/src/components/fields/ImageUpload.tsx

@@ -197,7 +197,7 @@ export const ImageUpload = ({
       // Update the node with base64Data
       if (currentImageNode) {
         const updatedNode = cloneDeep(currentImageNode);
-        (updatedNode.fileId = ulid()), (updatedNode.src = base64); // Set src to base64 for immediate display
+        ((updatedNode.fileId = ulid()), (updatedNode.src = base64)); // Set src to base64 for immediate display
         updatedNode.base64Data = base64;
         updatedNode.alt = defaultAlt;
         updatedNode.isChanged = true;
@@ -303,7 +303,7 @@ export const ImageUpload = ({
             </button>
             <button
               onClick={() => setIsSelectingFile(true)}
-              className="text-myblue flex items-center text-sm hover:text-cyan-600"
+              className="flex items-center text-sm text-myblue hover:text-cyan-600"
             >
               <FolderIcon className="mr-1 h-4 w-4" />
               Select Existing
@@ -326,7 +326,7 @@ export const ImageUpload = ({
       {isSelectingFile && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
           <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-lg">
-            <h3 className="text-mydarkgrey mb-4 text-lg font-bold">
+            <h3 className="mb-4 text-lg font-bold text-mydarkgrey">
               Select an Image
             </h3>
 
@@ -343,11 +343,11 @@ export const ImageUpload = ({
               <div ref={comboboxRef} className="relative">
                 <Combobox.Control className="relative">
                   <Combobox.Input
-                    className="border-mydarkgrey text-myblack w-full rounded-md py-2 pl-3 pr-10"
+                    className="w-full rounded-md border-mydarkgrey py-2 pl-3 pr-10 text-myblack"
                     placeholder="Search files..."
                   />
                   <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pr-2">
-                    <ChevronUpDownIcon className="text-mydarkgrey h-5 w-5" />
+                    <ChevronUpDownIcon className="h-5 w-5 text-mydarkgrey" />
                   </Combobox.Trigger>
                 </Combobox.Control>
 
@@ -359,7 +359,7 @@ export const ImageUpload = ({
                     style={{ maxHeight: `${maxHeight}px` }}
                   >
                     {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>
                     ) : (
@@ -367,7 +367,7 @@ export const ImageUpload = ({
                         <Combobox.Item
                           key={file.id}
                           item={file}
-                          className="file-item text-myblack relative cursor-default select-none py-2 pl-10 pr-4"
+                          className="file-item relative cursor-default select-none py-2 pl-10 pr-4 text-myblack"
                         >
                           <div className="flex items-center space-x-3">
                             <img
@@ -391,7 +391,7 @@ export const ImageUpload = ({
             </Combobox.Root>
 
             <button
-              className="bg-mylightgrey text-myblack mt-4 rounded-md px-4 py-2 text-sm hover:bg-cyan-600 hover:text-white"
+              className="mt-4 rounded-md bg-mylightgrey px-4 py-2 text-sm text-myblack hover:bg-cyan-600 hover:text-white"
               onClick={() => setIsSelectingFile(false)}
             >
               Cancel

package/templates/src/components/fields/PaneBreakCollectionSelector.tsx

@@ -67,17 +67,17 @@ export default function PaneBreakCollectionSelector({
       >
         <div className="relative mt-1">
           <Combobox.Input
-            className="border-mydarkgrey focus:border-myblue focus:ring-myblue xs:text-sm w-full rounded-md py-2 pl-3 pr-10 shadow-sm"
+            className="w-full rounded-md border-mydarkgrey py-2 pl-3 pr-10 shadow-sm focus:border-myblue focus:ring-myblue xs:text-sm"
             autoComplete="off"
           />
           <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>
         </div>
-        <Combobox.Content className="xs:text-sm absolute 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">
+        <Combobox.Content className="absolute 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 xs:text-sm">
           {collection.items.map((item) => (
             <Combobox.Item
               key={item}

package/templates/src/components/fields/PaneBreakShapeSelector.tsx

@@ -98,22 +98,22 @@ export default function PaneBreakShapeSelector({
         composite={true}
       >
         <div className="relative mt-1 flex-grow">
-          <div className="border-mydarkgrey focus-within:border-myblue focus-within:ring-myblue flex w-full items-center rounded-md border shadow-sm">
+          <div className="flex w-full items-center rounded-md border border-mydarkgrey shadow-sm focus-within:border-myblue focus-within:ring-myblue">
             <Combobox.Input
-              className="xs:text-sm w-full rounded-l-md border-0 py-2 pl-3 pr-0 focus:ring-0"
+              className="w-full rounded-l-md border-0 py-2 pl-3 pr-0 focus:ring-0 xs:text-sm"
               autoComplete="off"
             />
             <div className="py-2 pr-8">{renderShapePreview(selectedImage)}</div>
             <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>
           </div>
         </div>
 
-        <Combobox.Content className="xs:text-sm absolute 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">
+        <Combobox.Content className="absolute 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 xs:text-sm">
           {collection.items.map((shape) => (
             <Combobox.Item
               key={shape}

package/templates/src/components/fields/SelectedTailwindClass.tsx

@@ -23,7 +23,7 @@ const SelectedTailwindClass = ({ name, values, onRemove, onUpdate }: Props) => {
           .join(', ');
 
   return (
-    <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={title} className="flex items-center gap-2 font-bold">
         <button onClick={() => onUpdate(name)}>
           {tailwindClasses[name]?.title || name}
@@ -34,7 +34,7 @@ const SelectedTailwindClass = ({ name, values, onRemove, onUpdate }: Props) => {
           aria-label={`Remove ${name} class`}
           title={`Remove ${tailwindClasses[name]?.title || name} class`}
         >
-          <XMarkIcon className="text-mydarkgrey h-4 w-4 hover:font-bold hover:text-black" />
+          <XMarkIcon className="h-4 w-4 text-mydarkgrey hover:font-bold hover:text-black" />
         </button>
       </div>
     </div>

package/templates/src/components/fields/ViewportComboBox.tsx

@@ -183,7 +183,7 @@ const ViewportComboBox = ({
                   )}
                   <Combobox.Input
                     className={classNames(
-                      'border-mydarkgrey w-full rounded-md border py-2 text-xl leading-5 focus:border-cyan-600 focus:ring-1 focus:ring-cyan-600',
+                      'w-full rounded-md border border-mydarkgrey py-2 text-xl leading-5 focus:border-cyan-600 focus:ring-1 focus:ring-cyan-600',
                       isInferred ? 'text-black/20' : 'text-black',
                       isColorValue ? 'pl-12' : 'pl-3',
                       'pr-16'
@@ -193,7 +193,7 @@ const ViewportComboBox = ({
                   />
                   <Combobox.Trigger className="absolute inset-y-0 right-0 flex items-center pl-2 pr-2">
                     <ChevronUpDownIcon
-                      className="text-mydarkgrey h-5 w-5"
+                      className="h-5 w-5 text-mydarkgrey"
                       aria-hidden="true"
                     />
                   </Combobox.Trigger>
@@ -203,7 +203,7 @@ const ViewportComboBox = ({
                 <Combobox.Positioner style={{ zIndex: 1002 }}>
                   <Combobox.Content className="max-h-64 w-full overflow-auto rounded-md bg-white py-1 text-xl 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>
                     ) : (
@@ -252,7 +252,7 @@ const ViewportComboBox = ({
                 id={`negative-${viewport}`}
                 checked={isNowNegative}
                 onChange={handleNegativeChange}
-                className="border-mydarkgrey h-4 w-4 rounded text-cyan-600 focus:ring-cyan-600"
+                className="h-4 w-4 rounded border-mydarkgrey text-cyan-600 focus:ring-cyan-600"
               />
               <label
                 htmlFor={`negative-${viewport}`}

package/templates/src/components/form/ActionBuilderField.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useMemo, type JSX } from 'react';
 import { TractStackAPI } from '@/utils/api';
 import { GOTO_TARGETS, ACTION_COMMANDS, type ActionCommand } from '@/constants';
 import XMarkIcon from '@heroicons/react/24/outline/XMarkIcon';

package/templates/src/components/form/ActionBuilderSlugSelector.tsx

@@ -151,7 +151,7 @@ const ActionBuilderSlugSelector = ({
           </Combobox.Trigger>
         </div>
 
-        <Combobox.Content className="absolute z-10 mt-1 max-h-60 w-full max-w-md 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-10 mt-1 max-h-60 w-full max-w-md overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
           {filteredItems.length === 0 ? (
             <div className="relative cursor-default select-none px-4 py-2 text-gray-700">
               {query ? 'No matching items found' : 'No items available'}

package/templates/src/components/form/UnsavedChangesBar.tsx

@@ -147,7 +147,7 @@ export default function UnsavedChangesBar<T>({
       <div className="absolute inset-0 bg-black/10 backdrop-blur-sm" />
 
       {/* Main content bar */}
-      <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-4 py-3 shadow-lg ${styling.bgColor} ${styling.borderColor}`}
         >

package/templates/src/components/form/advanced/APIConfigSection.tsx

@@ -19,8 +19,8 @@ export default function APIConfigSection({
   const aaiConfigured = status?.aaiAPIKeySet;
 
   return (
-    <div className="bg-white shadow sm:rounded-lg">
-      <div className="px-4 py-5 sm:p-6">
+    <div className="sm:rounded-lg bg-white shadow">
+      <div className="sm:p-6 px-4 py-5">
         <div className="flex items-center justify-between">
           <h3 className="text-base font-bold leading-6 text-gray-900">
             API Configuration

package/templates/src/components/form/advanced/AuthConfigSection.tsx

@@ -20,8 +20,8 @@ export default function AuthConfigSection({
   const editorConfigured = status?.editorPasswordSet;
 
   return (
-    <div className="bg-white shadow sm:rounded-lg">
-      <div className="px-4 py-5 sm:p-6">
+    <div className="sm:rounded-lg bg-white shadow">
+      <div className="sm:p-6 px-4 py-5">
         <h3 className="text-base font-bold leading-6 text-gray-900">
           Authentication Configuration
         </h3>

package/templates/src/components/form/brand/BrandColorsSection.tsx

@@ -188,7 +188,7 @@ export default function BrandColorsSection({
           ) : (
             <div className="space-y-1">
               {contrastIssues.map((issue, index) => (
-                <p key={index} className="text-mydarkgrey text-sm">
+                <p key={index} className="text-sm text-mydarkgrey">
                   {issue}
                 </p>
               ))}

package/templates/src/components/profile/ProfileCreate.tsx

@@ -226,7 +226,7 @@ export const ProfileCreate = ({ onSuccess, onError }: ProfileCreateProps) => {
   return (
     <>
       <style>{selectItemStyles}</style>
-      <h3 className="font-action py-6 text-xl text-blue-600">
+      <h3 className="py-6 font-action text-xl text-blue-600">
         Feel free to introduce yourself
       </h3>
       <p className="text-md pb-6">
@@ -332,7 +332,7 @@ export const ProfileCreate = ({ onSuccess, onError }: ProfileCreateProps) => {
 
                   <Portal>
                     <Select.Positioner>
-                      <Select.Content className="relative z-10 mt-1 max-h-56 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">
+                      <Select.Content className="sm:text-sm relative z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                         {contactPersona.map((item) => (
                           <Select.Item
                             key={item.id}
@@ -434,7 +434,7 @@ export const ProfileCreate = ({ onSuccess, onError }: ProfileCreateProps) => {
           )}
 
           {badSave ? (
-            <div className="align-center font-action col-span-3 flex justify-center py-12 text-red-500">
+            <div className="align-center col-span-3 flex justify-center py-12 font-action text-red-500">
               Profile could not be saved. Email already registered.
             </div>
           ) : null}
@@ -445,7 +445,7 @@ export const ProfileCreate = ({ onSuccess, onError }: ProfileCreateProps) => {
                 type="submit"
                 disabled={isLoading}
                 className={classNames(
-                  `font-action rounded-lg px-3.5 py-2.5 text-white transition-all duration-200 hover:rotate-1`,
+                  `rounded-lg px-3.5 py-2.5 font-action text-white transition-all duration-200 hover:rotate-1`,
                   isLoading
                     ? `cursor-not-allowed bg-gray-400`
                     : `bg-black hover:bg-orange-500`

package/templates/src/components/profile/ProfileEdit.tsx

@@ -213,7 +213,7 @@ export const ProfileEdit = ({ onSuccess, onError }: ProfileEditProps) => {
   return (
     <>
       <style>{selectItemStyles}</style>
-      <h3 className="font-action py-6 text-xl text-blue-600">
+      <h3 className="py-6 font-action text-xl text-blue-600">
         Update your profile
       </h3>
 
@@ -294,7 +294,7 @@ export const ProfileEdit = ({ onSuccess, onError }: ProfileEditProps) => {
 
                   <Portal>
                     <Select.Positioner>
-                      <Select.Content className="relative z-10 mt-1 max-h-56 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">
+                      <Select.Content className="sm:text-sm relative z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                         {contactPersona.map((item) => (
                           <Select.Item
                             key={item.id}
@@ -383,7 +383,7 @@ export const ProfileEdit = ({ onSuccess, onError }: ProfileEditProps) => {
           </div>
 
           {saved ? (
-            <div className="align-center font-action col-span-3 flex justify-center py-12 text-green-600">
+            <div className="align-center col-span-3 flex justify-center py-12 font-action text-green-600">
               Profile updated successfully!
             </div>
           ) : null}
@@ -393,7 +393,7 @@ export const ProfileEdit = ({ onSuccess, onError }: ProfileEditProps) => {
               type="submit"
               disabled={isLoading}
               className={classNames(
-                `font-action rounded-lg px-3.5 py-2.5 text-white transition-all duration-200 hover:rotate-1`,
+                `rounded-lg px-3.5 py-2.5 font-action text-white transition-all duration-200 hover:rotate-1`,
                 isLoading
                   ? `cursor-not-allowed bg-gray-400`
                   : `bg-black hover:bg-orange-500`

package/templates/src/components/profile/ProfileSwitch.tsx

@@ -213,7 +213,7 @@ export const ProfileSwitch = () => {
   if (isLoading) {
     return (
       <div className="py-12">
-        <div className="border-myblue/20 bg-mywhite border border-dashed">
+        <div className="border border-dashed border-myblue/20 bg-mywhite">
           <div className="p-6">
             <div className="flex items-center justify-center py-12">
               <div className="text-mydarkgrey">Loading profile...</div>
@@ -236,7 +236,7 @@ export const ProfileSwitch = () => {
 
   return (
     <div className="py-12">
-      <div className="border-myblue/20 bg-mywhite border border-dashed">
+      <div className="border border-dashed border-myblue/20 bg-mywhite">
         <div className="p-6">
           {mode === 'create' && (
             <ProfileCreate onSuccess={handleProfileSuccess} />

package/templates/src/components/profile/ProfileUnlock.tsx

@@ -128,7 +128,7 @@ export const ProfileUnlock = ({
 
   return (
     <>
-      <h3 className="font-action py-6 text-xl text-blue-600">
+      <h3 className="py-6 font-action text-xl text-blue-600">
         Welcome back! Please unlock your profile
       </h3>
 
@@ -181,7 +181,7 @@ export const ProfileUnlock = ({
           </div>
 
           {badLogin ? (
-            <div className="align-center font-action col-span-1 flex justify-center py-6 text-red-500">
+            <div className="align-center col-span-1 flex justify-center py-6 font-action text-red-500">
               Invalid credentials. Please try again.
             </div>
           ) : null}
@@ -191,7 +191,7 @@ export const ProfileUnlock = ({
               type="submit"
               disabled={isLoading}
               className={classNames(
-                `font-action rounded-lg px-3.5 py-2.5 text-white transition-all duration-200 hover:rotate-1`,
+                `rounded-lg px-3.5 py-2.5 font-action text-white transition-all duration-200 hover:rotate-1`,
                 isLoading
                   ? `cursor-not-allowed bg-gray-400`
                   : `bg-black hover:bg-orange-500`

package/templates/src/components/search/SearchModal.tsx

@@ -221,7 +221,7 @@ export default function SearchModal({
         <Dialog.Backdrop className="fixed inset-0 z-50 bg-black bg-opacity-50 backdrop-blur-sm" />
         <Dialog.Positioner className="fixed inset-0 z-50 mx-auto max-w-3xl p-2 pt-16 md:p-4">
           <Dialog.Content
-            className="bg-mywhite mx-auto w-full overflow-hidden rounded-lg shadow-2xl"
+            className="mx-auto w-full overflow-hidden rounded-lg bg-mywhite shadow-2xl"
             style={{ height: '80vh' }}
           >
             <div className="relative w-full border-b border-gray-200 p-4">
@@ -269,7 +269,7 @@ export default function SearchModal({
                     onChange={handleInputChange}
                     onKeyDown={handleKeyDown}
                     placeholder="Search content..."
-                    className="text-mydarkgrey relative z-10 w-full border-none bg-transparent text-xl placeholder-gray-500 outline-none"
+                    className="relative z-10 w-full border-none bg-transparent text-xl text-mydarkgrey placeholder-gray-500 outline-none"
                     style={{ background: 'transparent', padding: '0' }}
                   />
                 </div>
@@ -277,7 +277,7 @@ export default function SearchModal({
 
               <button
                 onClick={handleClose}
-                className="text-mydarkgrey hover:text-myblue absolute right-4 top-6 rounded-lg p-2 transition-colors hover:bg-gray-100"
+                className="absolute right-4 top-6 rounded-lg p-2 text-mydarkgrey transition-colors hover:bg-gray-100 hover:text-myblue"
                 aria-label="Close search"
               >
                 <XMarkIcon className="h-6 w-6" />
@@ -310,8 +310,8 @@ export default function SearchModal({
 
               {query.trim().length >= 3 && isDiscovering && (
                 <div className="w-full p-8 text-center">
-                  <div className="border-myblue inline-block h-8 w-8 animate-spin rounded-full border-b-2"></div>
-                  <p className="text-mydarkgrey mt-4">Discovering...</p>
+                  <div className="inline-block h-8 w-8 animate-spin rounded-full border-b-2 border-myblue"></div>
+                  <p className="mt-4 text-mydarkgrey">Discovering...</p>
                 </div>
               )}
 
@@ -320,7 +320,7 @@ export default function SearchModal({
                   <p>Discovery failed: {discoverError}</p>
                   <button
                     onClick={() => discoverTerms(query.trim())}
-                    className="text-myblue mt-2 hover:underline"
+                    className="mt-2 text-myblue hover:underline"
                   >
                     Try again
                   </button>
@@ -329,7 +329,7 @@ export default function SearchModal({
 
               {showSuggestions && (
                 <div className="w-full p-6">
-                  <p className="text-mydarkgrey mb-4 text-sm font-bold">
+                  <p className="mb-4 text-sm font-bold text-mydarkgrey">
                     Suggestions ({suggestions.length})
                   </p>
                   <div className="flex flex-wrap gap-2">
@@ -345,7 +345,7 @@ export default function SearchModal({
                       </button>
                     ))}
                   </div>
-                  <p className="text-mydarkgrey mt-4 text-xs">
+                  <p className="mt-4 text-xs text-mydarkgrey">
                     Click a suggestion or press Enter to search
                   </p>
                   <div className="mt-6 border-t border-gray-200 pt-4">
@@ -379,8 +379,8 @@ export default function SearchModal({
 
               {isRetrieving && (
                 <div className="w-full p-8 text-center">
-                  <div className="border-myblue inline-block h-8 w-8 animate-spin rounded-full border-b-2"></div>
-                  <p className="text-mydarkgrey mt-4">Searching...</p>
+                  <div className="inline-block h-8 w-8 animate-spin rounded-full border-b-2 border-myblue"></div>
+                  <p className="mt-4 text-mydarkgrey">Searching...</p>
                 </div>
               )}
 

package/templates/src/components/search/SearchResults.tsx

@@ -226,7 +226,7 @@ export default function SearchResults({
   return (
     <div className="p-6">
       <div className="mb-6">
-        <h2 className="text-mydarkgrey text-lg font-bold">
+        <h2 className="text-lg font-bold text-mydarkgrey">
           {totalResults} result{totalResults !== 1 ? 's' : ''} found
         </h2>
         <p className="mt-1 text-sm text-gray-600">
@@ -246,7 +246,7 @@ export default function SearchResults({
               <div className="flex flex-col md:flex-row md:items-start md:gap-4">
                 {/* Mobile: Full width image without overlay badge */}
                 <div
-                  className="bg-mydarkgrey relative w-full overflow-hidden rounded-lg md:hidden"
+                  className="relative w-full overflow-hidden rounded-lg bg-mydarkgrey md:hidden"
                   style={{ aspectRatio: '1200/630' }}
                 >
                   <img
@@ -258,7 +258,7 @@ export default function SearchResults({
 
                 {/* Desktop: Side image without overlay badge */}
                 <div
-                  className="bg-mydarkgrey relative hidden flex-shrink-0 overflow-hidden rounded-lg md:block"
+                  className="relative hidden flex-shrink-0 overflow-hidden rounded-lg bg-mydarkgrey md:block"
                   style={{ width: '240px', height: '135px' }}
                 >
                   <img
@@ -271,11 +271,11 @@ export default function SearchResults({
                 <div className="mt-3 min-w-0 flex-1 md:mt-0">
                   <div className="flex items-start justify-between gap-4">
                     <div className="flex-1">
-                      <h3 className="text-mydarkgrey group-hover:text-myblue mb-2 text-lg font-bold transition-colors">
+                      <h3 className="mb-2 text-lg font-bold text-mydarkgrey transition-colors group-hover:text-myblue">
                         {item.title}
                       </h3>
                       {item.description && (
-                        <p className="text-mydarkgrey mb-2 text-sm">
+                        <p className="mb-2 text-sm text-mydarkgrey">
                           {item.description}
                         </p>
                       )}
@@ -291,13 +291,13 @@ export default function SearchResults({
                             {item.topics.slice(0, 3).map((topic, idx) => (
                               <span
                                 key={idx}
-                                className="bg-myoffwhite text-mydarkgrey rounded px-2 py-1 text-xs"
+                                className="rounded bg-myoffwhite px-2 py-1 text-xs text-mydarkgrey"
                               >
                                 {topic}
                               </span>
                             ))}
                             {item.topics.length > 3 && (
-                              <span className="text-mydarkgrey text-xs">
+                              <span className="text-xs text-mydarkgrey">
                                 +{item.topics.length - 3} more
                               </span>
                             )}
@@ -321,7 +321,7 @@ export default function SearchResults({
             page={currentPage}
             onPageChange={(details) => handlePageChange(details.page)}
           >
-            <Pagination.PrevTrigger className="text-mydarkgrey hover:text-myblue mr-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold transition-colors disabled:opacity-50">
+            <Pagination.PrevTrigger className="mr-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-mydarkgrey transition-colors hover:text-myblue disabled:opacity-50">
               <ChevronLeftIcon className="h-4 w-4" />
               Previous
             </Pagination.PrevTrigger>
@@ -346,7 +346,7 @@ export default function SearchResults({
                     ) : (
                       <span
                         key={index}
-                        className="text-mydarkgrey px-2 text-sm"
+                        className="px-2 text-sm text-mydarkgrey"
                       >
                         {page.type === 'ellipsis' ? '...' : ''}
                       </span>
@@ -356,7 +356,7 @@ export default function SearchResults({
               </Pagination.Context>
             </div>
 
-            <Pagination.NextTrigger className="text-mydarkgrey hover:text-myblue ml-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold transition-colors disabled:opacity-50">
+            <Pagination.NextTrigger className="ml-2 flex items-center gap-1 rounded px-3 py-2 text-sm font-bold text-mydarkgrey transition-colors hover:text-myblue disabled:opacity-50">
               Next
               <ChevronRightIcon className="h-4 w-4" />
             </Pagination.NextTrigger>

package/templates/src/components/search/SearchWrapper.tsx

@@ -27,7 +27,7 @@ export default function SearchWrapper({ contentMap }: SearchWrapperProps) {
     <>
       <button
         onClick={handleSearchOpen}
-        className="text-myblue/80 hover:text-myblue hover:rotate-6"
+        className="text-myblue/80 hover:rotate-6 hover:text-myblue"
         title="Search content"
         aria-label="Search content"
       >

package/templates/src/components/storykeep/Dashboard.tsx

@@ -113,7 +113,7 @@ export default function StoryKeepDashboard({
               <h3 className="text-lg font-bold text-black">
                 Welcome to your StoryKeep
               </h3>
-              <div className="text-mydarkgrey mt-2 text-sm">
+              <div className="mt-2 text-sm text-mydarkgrey">
                 <p>
                   Complete your site's branding configuration to get started.
                   (And update as often as you like!)

package/templates/src/components/storykeep/Dashboard_Advanced.tsx

@@ -100,8 +100,8 @@ export default function StoryKeepDashboard_Advanced({
     const icon = status?.tursoEnabled ? '☁️' : '📁';
 
     return (
-      <div className="bg-white shadow sm:rounded-lg">
-        <div className="px-4 py-5 sm:p-6">
+      <div className="sm:rounded-lg bg-white shadow">
+        <div className="sm:p-6 px-4 py-5">
           <h3 className="text-base font-bold leading-6 text-gray-900">
             Database Configuration
           </h3>

package/templates/src/components/storykeep/controls/content/BeliefForm.tsx

@@ -288,7 +288,7 @@ export default function BeliefForm({
                 onChange={(e) => handleCustomValueChange(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder="Enter custom value"
-                className={`block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 ${
+                className={`sm:text-sm sm:leading-6 block w-full rounded-md border-0 px-3 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-inset ${
                   customValueError
                     ? 'ring-red-500 focus:ring-red-600'
                     : 'ring-gray-300 focus:ring-cyan-600'