@flamingo-stack/openframe-frontend-core 0.0.398 → 0.0.399-snapshot.20260710120252

package/src/components/features/auth/complete-account-form.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { Input } from '../../ui/input'
 import { PasswordInput } from '../../ui/password-input'
@@ -75,6 +76,12 @@ export function CompleteAccountForm({
 }: CompleteAccountFormProps) {
   const fieldsDisabled = disabled || loading
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const firstNameErr = useDeferredError(errors?.firstName, firstName)
+  const lastNameErr = useDeferredError(errors?.lastName, lastName)
+  const passwordErr = useDeferredError(errors?.password, password)
+  const confirmErr = useDeferredError(errors?.confirmPassword, confirmPassword)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
       onSubmit()
@@ -111,57 +118,47 @@ export function CompleteAccountForm({
         </>
       )}
 
-      {/* First + Last name */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <Input
-            label="First Name"
-            placeholder="Enter First Name"
-            value={firstName}
-            error={errors?.firstName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onFirstNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <Input
-            label="Last Name"
-            placeholder="Enter Last Name"
-            value={lastName}
-            error={errors?.lastName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onLastNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
-
-      {/* Password + Confirm */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <PasswordInput
-            label="Password"
-            placeholder="Enter Password"
-            value={password}
-            error={errors?.password}
-            disabled={fieldsDisabled}
-            onChange={(event) => onPasswordChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <PasswordInput
-            label="Confirm Password"
-            placeholder="Confirm Password"
-            value={confirmPassword}
-            error={errors?.confirmPassword}
-            disabled={fieldsDisabled}
-            onChange={(event) => onConfirmPasswordChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
+      {/* Name + password fields — single column on every breakpoint */}
+      <Input
+        label="First Name"
+        placeholder="Enter First Name"
+        value={firstName}
+        error={firstNameErr.error}
+        disabled={fieldsDisabled}
+        onBlur={firstNameErr.onBlur}
+        onChange={(event) => onFirstNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <Input
+        label="Last Name"
+        placeholder="Enter Last Name"
+        value={lastName}
+        error={lastNameErr.error}
+        disabled={fieldsDisabled}
+        onBlur={lastNameErr.onBlur}
+        onChange={(event) => onLastNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <PasswordInput
+        label="Password"
+        placeholder="Enter Password"
+        value={password}
+        error={passwordErr.error}
+        disabled={fieldsDisabled}
+        onBlur={passwordErr.onBlur}
+        onChange={(event) => onPasswordChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <PasswordInput
+        label="Confirm Password"
+        placeholder="Confirm Password"
+        value={confirmPassword}
+        error={confirmErr.error}
+        disabled={fieldsDisabled}
+        onBlur={confirmErr.onBlur}
+        onChange={(event) => onConfirmPasswordChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
 
       {/* Actions — optional back + submit */}
       <div className="flex items-center gap-[var(--spacing-system-l)]">

package/src/components/features/auth/create-organization-form.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { CheckboxBlock } from '../../ui/checkbox-block'
 import { Input } from '../../ui/input'
@@ -91,6 +92,11 @@ export function CreateOrganizationForm({
   const isSsoMode = !!ssoProviders && ssoProviders.length > 0
   const fieldsDisabled = disabled || loading || isSsoMode
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const emailErr = useDeferredError(errors?.email, email)
+  const orgNameErr = useDeferredError(errors?.organizationName, organizationName)
+  const domainErr = useDeferredError(errors?.domain, domain)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled) {
       onSubmit()
@@ -110,33 +116,29 @@ export function CreateOrganizationForm({
         <p className="text-h4 text-ods-text-secondary">Start your journey with OpenFrame.</p>
       </div>
 
-      {/* Email + Organization Name — side by side on every breakpoint */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <Input
-            type="email"
-            label="Email"
-            placeholder="username@mail.com"
-            value={email}
-            error={errors?.email ?? emailStatus?.message}
-            errorVariant={errors?.email ? 'error' : emailStatus?.variant}
-            disabled={fieldsDisabled}
-            onChange={(event) => onEmailChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <Input
-            label="Organization Name"
-            placeholder="Your Company Name"
-            value={organizationName}
-            error={errors?.organizationName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onOrganizationNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
+      {/* Email + Organization Name — single column on every breakpoint */}
+      <Input
+        type="email"
+        label="Email"
+        placeholder="username@mail.com"
+        value={email}
+        error={emailErr.error ?? emailStatus?.message}
+        errorVariant={emailErr.error ? 'error' : emailStatus?.variant}
+        disabled={fieldsDisabled}
+        onBlur={emailErr.onBlur}
+        onChange={(event) => onEmailChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <Input
+        label="Organization Name"
+        placeholder="Your Company Name"
+        value={organizationName}
+        error={orgNameErr.error}
+        disabled={fieldsDisabled}
+        onBlur={orgNameErr.onBlur}
+        onChange={(event) => onOrganizationNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
 
       {/* Domain */}
       <div className="flex flex-col">
@@ -144,15 +146,15 @@ export function CreateOrganizationForm({
           label="Domain"
           placeholder={domainPlaceholder}
           value={domain}
-          error={errors?.domain ?? domainStatus?.message}
-          errorVariant={errors?.domain ? 'error' : domainStatus?.variant}
+          error={domainErr.error ?? domainStatus?.message}
+          errorVariant={domainErr.error ? 'error' : domainStatus?.variant}
           disabled={fieldsDisabled}
+          onBlur={domainErr.onBlur}
           endAdornment={domainSuffix ? <span className="whitespace-nowrap">{domainSuffix}</span> : undefined}
           onChange={(event) => onDomainChange(event.target.value)}
           onKeyDown={handleKeyDown}
         />
-        {/* Top padding clears the absolutely-positioned field message */}
-        {domainSlot && <div className="pt-[var(--spacing-system-l)]">{domainSlot}</div>}
+        {domainSlot && <div className="pt-[var(--spacing-system-s)]">{domainSlot}</div>}
       </div>
 
       {/* Terms & Privacy */}

package/src/components/features/auth/login-form.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { Input } from '../../ui/input'
 import type { AuthSsoProvider } from './sso-providers'
@@ -61,6 +62,9 @@ export function LoginForm({
   const isSsoMode = !!ssoProviders && ssoProviders.length > 0
   const fieldDisabled = disabled || loading || isSsoMode
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const emailErr = useDeferredError(errors?.email, email)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldDisabled) {
       onSubmit()
@@ -86,8 +90,9 @@ export function LoginForm({
         label="Email"
         placeholder={emailPlaceholder}
         value={email}
-        error={errors?.email}
+        error={emailErr.error}
         disabled={fieldDisabled}
+        onBlur={emailErr.onBlur}
         onChange={(event) => onEmailChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />

package/src/components/features/auth/openframe-sso-login-form.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { Input } from '../../ui/input'
 import { PasswordInput } from '../../ui/password-input'
@@ -60,6 +61,10 @@ export function OpenFrameSsoLoginForm({
 }: OpenFrameSsoLoginFormProps) {
   const fieldsDisabled = disabled || loading
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const emailErr = useDeferredError(errors?.email, email)
+  const passwordErr = useDeferredError(errors?.password, password)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
       onSubmit()
@@ -84,8 +89,9 @@ export function OpenFrameSsoLoginForm({
         label={emailLabel}
         placeholder={emailPlaceholder}
         value={email}
-        error={errors?.email}
+        error={emailErr.error}
         disabled={fieldsDisabled}
+        onBlur={emailErr.onBlur}
         onChange={(event) => onEmailChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
@@ -94,8 +100,9 @@ export function OpenFrameSsoLoginForm({
         label={passwordLabel}
         placeholder={passwordPlaceholder}
         value={password}
-        error={errors?.password}
+        error={passwordErr.error}
         disabled={fieldsDisabled}
+        onBlur={passwordErr.onBlur}
         onChange={(event) => onPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />

package/src/components/features/auth/openframe-sso-signup-form.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { Input } from '../../ui/input'
 import { PasswordInput } from '../../ui/password-input'
@@ -72,6 +73,13 @@ export function OpenFrameSsoSignUpForm({
 }: OpenFrameSsoSignUpFormProps) {
   const fieldsDisabled = disabled || loading
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const emailErr = useDeferredError(errors?.email, email)
+  const firstNameErr = useDeferredError(errors?.firstName, firstName)
+  const lastNameErr = useDeferredError(errors?.lastName, lastName)
+  const passwordErr = useDeferredError(errors?.password, password)
+  const confirmErr = useDeferredError(errors?.confirmPassword, confirmPassword)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
       onSubmit()
@@ -96,63 +104,54 @@ export function OpenFrameSsoSignUpForm({
         label={emailLabel}
         placeholder="username@mail.com"
         value={email}
-        error={errors?.email}
+        error={emailErr.error}
         disabled={fieldsDisabled || emailReadOnly}
+        onBlur={emailErr.onBlur}
         onChange={(event) => onEmailChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
 
-      {/* First + Last name */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <Input
-            label="First Name"
-            placeholder="Enter First Name"
-            value={firstName}
-            error={errors?.firstName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onFirstNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <Input
-            label="Last Name"
-            placeholder="Enter Last Name"
-            value={lastName}
-            error={errors?.lastName}
-            disabled={fieldsDisabled}
-            onChange={(event) => onLastNameChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
-
-      {/* Password + Confirm */}
-      <div className="flex gap-[var(--spacing-system-l)]">
-        <div className="min-w-0 flex-1">
-          <PasswordInput
-            label="Password"
-            placeholder="Enter Password"
-            value={password}
-            error={errors?.password}
-            disabled={fieldsDisabled}
-            onChange={(event) => onPasswordChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-        <div className="min-w-0 flex-1">
-          <PasswordInput
-            label="Confirm Password"
-            placeholder="Confirm Password"
-            value={confirmPassword}
-            error={errors?.confirmPassword}
-            disabled={fieldsDisabled}
-            onChange={(event) => onConfirmPasswordChange(event.target.value)}
-            onKeyDown={handleKeyDown}
-          />
-        </div>
-      </div>
+      {/* Name + password fields — single column on every breakpoint */}
+      <Input
+        label="First Name"
+        placeholder="Enter First Name"
+        value={firstName}
+        error={firstNameErr.error}
+        disabled={fieldsDisabled}
+        onBlur={firstNameErr.onBlur}
+        onChange={(event) => onFirstNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <Input
+        label="Last Name"
+        placeholder="Enter Last Name"
+        value={lastName}
+        error={lastNameErr.error}
+        disabled={fieldsDisabled}
+        onBlur={lastNameErr.onBlur}
+        onChange={(event) => onLastNameChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <PasswordInput
+        label="Password"
+        placeholder="Enter Password"
+        value={password}
+        error={passwordErr.error}
+        disabled={fieldsDisabled}
+        onBlur={passwordErr.onBlur}
+        onChange={(event) => onPasswordChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
+      <PasswordInput
+        label="Confirm Password"
+        placeholder="Confirm Password"
+        value={confirmPassword}
+        error={confirmErr.error}
+        disabled={fieldsDisabled}
+        onBlur={confirmErr.onBlur}
+        onChange={(event) => onConfirmPasswordChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+      />
 
       {/* Forgot password + Continue */}
       <div className="flex items-center gap-[var(--spacing-system-l)]">

package/src/components/features/auth/password-reset-form.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from 'react'
 import { cn } from '../../../utils/cn'
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error'
 import { Button } from '../../ui/button'
 import { Input } from '../../ui/input'
 import { BackToLoginLink } from './back-to-login-link'
@@ -66,6 +67,10 @@ export function PasswordResetForm({
 }: PasswordResetFormProps) {
   const fieldsDisabled = disabled || loading
 
+  // Validation messages are deferred while the user is typing (shown on blur or after a pause).
+  const passwordErr = useDeferredError(errors?.password, password)
+  const confirmErr = useDeferredError(errors?.confirmPassword, confirmPassword)
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
       onSubmit()
@@ -91,8 +96,9 @@ export function PasswordResetForm({
         label={newPasswordLabel}
         placeholder={newPasswordPlaceholder}
         value={password}
-        error={errors?.password}
+        error={passwordErr.error}
         disabled={fieldsDisabled}
+        onBlur={passwordErr.onBlur}
         onChange={(event) => onPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
@@ -103,8 +109,9 @@ export function PasswordResetForm({
         label={confirmPasswordLabel}
         placeholder={confirmPasswordPlaceholder}
         value={confirmPassword}
-        error={errors?.confirmPassword}
+        error={confirmErr.error}
         disabled={fieldsDisabled}
+        onBlur={confirmErr.onBlur}
         onChange={(event) => onConfirmPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />

package/src/components/ui/field-wrapper.tsx

@@ -6,7 +6,7 @@ import { cn } from "../../utils/cn"
 export interface FieldWrapperProps {
   /** Label text displayed above the field */
   label?: string
-  /** Status message displayed below the field. Space is always reserved to prevent layout shifts. */
+  /** Status message displayed below the field. Wraps up to two lines, then ellipsizes. */
   error?: string
   /** Color variant for the message: "error" (red), "warning" (yellow), "success" (green) or "muted" (grey) */
   errorVariant?: "error" | "warning" | "success" | "muted"
@@ -27,7 +27,7 @@ const FieldWrapper = React.forwardRef<HTMLDivElement, FieldWrapperProps>(
     const hasChrome = label != null || error != null
 
     return (
-      <div ref={ref} className={cn(hasChrome ? "relative flex w-full flex-col" : "contents", className)}>
+      <div ref={ref} className={cn(hasChrome ? "flex w-full flex-col" : "contents", className)}>
         {label && (
           <label className="text-h4 text-ods-text-primary mb-1">
             {label}
@@ -35,7 +35,10 @@ const FieldWrapper = React.forwardRef<HTMLDivElement, FieldWrapperProps>(
         )}
         {children}
         {error && (
-          <p className={cn("absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate", errorVariantClasses[errorVariant])} title={error}>
+          <p
+            className={cn("mt-1 text-h6 break-words line-clamp-2", errorVariantClasses[errorVariant])}
+            title={error}
+          >
             {error}
           </p>
         )}

package/src/hooks/ui/index.ts

@@ -1,6 +1,7 @@
 // UI Hooks exports
 export * from './use-auto-limit-tags'
 export * from './use-debounce'
+export * from './use-deferred-error'
 export * from './use-header-height'
 export * from './use-horizontal-scrollbar'
 export * from './use-image-edge-color'

package/src/hooks/ui/use-deferred-error.ts

@@ -0,0 +1,38 @@
+'use client'
+
+import * as React from 'react'
+
+export interface UseDeferredErrorResult {
+  /** The message to render (undefined while the reveal is deferred or the field is valid). */
+  error: string | undefined
+  /** Attach to the field's onBlur — reveals validation immediately and keeps it live from then on. */
+  onBlur: () => void
+}
+
+/**
+ * Defers showing a field validation message while the user is still typing.
+ *
+ * The message is revealed when the field loses focus (touched) or when the
+ * value hasn't changed for `delay` ms; every keystroke restarts the timer.
+ * Once touched, validation stays live. A message that clears (the value became
+ * valid) disappears immediately.
+ */
+export function useDeferredError(error: string | undefined, value: string, delay = 1500): UseDeferredErrorResult {
+  const [touched, setTouched] = React.useState(false)
+  const [paused, setPaused] = React.useState(false)
+
+  // Typing hides the message and restarts the pause timer.
+  React.useEffect(() => {
+    if (touched) return
+    setPaused(false)
+    const timer = setTimeout(() => setPaused(true), delay)
+    return () => clearTimeout(timer)
+  }, [value, delay, touched])
+
+  const onBlur = React.useCallback(() => setTouched(true), [])
+
+  return {
+    error: error && (touched || paused) ? error : undefined,
+    onBlur,
+  }
+}

package/src/stories/Input.stories.tsx

@@ -219,3 +219,47 @@ export const AllVariants: Story = {
     </div>
   ),
 };
+
+/**
+ * Error / status states. Long messages wrap up to two lines, then ellipsize.
+ */
+export const ErrorState: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2.5rem', width: '480px' }}>
+      <Input label="Short error (no interaction)" placeholder="username@mail.com" error="Required field" />
+      <Input
+        label="Long error — wraps to two lines"
+        defaultValue="ada@example.com"
+        error="This email is already registered. Sign in instead or use a different email address to create the organization."
+      />
+      {/* Half-width pair, as on the Create Organization screen */}
+      <div style={{ display: 'flex', gap: '1.5rem' }}>
+        <Input
+          label="Email"
+          defaultValue="ada@example.com"
+          error="This email is already registered. Sign in instead."
+        />
+        <Input
+          label="Organization Name"
+          defaultValue="A"
+          error="Organization Name must be 2-100 characters"
+        />
+      </div>
+      <Input
+        label="Success status"
+        defaultValue="ada@example.com"
+        error="Email is available"
+        errorVariant="success"
+      />
+      <Input
+        label="Muted status (long, truncating)"
+        defaultValue="ada-lovelace-computing"
+        error="Checking availability against every registered organization domain, this may take a moment…"
+        errorVariant="muted"
+      />
+    </div>
+  ),
+};

package/src/stories/auth/CreateOrganization.stories.tsx

@@ -97,6 +97,26 @@ export const Filled: Story = {
   ),
 }
 
+/**
+ * Error state: long messages under the fields wrap up to two lines.
+ * Validation is deferred — messages appear after a 1.5s typing pause or on blur.
+ */
+export const ErrorState: Story = {
+  render: () => (
+    <CreateOrganizationPage
+      email="ada@example.com"
+      organizationName="A"
+      domainSuffix=".openframe.ai"
+      termsUrl="#terms"
+      privacyPolicyUrl="#privacy"
+      emailStatus={{ message: 'This email is already registered. Sign in instead.', variant: 'error' }}
+      errors={{
+        organizationName: 'Organization Name must be 2-100 characters',
+      }}
+    />
+  ),
+}
+
 const SSO_PROVIDERS: AuthSsoProvider[] = ['openframe', 'google', 'microsoft']
 
 /** SSO configured: fields disabled, submit replaced by provider buttons. */