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

package/dist/index.js

@@ -916,7 +916,7 @@ import {
   validateEmailDomain,
   validateEmailDomainList,
   validatePhoneNumber
-} from "./chunk-2XVOYDRF.js";
+} from "./chunk-B2K5COVE.js";
 import {
   CommandApprovalToast,
   DEFAULT_MIN_FILL_MS,
@@ -1065,7 +1065,7 @@ import {
   SkeletonText,
   SplitButton,
   buttonVariants
-} from "./chunk-HGKWTKW7.js";
+} from "./chunk-X2FPWS3P.js";
 import "./chunk-6U3IUD57.js";
 import "./chunk-OHPI2HRK.js";
 import {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.398-snapshot.20260710082611",
+  "version": "0.0.398",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

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

@@ -111,43 +111,57 @@ export function CompleteAccountForm({
         </>
       )}
 
-      {/* Name + password fields — single column on every breakpoint */}
-      <Input
-        label="First Name"
-        placeholder="Enter First Name"
-        value={firstName}
-        error={errors?.firstName}
-        disabled={fieldsDisabled}
-        onChange={(event) => onFirstNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <Input
-        label="Last Name"
-        placeholder="Enter Last Name"
-        value={lastName}
-        error={errors?.lastName}
-        disabled={fieldsDisabled}
-        onChange={(event) => onLastNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Password"
-        placeholder="Enter Password"
-        value={password}
-        error={errors?.password}
-        disabled={fieldsDisabled}
-        onChange={(event) => onPasswordChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Confirm Password"
-        placeholder="Confirm Password"
-        value={confirmPassword}
-        error={errors?.confirmPassword}
-        disabled={fieldsDisabled}
-        onChange={(event) => onConfirmPasswordChange(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>
 
       {/* Actions — optional back + submit */}
       <div className="flex items-center gap-[var(--spacing-system-l)]">

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

@@ -110,27 +110,33 @@ export function CreateOrganizationForm({
         <p className="text-h4 text-ods-text-secondary">Start your journey with OpenFrame.</p>
       </div>
 
-      {/* Email + Organization Name — single column on every breakpoint */}
-      <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}
-      />
-      <Input
-        label="Organization Name"
-        placeholder="Your Company Name"
-        value={organizationName}
-        error={errors?.organizationName}
-        disabled={fieldsDisabled}
-        onChange={(event) => onOrganizationNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
+      {/* 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>
 
       {/* Domain */}
       <div className="flex flex-col">
@@ -145,7 +151,8 @@ export function CreateOrganizationForm({
           onChange={(event) => onDomainChange(event.target.value)}
           onKeyDown={handleKeyDown}
         />
-        {domainSlot && <div className="pt-[var(--spacing-system-s)]">{domainSlot}</div>}
+        {/* Top padding clears the absolutely-positioned field message */}
+        {domainSlot && <div className="pt-[var(--spacing-system-l)]">{domainSlot}</div>}
       </div>
 
       {/* Terms & Privacy */}

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

@@ -102,43 +102,57 @@ export function OpenFrameSsoSignUpForm({
         onKeyDown={handleKeyDown}
       />
 
-      {/* Name + password fields — single column on every breakpoint */}
-      <Input
-        label="First Name"
-        placeholder="Enter First Name"
-        value={firstName}
-        error={errors?.firstName}
-        disabled={fieldsDisabled}
-        onChange={(event) => onFirstNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <Input
-        label="Last Name"
-        placeholder="Enter Last Name"
-        value={lastName}
-        error={errors?.lastName}
-        disabled={fieldsDisabled}
-        onChange={(event) => onLastNameChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Password"
-        placeholder="Enter Password"
-        value={password}
-        error={errors?.password}
-        disabled={fieldsDisabled}
-        onChange={(event) => onPasswordChange(event.target.value)}
-        onKeyDown={handleKeyDown}
-      />
-      <PasswordInput
-        label="Confirm Password"
-        placeholder="Confirm Password"
-        value={confirmPassword}
-        error={errors?.confirmPassword}
-        disabled={fieldsDisabled}
-        onChange={(event) => onConfirmPasswordChange(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>
 
       {/* Forgot password + Continue */}
       <div className="flex items-center gap-[var(--spacing-system-l)]">

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. Wraps up to two lines, then ellipsizes. */
+  /** Status message displayed below the field. Space is always reserved to prevent layout shifts. */
   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 ? "flex w-full flex-col" : "contents", className)}>
+      <div ref={ref} className={cn(hasChrome ? "relative flex w-full flex-col" : "contents", className)}>
         {label && (
           <label className="text-h4 text-ods-text-primary mb-1">
             {label}
@@ -35,10 +35,7 @@ const FieldWrapper = React.forwardRef<HTMLDivElement, FieldWrapperProps>(
         )}
         {children}
         {error && (
-          <p
-            className={cn("mt-1 text-h6 break-words line-clamp-2", errorVariantClasses[errorVariant])}
-            title={error}
-          >
+          <p className={cn("absolute bottom-0 left-0 right-0 translate-y-full text-h6 truncate", errorVariantClasses[errorVariant])} title={error}>
             {error}
           </p>
         )}

package/src/stories/Input.stories.tsx

@@ -219,47 +219,3 @@ 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="ϕ"
-          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,25 +97,6 @@ export const Filled: Story = {
   ),
 }
 
-/**
- * Error state: long messages under the fields wrap up to two lines.
- */
-export const ErrorState: Story = {
-  render: () => (
-    <CreateOrganizationPage
-      email="ada@example.com"
-      organizationName="ϕ"
-      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. */