@flamingo-stack/openframe-frontend-core 0.0.741 → 0.0.743

package/src/components/ui/radio-group.tsx

@@ -47,6 +47,12 @@ interface RadioGroupBlockOption {
   disabled?: boolean;
   /** Optional trailing slot rendered at the end of the row (e.g. a discount tag) */
   trailing?: ReactNode;
+  /**
+   * Optional content under the option's row, inside the option and across its
+   * full width (e.g. the fields the option needs on a narrow screen). Rendered
+   * as given, with no wrapper, so a footer hidden at some widths leaves no gap.
+   */
+  footer?: ReactNode;
 }
 
 interface RadioGroupBlockProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, 'children'> {
@@ -99,42 +105,9 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
             const itemId = `${props.name ?? 'radio-block'}-${option.value}`;
             const isDisabled = disabled || option.disabled;
             const isLast = index === options.length - 1;
-            return (
-              <label
-                key={option.value}
-                htmlFor={itemId}
-                aria-disabled={isDisabled || undefined}
-                className={cn(
-                  'flex w-full items-center gap-3',
-                  isHorizontal && 'min-w-0 flex-1',
-                  'transition-colors duration-200',
-                  isDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
-                  // Hover / active move the BACKGROUND only, like Input and
-                  // CheckboxBlock — the border stays put so an unselected row
-                  // never flashes "selected" under the cursor.
-                  !isDisabled && 'hover:bg-ods-bg-hover active:bg-ods-bg-active',
-                  isGrouped
-                    ? cn(
-                        'bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs,8px)]',
-                        !isLast && (isHorizontal ? 'border-r' : 'border-b'),
-                        error ? 'border-ods-error' : 'border-ods-border',
-                      )
-                    : cn(
-                        'rounded-[6px] border bg-ods-card p-[var(--spacing-system-sf)]',
-                        !isDisabled &&
-                          'has-[[data-state=checked]]:bg-[var(--ods-system-greys-soft-grey)]/30 has-[[data-state=checked]]:border-ods-accent/40',
-                        error ? 'border-ods-error' : 'border-ods-border',
-                      ),
-                  // Disabled matches a disabled field: flat `ods-bg` fill and
-                  // greyed text, not a fade of the whole row. The greying lives
-                  // on the TEXT COLUMN below, not here: as a descendant rule on
-                  // the row it also repainted whatever `trailing` renders — a
-                  // `Tag`'s label is a span too, and it went invisible against
-                  // its own fill.
-                  isDisabled && 'bg-ods-bg',
-                  itemClassName,
-                )}
-              >
+            const hasFooter = option.footer != null;
+            const row = (
+              <>
                 <RadioGroupPrimitive.Item
                   id={itemId}
                   value={option.value}
@@ -186,6 +159,48 @@ const RadioGroupBlock = forwardRef<ComponentRef<typeof RadioGroupPrimitive.Root>
                   )}
                 </div>
                 {option.trailing && <div className="ml-auto flex shrink-0 items-center">{option.trailing}</div>}
+              </>
+            );
+            return (
+              <label
+                key={option.value}
+                htmlFor={itemId}
+                aria-disabled={isDisabled || undefined}
+                className={cn(
+                  'flex w-full items-center gap-3',
+                  isHorizontal && 'min-w-0 flex-1',
+                  'transition-colors duration-200',
+                  isDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
+                  // Hover / active move the BACKGROUND only, like Input and
+                  // CheckboxBlock — the border stays put so an unselected row
+                  // never flashes "selected" under the cursor.
+                  !isDisabled && 'hover:bg-ods-bg-hover active:bg-ods-bg-active',
+                  isGrouped
+                    ? cn(
+                        'bg-ods-card px-[var(--spacing-system-sf)] py-[var(--spacing-system-xs,8px)]',
+                        !isLast && (isHorizontal ? 'border-r' : 'border-b'),
+                        error ? 'border-ods-error' : 'border-ods-border',
+                      )
+                    : cn(
+                        'rounded-[6px] border bg-ods-card p-[var(--spacing-system-sf)]',
+                        !isDisabled &&
+                          'has-[[data-state=checked]]:bg-[var(--ods-system-greys-soft-grey)]/30 has-[[data-state=checked]]:border-ods-accent/40',
+                        error ? 'border-ods-error' : 'border-ods-border',
+                      ),
+                  // Disabled matches a disabled field: flat `ods-bg` fill and
+                  // greyed text, not a fade of the whole row. The greying lives
+                  // on the TEXT COLUMN below, not here: as a descendant rule on
+                  // the row it also repainted whatever `trailing` renders — a
+                  // `Tag`'s label is a span too, and it went invisible against
+                  // its own fill.
+                  isDisabled && 'bg-ods-bg',
+                  // With a footer the option stacks: its row, then the footer.
+                  hasFooter && 'flex-col items-stretch gap-[var(--spacing-system-sf)]',
+                  itemClassName,
+                )}
+              >
+                {hasFooter ? <div className="flex w-full items-center gap-[var(--spacing-system-sf)]">{row}</div> : row}
+                {option.footer}
               </label>
             );
           })}

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

@@ -2,6 +2,8 @@
 
 import type React from 'react';
 import {
+  createContext,
+  useContext,
   useState,
   useEffect,
   useLayoutEffect,
@@ -71,6 +73,31 @@ export interface TabItem {
   accent?: string;
 }
 
+/**
+ * How a strip marks its tabs.
+ *
+ * - `default`: the tabs touch, and the open tab is marked by the underline alone.
+ * - `admin`: the product admin's tab bar. A gap between tabs, and the open and the
+ *   hovered tab carry an accent fade above the underline.
+ */
+export type TabNavigationVariant = 'default' | 'admin';
+
+const TabNavigationVariantContext = createContext<TabNavigationVariant>('default');
+
+/**
+ * Sets the variant of every `TabNavigation` below it that does not pass its own
+ * `variant`. An app whose tab bars all share one look mounts it once in its layout.
+ */
+export function TabNavigationVariantProvider({
+  variant,
+  children,
+}: {
+  variant: TabNavigationVariant;
+  children: React.ReactNode;
+}) {
+  return <TabNavigationVariantContext.Provider value={variant}>{children}</TabNavigationVariantContext.Provider>;
+}
+
 export interface TabNavigationUrlSyncOptions {
   paramName?: string; // Default: 'tab'
   replaceState?: boolean; // Default: true (use replace instead of push)
@@ -99,6 +126,8 @@ interface TabNavigationProps {
   tabAlign?: 'center' | 'start';
   /** How long the underline takes to reach a new `TabItem.progress` value. Default 200. */
   progressTransitionMs?: number;
+  /** How the strip marks its tabs. Omitted: the nearest `TabNavigationVariantProvider`'s, else `default`. */
+  variant?: TabNavigationVariant;
 
   // URL sync mode
   urlSync?: boolean | TabNavigationUrlSyncOptions;
@@ -145,6 +174,7 @@ interface TabBarProps {
   stretchTabs: boolean;
   tabAlign: 'center' | 'start';
   progressTransitionMs: number;
+  variant: TabNavigationVariant;
 }
 
 /**
@@ -170,7 +200,9 @@ const TabBar = memo(function TabBarImpl({
   stretchTabs,
   tabAlign,
   progressTransitionMs,
+  variant,
 }: TabBarProps) {
+  const isAdmin = variant === 'admin';
   const scrollRef = useRef<HTMLDivElement>(null);
   const activeTabRef = useRef<HTMLButtonElement>(null);
   const isFirstActiveScrollRef = useRef(true);
@@ -396,7 +428,10 @@ const TabBar = memo(function TabBarImpl({
           `relative` makes this the offsetParent the underline is measured against. */}
       <div
         ref={scrollRef}
-        className="scrollbar-hide relative flex h-full items-center justify-start overflow-x-auto overflow-y-hidden"
+        className={cn(
+          'scrollbar-hide relative flex h-full items-center justify-start overflow-x-auto overflow-y-hidden',
+          isAdmin && 'gap-[var(--spacing-system-xxs)]',
+        )}
       >
         {tabs.map(tab => {
           const isActive = activeTab === tab.id;
@@ -417,11 +452,19 @@ const TabBar = memo(function TabBarImpl({
                 // `outline-none` above drops the browser's own focus ring, so
                 // put one back or the strip is un-navigable by keyboard — you
                 // can tab through it with nothing to show where you are. Inset,
-                // so it stays within the button: the tabs touch.
+                // so it stays within the button and never overlaps a neighbour.
                 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ods-focus',
                 stretchTabs && 'flex-1',
                 tab.avatar && 'gap-[var(--spacing-system-xsf)]',
-                // The open tab is marked by the underline alone: no surface of its own.
+                // `default`: the open tab is marked by the underline alone, no surface
+                // of its own. `admin`: the open and the hovered tab carry an accent
+                // fade. ODS colour vars hold hex values, so Tailwind alpha modifiers
+                // (to-ods-accent/10) silently produce no CSS; color-mix() accepts
+                // hex, so the 10%-alpha stop is derived from the token.
+                isAdmin &&
+                  (isActive
+                    ? 'bg-gradient-to-b from-transparent to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]'
+                    : 'hover:bg-gradient-to-b hover:from-transparent hover:to-[color-mix(in_srgb,var(--color-accent-primary)_10%,transparent)]'),
               )}
             >
               {tab.avatar ? (
@@ -436,7 +479,7 @@ const TabBar = memo(function TabBarImpl({
                       'h-4 w-4 transition-colors content-md:h-6 content-md:w-6',
                       isActive
                         ? !tab.accent && 'text-ods-accent'
-                        : 'text-ods-text-secondary group-hover:text-ods-text-primary',
+                        : cn('text-ods-text-secondary', !isAdmin && 'group-hover:text-ods-text-primary'),
                     )}
                     style={isActive && tab.accent ? { color: tab.accent } : undefined}
                   />
@@ -453,7 +496,9 @@ const TabBar = memo(function TabBarImpl({
                   <span
                     className={cn(
                       'whitespace-nowrap transition-colors text-h4',
-                      isActive ? 'text-ods-text-primary' : 'text-ods-text-secondary group-hover:text-ods-text-primary',
+                      isActive
+                        ? 'text-ods-text-primary'
+                        : cn('text-ods-text-secondary', !isAdmin && 'group-hover:text-ods-text-primary'),
                     )}
                   >
                     {tab.label}
@@ -542,10 +587,13 @@ export function TabNavigation({
   stretchTabs = false,
   tabAlign = 'center',
   progressTransitionMs = 200,
+  variant: variantProp,
   urlSync = false,
   defaultTab,
   children,
 }: TabNavigationProps) {
+  const providedVariant = useContext(TabNavigationVariantContext);
+  const variant = variantProp ?? providedVariant;
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
@@ -717,6 +765,7 @@ export function TabNavigation({
         stretchTabs={stretchTabs}
         tabAlign={tabAlign}
         progressTransitionMs={progressTransitionMs}
+        variant={variant}
       />
 
       {/* Render children with active tab if provided */}

package/src/utils/embed-authed-fetch.ts

@@ -86,6 +86,34 @@ export interface EmbedAuthAdapter {
    * host's own auth layer, not to this fetch wrapper.
    */
   refresh?: () => Promise<boolean>;
+  /**
+   * Optional guard, run before every request goes out — the first attempt
+   * and the retry after a `refresh`. Throw — or reject — to refuse the
+   * request: `embedAuthedFetch` rejects with that error and nothing reaches
+   * the network.
+   *
+   * For a host-wide state that makes every request pointless. openframe's
+   * mobile force-update is the case it exists for: once the gateway has
+   * refused this client build, every later request is refused locally, so no
+   * surface's retry or reconnect loop keeps hitting the gateway. Runs inside
+   * the returned promise (after the synchronous same-origin guard), so
+   * callers see a rejection, never a synchronous throw.
+   */
+  beforeRequest?: () => void | Promise<void>;
+  /**
+   * Optional response hook, run on every response (the post-refresh retry's
+   * too) BEFORE the 401 self-heal. Throw — or reject — to fail the request
+   * with that error: `embedAuthedFetch` rejects with it, and neither
+   * `refresh` nor a retry runs. Return to let the response continue through
+   * the wrapper unchanged.
+   *
+   * For a status the host handles app-wide rather than per surface — e.g.
+   * openframe's gateway answering `426 Upgrade Required` to a too-old mobile
+   * build, which swaps the whole app for an "update required" screen and
+   * must never be retried or read as an auth failure. Read the body from
+   * `response.clone()`: once the hook returns, the caller reads the original.
+   */
+  onResponse?: (response: Response) => void | Promise<void>;
   /**
    * Exact extra origins (`scheme://host[:port]`, as produced by `URL.origin`)
    * the same-origin guard additionally accepts. The guard normally rejects
@@ -253,6 +281,11 @@ export function needsBearerAssetFetch(url: string): boolean {
  * no longer need a host-side `window.fetch` monkey-patch to survive an
  * expired access token mid-chat. With no adapter (or no `refresh`), the
  * 401 passes straight through unchanged.
+ *
+ * **Host hooks:** an adapter's `beforeRequest` may refuse a request before it
+ * is sent, and its `onResponse` sees every response ahead of the 401
+ * self-heal and may fail the request instead (see their docs). Without them
+ * the wrapper behaves exactly as described above.
  */
 export function embedAuthedFetch(url: string, init: RequestInit = {}): Promise<Response> {
   // Same-origin guard runs SYNCHRONOUSLY (not awaited inside the async
@@ -354,6 +387,11 @@ async function fetchWithRefresh(
   baseHeaders: Record<string, string>,
   isRetry: boolean,
 ): Promise<Response> {
+  const adapter = getRegisteredAuthAdapter();
+  // Per attempt, so a retry after `refresh` is refused too when the host's
+  // state changed while the refresh was in flight.
+  await adapter?.beforeRequest?.();
+
   // Re-run the merge each attempt: `applyProxyAuth` reads the latest stored
   // proxy creds and `getHeaders()` reads the latest bearer, so a retry after
   // refresh carries the rotated token rather than the stale one. `{...baseHeaders}`
@@ -365,7 +403,6 @@ async function fetchWithRefresh(
   // is the host's explicit "this is my auth model" override, intentionally
   // last-writer-wins. When no adapter is registered, this is a zero-cost
   // no-op (object spread of `{}`).
-  const adapter = getRegisteredAuthAdapter();
   if (adapter?.getHeaders) {
     // Filter `undefined` values — the adapter type allows them so consumers
     // don't have to narrow `{ Authorization: token ? '…' : undefined }`-shaped
@@ -387,6 +424,10 @@ async function fetchWithRefresh(
     credentials,
   });
 
+  // Ahead of the 401 self-heal: a status the host claims by throwing must
+  // never reach `refresh` or a retry.
+  await adapter?.onResponse?.(response);
+
   // 401 self-heal: refresh the token once and retry. Only when an adapter
   // opted into `refresh`, and only on the first attempt — a 401 on the
   // retry means the fresh token is also unauthorized, so surface it.