@podoba/react 0.0.36 → 0.0.37

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@podoba/react",
-	"version": "0.0.36",
+	"version": "0.0.37",
 	"type": "module",
 	"description": "podoba React components — React Aria Components + Tailwind primitives + layout, built with uic.",
 	"repository": {
@@ -28,8 +28,8 @@
 		"typecheck": "tsc --build"
 	},
 	"dependencies": {
-		"@podoba/tokens": "^0.0.36",
-		"@podoba/tailwind": "^0.0.36",
+		"@podoba/tokens": "^0.0.37",
+		"@podoba/tailwind": "^0.0.37",
 		"react-aria-components": "1.18.0",
 		"class-variance-authority": "0.7.1",
 		"clsx": "2.1.1",

package/src/components/button.tsx

@@ -10,10 +10,11 @@ import { uic } from '../utils/uic'
 export const Button = uic(RACButton, {
 	displayName: 'Button',
 	// gs `Button.module.scss`: pill radius, FIXED 13px / weight-400 text (`text-compact`)
-	// on every size — size variants change PADDING ONLY, never the text scale. 200ms
-	// ease-in-out transition.
+	// on every size — size variants change PADDING ONLY, never the text scale. The
+	// source eases background-color, color, box-shadow and border-color over 120ms `ease`.
 	baseClass:
-		'inline-flex items-center justify-center gap-2 rounded-full text-compact leading-4 transition-all duration-200 ease-in-out ' +
+		'inline-flex items-center justify-center gap-2 rounded-full text-compact leading-4 ' +
+		'transition-[background-color,color,box-shadow,border-color] duration-120 ease-[ease] motion-reduce:transition-none ' +
 		'outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring data-[focus-visible]:ring-offset-2 ' +
 		// Inactive states (disabled / pending) soften the LABEL ONLY and leave every
 		// variant on its own surface. Two reasons:

package/src/components/context-menu.tsx

@@ -118,16 +118,17 @@ const MenuItem = uic(RACMenuItem, {
 	// upstream API — a hand-written custom property has nowhere to be defined and
 	// silently resolves to nothing.
 	baseClass:
-		'flex min-h-8.5 cursor-pointer select-none items-center gap-2.5 rounded-[10px] px-3 py-1.5 ' +
+		'flex min-h-8.5 min-w-0 cursor-pointer select-none items-center gap-2.5 rounded-[10px] px-3 py-1.5 ' +
 		'text-compact leading-4 tracking-normal font-normal text-white outline-none ' +
 		'data-[focused]:bg-[#2f2f2f] data-[focused]:font-medium data-[hovered]:bg-[#2f2f2f] data-[hovered]:font-medium ' +
 		'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45',
 	variants: {
-		// gs `--color-error-light` (#ffb5b5), a light red tuned for this dark panel.
-		// `--color-danger-light` DOES exist, but it flips to a ~15% translucent red
-		// under `[data-theme="dark"]` and would all but vanish here; `text-danger`
+		// gs `var(--color-error-light, #ffb5b5)`: the Manager defines `--color-error-light`
+		// as #fee2e2, so the rendered source ink is #fee2e2 (the #ffb5b5 fallback never
+		// applies). `--color-danger-light` DOES exist, but it flips to a ~15% translucent
+		// red under `[data-theme="dark"]` and would all but vanish here; `text-danger`
 		// (#dc2626) is a light-surface red that fails contrast on #242424.
-		destructive: { true: 'text-[#ffb5b5] data-[focused]:text-[#ffb5b5]' },
+		destructive: { true: 'text-[#fee2e2] data-[focused]:text-[#fee2e2]' },
 	},
 }) as (
 	props: React.ComponentProps<typeof RACMenuItem> & { destructive?: boolean },
@@ -142,7 +143,9 @@ const panelClass =
 	'w-[258px] max-w-[calc(100vw-16px)] max-h-[calc(100vh-16px)] box-border overflow-y-auto rounded-xl ' +
 	'bg-gradient-to-b from-[#242424] to-[#1f1f1f] ' +
 	'px-1.5 py-2 shadow-[0_12px_28px_rgba(0,0,0,0.22)] outline-none'
-const menuClass = 'grid gap-0.5 outline-none'
+// `minmax(0, 1fr)` tracks: an `auto` grid column grows to the items' nowrap
+// min-content, so a long label plus a trailing pill pushed rows past the 258px panel.
+const menuClass = 'grid grid-cols-[minmax(0,1fr)] gap-0.5 outline-none'
 
 const CursorPopoverSurface = uic(RACPopover, {
 	displayName: 'ContextMenuPopoverSurface',
@@ -264,7 +267,7 @@ function ContextMenuBody({
 			{groups.map((group, gi) => (
 				// gs separates groups with an 18px top margin (`.group + .group`), not a
 				// rule line — so the first group sits flush, the rest gain the gap.
-				<RACMenuSection key={groupId(group, gi)} className={gi > 0 ? 'mt-4.5 grid gap-0.5' : 'grid gap-0.5'}>
+				<RACMenuSection key={groupId(group, gi)} className={gi > 0 ? 'mt-4.5 grid min-w-0 grid-cols-[minmax(0,1fr)] gap-0.5' : 'grid min-w-0 grid-cols-[minmax(0,1fr)] gap-0.5'}>
 					{group.label ? (
 						// The grid contributes 2px: 2px margin + 2px gap = source 4px below label.
 						<Header className="mx-2 mt-1.5 mb-0.5 text-compact leading-4 tracking-normal font-medium text-white">{group.label}</Header>

package/src/components/count-up.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, type ElementType } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState, type ElementType } from 'react'
 
 /**
  * CountUp — animates a number from 0 up to `value` on mount (and whenever `value`
@@ -20,6 +20,10 @@ export interface CountUpProps {
 
 const easeOutCubic = (t: number): number => 1 - Math.pow(1 - t, 3)
 
+// Layout effect in the browser so the reset to 0 commits before the first paint
+// (a passive effect painted the final value for one frame, then jumped to 0).
+const useBrowserLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
+
 export function CountUp({
 	value,
 	durationMs = 900,
@@ -31,13 +35,14 @@ export function CountUp({
 	const rafRef = useRef<number | null>(null)
 	const startRef = useRef<number | null>(null)
 
-	useEffect(() => {
+	useBrowserLayoutEffect(() => {
 		if (typeof window === 'undefined') return
 		const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches
 		if (reduce || durationMs <= 0) {
 			setDisplay(value)
 			return
 		}
+		setDisplay(0)
 		startRef.current = null
 		const tick = (now: number) => {
 			if (startRef.current === null) startRef.current = now

package/src/components/dropdown-menu.tsx

@@ -40,14 +40,17 @@ import { uic } from '../utils/uic'
  * ```
  *
  * gs token map (this is the LIGHT menu, so the gs literals map cleanly to our
- * tokens): content bg white → `surface` · 1px `#eceae1` border → `border` · 8px
- * radius → `rounded-lg` · `shadow-lg` · item 12/16px padding → `py-3 px-4` · 6px
- * item radius → `rounded-md` · item hover `#f7f6f2` → `surface-card` · item text
- * `#0d0d0d` → `fg` · section label `#aba89c` 13px → `text-fg-muted text-compact`
+ * tokens): content bg `--color-background-secondary` (#f7f6f2) → `surface-card` ·
+ * 1px `#eceae1` border → `border` · 8px radius → `rounded-lg` · `shadow-lg` · item
+ * 12/16px padding → `py-3 px-4` · 16px/22px base text → `text-body leading-5.5` ·
+ * 6px item radius → `rounded-md` · item highlight `--color-background-hover`
+ * (#eceae1) → `surface-muted` · item text `#0d0d0d` → `fg` · section label 13px →
+ * `text-fg-muted text-compact`. Motion: gs `slideDownAndFade` in / `slideUpAndFade`
+ * out, 200ms `cubic-bezier(0.16, 1, 0.3, 1)` (`animate-dropdown-in` / `-out`).
  * (#25: the source grey is 2.10:1 on `surface`; a section label is read, not ornament)
  * · separator `#eceae1` → `border`. The destructive item uses `text-danger`
  * (`#dc2626`) — a light-surface red that reads correctly here (unlike the dark
- * ContextMenu, which needs the lighter `#ffb5b5`).
+ * ContextMenu, which needs the lighter `#fee2e2`).
  *
  * Presentational only (hard rule #1) — no app imports.
  */
@@ -55,18 +58,25 @@ import { uic } from '../utils/uic'
 /** Re-export of RAC `MenuTrigger`; owns the open/close state for the pair. */
 export const DropdownMenuTrigger = RACMenuTrigger
 
-// gs `.item`: 12/16px padding, 6px radius, base text on white; hover/focus wash
-// `#f7f6f2` (→ surface-card). We light up both `data-[focused]` (keyboard) and
-// `data-[hovered]` (pointer) so keyboard focus stays clearly visible. Item text
-// size follows the house light Select (`text-small`) rather than gs's 16px base so
-// the two light dropdowns stay consistent.
+/** Shared gs dropdown panel skin (also used by the Topbar `UserMenu`). */
+export const dropdownMenuPanelClass =
+	'min-w-[220px] rounded-lg border border-border bg-surface-card p-2 shadow-lg outline-none ' +
+	'data-[entering]:animate-dropdown-in data-[exiting]:animate-dropdown-out motion-reduce:animate-none'
+
+// gs `.item`: 12/16px padding, 6px radius, 16px/22px base text; the Radix
+// `[data-highlighted]` wash is `#eceae1` (→ surface-muted). Radix highlights on
+// pointer hover and keyboard focus, never on a pointer open, so we key on
+// `data-[hovered]` + `data-[focus-visible]` rather than RAC's plain `data-[focused]`
+// (which also marks the first item when a mouse press opens the menu).
+export const dropdownMenuItemClass =
+	'flex cursor-pointer select-none items-center gap-2.5 rounded-md px-4 py-3 ' +
+	'text-body leading-5.5 font-normal text-fg outline-none ' +
+	'data-[focus-visible]:bg-surface-muted data-[hovered]:bg-surface-muted ' +
+	'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+
 export const DropdownMenuItem = uic(RACMenuItem, {
 	displayName: 'DropdownMenuItem',
-	baseClass:
-		'flex cursor-pointer select-none items-center gap-2.5 rounded-md px-4 py-3 ' +
-		'text-small text-fg outline-none ' +
-		'data-[focused]:bg-surface-card data-[hovered]:bg-surface-card ' +
-		'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+	baseClass: dropdownMenuItemClass,
 	variants: {
 		// gs has no destructive item style on the light menu; we add the house danger
 		// token (red text), which reads correctly on the white / cream surface.
@@ -128,11 +138,11 @@ export function DropdownMenu<T extends object>({
 }: DropdownMenuProps<T>) {
 	return (
 		// gs `.content`: min-width 220px, 8px padding (`p-2`), 8px radius, 1px
-		// `#eceae1` border, white fill, `shadow-lg`.
+		// `#eceae1` border, `#f7f6f2` fill, `shadow-lg`, 200ms slide/fade both ways.
 		<RACPopover
 			placement={placement}
 			className={
-				'min-w-[220px] rounded-lg border border-border bg-surface p-2 shadow-lg outline-none' +
+				dropdownMenuPanelClass +
 				(popoverClassName ? ` ${popoverClassName}` : '')
 			}
 		>

package/src/components/field-appearance.ts

@@ -9,6 +9,9 @@ export const filledFieldClasses =
 	'border-0 bg-surface-card text-small font-normal leading-4.5 text-fg ' +
 	'outline-none transition-colors duration-200 motion-reduce:transition-none placeholder:text-fg-muted placeholder:font-normal ' +
 	'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-card ' +
-	'focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 ' +
+	// `outline-none` above zeroes Tailwind v4's `--tw-outline-style`, so the focus
+	// width alone would still resolve to `outline-style: none`. Restate the solid
+	// style or the gs 2px focus outline never paints (WCAG 2.4.7).
+	'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-ring focus-visible:outline-offset-2 ' +
 	'data-[invalid]:ring-1 data-[invalid]:ring-danger data-[invalid]:outline-danger ' +
 	'data-[disabled]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed'

package/src/components/section-tabs.tsx

@@ -52,9 +52,12 @@ const GridGlyph = () => (
 	</svg>
 )
 
+// gs `.tabButton`: inactive ink `#242423` (the light-theme neutral that
+// `surface-inverted` carries; it flips to a light ink on the dark shell), selected
+// and hovered `fg` on `surface-muted`, background + colour eased over 120ms `ease`.
 const tabBase =
-	'inline-flex h-7 shrink-0 items-center gap-2 rounded-sm px-nav-x py-1.5 text-compact font-normal text-fg-muted outline-none ' +
-	'transition-colors duration-150 ease-in-out data-[hovered]:bg-surface-muted data-[hovered]:text-fg ' +
+	'inline-flex h-7 shrink-0 items-center gap-2 rounded-sm px-nav-x py-1.5 text-compact font-normal text-surface-inverted outline-none ' +
+	'transition-colors duration-120 ease-[ease] motion-reduce:transition-none data-[hovered]:bg-surface-muted data-[hovered]:text-fg ' +
 	'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +
 	'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-transparent data-[disabled]:text-fg-muted'
 
@@ -90,7 +93,7 @@ export function SectionTabs({
 						aria-pressed={isResetSelected}
 						onPress={onReset}
 						className={[
-							resetContent ? tabBase : 'h-7 w-7 rounded-sm p-0 text-fg-muted data-[hovered]:text-fg',
+							resetContent ? tabBase : 'h-7 w-7 rounded-sm p-0 text-surface-inverted data-[hovered]:text-fg',
 							isResetSelected ? tabActive : '',
 						]
 							.filter(Boolean)

package/src/components/select.tsx

@@ -43,7 +43,7 @@ const SelectTrigger = uic(RACButton, {
 		appearance: {
 			filled: 'min-h-control-tall border-0 bg-surface-card py-5 font-normal leading-4.5 duration-200 motion-reduce:transition-none ' +
 				'data-[hovered]:bg-surface-muted group-data-[open]:bg-surface-card ' +
-				'data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:outline-offset-2 ' +
+				'data-[focus-visible]:outline-solid data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:outline-offset-2 ' +
 				'group-data-[invalid]:ring-1 group-data-[invalid]:ring-danger ' +
 				'data-[disabled]:bg-surface-card data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
 			outlined: 'h-control-tall border border-border bg-surface ' +
@@ -66,7 +66,7 @@ const StyledSelectItem = uic(ListBoxItem, {
 		appearance: {
 			filled: 'min-w-0 overflow-hidden px-5 py-0 font-normal leading-4.5 max-md:min-h-11 ' +
 				'data-[hovered]:font-medium data-[focused]:font-medium data-[selected]:font-medium ' +
-				'data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-2',
+				'data-[focus-visible]:outline-solid data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:-outline-offset-2',
 			outlined: 'px-3 py-2 ' +
 		'data-[hovered]:bg-surface-muted data-[focused]:bg-surface-muted data-[selected]:font-medium ' +
 		'data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',

package/src/components/settings-dialog-surface.tsx

@@ -98,7 +98,8 @@ export function SettingsDialogSurface({ variant, isOpen, onOpenChange, isPending
 							<Body ref={bodyRef} className={bodyClass} data-testid={bodyTestId}>{children}</Body>
 						</Container>
 					</ScrollBody>
-					<footer className={catalog ? 'shrink-0 border-t border-border bg-surface pt-3' : create ? 'shrink-0 border-t border-border bg-surface pt-4' : 'shrink-0 border-t border-border bg-surface pt-5'}>
+					{/* gs dialog footers sit on the white surface with no rule above them. */}
+					<footer className={catalog ? 'shrink-0 bg-surface pt-3' : create ? 'shrink-0 bg-surface pt-4' : 'shrink-0 bg-surface pt-5'}>
 						<Container className={containerClass}>
 							<div className={`flex justify-end ${csv || basic ? 'items-center gap-1' : variant === 'edit' ? 'gap-3' : 'gap-2'}`}>{footer}</div>
 						</Container>
@@ -130,7 +131,7 @@ export function WizardFormDialog({ isOpen, onOpenChange, isPending = false, isEx
 				</Button>
 				<header className="shrink-0"><Container className="max-w-384 px-5 min-[901px]:px-6"><DisplayHeading id={titleId} className="m-0 whitespace-pre-line pb-0.5 text-fg-muted" style={{ letterSpacing: 0 }}>{title}</DisplayHeading></Container></header>
 				<ScrollBody style={{ scrollbarGutter: 'stable' }}><Container className="max-w-384 px-5 min-[901px]:px-6"><Body className="gap-8">{children}</Body></Container></ScrollBody>
-				<footer className="shrink-0 border-t border-border bg-surface pt-5"><Container className="max-w-384 px-5 min-[901px]:px-6"><div className="flex flex-wrap justify-end gap-2">{footer}</div></Container></footer>
+				<footer className="shrink-0 bg-surface pt-5"><Container className="max-w-384 px-5 min-[901px]:px-6"><div className="flex flex-wrap justify-end gap-2">{footer}</div></Container></footer>
 			</Layout>
 		</Panel>
 	</ModalOverlay>
@@ -220,7 +221,7 @@ export function ProductionSettingsDialog({ isOpen, onOpenChange, prefix, title,
 }
 
 const DisclosureRoot = uic(AriaDisclosure, { displayName: 'SettingsDisclosureRoot', baseClass: 'group/settings-disclosure flex min-w-0 flex-col gap-3' })
-const DisclosureTrigger = uic(AriaButton, { displayName: 'SettingsDisclosureTrigger', baseClass: 'flex w-full cursor-pointer items-start justify-between gap-3 bg-transparent p-0 text-left outline-none data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:outline-offset-2' })
+const DisclosureTrigger = uic(AriaButton, { displayName: 'SettingsDisclosureTrigger', baseClass: 'flex w-full cursor-pointer items-start justify-between gap-3 bg-transparent p-0 text-left outline-none data-[focus-visible]:outline-solid data-[focus-visible]:outline-2 data-[focus-visible]:outline-ring data-[focus-visible]:outline-offset-2' })
 const DisclosureCopy = uic('span', { displayName: 'SettingsDisclosureCopy', baseClass: 'flex min-w-0 flex-col gap-1' })
 const DisclosureTitle = uic('strong', { displayName: 'SettingsDisclosureTitle', baseClass: 'text-body font-medium leading-normal text-fg' })
 const DisclosureHint = uic('span', { displayName: 'SettingsDisclosureHint', baseClass: 'text-body font-normal leading-normal text-fg-workflow-muted' })

package/src/components/table.tsx

@@ -116,7 +116,7 @@ export function Table<Row>({
 
 	return (
 		<div className={['w-full overflow-x-auto', className].filter(Boolean).join(' ')}>
-			<table style={team ? { '--table-columns': gridTemplate } as CSSProperties : undefined} className={`w-full border-collapse text-small ${worksheet ? 'border-b border-border font-normal leading-4.5' : ''} ${team ? 'block border-b border-border font-normal leading-4.5' : ''}`} {...aria}>
+			<table style={team ? { '--table-columns': gridTemplate } as CSSProperties : undefined} className={`w-full border-collapse text-small ${worksheet ? 'border-b border-border font-normal leading-4.5' : ''} ${team ? 'block font-normal leading-4.5' : ''}`} {...aria}>
 				<thead className={team ? 'block' : undefined}>
 					<tr className={`${worksheet ? '' : 'border-b border-border'} ${team ? 'grid grid-cols-[var(--table-columns)] gap-3 bg-surface-muted px-4 max-[1023px]:hidden' : ''}`}>
 						{columns.map((column) => {
@@ -131,7 +131,7 @@ export function Table<Row>({
 									aria-sort={
 										canSort ? (active ? (sort?.dir === 'asc' ? 'ascending' : 'descending') : 'none') : undefined
 									}
-									className={`${ALIGN_CLASS[align]} ${worksheet ? 'border-0 px-3 py-4 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case bg-surface whitespace-nowrap' : team ? 'border-0 px-4 py-3 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case whitespace-nowrap' : 'px-4 py-3 text-label font-medium tracking-wide text-fg-muted uppercase'}`}
+									className={`${ALIGN_CLASS[align]} ${worksheet ? 'border-0 px-3 py-4 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case bg-surface whitespace-nowrap' : team ? 'border-0 px-0 py-3 align-middle font-mono text-small font-normal leading-4.5 tracking-normal text-fg normal-case whitespace-nowrap' : 'px-4 py-3 text-label font-medium tracking-wide text-fg-muted uppercase'}`}
 								>
 									{canSort ? (
 										<button

package/src/components/tabs.tsx

@@ -25,9 +25,12 @@ export const TabList = uic(RACTabList, {
 
 export const Tab = uic(RACTab, {
 	displayName: 'Tab',
+	// gs `Tabs.module.scss` `.trigger`: 12/16px padding, heading-5 (16px/20px) medium,
+	// `--color-text-secondary` ink (#242423, the light neutral `surface-inverted`
+	// carries), 2px underline, `all 200ms ease-in-out`.
 	baseClass:
-		'cursor-pointer select-none border-b-2 border-transparent px-4 py-3 text-small font-medium text-fg-muted ' +
-		'outline-none transition-colors ' +
+		'cursor-pointer select-none border-b-2 border-transparent px-4 py-3 text-heading5 font-medium text-surface-inverted ' +
+		'outline-none transition-all duration-200 ease-[ease-in-out] motion-reduce:transition-none ' +
 		'data-[hovered]:text-fg ' +
 		'data-[selected]:border-brand-primary data-[selected]:text-fg ' +
 		'data-[focus-visible]:ring-2 data-[focus-visible]:ring-ring ' +

package/src/components/textarea.tsx

@@ -58,8 +58,10 @@ export type TextareaProps = TextFieldProps & {
 }
 
 export const Textarea = ({ label, description, errorMessage, placeholder, rows, textAreaClassName, appearance = 'outlined', ...props }: TextareaProps) => (
-	<TextField {...props} className={`flex w-full flex-col ${appearance === 'filled' ? 'gap-3' : 'gap-2'}`}>
-		<Label className={`${appearance === 'filled' ? 'text-panel-heading' : 'text-small'} font-medium text-fg`}>{label}</Label>
+	// Label and gap match `Input` in both appearances (gs 17px/20px field label,
+	// 12px to the control), so a Title + Description pair reads as one form.
+	<TextField {...props} className="flex w-full flex-col gap-3">
+		<Label className="text-panel-heading font-medium text-fg">{label}</Label>
 		<StyledTextArea className={textAreaClassName} placeholder={placeholder} rows={rows} appearance={appearance} />
 		{description ? (
 			<Text slot="description" className="text-label text-fg-muted">

package/src/components/tile.tsx

@@ -395,10 +395,44 @@ const BADGE: Record<BadgeColor, string> = {
 
 export function Badge({ label, color = 'grey' }: { label: ReactNode; color?: BadgeColor }) {
 	return (
+		// gs `Tag.module.scss`: 24px tall, 0 10px padding, 16px (`radius-2xl`) corners,
+		// 10px/20px medium label (Label 4). The source's `margin-left: 12px` is layout
+		// the caller owns, so it is not baked in here.
 		<span
-			className={`inline-flex items-center rounded-full px-3 py-1 text-caption font-medium leading-none ${BADGE[color]}`}
+			className={`inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-2xl px-2.5 text-micro font-medium leading-5 ${BADGE[color]}`}
 		>
 			{label}
 		</span>
 	)
 }
+
+/**
+ * Chip: the gs `GSChip` dot pill used for task status and priority cells.
+ *
+ * Distinct from {@link Badge} (gs `Tag`): a Chip is the table-cell pill with a
+ * leading 8px dot, 13px/16px regular label, 24px height and 0 12px padding. gs has
+ * two tones only: `green` (translucent mint surface, brand-green dot) for work that
+ * is moving or finished, and `grey` (neutral surface, neutral dot) for everything
+ * else. The dot is decorative; the label carries the meaning.
+ */
+export type ChipColor = 'green' | 'grey'
+
+const CHIP: Record<ChipColor, { surface: string; dot: string }> = {
+	// gs `rgba(150, 246, 194, 0.8)` → accent-green-lighter at 80%; dot brand green.
+	green: { surface: 'bg-accent-green-lighter/80 text-fg-on-brand', dot: 'bg-brand-green' },
+	// gs neutral-100 surface; the source neutral-200 dot (#aba89c) maps to the
+	// nearest shared neutral. Ornamental: the adjacent label is the content.
+	grey: { surface: 'bg-surface-muted text-fg', dot: 'bg-neutral-300' },
+}
+
+export function Chip({ label, color = 'grey' }: { label: ReactNode; color?: ChipColor }) {
+	const tone = CHIP[color]
+	return (
+		<span
+			className={`inline-flex h-6 shrink-0 items-center gap-1.5 whitespace-nowrap rounded-2xl px-3 text-compact font-normal leading-4 ${tone.surface}`}
+		>
+			<span aria-hidden="true" className={`size-2 shrink-0 rounded-full ${tone.dot}`} />
+			{label}
+		</span>
+	)
+}

package/src/layout/topbar.tsx

@@ -8,13 +8,16 @@ import {
 	ListBox,
 	ListBoxItem,
 	type ListBoxItemProps,
+	Header,
 	Menu as RACMenu,
 	MenuItem as RACMenuItem,
 	type MenuItemProps,
+	MenuSection,
 	MenuTrigger,
 	Popover,
 } from 'react-aria-components'
 import { uic } from '../utils/uic'
+import { dropdownMenuItemClass, dropdownMenuPanelClass, DropdownMenuSeparator } from '../components/dropdown-menu'
 
 /**
  * Topbar — sticky application header (ported pattern from gs-manager's
@@ -87,8 +90,12 @@ const TopbarActions = uic('div', {
 const TopbarNavLink = uic('a', {
 	displayName: 'Topbar.NavLink',
 	baseClass:
+		// gs inactive ink is `#242423` (the neutral that `surface-inverted` carries in
+		// light theme and flips to a light ink on the dark shell); hover/active darken to
+		// `fg`. gs `Button.module.scss` eases bg + colour over 120ms `ease`.
 		'inline-flex items-center rounded-sm px-[13px] py-[6px] text-compact leading-4 tracking-[0] whitespace-nowrap ' +
-		'text-fg no-underline transition-colors hover:bg-surface-muted hover:text-fg outline-none ' +
+		'text-surface-inverted no-underline transition-colors duration-120 ease-[ease] motion-reduce:transition-none ' +
+		'hover:bg-surface-muted hover:text-fg outline-none ' +
 		'focus-visible:ring-2 focus-visible:ring-ring ' +
 		'data-[active]:bg-surface-muted data-[active]:text-fg',
 	// `active` is accepted both as an explicit prop (uic emits `data-active=""` when
@@ -194,7 +201,8 @@ export const UserMenu = ({ trigger, triggerLabel, onAction, children }: UserMenu
 		>
 			{trigger}
 		</RACButton>
-		<Popover className="min-w-40 rounded-md border border-border bg-surface p-1 shadow-lg">
+		{/* gs Hub account menu = the shared gs DropdownMenu panel, bottom-end aligned. */}
+		<Popover placement="bottom end" className={dropdownMenuPanelClass}>
 			<RACMenu onAction={onAction} className="outline-none">
 				{children}
 			</RACMenu>
@@ -204,11 +212,46 @@ export const UserMenu = ({ trigger, triggerLabel, onAction, children }: UserMenu
 
 export const UserMenuItem = uic(RACMenuItem, {
 	displayName: 'UserMenu.Item',
-	baseClass:
-		'flex cursor-pointer select-none items-center rounded-sm px-3 py-2 text-small text-fg outline-none ' +
-		'data-[focused]:bg-surface-muted data-[disabled]:opacity-50 data-[disabled]:pointer-events-none',
+	baseClass: `${dropdownMenuItemClass} data-[disabled]:pointer-events-none`,
 }) as (props: MenuItemProps) => ReactNode
 
+/**
+ * Two-line item copy (gs `.menuItemStack`): a primary label with a small muted hint
+ * underneath, e.g. "Manager / Current" or "Settings / Opens in GS Manager".
+ */
+export const UserMenuItemText = ({ label, hint }: { label: ReactNode; hint?: ReactNode }) => (
+	<span className="flex min-w-0 flex-col items-start gap-1">
+		<span>{label}</span>
+		{hint ? <span className="text-micro leading-5 font-normal text-fg-muted">{hint}</span> : null}
+	</span>
+)
+
+/**
+ * Non-interactive identity block at the top of the account menu (gs
+ * `.userMenuLabel`): the person's name (13px medium) over a muted detail line.
+ */
+export const UserMenuIdentity = ({ name, detail }: { name: ReactNode; detail?: ReactNode }) => (
+	<MenuSection>
+		<Header className="flex flex-col gap-1 px-4 py-3">
+			<span className="text-compact font-medium text-fg">{name}</span>
+			{detail ? <span className="mt-1 text-micro leading-5 font-medium text-fg-muted">{detail}</span> : null}
+		</Header>
+	</MenuSection>
+)
+
+export type UserMenuSectionProps = { label?: ReactNode; children: ReactNode; 'aria-label'?: string }
+
+/** A labelled group of account-menu items (gs `.menuSectionLabel`, e.g. "Apps"). */
+export const UserMenuSection = ({ label, children, ...props }: UserMenuSectionProps) => (
+	<MenuSection {...props}>
+		{label ? <Header className="px-2 pt-2 pb-1 text-micro leading-5 font-medium text-fg-muted">{label}</Header> : null}
+		{children}
+	</MenuSection>
+)
+
+/** 1px rule between account-menu groups (gs `.separator`). */
+export const UserMenuSeparator = DropdownMenuSeparator
+
 export const Topbar = Object.assign(TopbarRoot, {
 	Brand: TopbarBrand,
 	Nav: TopbarNav,