From 7eb9cc4c9c745871f34ee9af07d12ccb4ba183f7 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos Date: Tue, 22 Sep 2026 12:51:50 -0700 Subject: [PATCH 1/8] improvement(emcn): share larger chip and field geometry --- .claude/rules/emcn-components.md | 4 + .cursor/rules/emcn-components.mdc | 4 + apps/sim/app/(auth)/components/auth-input.tsx | 17 +--- .../landing-cta-link/landing-cta-link.tsx | 2 +- .../secret-value-field/secret-value-field.tsx | 2 +- .../components/chip-input/chip-input.test.tsx | 17 +++- .../src/components/chip-input/chip-input.tsx | 15 ++- .../emcn/src/components/chip/chip-chrome.ts | 6 +- .../emcn/src/components/chip/chip.test.tsx | 93 +++++++++++++++++++ packages/emcn/src/components/chip/chip.tsx | 36 +++++-- 10 files changed, 169 insertions(+), 27 deletions(-) create mode 100644 packages/emcn/src/components/chip/chip.test.tsx diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md index af477a7d886..8c8b468d246 100644 --- a/.claude/rules/emcn-components.md +++ b/.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. diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc index 6a70e29d4b3..75fe49a83e3 100644 --- a/.cursor/rules/emcn-components.mdc +++ b/.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. diff --git a/apps/sim/app/(auth)/components/auth-input.tsx b/apps/sim/app/(auth)/components/auth-input.tsx index 396bae64cf8..a2c3bc12979 100644 --- a/apps/sim/app/(auth)/components/auth-input.tsx +++ b/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( - ({ className, ...props }, ref) => ( - - ) +/** Auth fields use the larger shared chip size while retaining native input props and refs. */ +export const AuthInput = React.forwardRef>( + (props, ref) => ) AuthInput.displayName = 'AuthInput' diff --git a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx b/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx index 4fbba3d3750..5787f2c8560 100644 --- a/apps/sim/app/(landing)/components/landing-cta-link/landing-cta-link.tsx +++ b/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 { +interface LandingCtaLinkProps extends Omit { size?: LandingCtaSize variant?: 'primary' | 'outline' /** Adds the animated chevron used by demo actions. */ diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx index a843694bfe8..fa0e488c761 100644 --- a/apps/sim/app/workspace/[workspaceId]/settings/components/secrets/components/secret-value-field/secret-value-field.tsx +++ b/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 diff --git a/packages/emcn/src/components/chip-input/chip-input.test.tsx b/packages/emcn/src/components/chip-input/chip-input.test.tsx index acbc4226246..a1d70082ff6 100644 --- a/packages/emcn/src/components/chip-input/chip-input.test.tsx +++ b/packages/emcn/src/components/chip-input/chip-input.test.tsx @@ -30,6 +30,19 @@ afterEach(() => { }) describe('ChipInput', () => { + it.each([undefined, 'lg'] as const)( + 'emits a single height for size %s without forwarding it to the native field', + (size) => { + const input = mount() + const heights = input.parentElement?.className + .split(' ') + .filter((token) => token.startsWith('h-')) + expect(heights).toEqual([size === 'lg' ? 'h-9' : 'h-[30px]']) + expect(input.hasAttribute('size')).toBe(false) + expect(input.disabled).toBe(true) + } + ) + it('keeps the focused input mounted when custom leading content changes', () => { const input = mount() const render = (color: string) => ( @@ -76,7 +89,7 @@ describe('chip form controls', () => { error aria-invalid aria-describedby='error' - className='h-[34px]' + size='lg' />

Enter a work email

{ expect(input.labels?.[0].textContent).toBe('Work email') expect(input.getAttribute('aria-describedby')).toBe('error') expect(input.getAttribute('aria-invalid')).toBe('true') - expect(input.parentElement?.className).toContain('h-[34px]') + expect(input.parentElement?.className).toContain('h-9') expect(input.parentElement?.className).toContain('border-[var(--text-error)]') expect(textareaRef.current?.rows).toBe(3) expect(textareaRef.current?.className).toContain('min-h-[80px]') diff --git a/packages/emcn/src/components/chip-input/chip-input.tsx b/packages/emcn/src/components/chip-input/chip-input.tsx index 444cbb1704a..3c5d7d1f161 100644 --- a/packages/emcn/src/components/chip-input/chip-input.tsx +++ b/packages/emcn/src/components/chip-input/chip-input.tsx @@ -28,11 +28,19 @@ */ import * as React from 'react' import { cn } from '../../lib/cn' -import { chipFieldSurfaceClass, chipFieldTextClass, chipGeometryClass } from '../chip/chip-chrome' +import { + chipContentGeometryClass, + chipFieldSurfaceClass, + chipFieldTextClass, + chipRadiusClass, + chipSizeClasses, +} from '../chip/chip-chrome' type ChipInputIcon = React.ComponentType<{ className?: string }> export interface ChipInputProps extends Omit, 'size'> { + /** Control height: 30px by default, or the larger 36px auth spacing scale. */ + size?: keyof typeof chipSizeClasses /** 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`. */ @@ -62,6 +70,7 @@ export const ChipInput = React.forwardRef( error, disabled, type = 'text', + size = 'md', ...props }, ref @@ -69,7 +78,9 @@ export const ChipInput = React.forwardRef(
{ + it.each([undefined, 'lg'] as const)( + 'uses one height for raw variants, buttons and links at size %s', + (size) => { + const height = size === 'lg' ? 'h-9' : 'h-[30px]' + expect( + chipVariants({ size }) + .split(' ') + .filter((token) => token.startsWith('h-')) + ).toEqual([height]) + for (const node of [ + + Continue + , + + Continue + , + ]) { + const markup = renderToStaticMarkup(node) + expect(markup).toContain(height) + expect(markup).not.toContain(size === 'lg' ? 'h-[30px]' : 'h-9') + expect(markup).not.toMatch(/ size=/) + } + expect(chipGeometryUnroundedClass).toContain('h-[30px]') + expect(chipGeometryClass).toContain('h-[30px]') + expect(chipGeometryClass).toContain('rounded-lg') + } + ) + + it('centers the icon and label without preventing long text from shrinking', () => { + const markup = renderToStaticMarkup( + }> + Continue with your identity provider + + ) + expect(markup).toContain('justify-center') + expect(markup).toContain('flex-initial') + expect(markup).toContain('min-w-0') + expect(markup).not.toContain('flex-none') + expect(markup).not.toMatch(/ align=/) + }) + + it('preserves native refs, focus, submission, disabled actions and link navigation', () => { + const container = document.createElement('div') + document.body.appendChild(container) + const root = createRoot(container) + const button = createRef() + const link = createRef() + let submissions = 0 + ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true + const render = (disabled: boolean) => + act(() => + root.render( +
{ + event.preventDefault() + submissions++ + }} + > + + Continue + + + Workspace + +
+ ) + ) + try { + render(false) + button.current?.focus() + expect(document.activeElement).toBe(button.current) + act(() => button.current?.click()) + expect(submissions).toBe(1) + expect(link.current?.getAttribute('href')).toBe('/workspace') + render(true) + act(() => button.current?.click()) + expect(submissions).toBe(1) + expect(button.current?.disabled).toBe(true) + } finally { + act(() => root.unmount()) + container.remove() + } + }) +}) diff --git a/packages/emcn/src/components/chip/chip.tsx b/packages/emcn/src/components/chip/chip.tsx index 5b333032762..d8d3fbd2494 100644 --- a/packages/emcn/src/components/chip/chip.tsx +++ b/packages/emcn/src/components/chip/chip.tsx @@ -14,17 +14,18 @@ import { OverflowText, overflowTextClipClass } from '../overflow-text/overflow-t import { chipActiveSurfaceClass, chipBorderShadowRing, + chipContentGeometryClass, chipContentIconClass, chipContentLabelClass, chipFilledFillTokens, - chipGeometryUnroundedClass, chipHoverSurfaceClass, chipPrimaryFillTokens, chipRadiusClass, + chipSizeClasses, } from './chip-chrome' /** - * 30px pill — the platform's most common chrome pattern. + * 30px pill (36px with `size="lg"` at the default root font size) — the platform's most common chrome pattern. * * Render targets: * - {@link Chip} → ` diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx index 958b6b893bf..59505ceb97a 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx @@ -58,7 +58,7 @@ const LANG_ALIASES: Record = { const PROSE_CLASSES = cn( 'prose prose-base dark:prose-invert max-w-none', - 'font-[family-name:var(--font-inter)] antialiased break-words tracking-[0]', + 'font-inter antialiased break-words tracking-[0]', 'prose-headings:font-semibold prose-headings:tracking-[0] prose-headings:text-[var(--text-primary)]', 'prose-headings:mb-3 prose-headings:mt-6 first:prose-headings:mt-0', 'prose-p:text-base prose-p:leading-[25px] prose-p:text-[var(--text-primary)]', diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx index 080edad2af7..33d543ace0e 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx @@ -15,7 +15,7 @@ export function Options({ items, onSelect }: OptionsProps) { key={item.id} type='button' onClick={() => onSelect?.(item.id)} - className='rounded-full border border-[var(--border)] bg-[var(--bg)] px-3.5 py-1.5 font-[family-name:var(--font-inter)] text-[var(--text-primary)] text-sm leading-5 transition-colors hover-hover:bg-[var(--surface-5)]' + className='rounded-full border border-[var(--border)] bg-[var(--bg)] px-3.5 py-1.5 font-inter text-[var(--text-primary)] text-sm leading-5 transition-colors hover-hover:bg-[var(--surface-5)]' > {item.label} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx index fdd9ed5c7ee..6f39702465d 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx @@ -1095,7 +1095,9 @@ function MessageContentInner({ <>
- Stopped by user + + Stopped by user +
{actions &&
{actionsRow}
} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx index 5b6560b4eae..ed9ac8e2711 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx @@ -669,7 +669,9 @@ function EmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowProps) {
-

Workflow not found

+

+ Workflow not found +

This workflow may have been deleted or moved

@@ -732,7 +734,7 @@ function EmbeddedFile({
-

File not found

+

File not found

This file may have been deleted or moved

@@ -783,7 +785,7 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) {
-

Folder not found

+

Folder not found

This folder may have been deleted or moved

@@ -794,7 +796,7 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) { return (
-

{folder.name}

+

{folder.name}

{folderWorkflows.length === 0 ? (

No workflows in this folder

) : ( @@ -841,7 +843,7 @@ function EmbeddedLog({ workspaceId, logId, onNotFound }: EmbeddedLogProps) {
-

Log not found

+

Log not found

This log may have been deleted or is no longer available

diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts index 088064324b1..32cfd395b83 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts +++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/components/constants.ts @@ -59,12 +59,12 @@ export interface PlusMenuHandle { * Box and typography shared by the textarea and its mirror overlay — both must * produce identical line wrapping so the overlay text sits exactly over the * (transparent) textarea text. The scale is the chat input's native prompt - * scale (`text-[14px]`, `-0.015em` tracking); the task modal's body inherits it + * scale (`text-sm`, 14px at the default root, `-0.015em` tracking); the task modal's body inherits it * so the editor reads the same whether it's the chat input or inside the modal. */ const FIELD_MIRROR_CLASSES = cn( 'm-0 box-border min-h-[24px] w-full [overflow-wrap:anywhere] border-0 bg-transparent', - 'px-1 py-1 font-body text-[14px] leading-[24px] tracking-[-0.015em]' + 'px-1 py-1 font-body text-sm leading-[24px] tracking-[-0.015em]' ) /** diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx index d807f00a5be..67359e00939 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx @@ -8,10 +8,10 @@ import type { ChatMessageContext } from '@/app/workspace/[workspaceId]/home/type import { getIntegrationMatcher } from '@/blocks/integration-matcher' const USER_MESSAGE_CLASSES = - 'whitespace-pre-wrap [overflow-wrap:anywhere] font-[family-name:var(--font-inter)] text-base text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased' + 'whitespace-pre-wrap [overflow-wrap:anywhere] font-inter text-base text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased' const COMPACT_CLASSES = - 'truncate text-small leading-[20px] font-[family-name:var(--font-inter)] text-[var(--text-primary)] tracking-[0] antialiased' + 'truncate text-small leading-[20px] font-inter text-[var(--text-primary)] tracking-[0] antialiased' interface UserMessageContentProps { content: string diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx index be6316624d4..cc387d5367e 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx @@ -675,7 +675,7 @@ function HomeContent({ chatId, userName, userId }: HomeProps) {
{/* Asymmetric padding biases the group up so the full cluster (heading + input + suggestions) sits at the optical center */}
-

+

What should we get done{firstName ? `, ${firstName}` : ''}?

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx index 77303d43160..cc03ba5be29 100644 --- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx +++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx @@ -445,7 +445,7 @@ export function Admin() {
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx index f040e922466..0578a08a50d 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx @@ -4698,7 +4698,9 @@ export function TableGrid({
-

Table not found

+

+ Table not found +

This table may have been deleted or moved

diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx index c14dfdeeda4..90e13df381c 100644 --- a/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx +++ b/apps/sim/app/workspace/[workspaceId]/upgrade/components/plan-card/plan-card.tsx @@ -78,13 +78,15 @@ export function UpgradePlanCard({ >
-

{name}

+

{name}

{bannerText && {bannerText}}
- {price} + + {price} + {discountLabel && {discountLabel}}

{priceSubtext ?? '\u00A0'}

diff --git a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx index 7ec5cadb581..a69dd3eea4f 100644 --- a/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx +++ b/apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx @@ -192,7 +192,7 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
-

+

{header}

{state.showUpgradePlans && ( diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx index d6a91f24477..ab22cdac69f 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx @@ -131,7 +131,7 @@ function ChatFilePreview({ file, onRemove }: ChatFilePreviewProps) { ) : (
{file.name}
-
{formatFileSize(file.size)}
+
{formatFileSize(file.size)}
)} diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx index 3d2e7e8b88a..f8cc36b1ef6 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx @@ -208,7 +208,7 @@ export function CommandList() { {/* Right side: Keyboard Shortcut */}
) : ( {renderMarkedName(name ?? '', nameSearchRange)} diff --git a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx index 4886960c4fb..8fe376b8a8e 100644 --- a/packages/workflow-renderer/src/subflow/subflow-node-view.tsx +++ b/packages/workflow-renderer/src/subflow/subflow-node-view.tsx @@ -620,7 +620,7 @@ export function SubflowNodeView({ >
diff --git a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx index cae87070f2f..8cd8d87a2ce 100644 --- a/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx +++ b/packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx @@ -772,7 +772,7 @@ export function WorkflowBlockView({ diff --git a/packages/workflow-renderer/src/workflow-type.tsx b/packages/workflow-renderer/src/workflow-type.tsx index 22ed75db83e..80f8f11b9c9 100644 --- a/packages/workflow-renderer/src/workflow-type.tsx +++ b/packages/workflow-renderer/src/workflow-type.tsx @@ -169,7 +169,7 @@ export function BlockTileView({ /> ) : ( fallbackLabel && ( - {fallbackLabel} + {fallbackLabel} ) )}
From 20312be9f4ce14751bd00449be2324a57d92db22 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com> Date: Thu, 24 Sep 2026 15:16:04 -0700 Subject: [PATCH 3/8] improvement(ui): share workflow panel tab buttons (#8072) * improvement(ui): share workflow panel tab buttons * improvement(ui): reuse chips for panel selection actions (#8166) Co-authored-by: Bill Leoutsakos --------- Co-authored-by: Bill Leoutsakos --- .../w/[workflowId]/components/panel/panel.tsx | 37 ++++++------------- .../components/output-panel/output-panel.tsx | 25 +++---------- 2 files changed, 16 insertions(+), 46 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx index 9795b956ae4..1c6bbddfe09 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx @@ -741,7 +741,7 @@ export const Panel = memo(function Panel() {
- @@ -802,7 +802,7 @@ export const Panel = memo(function Panel() { + )} - - +
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx index 7eb787be542..2ca2535e3c4 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx @@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { Button, + Chip, Code, cn, Input, @@ -308,29 +309,13 @@ export const OutputPanel = React.memo(function OutputPanel({ onClick={handleHeaderClick} >
- + {hasInputData && ( - + )}
From 7fcaea5f40b46cd8ab12099c4d68b248519d7912 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com> Date: Thu, 24 Sep 2026 15:16:57 -0700 Subject: [PATCH 4/8] refactor(ui): share account headings and auth control sizing (#8074) * improvement(ui): share account status headings * improvement(ui): use shared sizing for auth controls * refactor(emcn): share invalid OTP slot treatment (#8246) * Add shared invalid state to EMCN OTP slots * fix(ui): distinguish OTP verification from resend errors * test(ui): type OTP input queries as inputs * test(ui): import OTP test button prop type * test(ui): use shared logger mock in OTP regression --------- Co-authored-by: Bill Leoutsakos --------- Co-authored-by: Bill Leoutsakos Co-authored-by: Waleed --- .../app/(auth)/components/auth-nav-prompt.tsx | 2 +- .../(auth)/components/auth-submit-button.tsx | 4 +- apps/sim/app/(auth)/components/constants.ts | 17 -- .../app/(auth)/components/password-input.tsx | 8 +- .../components/social-login-buttons.tsx | 15 +- .../(auth)/components/sso-login-button.tsx | 13 +- .../app/(auth)/oauth/consent/consent-view.tsx | 4 +- .../(auth)/verify/otp-error-source.test.tsx | 174 ++++++++++++++++++ apps/sim/app/(auth)/verify/verify-content.tsx | 16 +- .../chat/components/auth/email/email-auth.tsx | 29 +-- .../auth/password/password-auth.tsx | 1 - apps/sim/app/f/[token]/public-file-auth.tsx | 1 - .../app/f/[token]/public-file-email-auth.tsx | 37 ++-- .../app/f/[token]/public-file-sso-auth.tsx | 2 +- apps/sim/app/invite/components/index.ts | 1 + .../app/invite/components/invite-heading.tsx | 16 ++ .../sim/app/invite/components/status-card.tsx | 18 +- apps/sim/app/unsubscribe/unsubscribe.tsx | 55 +++--- .../slack-setup-wizard/slack-setup-wizard.tsx | 4 +- apps/sim/ee/sso/components/sso-auth.tsx | 2 +- apps/sim/ee/sso/components/sso-form.test.tsx | 13 +- apps/sim/ee/sso/components/sso-form.tsx | 16 +- packages/emcn/src/components/index.ts | 8 +- .../components/input-otp/input-otp.test.tsx | 66 +++++++ .../src/components/input-otp/input-otp.tsx | 57 +++--- 25 files changed, 422 insertions(+), 157 deletions(-) delete mode 100644 apps/sim/app/(auth)/components/constants.ts create mode 100644 apps/sim/app/(auth)/verify/otp-error-source.test.tsx create mode 100644 apps/sim/app/invite/components/invite-heading.tsx create mode 100644 packages/emcn/src/components/input-otp/input-otp.test.tsx diff --git a/apps/sim/app/(auth)/components/auth-nav-prompt.tsx b/apps/sim/app/(auth)/components/auth-nav-prompt.tsx index d479a273b4a..bdea32fa50f 100644 --- a/apps/sim/app/(auth)/components/auth-nav-prompt.tsx +++ b/apps/sim/app/(auth)/components/auth-nav-prompt.tsx @@ -19,7 +19,7 @@ export function AuthNavPrompt({ prompt, href, linkLabel, onNavigate }: AuthNavPr return (
{prompt && {prompt}} - + {linkLabel}
diff --git a/apps/sim/app/(auth)/components/auth-submit-button.tsx b/apps/sim/app/(auth)/components/auth-submit-button.tsx index 5d37ecb12ea..139bec31892 100644 --- a/apps/sim/app/(auth)/components/auth-submit-button.tsx +++ b/apps/sim/app/(auth)/components/auth-submit-button.tsx @@ -1,6 +1,5 @@ import type { ReactNode } from 'react' import { Chip, Loader } from '@sim/emcn' -import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants' interface AuthSubmitButtonProps { children: ReactNode @@ -32,7 +31,8 @@ export function AuthSubmitButton({ onClick={onClick} disabled={disabled || loading} fullWidth - className={AUTH_BUTTON_CLASS} + size='lg' + align='center' > {loading ? ( diff --git a/apps/sim/app/(auth)/components/constants.ts b/apps/sim/app/(auth)/components/constants.ts deleted file mode 100644 index beb515c525d..00000000000 --- a/apps/sim/app/(auth)/components/constants.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Auth and invite surfaces use a slightly taller control than the 30px chip - * default, matching the landing `HeroCta` field family (the landing's own - * auth-adjacent CTA renders taller fields than in-app chips). Applied as the - * single source of truth for every auth field and button height so the inputs, - * submit, social, SSO, and invite action buttons stay on one line. - */ -export const AUTH_CONTROL_HEIGHT = 'h-9' - -/** - * Shared layout for full-width auth/invite chip buttons (submit, social, SSO, - * invite actions). `[&>span]:flex-none` collapses the chip's stretching label - * span — which carries `flex-1` — so the icon + label cluster truly centers - * under `justify-center` (the landing `HeroCta` idiom). Height-only inputs use - * {@link AUTH_CONTROL_HEIGHT}; buttons compose this on top of it. - */ -export const AUTH_BUTTON_CLASS = `${AUTH_CONTROL_HEIGHT} justify-center [&>span]:flex-none` diff --git a/apps/sim/app/(auth)/components/password-input.tsx b/apps/sim/app/(auth)/components/password-input.tsx index f62e9c23ad3..e1c4867f24e 100644 --- a/apps/sim/app/(auth)/components/password-input.tsx +++ b/apps/sim/app/(auth)/components/password-input.tsx @@ -1,11 +1,10 @@ 'use client' import { useState } from 'react' -import { ChipInput, type ChipInputProps, cn } from '@sim/emcn' +import { ChipInput, type ChipInputProps } from '@sim/emcn' import { Eye, EyeOff } from '@sim/emcn/icons' -import { AUTH_CONTROL_HEIGHT } from '@/app/(auth)/components/constants' -type PasswordInputProps = Omit +type PasswordInputProps = Omit /** * A {@link ChipInput} that owns the password reveal toggle — the eye button is @@ -19,7 +18,8 @@ export function PasswordInput({ error, className, ...props }: PasswordInputProps return ( @@ -85,7 +86,9 @@ export function SocialLoginButtons({ @@ -97,7 +100,9 @@ export function SocialLoginButtons({ diff --git a/apps/sim/app/(auth)/components/sso-login-button.tsx b/apps/sim/app/(auth)/components/sso-login-button.tsx index 1bbd06d5591..03ac768b86f 100644 --- a/apps/sim/app/(auth)/components/sso-login-button.tsx +++ b/apps/sim/app/(auth)/components/sso-login-button.tsx @@ -1,8 +1,7 @@ 'use client' -import { Chip, cn } from '@sim/emcn' +import { Chip } from '@sim/emcn' import { useRouter } from 'next/navigation' import { isSsoEnabled } from '@/lib/core/config/env-flags' -import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants' interface SSOLoginButtonProps { callbackURL?: string @@ -28,14 +27,12 @@ export function SSOLoginButton({ return ( Sign in with SSO diff --git a/apps/sim/app/(auth)/oauth/consent/consent-view.tsx b/apps/sim/app/(auth)/oauth/consent/consent-view.tsx index b083ef34f92..460cecf107d 100644 --- a/apps/sim/app/(auth)/oauth/consent/consent-view.tsx +++ b/apps/sim/app/(auth)/oauth/consent/consent-view.tsx @@ -14,7 +14,6 @@ import { AuthSubmitButton, AuthTextLink, } from '@/app/(auth)/components' -import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants' import { OAuthConsentLoading } from '@/app/(auth)/oauth/consent/loading' import { useOAuthConsent, @@ -166,7 +165,8 @@ export function OAuthConsentView({ variant='border' fullWidth disabled={isPending} - className={AUTH_BUTTON_CLASS} + size='lg' + align='center' onClick={() => decide(false)} > {consent.isPending && consent.variables === false ? 'Declining…' : 'Deny'} diff --git a/apps/sim/app/(auth)/verify/otp-error-source.test.tsx b/apps/sim/app/(auth)/verify/otp-error-source.test.tsx new file mode 100644 index 00000000000..f81caafe77f --- /dev/null +++ b/apps/sim/app/(auth)/verify/otp-error-source.test.tsx @@ -0,0 +1,174 @@ +/** @vitest-environment jsdom */ +import { act, type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react' +import { createRoot, type Root } from 'react-dom/client' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' + +const mocks = vi.hoisted(() => ({ + chatRequest: vi.fn(), + chatVerify: vi.fn(), + fileRequest: vi.fn(), + fileVerify: vi.fn(), + refresh: vi.fn(), +})) + +vi.mock('@sim/emcn', () => ({ + cn: (...values: Array) => values.filter(Boolean).join(' '), + ChipInput: ({ + error: _error, + size: _size, + ...props + }: Omit, 'size'> & { + error?: boolean + size?: string + }) => , + Label: ({ children, htmlFor }: { children: ReactNode; htmlFor?: string }) => ( + + ), + InputOTP: ({ + children, + value, + onChange, + 'aria-invalid': invalid, + }: { + children: ReactNode + value: string + onChange: (value: string) => void + 'aria-invalid'?: boolean + }) => ( +
+ onChange(event.target.value)} + /> + {children} +
+ ), + InputOTPGroup: ({ children }: { children: ReactNode }) =>
{children}
, + InputOTPSlot: ({ invalid, index }: { invalid?: boolean; index: number }) => ( + + ), +})) +vi.mock('@/lib/messaging/email/validation', () => ({ + quickValidateEmail: () => ({ isValid: true }), +})) +vi.mock('@/app/(auth)/components', () => ({ + AuthSubmitButton: ({ + children, + loading: _loading, + loadingLabel: _loadingLabel, + ...props + }: ButtonHTMLAttributes & { + loading?: boolean + loadingLabel?: string + }) => ( + + ), +})) +vi.mock('@/app/(auth)/components/auth-button-classes', () => ({ AUTH_TEXT_LINK: '' })) +vi.mock('@/components/auth/public-auth-header', () => ({ + PublicAuthHeader: ({ title }: { title: string }) =>

{title}

, +})) +vi.mock('@/app/f/[token]/public-file-auth-shell', () => ({ + PublicFileAuthShell: ({ children }: { children: ReactNode }) =>
{children}
, +})) +vi.mock('next/navigation', () => ({ useRouter: () => ({ refresh: mocks.refresh }) })) +vi.mock('@/hooks/queries/chats', () => ({ + useChatEmailOtpRequest: () => ({ mutateAsync: mocks.chatRequest, isPending: false }), + useChatEmailOtpVerify: () => ({ mutateAsync: mocks.chatVerify, isPending: false }), +})) +vi.mock('@/hooks/queries/public-shares', () => ({ + usePublicFileOtpRequest: () => ({ mutateAsync: mocks.fileRequest, isPending: false }), + usePublicFileOtpVerify: () => ({ mutateAsync: mocks.fileVerify, isPending: false }), +})) + +import EmailAuth from '@/app/(interfaces)/chat/components/auth/email/email-auth' +import { PublicFileEmailAuth } from '@/app/f/[token]/public-file-email-auth' + +let root: Root +let container: HTMLDivElement + +function changeInput(input: HTMLInputElement, value: string) { + Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(input, value) + input.dispatchEvent(new Event('input', { bubbles: true })) +} + +function button(label: string) { + const found = Array.from(container.querySelectorAll('button')).find( + (candidate) => candidate.textContent?.trim() === label + ) + if (!found) throw new Error(`Missing button: ${label}`) + return found +} + +function expectOtpInvalid(invalid: boolean) { + expect(container.querySelector('[data-testid="otp-code"]')?.getAttribute('aria-invalid')).toBe( + String(invalid) + ) + const slots = container.querySelectorAll('[data-otp-slot]') + expect(slots).toHaveLength(6) + for (const slot of slots) expect(slot.getAttribute('data-invalid')).toBe(String(invalid)) +} + +beforeEach(() => { + vi.clearAllMocks() + vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true) + mocks.chatRequest.mockResolvedValue({}) + mocks.chatVerify.mockResolvedValue({}) + mocks.fileRequest.mockResolvedValue({}) + mocks.fileVerify.mockResolvedValue({}) + container = document.createElement('div') + document.body.appendChild(container) + root = createRoot(container) +}) + +afterEach(() => { + act(() => root.unmount()) + container.remove() + vi.unstubAllGlobals() +}) + +describe('OTP error provenance', () => { + it('keeps the chat code valid on resend failure and marks only a failed verification invalid', async () => { + act(() => root.render()) + act(() => + changeInput(container.querySelector('#email')!, 'member@example.com') + ) + await act(async () => button('Continue').click()) + + mocks.chatRequest.mockRejectedValueOnce(new Error('Delivery failed')) + await act(async () => button('Resend').click()) + expect(container.textContent).toContain('Delivery failed') + expectOtpInvalid(false) + + mocks.chatVerify.mockRejectedValueOnce(new Error('Incorrect code')) + await act(async () => + changeInput(container.querySelector('[data-testid="otp-code"]')!, '123456') + ) + expect(container.textContent).toContain('Incorrect code') + expectOtpInvalid(true) + }) + + it('keeps the public-file code valid on resend failure and marks only a failed verification invalid', async () => { + act(() => root.render()) + act(() => + changeInput(container.querySelector('#email')!, 'member@example.com') + ) + await act(async () => button('Continue').click()) + + mocks.fileRequest.mockRejectedValueOnce(new Error('Delivery failed')) + await act(async () => button('Resend').click()) + expect(container.textContent).toContain('Delivery failed') + expectOtpInvalid(false) + + mocks.fileVerify.mockRejectedValueOnce(new Error('Incorrect code')) + await act(async () => + changeInput(container.querySelector('[data-testid="otp-code"]')!, '123456') + ) + expect(container.textContent).toContain('Incorrect code') + expectOtpInvalid(true) + }) +}) diff --git a/apps/sim/app/(auth)/verify/verify-content.tsx b/apps/sim/app/(auth)/verify/verify-content.tsx index 88d1c2e9d67..4e13de53044 100644 --- a/apps/sim/app/(auth)/verify/verify-content.tsx +++ b/apps/sim/app/(auth)/verify/verify-content.tsx @@ -1,7 +1,7 @@ 'use client' import { Suspense, useEffect, useState } from 'react' -import { cn, InputOTP, InputOTPGroup, InputOTPSlot } from '@sim/emcn' +import { InputOTP, InputOTPGroup, InputOTPSlot } from '@sim/emcn' import { POST_AUTH_REDIRECT_STORAGE_KEY } from '@/app/(auth)/auth-redirect' import { AuthFormMessage, @@ -84,14 +84,16 @@ function VerificationForm({

- + {OTP_SLOTS.map((index) => ( - + ))} diff --git a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx index 7972106bfc9..190dfbaf917 100644 --- a/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx +++ b/apps/sim/app/(interfaces)/chat/components/auth/email/email-auth.tsx @@ -34,13 +34,17 @@ const validateEmailField = (emailValue: string): string[] => { export default function EmailAuth({ identifier }: EmailAuthProps) { const [email, setEmail] = useState('') - const [authError, setAuthError] = useState(null) + const [authError, setAuthError] = useState<{ + kind: 'verification' | 'request' + message: string + } | null>(null) const [emailErrors, setEmailErrors] = useState([]) const hasEmailError = emailErrors.length > 0 const [showOtpVerification, setShowOtpVerification] = useState(false) const [otpValue, setOtpValue] = useState('') const [countdown, setCountdown] = useState(0) + const isInvalidOtp = authError?.kind === 'verification' const requestOtp = useChatEmailOtpRequest(identifier) const verifyOtp = useChatEmailOtpVerify(identifier) @@ -89,7 +93,10 @@ export default function EmailAuth({ identifier }: EmailAuthProps) { await verifyOtp.mutateAsync({ email, otp: codeToVerify }) } catch (error) { logger.error('Error verifying OTP:', error) - setAuthError(toError(error).message || 'Invalid verification code') + setAuthError({ + kind: 'verification', + message: toError(error).message || 'Invalid verification code', + }) } } @@ -102,7 +109,10 @@ export default function EmailAuth({ identifier }: EmailAuthProps) { setOtpValue('') } catch (error) { logger.error('Error resending OTP:', error) - setAuthError(toError(error).message || 'Failed to resend verification code') + setAuthError({ + kind: 'request', + message: toError(error).message || 'Failed to resend verification code', + }) setCountdown(0) } } @@ -143,7 +153,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) { autoCorrect='off' value={email} onChange={handleEmailChange} - className='h-[34px]' + size='lg' error={Boolean(hasEmailError)} /> {hasEmailError && ( @@ -181,15 +191,12 @@ export default function EmailAuth({ identifier }: EmailAuthProps) { } }} disabled={verifyOtp.isPending} - className={cn('gap-2', authError && 'otp-error')} + className={cn('gap-2', isInvalidOtp && 'otp-error')} + aria-invalid={isInvalidOtp} > {[0, 1, 2, 3, 4, 5].map((index) => ( - + ))} @@ -197,7 +204,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) { {authError && (
-

{authError}

+

{authError.message}

)} diff --git a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx index cd49a26fa28..36467bc6287 100644 --- a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx +++ b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx @@ -72,7 +72,6 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) { placeholder='Enter password' value={password} onChange={handlePasswordChange} - className='h-[34px]' error={hasPasswordError} />
{error ?

{error}

: null} diff --git a/apps/sim/app/f/[token]/public-file-email-auth.tsx b/apps/sim/app/f/[token]/public-file-email-auth.tsx index 8d237ed9ff5..198fea32ae5 100644 --- a/apps/sim/app/f/[token]/public-file-email-auth.tsx +++ b/apps/sim/app/f/[token]/public-file-email-auth.tsx @@ -28,8 +28,12 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { const [email, setEmail] = useState('') const [otp, setOtp] = useState('') const [sent, setSent] = useState(false) - const [error, setError] = useState(null) + const [error, setError] = useState<{ + kind: 'verification' | 'request' + message: string + } | null>(null) const [countdown, setCountdown] = useState(0) + const isInvalidOtp = error?.kind === 'verification' useEffect(() => { if (countdown <= 0) return @@ -39,7 +43,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { const sendCode = async () => { if (!quickValidateEmail(normalizeEmail(email)).isValid) { - setError('Please enter a valid email address.') + setError({ kind: 'request', message: 'Please enter a valid email address.' }) return } setError(null) @@ -48,7 +52,10 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { setSent(true) setOtp('') } catch (err) { - setError(getErrorMessage(err, 'Failed to send verification code')) + setError({ + kind: 'request', + message: getErrorMessage(err, 'Failed to send verification code'), + }) } } @@ -59,7 +66,7 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { await verifyOtp.mutateAsync({ email: normalizeEmail(email), otp: code }) router.refresh() } catch (err) { - setError(getErrorMessage(err, 'Invalid verification code')) + setError({ kind: 'verification', message: getErrorMessage(err, 'Invalid verification code') }) } } @@ -71,7 +78,10 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { setError(null) } catch (err) { setCountdown(0) - setError(getErrorMessage(err, 'Failed to resend verification code')) + setError({ + kind: 'request', + message: getErrorMessage(err, 'Failed to resend verification code'), + }) } } @@ -104,10 +114,10 @@ export function PublicFileEmailAuth({ token }: PublicFileEmailAuthProps) { setEmail(e.target.value) setError(null) }} - className='h-[34px]' + size='lg' error={Boolean(error)} /> - {error ?

{error}

: null} + {error ?

{error.message}

: null}
{[0, 1, 2, 3, 4, 5].map((i) => ( - + ))}
- {error ?

{error}

: null} + {error ? ( +

{error.message}

+ ) : null} {error ?

{error}

: null} diff --git a/apps/sim/app/invite/components/index.ts b/apps/sim/app/invite/components/index.ts index f72433bf8a8..817d145aaae 100644 --- a/apps/sim/app/invite/components/index.ts +++ b/apps/sim/app/invite/components/index.ts @@ -1,4 +1,5 @@ export { InvitationDisclosure } from '@/app/invite/components/invitation-disclosure' export { InvitationWorkspaceAccess } from '@/app/invite/components/invitation-workspace-access' +export { InviteHeading } from '@/app/invite/components/invite-heading' export { default as InviteLayout } from '@/app/invite/components/layout' export { InviteStatusCard } from '@/app/invite/components/status-card' diff --git a/apps/sim/app/invite/components/invite-heading.tsx b/apps/sim/app/invite/components/invite-heading.tsx new file mode 100644 index 00000000000..c2b54626498 --- /dev/null +++ b/apps/sim/app/invite/components/invite-heading.tsx @@ -0,0 +1,16 @@ +import type { ReactNode } from 'react' + +interface InviteHeadingProps { + title: ReactNode + children: ReactNode +} + +/** Heading shared by invitation and email-preference states; subcopy stays with each caller. */ +export function InviteHeading({ title, children }: InviteHeadingProps) { + return ( +
+

{title}

+ {children} +
+ ) +} diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx index 282ec08d7d1..403e64fdb1e 100644 --- a/apps/sim/app/invite/components/status-card.tsx +++ b/apps/sim/app/invite/components/status-card.tsx @@ -1,7 +1,7 @@ 'use client' -import { Chip, cn, Loader } from '@sim/emcn' +import { Chip, Loader } from '@sim/emcn' import { AuthSubmitButton } from '@/app/(auth)/components' -import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants' +import { InviteHeading } from '@/app/invite/components/invite-heading' /** A document navigation, so the marketing surface initializes its own theme store. */ function returnHome(): void { @@ -37,10 +37,9 @@ export function InviteStatusCard({ if (type === 'loading') { return ( <> -
-

Loading

+

{description}

-
+
@@ -50,10 +49,9 @@ export function InviteStatusCard({ return ( <> -
-

{title}

+

{description}

-
+
{details} @@ -81,7 +79,9 @@ export function InviteStatusCard({ fullWidth onClick={action.onClick} disabled={action.disabled || action.loading} - className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border)]')} + variant='outline' + size='lg' + align='center' > {action.loading ? ( diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx index 84004b7827a..34083d2b4ee 100644 --- a/apps/sim/app/unsubscribe/unsubscribe.tsx +++ b/apps/sim/app/unsubscribe/unsubscribe.tsx @@ -1,13 +1,12 @@ 'use client' import { Suspense } from 'react' -import { Chip, cn, Loader } from '@sim/emcn' +import { Chip, Loader } from '@sim/emcn' import { getErrorMessage } from '@sim/utils/errors' import { useSearchParams } from 'next/navigation' import type { UnsubscribeType } from '@/lib/api/contracts/user' import { AuthSubmitButton } from '@/app/(auth)/components' -import { AUTH_BUTTON_CLASS } from '@/app/(auth)/components/constants' -import { InviteLayout } from '@/app/invite/components' +import { InviteHeading, InviteLayout } from '@/app/invite/components' import { useUnsubscribe, useUnsubscribeMutation } from '@/hooks/queries/unsubscribe' function UnsubscribeContent() { @@ -39,10 +38,9 @@ function UnsubscribeContent() { if (loading) { return ( -
-

Loading

+

Validating your unsubscribe link…

-
+
@@ -53,12 +51,9 @@ function UnsubscribeContent() { if (error) { return ( -
-

- Invalid Unsubscribe Link -

+

{error}

-
+
window.history.back()} loadingLabel=''> @@ -72,15 +67,12 @@ function UnsubscribeContent() { if (data?.isTransactional) { return ( -
-

- Important Account Emails -

+

Transactional emails like password resets, account confirmations, and security alerts cannot be unsubscribed from as they contain essential information for your account.

-
+
window.close()} loadingLabel=''> @@ -94,15 +86,12 @@ function UnsubscribeContent() { if (unsubscribed) { return ( -
-

- Successfully Unsubscribed -

+

You have been unsubscribed from our emails. You will stop receiving emails within 48 hours.

-
+
window.close()} loadingLabel=''> @@ -117,15 +106,12 @@ function UnsubscribeContent() { return ( -
-

- Email Preferences -

+

Choose which emails you'd like to stop receiving.

{data?.email}

-
+
{data?.currentPreferences.unsubscribeMarketing ? 'Unsubscribed from Marketing' @@ -167,7 +155,9 @@ function UnsubscribeContent() { isAlreadyUnsubscribedFromAll || data?.currentPreferences.unsubscribeUpdates } - className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} + variant='outline' + size='lg' + align='center' > {data?.currentPreferences.unsubscribeUpdates ? 'Unsubscribed from Updates' @@ -182,7 +172,9 @@ function UnsubscribeContent() { isAlreadyUnsubscribedFromAll || data?.currentPreferences.unsubscribeNotifications } - className={cn(AUTH_BUTTON_CLASS, 'border border-[var(--border-1)]')} + variant='outline' + size='lg' + align='center' > {data?.currentPreferences.unsubscribeNotifications ? 'Unsubscribed from Notifications' @@ -205,10 +197,9 @@ export default function Unsubscribe() { -
-

Loading

+

Validating your unsubscribe link…

-
+
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx index 4ffb44d9739..f2d0fb0d001 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/slack-setup-wizard/slack-setup-wizard.tsx @@ -226,7 +226,7 @@ function StepConfigure({ onChange={(e) => onAppNameChange(e.target.value)} disabled={disabled} placeholder={DEFAULT_APP_NAME} - className='h-9' + size='lg' />
@@ -416,7 +416,7 @@ function SecretField({ id, label, value, onChange, disabled, placeholder }: Secr onChange={onChange} disabled={disabled} placeholder={placeholder} - className='h-9' + size='lg' />
) diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx index 855651edaed..0b8deb58c9e 100644 --- a/apps/sim/ee/sso/components/sso-auth.tsx +++ b/apps/sim/ee/sso/components/sso-auth.tsx @@ -127,7 +127,7 @@ export default function SSOAuth({ identifier }: SSOAuthProps) { value={email} onChange={handleEmailChange} onKeyDown={handleKeyDown} - className='h-[34px]' + size='lg' error={showEmailValidationError && emailErrors.length > 0} /> {showEmailValidationError && emailErrors.length > 0 && ( diff --git a/apps/sim/ee/sso/components/sso-form.test.tsx b/apps/sim/ee/sso/components/sso-form.test.tsx index 369ef6a165b..9f71416d717 100644 --- a/apps/sim/ee/sso/components/sso-form.test.tsx +++ b/apps/sim/ee/sso/components/sso-form.test.tsx @@ -1,7 +1,7 @@ /** * @vitest-environment jsdom */ -import { act, type ButtonHTMLAttributes, type InputHTMLAttributes, type ReactNode } from 'react' +import { act, type InputHTMLAttributes, type ReactNode } from 'react' import { createRoot, type Root } from 'react-dom/client' import { renderToString } from 'react-dom/server' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' @@ -26,15 +26,16 @@ vi.mock('next/link', () => ({ })) vi.mock('@sim/emcn', () => ({ - Button: ({ children, ...props }: ButtonHTMLAttributes) => ( - + ChipLink: ({ href, children }: { href: string; children?: ReactNode }) => ( + {children} ), ChipInput: ({ error: _error, + size: _size, ...props - }: InputHTMLAttributes & { error?: boolean }) => , + }: Omit, 'size'> & { error?: boolean; size?: string }) => ( + + ), Label: ({ children }: { children?: ReactNode }) => {children}, cn: (...values: unknown[]) => values.filter(Boolean).join(' '), })) diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx index 9d9f39d10d1..369de48c16d 100644 --- a/apps/sim/ee/sso/components/sso-form.tsx +++ b/apps/sim/ee/sso/components/sso-form.tsx @@ -1,7 +1,7 @@ 'use client' import { useEffect, useState } from 'react' -import { Button, ChipInput, Label } from '@sim/emcn' +import { ChipInput, ChipLink, Label } from '@sim/emcn' import { createLogger } from '@sim/logger' import Link from 'next/link' import { useSearchParams } from 'next/navigation' @@ -213,7 +213,7 @@ function SSOFormContent({ onChange={handleEmailChange} aria-invalid={hasEmailError || undefined} aria-describedby={hasEmailError ? 'sso-email-errors' : undefined} - className='h-[34px]' + size='lg' error={Boolean(hasEmailError)} /> {hasEmailError && ( @@ -247,13 +247,15 @@ function SSOFormContent({
- - - + Sign in with email +
)} diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts index b194122e642..df1cea58c20 100644 --- a/packages/emcn/src/components/index.ts +++ b/packages/emcn/src/components/index.ts @@ -161,7 +161,13 @@ export { type InfoCardProps, } from './info-card/info-card' export { Input, type InputProps } from './input/input' -export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp/input-otp' +export { + InputOTP, + InputOTPGroup, + InputOTPSeparator, + InputOTPSlot, + type InputOTPSlotProps, +} from './input-otp/input-otp' export { Label } from './label/label' export { Lightbox, type LightboxProps } from './lightbox/lightbox' export { focusFirstTextInput, focusFirstTextInputIn } from './modal/auto-focus' diff --git a/packages/emcn/src/components/input-otp/input-otp.test.tsx b/packages/emcn/src/components/input-otp/input-otp.test.tsx new file mode 100644 index 00000000000..9bbb8dbd699 --- /dev/null +++ b/packages/emcn/src/components/input-otp/input-otp.test.tsx @@ -0,0 +1,66 @@ +/** + * @vitest-environment jsdom + */ +import { act } from 'react' +import { createRoot, type Root } from 'react-dom/client' +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' +import { InputOTP, InputOTPGroup, InputOTPSlot } from './input-otp' + +let root: Root +let host: HTMLDivElement + +beforeEach(() => { + ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true + vi.stubGlobal( + 'ResizeObserver', + class { + observe() {} + unobserve() {} + disconnect() {} + } + ) + host = document.createElement('div') + document.body.appendChild(host) + root = createRoot(host) +}) + +afterEach(() => { + act(() => root.unmount()) + host.remove() + vi.unstubAllGlobals() +}) + +function renderOtp(invalid: boolean) { + act(() => { + root.render( + + + + + + + ) + }) +} + +describe('InputOTPSlot invalid state', () => { + it('keeps the standard border when valid', () => { + renderOtp(false) + const slot = host.querySelector('[data-testid="first-slot"]') + expect(slot?.classList.contains('border-[var(--border-1)]')).toBe(true) + expect(slot?.classList.contains('border-[var(--text-error)]')).toBe(false) + expect(host.querySelector('input')?.getAttribute('aria-invalid')).toBe('false') + }) + + it('keeps the error border while the active slot has a focus ring', () => { + renderOtp(true) + const input = host.querySelector('input') + expect(input?.getAttribute('aria-invalid')).toBe('true') + + act(() => input?.focus()) + const slot = host.querySelector('[data-testid="first-slot"]') + expect(slot?.classList.contains('border-[var(--text-error)]')).toBe(true) + expect(slot?.classList.contains('ring-1')).toBe(true) + expect(slot?.classList.contains('border-[var(--text-muted)]')).toBe(false) + }) +}) diff --git a/packages/emcn/src/components/input-otp/input-otp.tsx b/packages/emcn/src/components/input-otp/input-otp.tsx index a6c5ea82fff..2c3ff3a83b7 100644 --- a/packages/emcn/src/components/input-otp/input-otp.tsx +++ b/packages/emcn/src/components/input-otp/input-otp.tsx @@ -66,32 +66,39 @@ InputOTPGroup.displayName = 'InputOTPGroup' * * Uses emcn design tokens for consistent styling with the Input component. */ -const InputOTPSlot = React.forwardRef< - React.ElementRef<'div'>, - React.ComponentPropsWithoutRef<'div'> & { index: number } ->(({ index, className, ...props }, ref) => { - const inputOTPContext = React.useContext(OTPInputContext) - const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] +export interface InputOTPSlotProps extends React.ComponentPropsWithoutRef<'div'> { + /** Zero-based position of this slot in the OTP input. */ + index: number + /** Keep the error border visible even while this slot is active. */ + invalid?: boolean +} + +const InputOTPSlot = React.forwardRef, InputOTPSlotProps>( + ({ index, invalid = false, className, ...props }, ref) => { + const inputOTPContext = React.useContext(OTPInputContext) + const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index] - return ( -
- {char} - {hasFakeCaret && ( -
-
-
- )} -
- ) -}) + return ( +
+ {char} + {hasFakeCaret && ( +
+
+
+ )} +
+ ) + } +) InputOTPSlot.displayName = 'InputOTPSlot' /** From c5a5c75a9608d1230d798a073d944afc216b4a00 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com> Date: Thu, 24 Sep 2026 15:17:30 -0700 Subject: [PATCH 5/8] improvement(ui): share missing resource states (#8078) Co-authored-by: Bill Leoutsakos --- .../[workspaceId]/components/index.ts | 1 - .../resource/resource-not-found.tsx | 27 -------- .../resource-content/resource-content.tsx | 68 ++++++++----------- .../knowledge/[id]/[documentId]/document.tsx | 12 +++- .../[workspaceId]/knowledge/[id]/base.tsx | 4 +- .../components/table-grid/table-grid.tsx | 18 ++--- packages/emcn/src/components/index.ts | 4 ++ .../resource-empty-state.tsx | 24 +++++++ 8 files changed, 74 insertions(+), 84 deletions(-) delete mode 100644 apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx create mode 100644 packages/emcn/src/components/resource-empty-state/resource-empty-state.tsx diff --git a/apps/sim/app/workspace/[workspaceId]/components/index.ts b/apps/sim/app/workspace/[workspaceId]/components/index.ts index 9791199d107..17df9766567 100644 --- a/apps/sim/app/workspace/[workspaceId]/components/index.ts +++ b/apps/sim/app/workspace/[workspaceId]/components/index.ts @@ -2,7 +2,6 @@ export { isResourceListEmpty, resourceListState, } from '@/app/workspace/[workspaceId]/components/resource/is-resource-list-empty' -export { ResourceNotFound } from '@/app/workspace/[workspaceId]/components/resource/resource-not-found' export { ConversationListItem } from './conversation-list-item' export type { ErrorBoundaryProps, ErrorStateProps } from './error' export { ErrorShell, ErrorState } from './error' diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx deleted file mode 100644 index bf99da51fa5..00000000000 --- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource-not-found.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { ComponentType } from 'react' - -interface ResourceNotFoundProps { - icon: ComponentType<{ className?: string }> - title: string - description: string -} - -/** - * Full-page screen for a resource that could not be loaded and has no shell left to - * draw — a knowledge base or a document that was deleted or moved. - * - * Distinct from the `emptyState` slot on {@link Resource.Table}: that one keeps the - * chrome and reports a failure *within* a page that still exists. This replaces the - * page, so it is only right when the thing the page is about is the thing that is gone. - */ -export function ResourceNotFound({ icon: Icon, title, description }: ResourceNotFoundProps) { - return ( -
- -
-

{title}

-

{description}

-
-
- ) -} diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx index ed9ac8e2711..78753a4ae69 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx +++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx @@ -1,7 +1,15 @@ 'use client' import { lazy, memo, Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react' -import { OverflowText, PlayOutline, Skeleton, TabStripAction, Tooltip, toast } from '@sim/emcn' +import { + OverflowText, + PlayOutline, + ResourceEmptyState, + Skeleton, + TabStripAction, + Tooltip, + toast, +} from '@sim/emcn' import { Download, FileX, @@ -666,17 +674,11 @@ function EmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowProps) { if (!workflowExists || hasLoadError) { return ( -
- -
-

- Workflow not found -

-

- This workflow may have been deleted or moved -

-
-
+ ) } @@ -731,15 +733,11 @@ function EmbeddedFile({ if (!file) { return ( -
- -
-

File not found

-

- This file may have been deleted or moved -

-
-
+ ) } @@ -782,15 +780,11 @@ function EmbeddedFolder({ workspaceId, folderId }: EmbeddedFolderProps) { if (!folder) { return ( -
- -
-

Folder not found

-

- This folder may have been deleted or moved -

-
-
+ ) } @@ -840,15 +834,11 @@ function EmbeddedLog({ workspaceId, logId, onNotFound }: EmbeddedLogProps) { if (!log) { return ( -
- -
-

Log not found

-

- This log may have been deleted or is no longer available -

-
-
+ ) } diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx index eb262824d69..b3202525bda 100644 --- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx +++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx @@ -1,7 +1,14 @@ 'use client' import { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from 'react' -import { Badge, ChipCombobox, ChipConfirmModal, chipContentLabelClass, cn } from '@sim/emcn' +import { + Badge, + ChipCombobox, + ChipConfirmModal, + chipContentLabelClass, + cn, + ResourceEmptyState, +} from '@sim/emcn' import { ChevronDown, ChevronUp, @@ -38,7 +45,6 @@ import type { import { EMPTY_CELL_PLACEHOLDER, Resource, - ResourceNotFound, SearchHighlight, } from '@/app/workspace/[workspaceId]/components' import { @@ -1163,7 +1169,7 @@ export function Document({ */ if (documentError && !documentData) { return ( - - -
-

- Table not found -

-

- This table may have been deleted or moved -

-
-
+ ) } diff --git a/packages/emcn/src/components/index.ts b/packages/emcn/src/components/index.ts index df1cea58c20..e74f3ebca4a 100644 --- a/packages/emcn/src/components/index.ts +++ b/packages/emcn/src/components/index.ts @@ -215,6 +215,10 @@ export { } from './popover/popover' export { POPOVER_ANIMATION_CLASSES } from './popover/popover-animation' export { ProgressItem } from './progress-item/progress-item' +export { + ResourceEmptyState, + type ResourceEmptyStateProps, +} from './resource-empty-state/resource-empty-state' export { SecretInput } from './secret-input/secret-input' export { SecretReveal } from './secret-reveal/secret-reveal' export { WORDMARK_PATHS, WORDMARK_VIEW_BOX } from './sim-wordmark/paths' diff --git a/packages/emcn/src/components/resource-empty-state/resource-empty-state.tsx b/packages/emcn/src/components/resource-empty-state/resource-empty-state.tsx new file mode 100644 index 00000000000..af181c7e890 --- /dev/null +++ b/packages/emcn/src/components/resource-empty-state/resource-empty-state.tsx @@ -0,0 +1,24 @@ +import type { ComponentType } from 'react' + +export interface ResourceEmptyStateProps { + icon: ComponentType<{ className?: string }> + title: string + description: string +} + +/** + * Centered resource-empty state for a page or panel. The caller owns loading and + * access decisions; this component only presents the unavailable-resource message. + * @example + */ +export function ResourceEmptyState({ icon: Icon, title, description }: ResourceEmptyStateProps) { + return ( +
+ +
+

{title}

+

{description}

+
+
+ ) +} From 4491848fa695d42c87bb961a80503094e4ab812c Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos <157128530+BillLeoutsakosvl346@users.noreply.github.com> Date: Thu, 24 Sep 2026 15:18:40 -0700 Subject: [PATCH 6/8] improvement(ui): reuse avatars for owners and members (#8079) Co-authored-by: Bill Leoutsakos --- .../components/presence/presence-avatars.tsx | 4 +- .../components/owner-cell/owner-cell.tsx | 19 ++---- .../components/member-list/member-list.tsx | 20 ++---- .../src/components/avatar/avatar.test.tsx | 49 +++++++++++++++ .../emcn/src/components/avatar/avatar.tsx | 61 +++++++++++-------- 5 files changed, 96 insertions(+), 57 deletions(-) create mode 100644 packages/emcn/src/components/avatar/avatar.test.tsx diff --git a/apps/sim/app/workspace/[workspaceId]/components/presence/presence-avatars.tsx b/apps/sim/app/workspace/[workspaceId]/components/presence/presence-avatars.tsx index ff53ee14325..386c026a551 100644 --- a/apps/sim/app/workspace/[workspaceId]/components/presence/presence-avatars.tsx +++ b/apps/sim/app/workspace/[workspaceId]/components/presence/presence-avatars.tsx @@ -37,7 +37,7 @@ function UserAvatar({ user, index }: UserAvatarProps) { )} {initials} @@ -98,7 +98,7 @@ export function PresenceAvatars({ style={{ zIndex: 0 }} aria-label={`${overflowCount} more ${overflowCount === 1 ? 'user' : 'users'}`} > - + +{overflowCount} diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/owner-cell/owner-cell.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/owner-cell/owner-cell.tsx index ebbf3bb9e9b..ad14698ae52 100644 --- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/owner-cell/owner-cell.tsx +++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/owner-cell/owner-cell.tsx @@ -1,4 +1,5 @@ import { memo } from 'react' +import { Avatar, AvatarFallback, AvatarImage } from '@sim/emcn' import type { ResourceCell } from '@/app/workspace/[workspaceId]/components/resource/resource' import type { WorkspaceMember } from '@/hooks/queries/workspace' @@ -13,21 +14,11 @@ export interface OwnerAvatarProps { * owner/uploaded-by filter options on every list. */ export const OwnerAvatar = memo(function OwnerAvatar({ name, image }: OwnerAvatarProps) { - if (image) { - return ( - {name} - ) - } - return ( - - {name.charAt(0).toUpperCase()} - + + {image && } + {name.charAt(0).toUpperCase()} + ) }) diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx index aa11d37b50f..97c5be6db21 100644 --- a/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx +++ b/apps/sim/app/workspace/[workspaceId]/settings/components/member-list/member-list.tsx @@ -1,7 +1,7 @@ 'use client' import type { ReactNode } from 'react' -import { OverflowText } from '@sim/emcn' +import { Avatar, AvatarFallback, AvatarImage, OverflowText } from '@sim/emcn' import { SettingsEmptyState } from '@/app/workspace/[workspaceId]/settings/components/settings-empty-state' import { SettingsSection } from '@/app/workspace/[workspaceId]/settings/components/settings-section/settings-section' @@ -18,21 +18,11 @@ interface MemberAvatarProps { * the member's name when no image is available. */ export function MemberAvatar({ name, image }: MemberAvatarProps) { - if (image) { - return ( - {name} - ) - } - return ( - - {name.charAt(0).toUpperCase()} - + + {image && } + {name.charAt(0).toUpperCase()} + ) } diff --git a/packages/emcn/src/components/avatar/avatar.test.tsx b/packages/emcn/src/components/avatar/avatar.test.tsx new file mode 100644 index 00000000000..474d9242536 --- /dev/null +++ b/packages/emcn/src/components/avatar/avatar.test.tsx @@ -0,0 +1,49 @@ +/** @vitest-environment jsdom */ +import { act } from 'react' +import { createRoot, type Root } from 'react-dom/client' +import { afterEach, describe, expect, it } from 'vitest' +import { Avatar, AvatarFallback } from './avatar' + +let root: Root | undefined +let container: HTMLDivElement | undefined + +afterEach(() => { + act(() => root?.unmount()) + container?.remove() +}) + +describe('Avatar fallback sizing', () => { + it('scopes xs sizing to its avatar while preserving explicit overrides', () => { + Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true }) + container = document.createElement('div') + document.body.appendChild(container) + root = createRoot(container) + act(() => + root?.render( + <> + + A + + + BC + + + + D + + + + ) + ) + const xs = container.querySelector('[data-testid="xs"]')! + const regular = container.querySelector('[data-testid="default"]')! + const overridden = container.querySelector('[data-testid="override"]')! + expect(xs.classList.contains('text-[8px]')).toBe(true) + expect(xs.classList.contains('text-xs')).toBe(false) + expect(regular.classList.contains('text-xs')).toBe(true) + expect(regular.classList.contains('text-[8px]')).toBe(false) + expect(overridden.classList.contains('text-[7px]')).toBe(true) + expect(overridden.classList.contains('text-[8px]')).toBe(false) + expect(overridden.classList.contains('text-xs')).toBe(false) + }) +}) diff --git a/packages/emcn/src/components/avatar/avatar.tsx b/packages/emcn/src/components/avatar/avatar.tsx index 85ebaa522c8..f2dc07acc56 100644 --- a/packages/emcn/src/components/avatar/avatar.tsx +++ b/packages/emcn/src/components/avatar/avatar.tsx @@ -50,6 +50,8 @@ const avatarStatusVariants = cva( } ) +const AvatarSizeContext = React.createContext['size']>('md') + type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' interface AvatarProps @@ -93,22 +95,24 @@ interface AvatarProps */ const Avatar = React.forwardRef, AvatarProps>( ({ className, size, status, children, ...props }, ref) => ( -
- - {children} - - {status && ( - - )} -
+ +
+ + {children} + + {status && ( + + )} +
+ ) ) Avatar.displayName = 'Avatar' @@ -133,6 +137,7 @@ AvatarImage.displayName = 'AvatarImage' /** * Fallback component for Avatar. Displays initials or icon when image is unavailable. + * The xs size uses 8px initials; other sizes retain text-xs. * * Carries the package's only hardcoded `font-medium`, and deliberately: one or * two capitals at `text-xs` on a filled disc are a glyph, not running text, and @@ -142,16 +147,20 @@ AvatarImage.displayName = 'AvatarImage' const AvatarFallback = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) +>(({ className, ...props }, ref) => { + const size = React.useContext(AvatarSizeContext) + return ( + + ) +}) AvatarFallback.displayName = 'AvatarFallback' export { Avatar, AvatarImage, AvatarFallback, avatarVariants, avatarStatusVariants } From e4464e86209cb3be47fd239c0c00ec2416a7f77f Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos Date: Thu, 24 Sep 2026 15:57:29 -0700 Subject: [PATCH 7/8] fix(ui): adopt exact shared 18px typography token --- .claude/rules/sim-settings-pages.md | 2 +- .claude/rules/sim-styling.md | 2 +- .cursor/rules/sim-settings-pages.mdc | 2 +- .cursor/rules/sim-styling.mdc | 2 +- apps/sim/app/_styles/globals.css | 2 ++ 5 files changed, 6 insertions(+), 4 deletions(-) diff --git a/.claude/rules/sim-settings-pages.md b/.claude/rules/sim-settings-pages.md index aaf692544a1..081450193e6 100644 --- a/.claude/rules/sim-settings-pages.md +++ b/.claude/rules/sim-settings-pages.md @@ -117,7 +117,7 @@ Settings pages never use a literal `text-[Npx]` class — always the named Tailw scale token from the `@theme` block in `apps/sim/app/_styles/globals.css` (`text-micro` 10px, `text-xs` 11px, `text-caption` 12px, `text-small` 13px, `text-sm` 14px [Tailwind default, unmodified], `text-base` 15px, `text-md` 16px, `text-lg` 18px -[Tailwind default]). A literal size is either a straight rename to the equivalent +[the exact Tailwind default adopted in globals.css]). A literal size is either a straight rename to the equivalent token (if the pixel value matches one exactly) or a sign the page never migrated — grep `text-\[1[0-8]px\]` under `apps/sim/app/workspace/*/settings/**` and `apps/sim/ee/**` to find stragglers. diff --git a/.claude/rules/sim-styling.md b/.claude/rules/sim-styling.md index c3769ab28a1..64a18ec7d9e 100644 --- a/.claude/rules/sim-styling.md +++ b/.claude/rules/sim-styling.md @@ -47,7 +47,7 @@ setWidth: (width) => { ## Text Scale -Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`. +Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-lg`=1.125rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/18/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`. Preserve explicit line heights when replacing arbitrary sizes. Where the old size inherited its line height, use `leading-[inherit]` if the named utility would otherwise add a different default. Keep document-relative heading/code recipes and the thinking loader's proportional label sizing distinct from ordinary UI text. diff --git a/.cursor/rules/sim-settings-pages.mdc b/.cursor/rules/sim-settings-pages.mdc index 29db1e041e9..b9a39b3d8e3 100644 --- a/.cursor/rules/sim-settings-pages.mdc +++ b/.cursor/rules/sim-settings-pages.mdc @@ -114,7 +114,7 @@ Settings pages never use a literal `text-[Npx]` class — always the named Tailw scale token from the `@theme` block in `apps/sim/app/_styles/globals.css` (`text-micro` 10px, `text-xs` 11px, `text-caption` 12px, `text-small` 13px, `text-sm` 14px [Tailwind default, unmodified], `text-base` 15px, `text-md` 16px, `text-lg` 18px -[Tailwind default]). A literal size is either a straight rename to the equivalent +[the exact Tailwind default adopted in globals.css]). A literal size is either a straight rename to the equivalent token (if the pixel value matches one exactly) or a sign the page never migrated — grep `text-\[1[0-8]px\]` under `apps/sim/app/workspace/*/settings/**` and `apps/sim/ee/**` to find stragglers. diff --git a/.cursor/rules/sim-styling.mdc b/.cursor/rules/sim-styling.mdc index dfa91b0418c..e3816f07127 100644 --- a/.cursor/rules/sim-styling.mdc +++ b/.cursor/rules/sim-styling.mdc @@ -47,7 +47,7 @@ setWidth: (width) => { ## Text Scale -Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`. +Use the named scale in `apps/sim/app/_styles/globals.css`: `text-micro`=10px, `text-xs`=11px, `text-caption`=12px, `text-small`=13px, `text-base`=15px, `text-md`=16px, `text-title`=28px, `text-title-lg`=32px, and `text-display`=40px. The explicitly adopted stock entries retain their rem units and default leading: `text-sm`=0.875rem, `text-lg`=1.125rem, `text-xl`=1.25rem, and `text-2xl`=1.5rem (14/18/20/24px at the default root size). Field titles use `text-small`; hints/errors use `text-caption`; workflow titles use `text-md`. Preserve explicit line heights when replacing arbitrary sizes. Where the old size inherited its line height, use `leading-[inherit]` if the named utility would otherwise add a different default. Keep document-relative heading/code recipes and the thinking loader's proportional label sizing distinct from ordinary UI text. diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 6f480adc383..58b0f4c0ab9 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -110,6 +110,8 @@ --text-sm--line-height: calc(1.25 / 0.875); --text-base: 15px; --text-md: 16px; + --text-lg: 1.125rem; + --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; From d624bfe05d5ae89c75b8ef6d8eb7a6a5dec48371 Mon Sep 17 00:00:00 2001 From: Bill Leoutsakos Date: Thu, 24 Sep 2026 16:01:00 -0700 Subject: [PATCH 8/8] fix(ui): preserve panel and auth control semantics --- .../auth/password/password-auth.tsx | 1 + .../w/[workflowId]/components/panel/panel.tsx | 39 +++++++++++++------ .../components/output-panel/output-panel.tsx | 14 ++++++- 3 files changed, 41 insertions(+), 13 deletions(-) diff --git a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx index 36467bc6287..cd49a26fa28 100644 --- a/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx +++ b/apps/sim/app/(interfaces)/chat/components/auth/password/password-auth.tsx @@ -72,6 +72,7 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) { placeholder='Enter password' value={password} onChange={handlePasswordChange} + className='h-[34px]' error={hasPasswordError} />
void + children: string +} + +function PanelTabChip({ tab, active, onClick, children }: PanelTabChipProps) { + return ( + + + {children} + + + ) +} /** * Panel component with resizable width and tab navigation that persists across page refreshes. * @@ -741,7 +758,7 @@ export const Panel = memo(function Panel() {
- @@ -802,7 +819,7 @@ export const Panel = memo(function Panel() {