refactor(emcn): own compact code search field chrome

Author: Bill Leoutsakos

apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.test.tsx

@@ -98,7 +98,9 @@ describe('CodeSearchOverlay', () => {
     expect(overlay.getAttribute('data-toolbar-root')).toBe('true')
     expect(overlay.getAttribute('data-search-active')).toBe('true')
     expect(overlay.hasAttribute('role')).toBe(false)
-    expect(input.className).toContain('h-[23px] w-[94px] text-caption')
+    expect(input.parentElement?.className).toContain('h-[23px]')
+    expect(input.parentElement?.className).toContain('w-[94px]')
+    expect(input.className).toContain('text-caption')
     expect(overlay.textContent).toContain('No results')
     expect(overlay.querySelector('span.w-\\[58px\\]')).not.toBeNull()
     const previous = overlay.querySelector<HTMLButtonElement>('[aria-label="Previous match"]')

apps/sim/app/workspace/[workspaceId]/components/code-search-overlay/code-search-overlay.tsx

@@ -1,13 +1,13 @@
 import type { ChangeEvent, Ref } from 'react'
-import { Button, ChipInput, cn, Input } from '@sim/emcn'
+import { Button, ChipInput, cn } from '@sim/emcn'
 import { ArrowDown, ArrowUp, X } from '@sim/emcn/icons'
 
 export interface CodeSearchOverlayProps {
   /** The attached terminal panel has a joined lower edge and wider result tally. */
   appearance?: 'floating' | 'attached'
   /** Position relative to the owning code panel. */
   className: string
-  /** Logs use the chip field; previews and terminal output use the plain field. */
+  /** Logs use the 30px chip field; previews and terminal output use compact search. */
   inputKind: 'chip' | 'plain'
   inputRef: Ref<HTMLInputElement>
   query: string
@@ -65,7 +65,7 @@ export function CodeSearchOverlay({
       {inputKind === 'chip' ? (
         <ChipInput {...inputProps} className='mr-0.5 w-[94px]' />
       ) : (
-        <Input {...inputProps} className='mr-0.5 h-[23px] w-[94px] text-caption' />
+        <ChipInput {...inputProps} appearance='compactSearch' className='mr-0.5 w-[94px]' />
       )}
       <span
         className={cn(

packages/emcn/src/components/chip-input/chip-input.tsx

@@ -14,6 +14,8 @@
  * same 1.5 gap as `Chip`. It shares the chip-field chrome with
  * {@link ChipTextarea}, shows no focus ring — keep the surface calm and rely on
  * the caret for focus. Pass `error` to swap the border to the error token.
+ * `appearance='compactSearch'` owns the existing 23px code-search field
+ * treatment without changing the 30px chip default.
  *
  * @example
  * ```tsx
@@ -27,12 +29,29 @@
  * ```
  */
 import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '../../lib/cn'
 import { chipFieldSurfaceClass, chipFieldTextClass, chipGeometryClass } from '../chip/chip-chrome'
 
 type ChipInputIcon = React.ComponentType<{ className?: string }>
 
-export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+/** The compact search field keeps the existing code-viewer input geometry. */
+export const chipInputVariants = cva('', {
+  variants: {
+    appearance: {
+      chip: '',
+      compactSearch:
+        'h-[23px] items-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 transition-colors',
+    },
+  },
+  defaultVariants: { appearance: 'chip' },
+})
+
+export interface ChipInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,
+    VariantProps<typeof chipInputVariants> {
+  /** The default chip field or the compact code-search field. */
+  appearance?: VariantProps<typeof chipInputVariants>['appearance']
   /** Leading icon component (e.g. `Search` from `@sim/emcn/icons`). Rendered at 14px in `--text-icon`, with the chip's 1.5 gap. */
   icon?: ChipInputIcon
   /** Custom leading content, such as a color swatch. Takes precedence over `icon`. */
@@ -54,6 +73,7 @@ export interface ChipInputProps extends Omit<React.InputHTMLAttributes<HTMLInput
 export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
   (
     {
+      appearance = 'chip',
       className,
       inputClassName,
       icon: Icon,
@@ -69,8 +89,9 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
     <div
       className={cn(
         'flex w-full',
-        chipGeometryClass,
-        chipFieldSurfaceClass,
+        appearance === 'chip' && chipGeometryClass,
+        appearance === 'chip' && chipFieldSurfaceClass,
+        chipInputVariants({ appearance }),
         error && 'border-[var(--text-error)]',
         disabled && 'opacity-50',
         className
@@ -83,8 +104,12 @@ export const ChipInput = React.forwardRef<HTMLInputElement, ChipInputProps>(
         type={type}
         disabled={disabled}
         className={cn(
-          '-ml-1 h-full w-full bg-transparent indent-1 disabled:cursor-not-allowed',
-          chipFieldTextClass,
+          appearance === 'compactSearch'
+            ? 'h-full w-full touch-manipulation scroll-pr-1 bg-transparent font-sans text-[var(--text-primary)] text-caption outline-hidden [letter-spacing:inherit] placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed'
+            : cn(
+                '-ml-1 h-full w-full bg-transparent indent-1 disabled:cursor-not-allowed',
+                chipFieldTextClass
+              ),
           inputClassName
         )}
         {...props}

packages/emcn/src/components/index.ts

@@ -64,7 +64,7 @@ export {
   ChipEmailsInput,
   type ChipEmailsInputProps,
 } from './chip-emails-input/chip-emails-input'
-export { ChipInput, type ChipInputProps } from './chip-input/chip-input'
+export { ChipInput, type ChipInputProps, chipInputVariants } from './chip-input/chip-input'
 export {
   type ChipConfirmAction,
   type ChipConfirmDefaultAction,