refactor(ui): use EMCN fields in deployment and setup modals

.claude/rules/emcn-components.md

@@ -70,3 +70,7 @@ geometry only; colour, radius and SVG stroke continue to come from the selected
 Use `shape='round'` for circular actions, or omit it to retain the current radius.
 `size='inline'` is a 20px-high action with caption typography and compact horizontal
 padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.

.cursor/rules/emcn-components.mdc

@@ -71,3 +71,7 @@ geometry only; colour, radius and SVG stroke continue to come from the selected
 Use `shape='round'` for circular actions, or omit it to retain the current radius.
 `size='inline'` is a 20px-high action with caption typography and compact horizontal
 padding. Prefer these supported props to size, padding and radius overrides.
+
+### Chip sizing and centered actions
+
+`Chip`, `ChipLink`, and `ChipInput` retain their default 30px height. Use `size="lg"` for the existing auth-scale 36px controls; the larger size follows the root font size. `Chip` and `ChipLink` accept `align="center"` to center their icon/label group, including full-width form actions. Long labels still shrink and retain their overflow treatment. Avoid descendant flex overrides to center chip labels. The default geometry exports remain unchanged for static consumers.

apps/sim/app/(auth)/components/auth-input.tsx

@@ -1,20 +1,11 @@
 'use client'
 
 import * as React from 'react'
-import { ChipInput, type ChipInputProps, cn } from '@sim/emcn'
-import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants'
+import { ChipInput, type ChipInputProps } from '@sim/emcn'
 
-/**
- * The auth text field — a {@link ChipInput} raised to the auth control height
- * ({@link AUTH_CONTROL_HEIGHT}) so every labeled field on the auth and invite
- * surfaces shares one slightly-taller geometry. All chip props pass through
- * (`error`, `endAdornment`, `icon`, …); only the height is owned here, and a
- * caller's `className` (layout only) still composes on top.
- */
-export const AuthInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
-  ({ className, ...props }, ref) => (
-    <ChipInput ref={ref} className={cn(AUTH_CONTROL_HEIGHT, className)} {...props} />
-  )
+/** Auth fields use the larger shared chip size while retaining native input props and refs. */
+export const AuthInput = React.forwardRef<HTMLInputElement, Omit<ChipInputProps, 'size'>>(
+  (props, ref) => <ChipInput {...props} ref={ref} size='lg' />
 )
 
 AuthInput.displayName = 'AuthInput'

apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx

@@ -9,7 +9,7 @@ type LandingCtaSize = 'compact' | 'default' | 'display'
 
 export type LandingCtaSection = PostHogEventMap['landing_cta_clicked']['section']
 
-interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant'> {
+interface LandingCtaLinkProps extends Omit<ChipLinkProps, 'variant' | 'size'> {
   size?: LandingCtaSize
   variant?: 'primary' | 'outline'
   /** Adds the animated chevron used by demo actions. */

apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx

@@ -11,7 +11,7 @@ const VIEWER_MASK_LENGTH = 10
 
 type SecretValueFieldProps = Omit<
   ComponentProps<'input'>,
-  'type' | 'value' | 'onChange' | 'readOnly' | 'style'
+  'type' | 'value' | 'onChange' | 'readOnly' | 'style' | 'size'
 > & {
   /** The chip owns field styling; callers use className for layout. */
   style?: never

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx

@@ -7,7 +7,7 @@ import {
   ChipConfirmModal,
   ChipEmailsInput,
   ChipInput,
-  ChipTextarea,
+  ChipModalField,
   cn,
   Input,
   Label,
@@ -335,12 +335,7 @@ export function ChatDeploy({
 
   return (
     <>
-      <form
-        id='chat-deploy-form'
-        ref={formRef}
-        onSubmit={handleSubmit}
-        className='-mx-1 space-y-4 px-1'
-      >
+      <form id='chat-deploy-form' ref={formRef} onSubmit={handleSubmit} className='space-y-4'>
         {errors.general && (
           <div className='flex items-center gap-2 rounded-md border border-[color-mix(in_srgb,var(--text-error)_20%,transparent)] bg-[color-mix(in_srgb,var(--text-error)_10%,transparent)] px-3 py-2 text-[var(--text-error)] text-small'>
             <TriangleAlert className='size-4 shrink-0' />
@@ -358,27 +353,21 @@ export function ChatDeploy({
             isEditingExisting={!!existingChat}
           />
 
-          <div>
-            <Label
-              htmlFor='title'
-              className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'
-            >
-              Title
-            </Label>
-            <ChipInput
-              id='title'
-              placeholder='Customer Support Assistant'
-              value={formData.title}
-              onChange={(e) => updateField('title', e.target.value)}
-              required
-              disabled={chatSubmitting}
-            />
-            {errors.title && (
-              <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{errors.title}</p>
+          <ChipModalField type='custom' title='Title' htmlFor='title' error={errors.title}>
+            {(aria) => (
+              <ChipInput
+                id='title'
+                placeholder='Customer Support Assistant'
+                value={formData.title}
+                onChange={(e) => updateField('title', e.target.value)}
+                required
+                disabled={chatSubmitting}
+                {...aria}
+              />
             )}
-          </div>
+          </ChipModalField>
 
-          <div>
+          <div className='px-2'>
             <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
               Output
             </Label>
@@ -400,7 +389,7 @@ export function ChatDeploy({
             )}
           </div>
 
-          <div className='flex items-center justify-between gap-3'>
+          <div className='flex items-center justify-between gap-3 px-2'>
             <div className='min-w-0'>
               <Label className='block pl-0.5 text-[var(--text-primary)] text-small'>
                 Include thinking
@@ -414,7 +403,7 @@ export function ChatDeploy({
             />
           </div>
 
-          <div className='flex items-center justify-between gap-3'>
+          <div className='flex items-center justify-between gap-3 px-2'>
             <div className='min-w-0'>
               <Label className='block pl-0.5 text-[var(--text-primary)] text-small'>
                 Include tool calls
@@ -443,26 +432,17 @@ export function ChatDeploy({
             hasExistingPassword={existingPassword}
             error={errors.password || errors.emails}
           />
-          <div>
-            <Label
-              htmlFor='welcomeMessage'
-              className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'
-            >
-              Welcome message
-            </Label>
-            <ChipTextarea
-              id='welcomeMessage'
-              placeholder='Enter a welcome message for your chat'
-              value={formData.welcomeMessage}
-              onChange={(e) => updateField('welcomeMessage', e.target.value)}
-              rows={3}
-              disabled={chatSubmitting}
-              className='min-h-[80px]'
-            />
-            <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
-              This message will be displayed when users first open the chat
-            </p>
-          </div>
+          <ChipModalField
+            type='textarea'
+            title='Welcome message'
+            placeholder='Enter a welcome message for your chat'
+            value={formData.welcomeMessage}
+            onChange={(value) => updateField('welcomeMessage', value)}
+            rows={3}
+            disabled={chatSubmitting}
+            minHeight={80}
+            hint='This message will be displayed when users first open the chat'
+          />
 
           <button
             type='button'
@@ -516,7 +496,7 @@ export function ChatDeploy({
 
 function LoadingSkeleton() {
   return (
-    <div className='-mx-1 space-y-4 px-1'>
+    <div className='space-y-4 px-2'>
       <div className='space-y-3'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[26px]' />
@@ -586,7 +566,7 @@ function IdentifierInput({
   const displayUrl = fullUrl.replace(/^https?:\/\//, '')
 
   return (
-    <div>
+    <div className='px-2'>
       <Label
         htmlFor='chat-url'
         className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'
@@ -729,7 +709,7 @@ function AuthSelector({
   }, [authOptions, authType, onAuthTypeChange])
 
   return (
-    <div className='space-y-4'>
+    <div className='space-y-4 px-2'>
       <div>
         <Label className='mb-[6.5px] block pl-0.5 text-[var(--text-primary)] text-small'>
           Access control