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

package/src/components/icons/play-filled-icon.tsx

@@ -0,0 +1,36 @@
+import type { SVGProps } from "react";
+
+export interface PlayFilledIconProps
+  extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
+  className?: string;
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Solid play triangle — the SAME glyph media-chrome/MuxPlayer renders in its
+ * native center play button, so custom video affordances (strip cards,
+ * facades, carousels) stay pixel-consistent with real player chrome.
+ * Hand-maintained (not in the Figma-generated set, which has only the
+ * outline `PlayIcon`).
+ */
+export function PlayFilledIcon({
+  className = "",
+  size = 24,
+  color = "currentColor",
+  ...props
+}: PlayFilledIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      className={className}
+      {...props}
+    >
+      <path fill={color} d="m6 21 15-9L6 3v18Z" />
+    </svg>
+  );
+}

package/src/components/icons/volume-off-filled-icon.tsx

@@ -0,0 +1,38 @@
+import type { SVGProps } from "react";
+
+export interface VolumeOffFilledIconProps
+  extends Omit<SVGProps<SVGSVGElement>, "width" | "height"> {
+  className?: string;
+  size?: number;
+  color?: string;
+}
+
+/**
+ * Solid muted-volume glyph (speaker + slash) — the filled companion to
+ * `PlayFilledIcon`, matching media-chrome's icon family so video unmute
+ * affordances read identically to real player chrome. Hand-maintained (the
+ * Figma-generated set has only outline volume icons).
+ */
+export function VolumeOffFilledIcon({
+  className = "",
+  size = 24,
+  color = "currentColor",
+  ...props
+}: VolumeOffFilledIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      fill="none"
+      viewBox="0 0 24 24"
+      className={className}
+      {...props}
+    >
+      <path
+        fill={color}
+        d="M16.5 12A4.5 4.5 0 0 0 14 7.97v2.21l2.45 2.45c.03-.2.05-.41.05-.63Zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71ZM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3ZM12 4 9.91 6.09 12 8.18V4Z"
+      />
+    </svg>
+  );
+}

package/src/components/media-carousel.tsx

@@ -4,7 +4,7 @@ import { useState, useRef, useEffect, memo, useCallback } from 'react';
 import { cn } from "../utils/cn";
 import { MediaItem } from '../utils/media-carousel-utils-stub';
 import { Video, extractYouTubeId } from './features/video';
-import { PlayIcon } from './icons-v2-generated/media-playback/play-icon';
+import { VideoPlayBadge } from './features/video-center-badge';
 
 // Navigation icons
 const ChevronLeftIcon = () => (
@@ -215,9 +215,7 @@ export const MediaCarousel = memo(function MediaCarousel({
         {/* Play icon overlay for videos */}
         {(item.type === 'video' || item.type === 'youtube') && (
           <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-            <div className="bg-black/70 rounded-full p-1">
-              <PlayIcon size={12} color="white" />
-            </div>
+            <VideoPlayBadge size="sm" />
           </div>
         )}
         

package/src/components/ui/crossfade-panels.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+/**
+ * <CrossfadePanels> — THE keep-mounted tab-panel stack: every panel stays in
+ * the DOM, stacked in the SAME grid cell, and switching is an opacity
+ * crossfade. Use it under any tab control (TabNavigation, TabSelector, …)
+ * whenever panels are content surfaces where height stability and a soft
+ * switch matter (strips, media rails, dashboards-in-view).
+ *
+ * Invariants encoded HERE exactly once (so no consumer re-derives them):
+ * - HEIGHT LOCK: grid items in one cell size the row to max(panel heights) —
+ *   switching never shifts the page (no CLS), and surrounding layout treats
+ *   the stack as one constant-height block.
+ * - FADE-THEN-HIDE: `visibility` transitions alongside `opacity`; per the CSS
+ *   transitions spec's special visibility interpolation the outgoing panel
+ *   stays paintable until the fade completes, THEN becomes `hidden` — no
+ *   pop-out, and the settled hidden panel is fully removed from paint.
+ * - DEAD WHILE HIDDEN: `inert` + `aria-hidden` + `pointer-events-none` on
+ *   inactive panels — no tab-stops, no screen-reader content, no hover/click
+ *   leaks from the invisible layer (WCAG aria-hidden-focus).
+ * - MOTION RESPECT: `prefers-reduced-motion` collapses the fade to an
+ *   instant swap.
+ * - The ACTIVE panel takes `z-[1]` so the incoming layer composites on top
+ *   during the crossfade regardless of DOM order.
+ *
+ * This deliberately complements (not replaces) <TabContent>, which MOUNTS one
+ * panel at a time — right for heavy admin surfaces that should unmount when
+ * hidden. CrossfadePanels is for surfaces whose panels are cheap enough to
+ * keep alive and whose switch must be seamless.
+ *
+ * NOTE for marquee/animated panel content: hidden panels stay mounted and
+ * their animations keep running unless the content self-pauses. CardsStrip
+ * panels are fine (its rAF gates on near-viewport + visibility), but a
+ * consumer embedding heavier always-on content should pause it via its own
+ * visibility signal.
+ */
+
+import React from 'react'
+import { cn } from '../../utils/cn'
+
+export interface CrossfadePanel {
+  id: string
+  content: React.ReactNode
+}
+
+export interface CrossfadePanelsProps {
+  /** Which panel is shown. Unknown id → all panels hidden (renders the
+   *  stack's reserved height, nothing visible). */
+  activeId: string | undefined
+  panels: ReadonlyArray<CrossfadePanel>
+  /** Crossfade duration in ms. Default 300. */
+  durationMs?: number
+  className?: string
+  /** Extra classes for every panel wrapper (e.g. `min-w-0` is built in). */
+  panelClassName?: string
+}
+
+export function CrossfadePanels({
+  activeId,
+  panels,
+  durationMs = 300,
+  className,
+  panelClassName,
+}: CrossfadePanelsProps) {
+  if (panels.length === 0) return null
+  return (
+    <div className={cn('grid w-full', className)}>
+      {panels.map(p => {
+        const active = p.id === activeId
+        return (
+          <div
+            key={p.id}
+            className={cn(
+              'col-start-1 row-start-1 min-w-0 transition-[opacity,visibility] ease-out motion-reduce:transition-none',
+              active ? 'visible opacity-100 z-[1]' : 'invisible opacity-0 pointer-events-none',
+              panelClassName,
+            )}
+            style={{ transitionDuration: `${durationMs}ms` }}
+            aria-hidden={!active || undefined}
+            inert={!active || undefined}
+          >
+            {p.content}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

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/components/ui/index.ts

@@ -47,6 +47,7 @@ export * from './breadcrumb'
 export * from './dropdown-menu'
 export * from './menubar'
 export * from './navigation-menu'
+export * from './crossfade-panels'
 export * from './tab-content'
 export * from './tab-navigation'
 // Feedback components

package/src/components/ui/tab-navigation.tsx

@@ -7,7 +7,8 @@ import { cn } from '../../utils/cn'
 export interface TabItem {
   id: string
   label: string
-  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+  /** Optional — text-only tabs (e.g. the homepage content-strip switcher) omit it. */
+  icon?: React.ComponentType<React.SVGProps<SVGSVGElement>>
   component?: React.ComponentType<any>
   indicator?: 'success' | 'warning' | 'error'
 }
@@ -29,6 +30,9 @@ interface TabNavigationProps {
   showRightGradient?: boolean
   /** Force the left-edge gradient to always render, independent of scroll state. */
   showLeftGradient?: boolean
+  /** Tabs grow to share the bar's full width equally (Figma segmented-underline
+   *  look, e.g. the 480px homepage strip switcher). Default: natural width. */
+  stretchTabs?: boolean
 
   // URL sync mode
   urlSync?: boolean | TabNavigationUrlSyncOptions
@@ -46,6 +50,7 @@ export function TabNavigation({
   shadowClassName,
   showRightGradient = false,
   showLeftGradient = false,
+  stretchTabs = false,
   urlSync = false,
   defaultTab,
   children
@@ -222,24 +227,36 @@ export function TabNavigation({
                 className={cn(
                   "flex gap-[var(--spacing-system-xxs)] items-center justify-center p-[var(--spacing-system-m)] relative shrink-0 cursor-pointer",
                   "transition-all duration-200 bg-transparent border-none outline-none",
+                  stretchTabs && 'flex-1',
                   isActive
                     ? 'bg-gradient-to-b from-[rgba(255,255,255,0)] to-[rgba(255,255,255,0.1)]'
                     : 'hover:bg-gradient-to-b hover:from-[rgba(255,255,255,0)] hover:to-[rgba(255,255,255,0.1)]'
                 )}
               >
-                <div className="relative flex items-center justify-center">
-                  <tab.icon
-                    className={cn("h-4 w-4 md:h-6 md:w-6 transition-colors", isActive ? 'text-ods-accent' : 'text-ods-text-secondary')}
-                  />
-                  {tab.indicator && (
-                    <div className={cn(
-                      "absolute right-0 top-[-3px] w-3 h-3 rounded-full border-2 border-ods-bg",
-                      tab.indicator === 'error' && 'bg-ods-error',
-                      tab.indicator === 'warning' && 'bg-ods-accent',
-                      tab.indicator === 'success' && 'bg-green-500'
-                    )} />
-                  )}
-                </div>
+                {tab.icon ? (
+                  <div className="relative flex items-center justify-center">
+                    <tab.icon
+                      className={cn("h-4 w-4 md:h-6 md:w-6 transition-colors", isActive ? 'text-ods-accent' : 'text-ods-text-secondary')}
+                    />
+                    {tab.indicator && (
+                      <div className={cn(
+                        "absolute right-0 top-[-3px] w-3 h-3 rounded-full border-2 border-ods-bg",
+                        tab.indicator === 'error' && 'bg-ods-error',
+                        tab.indicator === 'warning' && 'bg-ods-accent',
+                        tab.indicator === 'success' && 'bg-green-500'
+                      )} />
+                    )}
+                  </div>
+                ) : tab.indicator ? (
+                  // Text-only tabs keep their status badge — inline dot before
+                  // the label (there's no icon corner to anchor to).
+                  <div className={cn(
+                    "w-3 h-3 shrink-0 rounded-full border-2 border-ods-bg",
+                    tab.indicator === 'error' && 'bg-ods-error',
+                    tab.indicator === 'warning' && 'bg-ods-accent',
+                    tab.indicator === 'success' && 'bg-green-500'
+                  )} />
+                ) : null}
 
                 <span className={cn(
                   "text-h4 whitespace-nowrap transition-colors",

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="ϕ"
+          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,25 @@ 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. */

package/src/styles/app-globals.css

@@ -182,3 +182,26 @@ body {
     --ring: 180 100% 69%;
     --radius: 0.5rem;
   }
+
+/* ============================================================================
+   Video center-control identity — ONE look across every video surface:
+   a bare solid-white glyph, NO background disc (see
+   components/features/video-center-badge.tsx for the React consumers).
+   This strips media-chrome's default dark circle off MuxPlayer's big
+   center pre-play button so full players match the strip/facade glyphs.
+   ========================================================================== */
+/* REAL players (any mounted MuxPlayer): icons are white at rest and turn
+   the platform ACCENT color while the icon's control is hovered — every
+   media-chrome control carries the `button` part token, so this covers
+   center play, bar play/mute/fullscreen/etc. uniformly. */
+mux-player::part(button):hover {
+  --media-icon-color: var(--ods-accent, var(--color-accent-primary));
+}
+mux-player::part(center play button) {
+  background: transparent;
+  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.5));
+}
+mux-player::part(center play button):hover {
+  background: transparent;
+  opacity: 0.85;
+}