@flamingo-stack/openframe-frontend-core 0.0.685-snapshot.20260929165916 → 0.0.685

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

@@ -1,7 +1,7 @@
 import { render, fireEvent, screen } from '@testing-library/react';
 import { describe, it, expect, beforeAll, vi } from 'vitest';
-import { mockPush, mockReplace, setMockSearchParams } from '../../../../vitest.setup';
-import { TabNavigation, type TabItem, type TabNavigationUrlSyncOptions } from '../tab-navigation';
+import { mockReplace, setMockSearchParams } from '../../../../vitest.setup';
+import { TabNavigation, type TabItem } from '../tab-navigation';
 
 beforeAll(() => {
   // jsdom ships no ResizeObserver; the tab strip observes itself on mount to
@@ -156,60 +156,6 @@ describe('TabNavigation with urlSync', () => {
       expect(nav.active).toBe('general');
     });
   });
-
-  describe('with sync options', () => {
-    function renderWith(options: TabNavigationUrlSyncOptions) {
-      let seen = '__never-rendered__';
-      render(
-        <TabNavigation tabs={TABS} urlSync={options}>
-          {active => {
-            seen = active;
-            return null;
-          }}
-        </TabNavigation>,
-      );
-      return {
-        get active() {
-          return seen;
-        },
-      };
-    }
-
-    it('reads and writes the param it was given, leaving `tab` alone', () => {
-      setMockSearchParams(new URLSearchParams('tab=general&view=software'));
-      const nav = renderWith({ paramName: 'view' });
-      expect(nav.active).toBe('software');
-
-      fireEvent.click(screen.getByText('General'));
-      expect(mockReplace).toHaveBeenCalledWith('/?tab=general&view=general', { scroll: false });
-    });
-
-    it('pushes a history entry when `replaceState` is off', () => {
-      setMockSearchParams(new URLSearchParams('tab=general'));
-      renderWith({ replaceState: false });
-      fireEvent.click(screen.getByText('Software'));
-
-      expect(mockPush).toHaveBeenCalledWith('/?tab=software', { scroll: false });
-      expect(mockReplace).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('a tab with a badge', () => {
-    it('draws the stamp after the label and names the tab with it', () => {
-      setMockSearchParams(new URLSearchParams('tab=general'));
-      render(
-        <TabNavigation tabs={[...TABS, { id: 'logs', label: 'Device Logs', badge: 'Beta' }]} urlSync>
-          {() => null}
-        </TabNavigation>,
-      );
-
-      const tab = screen.getByRole('button', { name: 'Device Logs (Beta)' });
-      expect(tab.textContent).toBe('Device LogsBeta');
-      // Tabs without a badge keep their label as the accessible name.
-      expect(screen.getByRole('button', { name: 'General' }).textContent).toBe('General');
-    });
-  });
-
   describe('the underline', () => {
     it('is sized in real pixels rather than a scaled 1px bar', () => {
       // Regression guard. The underline used to be `w-px` stretched with

package/src/components/ui/avatar-stack.tsx

@@ -33,10 +33,6 @@ export interface AvatarStackProps {
    * so the text beside every stack starts at the same x.
    */
   slots?: number;
-  /** How many people the group has when `people` is only a sample of it (a
-   *  server that returns the first few faces plus a count). The "+N" circle
-   *  then counts everyone not shown. Defaults to `people.length`. */
-  total?: number;
   /** Size bucket (also sizes the "+N" circle). `xs` (24px) is for
    *  dense card meta rows (chat compact cards, delivery rows). */
   size?: AvatarStackSize;
@@ -67,28 +63,22 @@ export function AvatarStack({
   people,
   max = 3,
   slots,
-  total,
   size = 'md',
   ringClassName = 'ring-ods-card',
   label = 'Assignees',
   className,
 }: AvatarStackProps) {
   if (people.length === 0) return null;
-  const groupSize = Math.max(total ?? people.length, people.length);
-  const faces = slots ? (groupSize > slots ? slots - 1 : slots) : max;
+  const faces = slots ? (people.length > slots ? slots - 1 : slots) : max;
   const visible = people.slice(0, faces);
   const overflow = people.slice(faces);
-  const overflowCount = groupSize - visible.length;
-  const names = people.map(p => p.name).join(', ');
-  // Names beyond the sample are unknown here; say how many there are instead.
-  const unnamed = groupSize - people.length;
   const compact = size === 'xs';
   return (
     <div
       className={cn('flex items-center', slots && 'shrink-0', className)}
       style={slots ? { width: SIZE_PX[size] + (slots - 1) * (SIZE_PX[size] - OVERLAP_PX[size]) } : undefined}
       role="group"
-      aria-label={`${label}: ${names}${unnamed > 0 ? ` and ${unnamed} more` : ''}`}
+      aria-label={`${label}: ${people.map(p => p.name).join(', ')}`}
     >
       {visible.map((person, i) => (
         <SquareAvatar
@@ -105,9 +95,9 @@ export function AvatarStack({
           style={{ zIndex: visible.length - i }}
         />
       ))}
-      {overflowCount > 0 && (
+      {overflow.length > 0 && (
         <span
-          title={overflow.length > 0 ? overflow.map(p => p.name).join(', ') : `${overflowCount} more`}
+          title={overflow.map(p => p.name).join(', ')}
           className={cn(
             'relative z-0 flex shrink-0 items-center justify-center rounded-full bg-ods-bg text-ods-text-secondary ring-2',
             ringClassName,
@@ -119,7 +109,7 @@ export function AvatarStack({
             OVERFLOW_CIRCLE_SIZE[size],
           )}
         >
-          +{overflowCount}
+          +{overflow.length}
         </span>
       )}
     </div>

package/src/components/ui/reopen-ticket-request-modal.tsx

@@ -28,9 +28,6 @@ export interface ReopenTicketRequestModalProps {
    * omits `handoffToTechnician`.
    */
   showHandoffOption?: boolean;
-  /** Opens with the handoff checkbox already ticked — the user reached the
-   *  modal by asking for a technician, so that is the choice to confirm. */
-  defaultHandoff?: boolean;
   /** Confirm in-flight: buttons lock and the modal refuses to close. */
   isPending?: boolean;
   onConfirm: (selection: ReopenTicketRequestSelection) => void;
@@ -48,12 +45,11 @@ export function ReopenTicketRequestModal({
   isOpen,
   onClose,
   showHandoffOption = false,
-  defaultHandoff = false,
   isPending = false,
   onConfirm,
 }: ReopenTicketRequestModalProps) {
   const [reason, setReason] = useState('');
-  const [handoff, setHandoff] = useState(defaultHandoff);
+  const [handoff, setHandoff] = useState(false);
 
   // Re-seed the inputs every time the modal opens. Adjusted while rendering,
   // not from an effect: the modal does not unmount when it closes, so an effect
@@ -64,7 +60,7 @@ export function ReopenTicketRequestModal({
     setWasOpen(isOpen);
     if (isOpen) {
       setReason('');
-      setHandoff(defaultHandoff);
+      setHandoff(false);
     }
   }
 

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

@@ -14,7 +14,6 @@ import {
 } from 'react';
 import { useSearchParams, useRouter, usePathname } from '../../embed-shims/next-navigation';
 import { cn } from '../../utils/cn';
-import { Tag } from './tag';
 
 export interface TabItem {
   id: string;
@@ -44,13 +43,6 @@ export interface TabItem {
    */
   component?: React.ComponentType<any>;
   indicator?: 'success' | 'warning' | 'error';
-  /**
-   * A stamp drawn after the label, e.g. "Beta" on a tab that is shipped but
-   * still behind its flag. The same `warning` chip the navigation sidebar draws
-   * for `NavigationSidebarItem.badge`; the tab's accessible name becomes
-   * "Label (Badge)". Cased as read — the chip upper-cases it.
-   */
-  badge?: string;
 }
 
 export interface TabNavigationUrlSyncOptions {
@@ -337,7 +329,6 @@ const TabBar = memo(function TabBarImpl({
               ref={isActive ? activeTabRef : undefined}
               type="button"
               onClick={() => onTabChange(tab.id)}
-              aria-label={tab.badge ? `${tab.label} (${tab.badge})` : undefined}
               className={cn(
                 'relative flex shrink-0 cursor-pointer items-center justify-center gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]',
                 // Named rather than `transition-all`: the only thing that moves
@@ -385,20 +376,6 @@ const TabBar = memo(function TabBarImpl({
               >
                 {tab.label}
               </span>
-
-              {tab.badge && (
-                // The chip is 32px against a 20/24px label line. The negative
-                // margin takes the difference back, so a stamped tab is exactly
-                // as tall as its neighbours at every breakpoint. No hover shade:
-                // the tab is the target, and the cursor passes through to it.
-                <Tag
-                  as="span"
-                  aria-hidden
-                  label={tab.badge}
-                  variant="warning"
-                  className="pointer-events-none my-[calc((var(--font-line-space-h4-body)_-_2rem)/2)] ml-[var(--spacing-system-xxs)] shrink-0"
-                />
-              )}
             </button>
           );
         })}

package/src/styles/ods-colors.css

@@ -407,16 +407,6 @@
   --color-focus-ring: #00ff00;
 }
 
-/* ===================================================================== */
-/* BRAND-TINTED SURFACE — the page background takes 2% of the accent.    */
-/* Figma's fae-background (#1a1719) and mingo-background (#171b1a) are   */
-/* exactly 2% of their brand over the base background. Resolved on the   */
-/* element, so it follows the theme and a runtime (tenant) accent.       */
-/* ===================================================================== */
-[data-surface='brand-tinted'] {
-  --color-bg: color-mix(in srgb, var(--color-accent-primary) 2%, var(--ods-system-greys-background));
-}
-
 /* ===================================================================== */
 /* PLATFORM OVERRIDES — brand/accent ONLY.                               */
 /* Reference `--ods-*` so they follow the active theme; never touch      */

package/src/styles/ods-effects.css

@@ -51,16 +51,3 @@
 .ods-shadow-glyph {
   filter: var(--ods-shadow-glyph);
 }
-
-/* The brand glow in the bottom-right corner of a chat surface (Fae chat v2):
-   the accent at 4% fading out over the whole surface (radial fill centred on
-   the corner, radii 100% × 103% as in the design). Written
-   on the class, not as a :root variable, so the accent resolves on the element
-   and follows a platform or runtime (tenant) accent set below the root. */
-.ods-glow-accent-corner {
-  background-image: radial-gradient(
-    100% 103% at 100% 100%,
-    color-mix(in srgb, var(--color-accent-primary) 4%, transparent) 0%,
-    color-mix(in srgb, var(--color-accent-primary) 0%, transparent) 100%
-  );
-}