// @design-system: layout/TopBar
/**
* TopBar - sticky application top bar.
*
* Variants:
* - customer: surface-app background (brand-neutral chrome)
* - vendor: surface-app background (vendor context; accent via slot content)
*
* Background is always var(--color-surface-app) with shadow-sm — no gradient.
* Gradient was removed in redesign-d to unify chrome appearance.
*
* @example
* }
* />
*/
import { type ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { useSyncExternalStore } from 'react';
import {
getNavSpeedServerSnapshot,
getNavSpeedSnapshot,
subscribeNavSpeed,
} from '@/lib/nav/nav-speed';
export interface TopBarProps {
/** Drives gradient color: blue (customer) or green (vendor). */
variant?: 'customer' | 'vendor';
/** Primary heading text. */
title?: string;
/** Secondary sub-heading text. */
subtitle?: string;
/** Slot rendered at the logical start (inline-start, right in RTL Hebrew). */
startSlot?: ReactNode;
/** Slot rendered at the logical end (inline-end). */
endSlot?: ReactNode;
className?: string;
}
export function TopBar({
variant: _variant = 'customer',
title,
subtitle,
startSlot,
endSlot,
className,
}: TopBarProps) {
const navSpeed = useSyncExternalStore(
subscribeNavSpeed,
getNavSpeedSnapshot,
getNavSpeedServerSnapshot,
);
return (
);
}