@flamingo-stack/openframe-frontend-core 0.0.585 → 0.0.586-1986.5486.1

package/dist/index.js

@@ -9,7 +9,7 @@ import {
   SoftwareInfo,
   SoftwareSourceBadge,
   ToolBadge
-} from "./chunk-LNKBNY3A.js";
+} from "./chunk-YEQAA6I4.js";
 import {
   AppHeader,
   AppLayout,
@@ -28,14 +28,14 @@ import {
   SlidingSidebar,
   TicketAlertsButton,
   TopNavigation
-} from "./chunk-36GXR7BR.js";
+} from "./chunk-KLWJRGNN.js";
 import {
   MobileNavigationDropdown,
   MultiLevelNavigation,
   StickySectionNav,
   useSectionNavigation
-} from "./chunk-GG76BPXJ.js";
-import "./chunk-VSXFBO4D.js";
+} from "./chunk-6EZGJZVH.js";
+import "./chunk-5OIXAV4P.js";
 import {
   ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
   AIEnrichButton,
@@ -50,6 +50,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  AccountDetailsFields,
   AdminFormModal,
   Alert,
   AlertDescription,
@@ -218,6 +219,7 @@ import {
   InviteLinkInvalidModal,
   JsonDetailList,
   KnowledgeBaseLinksManager,
+  LabeledDivider,
   LazyMount,
   ListLoader,
   ListPageContainer,
@@ -578,7 +580,7 @@ import {
   withFirstTouchAttribution,
   withWalkthroughOpenParam,
   writeDismissCookie
-} from "./chunk-WXL2AR5I.js";
+} from "./chunk-YYC7V7YC.js";
 import "./chunk-L2SLFCXP.js";
 import "./chunk-BJXDHKUX.js";
 import {
@@ -1665,6 +1667,7 @@ export {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  AccountDetailsFields,
   ActionsMenu,
   ActionsMenuDropdown,
   AdminContentCard,
@@ -2091,6 +2094,7 @@ export {
   LOG_SEVERITY_COLORS,
   LOG_SEVERITY_LABELS,
   Label,
+  LabeledDivider,
   LaptopIcon,
   LazyMount,
   LinkedInIcon,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/logs-list.tsx","../src/components/log-severity-dot.tsx","../src/types/logs.types.ts","../src/assets/index.ts"],"sourcesContent":["import { type FC, forwardRef, useRef } from 'react';\nimport type { LogsListProps, LogEntry } from '../types/logs.types';\nimport { cn } from '../utils/cn';\nimport { LogSeverityDot } from './log-severity-dot';\nimport { ToolIcon } from './tool-icon';\n\nconst formatTimestamp = (timestamp: string | Date): string => {\n  const date = timestamp instanceof Date ? timestamp : new Date(timestamp);\n\n  // UTC getters so the timestamp is identical on server (UTC) and client\n  // (local) — otherwise React #418 hydration mismatch.\n  const year = date.getUTCFullYear();\n  const month = String(date.getUTCMonth() + 1).padStart(2, '0');\n  const day = String(date.getUTCDate()).padStart(2, '0');\n  const hours = String(date.getUTCHours()).padStart(2, '0');\n  const minutes = String(date.getUTCMinutes()).padStart(2, '0');\n\n  return `${year}/${month}/${day},${hours}:${minutes}`;\n};\n\nconst LogCard: FC<{\n  log: LogEntry;\n  isLast: boolean;\n  showConnector: boolean;\n  onClick?: () => void;\n}> = ({ log, isLast, showConnector, onClick }) => {\n  return (\n    <div className=\"relative\">\n      <div\n        className={cn(\n          'relative box-border flex w-full items-start gap-3 rounded px-1 py-2',\n          'cursor-pointer transition-colors hover:bg-ods-bg-hover/50',\n        )}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n      >\n        <LogSeverityDot severity={log.severity} size=\"md\" />\n\n        <div className=\"min-w-0 flex-1 space-y-1\">\n          <p className=\"text-ods-text-primary text-h6\">{log.title}</p>\n          <div className=\"flex items-center gap-2\">\n            <p className=\"text-ods-text-secondary text-h5\">{formatTimestamp(log.timestamp)}</p>\n            {log.toolType && <ToolIcon toolType={log.toolType} size={16} />}\n          </div>\n        </div>\n      </div>\n\n      {showConnector && !isLast && (\n        <div\n          className=\"absolute left-[15px] w-[2px] bg-ods-border\"\n          style={{\n            top: '28px',\n            bottom: '-10px',\n          }}\n          aria-hidden=\"true\"\n        />\n      )}\n    </div>\n  );\n};\n\nexport const LogsList = forwardRef<HTMLDivElement, LogsListProps>(\n  (\n    {\n      logs,\n      maxHeight = '400px',\n      showConnector = true,\n      onLogClick,\n      loading = false,\n      emptyMessage = 'No logs to display',\n      className,\n    },\n    ref,\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const isFullHeight = maxHeight === '100%';\n\n    const getContainerStyles = () => {\n      if (isFullHeight) return undefined;\n      return { maxHeight, minHeight: '200px' };\n    };\n\n    const getContainerClasses = () => {\n      if (isFullHeight) return 'h-full';\n      return '';\n    };\n\n    if (loading) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-ods-border bg-ods-card p-4',\n            'flex items-center justify-center',\n            getContainerClasses(),\n            className,\n          )}\n          style={getContainerStyles()}\n        >\n          <div className=\"text-ods-text-muted text-h6\">Loading logs...</div>\n        </div>\n      );\n    }\n\n    if (logs.length === 0) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-ods-border bg-ods-card p-4',\n            'flex items-center justify-center',\n            getContainerClasses(),\n            className,\n          )}\n          style={getContainerStyles()}\n        >\n          <div className=\"text-ods-text-muted text-h6\">{emptyMessage}</div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative rounded-lg border border-ods-border bg-ods-card',\n          'flex flex-col overflow-hidden',\n          getContainerClasses(),\n          className,\n        )}\n        style={getContainerStyles()}\n      >\n        <div ref={containerRef} className=\"flex-1 overflow-y-auto px-4 py-3\">\n          {logs.map((log, index) => (\n            <LogCard\n              key={log.id}\n              log={log}\n              isLast={index === logs.length - 1}\n              showConnector={showConnector}\n              onClick={() => onLogClick?.(log)}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nLogsList.displayName = 'LogsList';\n","import { forwardRef } from 'react';\nimport { type LogSeverityDotProps, LOG_SEVERITY_COLORS, LOG_SEVERITY_LABELS } from '../types/logs.types';\nimport { cn } from '../utils/cn';\n\nexport const LogSeverityDot = forwardRef<HTMLDivElement, LogSeverityDotProps>(\n  ({ severity, size = 'md', className }, ref) => {\n    const sizeClasses = {\n      sm: 'w-4 h-4',\n      md: 'w-6 h-6',\n      lg: 'w-8 h-8',\n    };\n\n    const dotSizeClasses = {\n      sm: 'w-2 h-2',\n      md: 'w-3 h-3',\n      lg: 'w-4 h-4',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn('relative flex shrink-0 items-center justify-center', sizeClasses[size], className)}\n        aria-label={`${LOG_SEVERITY_LABELS[severity]} severity`}\n      >\n        <div\n          className={cn('rounded-full', dotSizeClasses[size])}\n          style={{ backgroundColor: LOG_SEVERITY_COLORS[severity] }}\n        />\n      </div>\n    );\n  },\n);\n\nLogSeverityDot.displayName = 'LogSeverityDot';\n","import type { ToolType } from './tool.types';\n\nexport type LogSeverity = 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL';\n\nexport interface LogEntry {\n  id: string;\n  ingestDay: string;\n  eventType: string;\n  severity: LogSeverity;\n  title: string;\n  timestamp: string | Date;\n  toolType?: ToolType;\n  toolIcon?: string;\n  message?: string;\n  metadata?: Record<string, unknown>;\n}\n\nexport interface LogsListProps {\n  logs: LogEntry[];\n  maxHeight?: string | number;\n  showConnector?: boolean;\n  onLogClick?: (log: LogEntry) => void;\n  loading?: boolean;\n  emptyMessage?: string;\n  className?: string;\n}\n\nexport interface LogSeverityDotProps {\n  severity: LogSeverity;\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nexport const LOG_SEVERITY_COLORS: Record<LogSeverity, string> = {\n  DEBUG: '#888888',\n  INFO: '#888888',\n  WARNING: '#e1b32f',\n  ERROR: '#f36666',\n  CRITICAL: '#b43b3b',\n};\n\nexport const LOG_SEVERITY_LABELS: Record<LogSeverity, string> = {\n  DEBUG: 'Debug',\n  INFO: 'Info',\n  WARNING: 'Warning',\n  ERROR: 'Error',\n  CRITICAL: 'Critical',\n};\n","// Assets exports\n// Font files and other static assets\n// Platform utilities will be available when needed\n\nexport const assets = {} as const;\nexport * from './fae-avatar';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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","names":["forwardRef","jsx","forwardRef"]}
+{"version":3,"sources":["../src/components/logs-list.tsx","../src/components/log-severity-dot.tsx","../src/types/logs.types.ts","../src/assets/index.ts"],"sourcesContent":["import { type FC, forwardRef, useRef } from 'react';\nimport type { LogsListProps, LogEntry } from '../types/logs.types';\nimport { cn } from '../utils/cn';\nimport { LogSeverityDot } from './log-severity-dot';\nimport { ToolIcon } from './tool-icon';\n\nconst formatTimestamp = (timestamp: string | Date): string => {\n  const date = timestamp instanceof Date ? timestamp : new Date(timestamp);\n\n  // UTC getters so the timestamp is identical on server (UTC) and client\n  // (local) — otherwise React #418 hydration mismatch.\n  const year = date.getUTCFullYear();\n  const month = String(date.getUTCMonth() + 1).padStart(2, '0');\n  const day = String(date.getUTCDate()).padStart(2, '0');\n  const hours = String(date.getUTCHours()).padStart(2, '0');\n  const minutes = String(date.getUTCMinutes()).padStart(2, '0');\n\n  return `${year}/${month}/${day},${hours}:${minutes}`;\n};\n\nconst LogCard: FC<{\n  log: LogEntry;\n  isLast: boolean;\n  showConnector: boolean;\n  onClick?: () => void;\n}> = ({ log, isLast, showConnector, onClick }) => {\n  return (\n    <div className=\"relative\">\n      <div\n        className={cn(\n          'relative box-border flex w-full items-start gap-3 rounded px-1 py-2',\n          'cursor-pointer transition-colors hover:bg-ods-bg-hover/50',\n        )}\n        onClick={onClick}\n        role=\"button\"\n        tabIndex={0}\n        onKeyDown={e => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClick?.();\n          }\n        }}\n      >\n        <LogSeverityDot severity={log.severity} size=\"md\" />\n\n        <div className=\"min-w-0 flex-1 space-y-1\">\n          <p className=\"text-ods-text-primary text-h6\">{log.title}</p>\n          <div className=\"flex items-center gap-2\">\n            <p className=\"text-ods-text-secondary text-h5\">{formatTimestamp(log.timestamp)}</p>\n            {log.toolType && <ToolIcon toolType={log.toolType} size={16} />}\n          </div>\n        </div>\n      </div>\n\n      {showConnector && !isLast && (\n        <div\n          className=\"absolute left-[15px] w-[2px] bg-ods-border\"\n          style={{\n            top: '28px',\n            bottom: '-10px',\n          }}\n          aria-hidden=\"true\"\n        />\n      )}\n    </div>\n  );\n};\n\nexport const LogsList = forwardRef<HTMLDivElement, LogsListProps>(\n  (\n    {\n      logs,\n      maxHeight = '400px',\n      showConnector = true,\n      onLogClick,\n      loading = false,\n      emptyMessage = 'No logs to display',\n      className,\n    },\n    ref,\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const isFullHeight = maxHeight === '100%';\n\n    const getContainerStyles = () => {\n      if (isFullHeight) return undefined;\n      return { maxHeight, minHeight: '200px' };\n    };\n\n    const getContainerClasses = () => {\n      if (isFullHeight) return 'h-full';\n      return '';\n    };\n\n    if (loading) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-ods-border bg-ods-card p-4',\n            'flex items-center justify-center',\n            getContainerClasses(),\n            className,\n          )}\n          style={getContainerStyles()}\n        >\n          <div className=\"text-ods-text-muted text-h6\">Loading logs...</div>\n        </div>\n      );\n    }\n\n    if (logs.length === 0) {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'rounded-lg border border-ods-border bg-ods-card p-4',\n            'flex items-center justify-center',\n            getContainerClasses(),\n            className,\n          )}\n          style={getContainerStyles()}\n        >\n          <div className=\"text-ods-text-muted text-h6\">{emptyMessage}</div>\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'relative rounded-lg border border-ods-border bg-ods-card',\n          'flex flex-col overflow-hidden',\n          getContainerClasses(),\n          className,\n        )}\n        style={getContainerStyles()}\n      >\n        <div ref={containerRef} className=\"flex-1 overflow-y-auto px-4 py-3\">\n          {logs.map((log, index) => (\n            <LogCard\n              key={log.id}\n              log={log}\n              isLast={index === logs.length - 1}\n              showConnector={showConnector}\n              onClick={() => onLogClick?.(log)}\n            />\n          ))}\n        </div>\n      </div>\n    );\n  },\n);\n\nLogsList.displayName = 'LogsList';\n","import { forwardRef } from 'react';\nimport { type LogSeverityDotProps, LOG_SEVERITY_COLORS, LOG_SEVERITY_LABELS } from '../types/logs.types';\nimport { cn } from '../utils/cn';\n\nexport const LogSeverityDot = forwardRef<HTMLDivElement, LogSeverityDotProps>(\n  ({ severity, size = 'md', className }, ref) => {\n    const sizeClasses = {\n      sm: 'w-4 h-4',\n      md: 'w-6 h-6',\n      lg: 'w-8 h-8',\n    };\n\n    const dotSizeClasses = {\n      sm: 'w-2 h-2',\n      md: 'w-3 h-3',\n      lg: 'w-4 h-4',\n    };\n\n    return (\n      <div\n        ref={ref}\n        className={cn('relative flex shrink-0 items-center justify-center', sizeClasses[size], className)}\n        aria-label={`${LOG_SEVERITY_LABELS[severity]} severity`}\n      >\n        <div\n          className={cn('rounded-full', dotSizeClasses[size])}\n          style={{ backgroundColor: LOG_SEVERITY_COLORS[severity] }}\n        />\n      </div>\n    );\n  },\n);\n\nLogSeverityDot.displayName = 'LogSeverityDot';\n","import type { ToolType } from './tool.types';\n\nexport type LogSeverity = 'DEBUG' | 'INFO' | 'WARNING' | 'ERROR' | 'CRITICAL';\n\nexport interface LogEntry {\n  id: string;\n  ingestDay: string;\n  eventType: string;\n  severity: LogSeverity;\n  title: string;\n  timestamp: string | Date;\n  toolType?: ToolType;\n  toolIcon?: string;\n  message?: string;\n  metadata?: Record<string, unknown>;\n}\n\nexport interface LogsListProps {\n  logs: LogEntry[];\n  maxHeight?: string | number;\n  showConnector?: boolean;\n  onLogClick?: (log: LogEntry) => void;\n  loading?: boolean;\n  emptyMessage?: string;\n  className?: string;\n}\n\nexport interface LogSeverityDotProps {\n  severity: LogSeverity;\n  size?: 'sm' | 'md' | 'lg';\n  className?: string;\n}\n\nexport const LOG_SEVERITY_COLORS: Record<LogSeverity, string> = {\n  DEBUG: '#888888',\n  INFO: '#888888',\n  WARNING: '#e1b32f',\n  ERROR: '#f36666',\n  CRITICAL: '#b43b3b',\n};\n\nexport const LOG_SEVERITY_LABELS: Record<LogSeverity, string> = {\n  DEBUG: 'Debug',\n  INFO: 'Info',\n  WARNING: 'Warning',\n  ERROR: 'Error',\n  CRITICAL: 'Critical',\n};\n","// Assets exports\n// Font files and other static assets\n// Platform utilities will be available when needed\n\nexport const assets = {} as const;\nexport * from './fae-avatar';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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","names":["forwardRef","jsx","forwardRef"]}

package/package.json

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

package/src/components/features/auth/account-details-fields.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import type { KeyboardEvent } from 'react';
+import { useDeferredError } from '../../../hooks/ui/use-deferred-error';
+import { Input } from '../../ui/input';
+import { PasswordInput } from '../../ui/password-input';
+
+export interface AccountDetailsFieldsProps {
+  firstName: string;
+  lastName: string;
+  password: string;
+  confirmPassword: string;
+  onFirstNameChange: (value: string) => void;
+  onLastNameChange: (value: string) => void;
+  onPasswordChange: (value: string) => void;
+  onConfirmPasswordChange: (value: string) => void;
+  errors?: {
+    firstName?: string;
+    lastName?: string;
+    password?: string;
+    confirmPassword?: string;
+  };
+  disabled?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+  /**
+   * `paired` puts the two names on one row and the two passwords on another; `stacked` gives each
+   * field its own row. Paired is unconditional, with no breakpoint — the approved design pairs
+   * them at ~514px and Tailwind's `sm` is 640px, which would stack them on every phone.
+   */
+  layout?: 'stacked' | 'paired';
+}
+
+/**
+ * The name-and-password block every account-creating form collects.
+ *
+ * Shared so the four fields cannot drift apart across the forms that render them — they already
+ * had, with one copy wiring `useDeferredError` for blur and another not, so the same field
+ * surfaced its error at a different moment depending on which screen you reached it from.
+ */
+export function AccountDetailsFields({
+  firstName,
+  lastName,
+  password,
+  confirmPassword,
+  onFirstNameChange,
+  onLastNameChange,
+  onPasswordChange,
+  onConfirmPasswordChange,
+  errors,
+  disabled = false,
+  onKeyDown,
+  layout = 'stacked',
+}: AccountDetailsFieldsProps) {
+  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 names = [
+    <Input
+      key="firstName"
+      label="First Name"
+      placeholder="Enter First Name"
+      value={firstName}
+      error={firstNameErr.error}
+      disabled={disabled}
+      onBlur={firstNameErr.onBlur}
+      onChange={event => onFirstNameChange(event.target.value)}
+      onKeyDown={onKeyDown}
+    />,
+    <Input
+      key="lastName"
+      label="Last Name"
+      placeholder="Enter Last Name"
+      value={lastName}
+      error={lastNameErr.error}
+      disabled={disabled}
+      onBlur={lastNameErr.onBlur}
+      onChange={event => onLastNameChange(event.target.value)}
+      onKeyDown={onKeyDown}
+    />,
+  ];
+
+  const passwords = [
+    <PasswordInput
+      key="password"
+      label="Password"
+      placeholder="Enter Password"
+      value={password}
+      error={passwordErr.error}
+      disabled={disabled}
+      onBlur={passwordErr.onBlur}
+      onChange={event => onPasswordChange(event.target.value)}
+      onKeyDown={onKeyDown}
+    />,
+    <PasswordInput
+      key="confirmPassword"
+      label="Confirm Password"
+      placeholder="Confirm Password"
+      value={confirmPassword}
+      error={confirmErr.error}
+      disabled={disabled}
+      onBlur={confirmErr.onBlur}
+      onChange={event => onConfirmPasswordChange(event.target.value)}
+      onKeyDown={onKeyDown}
+    />,
+  ];
+
+  if (layout === 'stacked') {
+    return (
+      <>
+        {names}
+        {passwords}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-[var(--spacing-system-l)]">{names}</div>
+      <div className="grid grid-cols-2 gap-[var(--spacing-system-l)]">{passwords}</div>
+    </>
+  );
+}

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

@@ -1,11 +1,10 @@
 'use client';
 
 import type { KeyboardEvent, ReactNode } from 'react';
-import { useDeferredError } from '../../../hooks/ui/use-deferred-error';
 import { cn } from '../../../utils/cn';
 import { Button } from '../../ui/button';
-import { Input } from '../../ui/input';
-import { PasswordInput } from '../../ui/password-input';
+import { AccountDetailsFields } from './account-details-fields';
+import { LabeledDivider } from './labeled-divider';
 import type { AuthSsoProvider } from './sso-providers';
 import { SsoProviderButtons } from './sso-providers';
 
@@ -79,12 +78,6 @@ 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: KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
       onSubmit();
@@ -113,53 +106,21 @@ export function CompleteAccountForm({
             actionLabel={ssoActionLabel}
             disabled={fieldsDisabled}
           />
-          <div className="flex items-center gap-[var(--spacing-system-s)]">
-            <div className="h-px flex-1 bg-ods-border" />
-            <span className="text-ods-text-secondary text-h6">{dividerLabel}</span>
-            <div className="h-px flex-1 bg-ods-border" />
-          </div>
+          <LabeledDivider label={dividerLabel} />
         </>
       )}
 
-      {/* 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}
+      <AccountDetailsFields
+        firstName={firstName}
+        lastName={lastName}
+        password={password}
+        confirmPassword={confirmPassword}
+        onFirstNameChange={onFirstNameChange}
+        onLastNameChange={onLastNameChange}
+        onPasswordChange={onPasswordChange}
+        onConfirmPasswordChange={onConfirmPasswordChange}
+        errors={errors}
         disabled={fieldsDisabled}
-        onBlur={confirmErr.onBlur}
-        onChange={event => onConfirmPasswordChange(event.target.value)}
         onKeyDown={handleKeyDown}
       />
 

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

@@ -6,29 +6,65 @@ import { cn } from '../../../utils/cn';
 import { Button } from '../../ui/button';
 import { CheckboxBlock } from '../../ui/checkbox-block';
 import { Input } from '../../ui/input';
+import { AccountDetailsFields } from './account-details-fields';
+import { LabeledDivider } from './labeled-divider';
 import type { AuthSsoProvider } from './sso-providers';
 import { SsoProviderButtons } from './sso-providers';
 import { TermsAgreementLabel } from './terms-agreement-label';
 
 export interface CreateOrganizationFormProps {
-  /** Controlled field values */
-  email: string;
+  /**
+   * Controlled field values. Omit `email` entirely for flows that neither collect nor show an
+   * address — the native Apple signup, where the provider asserted it and may only have handed the
+   * app a relay alias the user has never seen. Pass it with `emailReadOnly` to show it uneditable.
+   */
+  email?: string;
   organizationName: string;
   domain: string;
   agreedToTerms: boolean;
-  /** Change handlers */
-  onEmailChange: (value: string) => void;
+  // Change handlers
+  /** Omit together with `email` when the form collects no address. */
+  onEmailChange?: (value: string) => void;
   onOrganizationNameChange: (value: string) => void;
   onDomainChange: (value: string) => void;
   onAgreedToTermsChange: (checked: boolean) => void;
   /** Primary submit ("Continue") */
   onSubmit: () => void;
+  /**
+   * Personal details and credentials, collected on the same screen as the organization. Supply the
+   * four handlers to render them; omit them and the form stays organization-only (the SSO paths,
+   * where the provider is the credential and there is no password to set).
+   */
+  firstName?: string;
+  lastName?: string;
+  password?: string;
+  confirmPassword?: string;
+  onFirstNameChange?: (value: string) => void;
+  onLastNameChange?: (value: string) => void;
+  onPasswordChange?: (value: string) => void;
+  onConfirmPasswordChange?: (value: string) => void;
+  /**
+   * Renders the email as a read-only field instead of an input, for flows where the address was
+   * fixed by an earlier step and this form cannot change it — a signup that collected it on a
+   * previous step, or an SSO login where the provider asserted it and the server reads it from the
+   * session. `onEmailChange` is not called in this mode.
+   */
+  emailReadOnly?: boolean;
+  /** Label above the read-only email, e.g. "Signed in with Google". Ignored unless `emailReadOnly`. */
+  emailReadOnlyLabel?: string;
+  /** Overrides the default heading. */
+  title?: string;
+  /** Overrides the default sub-heading. */
+  subtitle?: ReactNode;
   /** Suffix rendered inside the domain input, e.g. ".openframe.ai" */
   domainSuffix?: string;
   domainPlaceholder?: string;
   termsUrl?: string;
   privacyPolicyUrl?: string;
   submitLabel?: string;
+  /** Renders a back action beside the submit when supplied (e.g. to return to an earlier step). */
+  onBack?: () => void;
+  backLabel?: string;
   /** Disables just the primary submit (fields stay editable). */
   submitDisabled?: boolean;
   loading?: boolean;
@@ -38,6 +74,10 @@ export interface CreateOrganizationFormProps {
     organizationName?: string;
     domain?: string;
     terms?: string;
+    firstName?: string;
+    lastName?: string;
+    password?: string;
+    confirmPassword?: string;
   };
   /** Informational status under the email field (e.g. live availability). `errors.email` wins. */
   emailStatus?: { message: string; variant: 'error' | 'warning' | 'success' | 'muted' };
@@ -54,7 +94,7 @@ export interface CreateOrganizationFormProps {
   onSsoClick?: (provider: AuthSsoProvider) => void;
   /** Disables the provider buttons (e.g. until the form validates). */
   ssoDisabled?: boolean;
-  /** Verb prefix for provider buttons, e.g. "Continue with". Ignored for "openframe". */
+  /** Verb prefix for provider buttons, e.g. "Continue with". */
   ssoActionLabel?: string;
   /** Divider text between the primary submit and the SSO buttons. */
   dividerLabel?: string;
@@ -76,11 +116,25 @@ export function CreateOrganizationForm({
   onDomainChange,
   onAgreedToTermsChange,
   onSubmit,
+  firstName = '',
+  lastName = '',
+  password = '',
+  confirmPassword = '',
+  onFirstNameChange,
+  onLastNameChange,
+  onPasswordChange,
+  onConfirmPasswordChange,
+  emailReadOnly = false,
+  emailReadOnlyLabel = 'Email',
+  title = 'Create Organization',
+  subtitle = 'Start your journey with OpenFrame.',
   domainSuffix,
   domainPlaceholder = 'company-name',
   termsUrl = '#',
   privacyPolicyUrl = '#',
   submitLabel = 'Continue',
+  onBack,
+  backLabel = 'Back',
   submitDisabled = false,
   loading = false,
   disabled = false,
@@ -99,12 +153,14 @@ export function CreateOrganizationForm({
   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 emailErr = useDeferredError(errors?.email, email ?? '');
   const orgNameErr = useDeferredError(errors?.organizationName, organizationName);
   const domainErr = useDeferredError(errors?.domain, domain);
-
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter' && !fieldsDisabled) {
+    // `submitDisabled` too, not just `fieldsDisabled`: Enter must be the same gate as the button.
+    // The fields stay editable while the form is incomplete, so checking only `fieldsDisabled`
+    // let Enter submit a form the button was still refusing.
+    if (event.key === 'Enter' && !fieldsDisabled && !submitDisabled) {
       onSubmit();
     }
   };
@@ -118,23 +174,27 @@ export function CreateOrganizationForm({
     >
       {/* Header */}
       <div className="flex flex-col">
-        <h1 className="tracking-[-0.64px] text-ods-text-primary text-h2">Create Organization</h1>
-        <p className="text-ods-text-secondary text-h4">Start your journey with OpenFrame.</p>
+        <h1 className="tracking-[-0.64px] text-ods-text-primary text-h2">{title}</h1>
+        <p className="text-ods-text-secondary text-h4">{subtitle}</p>
       </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}
-      />
+      {email === undefined ? null : emailReadOnly ? (
+        <Input type="email" label={emailReadOnlyLabel} value={email} readOnly disabled />
+      ) : (
+        <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"
@@ -163,6 +223,25 @@ export function CreateOrganizationForm({
         {domainSlot && <div className="pt-[var(--spacing-system-s)]">{domainSlot}</div>}
       </div>
 
+      {/* All four handlers or none: the account block is one decision, and checking them here
+          rather than through a derived boolean is what lets TypeScript narrow them. */}
+      {onFirstNameChange && onLastNameChange && onPasswordChange && onConfirmPasswordChange && (
+        <AccountDetailsFields
+          layout="paired"
+          firstName={firstName}
+          lastName={lastName}
+          password={password}
+          confirmPassword={confirmPassword}
+          onFirstNameChange={onFirstNameChange}
+          onLastNameChange={onLastNameChange}
+          onPasswordChange={onPasswordChange}
+          onConfirmPasswordChange={onConfirmPasswordChange}
+          errors={errors}
+          disabled={fieldsDisabled}
+          onKeyDown={handleKeyDown}
+        />
+      )}
+
       {/* Terms & Privacy — deliberately NOT `truncateLabel`. That prop suits a
           one-line value; this label is a sentence carrying the Terms and Privacy
           Policy links, and ellipsizing it clipped the row to "Agree to Terms &
@@ -178,26 +257,37 @@ export function CreateOrganizationForm({
         onCheckedChange={onAgreedToTermsChange}
       />
 
-      {/* Actions */}
-      <Button
-        type="button"
-        variant="accent"
-        fullWidth
-        loading={loading}
-        disabled={disabled || submitDisabled}
-        onClick={onSubmit}
-      >
-        {submitLabel}
-      </Button>
+      {/* Actions — optional back + submit */}
+      <div className="flex items-center gap-[var(--spacing-system-l)]">
+        {onBack && (
+          <Button
+            type="button"
+            variant="transparent"
+            fullWidth
+            className="flex-1"
+            disabled={fieldsDisabled}
+            onClick={onBack}
+          >
+            {backLabel}
+          </Button>
+        )}
+        <Button
+          type="button"
+          variant="accent"
+          fullWidth
+          className="flex-1"
+          loading={loading}
+          disabled={disabled || submitDisabled}
+          onClick={onSubmit}
+        >
+          {submitLabel}
+        </Button>
+      </div>
 
       {/* SSO registration alternatives */}
       {hasSso && (
         <>
-          <div className="flex items-center gap-[var(--spacing-system-s)]">
-            <div className="h-px flex-1 bg-ods-border" />
-            <span className="text-ods-text-secondary text-h6">{dividerLabel}</span>
-            <div className="h-px flex-1 bg-ods-border" />
-          </div>
+          <LabeledDivider label={dividerLabel} />
           <SsoProviderButtons
             providers={ssoProviders}
             onSsoClick={onSsoClick}

package/src/components/features/auth/index.ts

@@ -1,3 +1,4 @@
+export * from './account-details-fields';
 export * from './auth-benefits-panel';
 export * from './auth-branding';
 export * from './auth-shell';
@@ -5,6 +6,7 @@ export * from './back-to-login-link';
 export * from './complete-account-form';
 export * from './create-organization-form';
 export * from './invite-link-invalid-modal';
+export * from './labeled-divider';
 export * from './login-form';
 export * from './openframe-sso-login-form';
 export * from './openframe-sso-signup-form';

package/src/components/features/auth/labeled-divider.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+export interface LabeledDividerProps {
+  label: string;
+}
+
+/** A horizontal rule with a centred label. */
+export function LabeledDivider({ label }: LabeledDividerProps) {
+  return (
+    <div className="flex items-center gap-[var(--spacing-system-s)]">
+      <div className="h-px flex-1 bg-ods-border" />
+      <span className="text-ods-text-secondary text-h6">{label}</span>
+      <div className="h-px flex-1 bg-ods-border" />
+    </div>
+  );
+}