@flamingo-stack/openframe-frontend-core 0.0.584 → 0.0.585-snapshot.20260903083645

package/dist/utils/media-type.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Media type — THE single source of truth for the `media_type` discriminator
+ * on media rows (ai_media, program media, vendor media). Zero imports (a leaf),
+ * so every consumer reads the same predicate instead of scattering
+ * `=== 'video'` literals. `MediaType` (types/marketing.ts) is the row union;
+ * these are the two values a post can publish.
+ */
+export declare const MEDIA_TYPE: {
+    readonly IMAGE: "image";
+    readonly VIDEO: "video";
+};
+/** The two media types a post can publish. */
+export type PublishableMediaType = (typeof MEDIA_TYPE)[keyof typeof MEDIA_TYPE];
+interface MediaTyped {
+    media_type?: string | null;
+}
+export declare function isVideoMedia(media: MediaTyped | null | undefined): boolean;
+export declare function isImageMedia(media: MediaTyped | null | undefined): boolean;
+export declare function isPublishableMediaType(mediaType: string | null | undefined): mediaType is PublishableMediaType;
+/** Split a media list into its videos and images, preserving order. */
+export declare function partitionMediaByType<T extends MediaTyped>(media: readonly T[]): {
+    videos: T[];
+    images: T[];
+};
+export {};
+//# sourceMappingURL=media-type.d.ts.map

package/dist/utils/media-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-type.d.ts","sourceRoot":"","sources":["../../src/utils/media-type.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX,8CAA8C;AAC9C,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,OAAO,UAAU,CAAC,CAAC;AAEhF,UAAU,UAAU;IAClB,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAE1E;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,CAE1E;AAED,wBAAgB,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,IAAI,oBAAoB,CAE9G;AAED,uEAAuE;AACvE,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,EAAE,GAAG;IAAE,MAAM,EAAE,CAAC,EAAE,CAAC;IAAC,MAAM,EAAE,CAAC,EAAE,CAAA;CAAE,CAK5G"}

package/package.json

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

package/src/components/chat/entity-cards/program-card.tsx

@@ -26,6 +26,7 @@ import { useState } from 'react';
 import Image from '../../../embed-shims/next-image';
 import { cn } from '../../../utils/cn';
 import { formatDurationCompact, formatTimeWithTimezone, formatDurationFromRange } from '../../../utils/format';
+import { isImageMedia } from '../../../utils/media-type';
 import { Button } from '../../ui/button/button';
 import { ImageGalleryModal } from '../../ui/image-gallery-modal';
 import { SquareAvatar } from '../../ui/square-avatar';
@@ -51,7 +52,6 @@ import {
 import { EntityPortraitCard } from './entity-portrait-card';
 import { useEntityCardLink } from './use-entity-card-link';
 import { useEntityCardPlaceholder } from './use-entity-card-placeholder';
-
 type CardSize = 'default' | 'sm' | 'portrait';
 
 /**
@@ -273,7 +273,7 @@ export function ProgramCard<T extends BaseProgramItem>({
     aspect: size === 'sm' ? 'square' : 'wide',
   });
   const coverImage = item.cover_url;
-  const images = media.filter(m => m.media_type === 'image');
+  const images = media.filter(m => isImageMedia(m));
   const hosts = getHosts(item.hosts);
   const accentColor = 'var(--color-accent-primary)';
   // `status` / `duration_seconds` / `location_name` / `start_at` … live on the

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>
+  );
+}