feat(forms): make textarea monospace opt-in and improve multiline toggle

Add `monospace` prop to Textarea component so font-mono is no longer
applied by default. Apply it explicitly to env variable editors, private
key fields, and shared variable forms where monospace is appropriate.

Use Alpine.js x-data/x-model to make the multiline toggle reactive
without a full Livewire round-trip. Add wire:key on the input/textarea
wrappers to force proper DOM replacement when switching modes.

resources/views/livewire/project/shared/environment-variable/add.blade.php

@@ -1,17 +1,23 @@
-<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
+<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'
+    x-data="{ isMultiline: $wire.entangle('is_multiline') }">
     <x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
-    @if ($is_multiline)
-        <x-forms.textarea id="value" label="Value" required />
-    @else
-        <x-forms.env-var-input placeholder="production" id="value" label="Value" required
-            :availableVars="$shared ? [] : $this->availableSharedVariables"
-            :projectUuid="data_get($parameters, 'project_uuid')"
-            :environmentUuid="data_get($parameters, 'environment_uuid')"
-            :serverUuid="data_get($parameters, 'server_uuid')" />
-    @endif
+    <template x-if="isMultiline">
+        <div wire:key="env-value-textarea">
+            <x-forms.textarea id="value" label="Value" required class="font-sans" spellcheck />
+        </div>
+    </template>
+    <template x-if="!isMultiline">
+        <div wire:key="env-value-input">
+            <x-forms.env-var-input placeholder="production" id="value" label="Value" required
+                :availableVars="$shared ? [] : $this->availableSharedVariables"
+                :projectUuid="data_get($parameters, 'project_uuid')"
+                :environmentUuid="data_get($parameters, 'environment_uuid')"
+                :serverUuid="data_get($parameters, 'server_uuid')" />
+        </div>
+    </template>
 
-    @if (!$shared && !$is_multiline)
-        <div class="text-xs text-neutral-500 dark:text-neutral-400 -mt-1">
+    @if (!$shared)
+        <div x-cloak x-show="!isMultiline" wire:key="env-value-tip" class="text-xs text-neutral-500 dark:text-neutral-400 -mt-1">
             Tip: Type <span class="font-mono dark:text-warning text-coollabs">{{</span> to reference a shared environment
             variable
         </div>
@@ -34,8 +40,8 @@
             label="Is Literal?" />
     @endif
 
-    <x-forms.checkbox id="is_multiline" label="Is Multiline?" />
+    <x-forms.checkbox id="is_multiline" x-model="isMultiline" label="Is Multiline?" />
     <x-forms.button type="submit" @click="slideOverOpen=false">
         Save
     </x-forms.button>
-</form>
+</form>

resources/views/livewire/project/shared/environment-variable/all.blade.php

@@ -84,24 +84,24 @@
                     Inline comments with space before # (e.g., <code class="font-mono">KEY=value #comment</code>) are stripped.
                 </x-callout>
 
-                <x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables"
+                <x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables" monospace
                     label="Production Environment Variables"></x-forms.textarea>
 
                 @if ($showPreview)
-                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
+                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables" monospace
                         id="variablesPreview" wire:model="variablesPreview"></x-forms.textarea>
                 @endif
 
                 <x-forms.button type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
             @else
-                <x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables"
+                <x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables" monospace
                     label="Production Environment Variables" disabled></x-forms.textarea>
 
                 @if ($showPreview)
-                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
+                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables" monospace
                         id="variablesPreview" wire:model="variablesPreview" disabled></x-forms.textarea>
                 @endif
             @endcan
         </form>
     @endif
-</div>
+</div>

resources/views/livewire/project/shared/environment-variable/show.blade.php

@@ -150,17 +150,21 @@
                         <div class="flex flex-col w-full gap-2 lg:flex-row">
                             @if ($is_multiline)
                                 <x-forms.input :required="$is_redis_credential" isMultiline="{{ $is_multiline }}" id="key" />
-                                <x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
+                                <div class="flex-1" wire:key="env-show-value-textarea-{{ $env->id }}">
+                                    <x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
+                                </div>
                             @else
                                 <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" id="key" />
-                                <x-forms.env-var-input
-                                    :required="$is_redis_credential"
-                                    type="password"
-                                    id="value"
-                                    :availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
-                                    :projectUuid="data_get($parameters, 'project_uuid')"
-                                    :environmentUuid="data_get($parameters, 'environment_uuid')"
-                                    :serverUuid="data_get($parameters, 'server_uuid')" />
+                                <div class="flex-1" wire:key="env-show-value-input-{{ $env->id }}">
+                                    <x-forms.env-var-input
+                                        :required="$is_redis_credential"
+                                        type="password"
+                                        id="value"
+                                        :availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
+                                        :projectUuid="data_get($parameters, 'project_uuid')"
+                                        :environmentUuid="data_get($parameters, 'environment_uuid')"
+                                        :serverUuid="data_get($parameters, 'server_uuid')" />
+                                </div>
                             @endif
                             @if ($is_shared)
                                 <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" disabled
@@ -312,4 +316,4 @@
         @endif
 
     </form>
-</div>
+</div>