@opengeni/react 0.44.3 → 0.44.5

package/src/components/model-policy-picker.tsx

@@ -9,8 +9,17 @@ import {
 } from "lucide-react";
 import { motion, useReducedMotion } from "motion/react";
 import { DropdownMenu } from "radix-ui";
-import { useEffect, useMemo, useState, type ReactNode, type SVGProps } from "react";
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type CSSProperties,
+  type ReactNode,
+  type SVGProps,
+} from "react";
 import { cn } from "../lib/cn";
+import { usePortalTokenStyle } from "../lib/use-portal-token-style";
 import {
   coerceReasoningEffortForModel,
   effortOptionsForModel,
@@ -72,12 +81,21 @@ export type ModelPolicyPickerProps = {
   disabled?: boolean | undefined;
   loading?: boolean | undefined;
   error?: string | null | undefined;
+  /** Controlled menu state. Omit for the built-in uncontrolled behavior. */
+  open?: boolean | undefined;
+  /** Initial menu state when `open` is uncontrolled. */
+  defaultOpen?: boolean | undefined;
+  onOpenChange?: ((open: boolean) => void) | undefined;
   /** Non-Codex models stay visible but cannot be selected. */
   codexOnly?: boolean | undefined;
   /** Resets drill-down navigation when the session scope changes. */
   sessionKey?: string | undefined;
   /** Prefer bottom on new-chat surfaces and top for bottom-docked composers. */
   menuSide?: "top" | "bottom" | undefined;
+  /** Classes for the portalled menu surface. Prefer --og-* tokens for theming. */
+  contentClassName?: string | undefined;
+  /** Inline styles for the portalled menu, applied after inherited --og-* tokens. */
+  contentStyle?: CSSProperties | undefined;
   className?: string | undefined;
   messages?: Partial<ModelPolicyPickerMessages> | undefined;
   onModelChange: (modelId: string) => void;
@@ -225,17 +243,19 @@ export function PickerNavRow(props: {
       onClick={props.onClick}
       data-testid={props.testId}
       className={cn(
-        "flex w-full cursor-pointer items-center gap-2 rounded-og-sm px-2.5 py-2 text-left text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40",
+        "flex w-full cursor-pointer items-center gap-2 rounded-og-sm px-[var(--og-model-picker-row-padding-x)] py-[var(--og-model-picker-row-padding-y)] text-left text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40",
         props.disabled && "cursor-not-allowed opacity-50",
       )}
     >
       {props.icon}
       <span className="min-w-0 flex-1">
-        <span className={cn("block truncate text-sm", props.active && "font-medium")}>
+        <span className={cn("block truncate text-og-menu", props.active && "font-medium")}>
           {props.label}
         </span>
         {props.hint ? (
-          <span className="mt-0.5 block truncate text-xs text-og-fg-subtle">{props.hint}</span>
+          <span className="mt-0.5 block truncate text-og-control text-og-fg-subtle">
+            {props.hint}
+          </span>
         ) : null}
       </span>
       {props.trailing ? <span className="ml-auto shrink-0">{props.trailing}</span> : null}
@@ -262,7 +282,7 @@ export function PickerBackHeader(props: {
       >
         <ChevronLeftIcon className="size-3.5 shrink-0 text-og-fg-subtle" />
         {props.icon}
-        <span className="min-w-0 flex-1 truncate text-sm font-medium">{props.label}</span>
+        <span className="min-w-0 flex-1 truncate text-og-menu font-medium">{props.label}</span>
       </button>
       {props.trailing ? <div className="relative z-10 shrink-0">{props.trailing}</div> : null}
     </div>
@@ -352,9 +372,9 @@ export function ModelPolicyPickerMenu(
 
   let body: ReactNode;
   if (props.loading) {
-    body = <p className="px-2 py-3 text-xs text-og-fg-subtle">{messages.loading}</p>;
+    body = <p className="px-2 py-3 text-og-control text-og-fg-subtle">{messages.loading}</p>;
   } else if (groups.length === 0) {
-    body = <p className="px-2 py-3 text-xs text-og-fg-subtle">{messages.noModels}</p>;
+    body = <p className="px-2 py-3 text-og-control text-og-fg-subtle">{messages.noModels}</p>;
   } else if (effectiveNav.level === "providers") {
     body = (
       <div className="flex flex-col gap-0.5" data-testid="model-picker-providers">
@@ -449,11 +469,11 @@ export function ModelPolicyPickerMenu(
             ) : null
           }
         />
-        <p className="px-2.5 pt-1 pb-1 text-xs font-medium tracking-wide text-og-fg-subtle uppercase">
+        <p className="px-2.5 pt-1 pb-1 text-og-control font-medium tracking-wide text-og-fg-subtle uppercase">
           {messages.thinking}
         </p>
         {focusModel.catalog.capabilities?.inputModalities.includes("image") === false ? (
-          <p className="px-2.5 pb-1.5 text-xs leading-relaxed text-og-fg-subtle">
+          <p className="px-2.5 pb-1.5 text-og-control leading-relaxed text-og-fg-subtle">
             Unsupported attachments stay in the session but are hidden from this model.
           </p>
         ) : null}
@@ -467,7 +487,7 @@ export function ModelPolicyPickerMenu(
                 disabled={!focusModel.selectable}
                 onClick={() => selectEffort(focusModel, effort)}
                 className={cn(
-                  "flex h-8 w-full cursor-pointer items-center rounded-og-sm px-2.5 text-left text-sm text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
+                  "flex h-[var(--og-model-picker-effort-height)] w-full cursor-pointer items-center rounded-og-sm px-[var(--og-model-picker-row-padding-x)] text-left text-og-menu text-og-fg outline-none transition-colors hover:bg-og-surface-2 focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
                   selected && "bg-og-surface-2",
                 )}
               >
@@ -504,7 +524,7 @@ export function ModelPolicyPickerMenu(
   return (
     <div data-testid="model-picker-menu" className="relative overflow-hidden">
       {props.error ? (
-        <p className="px-2 py-1 text-xs text-og-status-failed" role="alert">
+        <p className="px-2 py-1 text-og-control text-og-status-failed" role="alert">
           {props.error}
         </p>
       ) : null}
@@ -516,7 +536,14 @@ export function ModelPolicyPickerMenu(
 }
 
 export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
-  const [open, setOpen] = useState(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(props.defaultOpen ?? false);
+  const open = props.open ?? uncontrolledOpen;
+  const setOpen = (next: boolean) => {
+    if (props.open === undefined) setUncontrolledOpen(next);
+    props.onOpenChange?.(next);
+  };
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const portalStyle = usePortalTokenStyle(triggerRef);
   const messages = useMemo(
     () => ({ ...defaultModelPolicyPickerMessages, ...props.messages }),
     [props.messages],
@@ -541,11 +568,12 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
     <DropdownMenu.Root open={open} onOpenChange={setOpen}>
       <DropdownMenu.Trigger asChild>
         <button
+          ref={triggerRef}
           type="button"
           disabled={props.disabled}
           aria-label={messages.label}
           className={cn(
-            "inline-flex h-8 min-w-0 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-xs text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-7 max-sm:max-w-[7.5rem] max-sm:px-2",
+            "og-root inline-flex h-[var(--og-model-picker-trigger-height)] min-w-0 max-w-64 items-center gap-1 rounded-full border border-transparent px-2.5 text-og-control text-og-fg-muted outline-none transition-colors hover:border-og-border hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:cursor-not-allowed disabled:opacity-50 max-sm:h-[var(--og-model-picker-trigger-height-mobile)] max-sm:max-w-[7.5rem] max-sm:px-2",
             props.className,
           )}
         >
@@ -580,7 +608,12 @@ export function ModelPolicyPicker(props: ModelPolicyPickerProps) {
           sideOffset={8}
           collisionPadding={12}
           onCloseAutoFocus={(event) => event.preventDefault()}
-          className="z-50 flex max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] w-72 max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 p-1.5 text-og-fg shadow-og-lg"
+          className={cn(
+            "og-root z-50 flex max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height))] w-[var(--og-model-picker-menu-width)] max-w-[calc(100vw-16px)] flex-col overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 p-[var(--og-model-picker-menu-padding)] text-og-fg shadow-og-lg",
+            props.contentClassName,
+          )}
+          style={{ ...portalStyle, ...props.contentStyle }}
+          data-testid="model-picker-content"
         >
           <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
             <ModelPolicyPickerMenu {...props} nav={nav} onNavChange={setNav} />

package/src/components/queue-surface-implementation.tsx

@@ -40,6 +40,7 @@ import {
 import { DropdownMenu } from "radix-ui";
 import type { ComposerState } from "../hooks/use-composer";
 import type { QueueMutationKind, UseTurnQueueResult } from "../hooks/use-turn-queue";
+import { type PortalTokenStyle, usePortalTokenStyle } from "../lib/use-portal-token-style";
 import { requestQueueDraftEdit } from "./queue-draft-policy";
 import { QueueErrorAlert, QueueStoppingStatus } from "./queue-surface-state";
 
@@ -80,6 +81,7 @@ export function QueueSurface({
   const [announcement, setAnnouncement] = useState("");
   const [draggedTurnId, setDraggedTurnId] = useState<string | null>(null);
   const surfaceRef = useRef<HTMLDivElement | null>(null);
+  const portalTokenStyle = usePortalTokenStyle(surfaceRef);
   const [keyboardDrag, setKeyboardDrag] = useState<{
     turnId: string;
     projectedIndex: number;
@@ -244,7 +246,7 @@ export function QueueSurface({
   return (
     <div
       ref={surfaceRef}
-      className="mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6"
+      className="og-root mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6"
       data-testid="queue-surface"
     >
       <div className="overflow-hidden rounded-lg border border-border bg-surface/80 shadow-sm">
@@ -265,7 +267,7 @@ export function QueueSurface({
             aria-hidden="true"
             className={`size-3.5 shrink-0 text-fg-subtle transition-transform ${open ? "rotate-180" : ""}`}
           />
-          <span className="text-xs font-medium text-fg">
+          <span className="text-og-control font-medium text-fg">
             {count > 0 ? `${count} queued prompt${count === 1 ? "" : "s"}` : null}
             {count > 0 && pendingInputCount > 0 ? " · " : null}
             {pendingInputCount > 0
@@ -273,7 +275,7 @@ export function QueueSurface({
               : null}
           </span>
           {readOnly ? (
-            <span className="shrink-0 rounded border border-border px-1.5 py-0.5 text-2xs text-fg-subtle">
+            <span className="shrink-0 rounded border border-border px-1.5 py-0.5 text-og-xs text-fg-subtle">
               Read-only
             </span>
           ) : null}
@@ -282,7 +284,7 @@ export function QueueSurface({
               aria-hidden="true"
               className={`max-w-full truncate text-fg-muted ${
                 collapsedPreview.collapsedVisual === collapsedPreview.summary
-                  ? "min-w-0 flex-1 text-xs"
+                  ? "min-w-0 flex-1 text-og-control"
                   : "shrink-0 text-[10px]"
               }`}
               data-testid="queue-collapsed-preview"
@@ -352,6 +354,7 @@ export function QueueSurface({
                     pending={queue.mutationFor(turn.id)}
                     confirmingReplace={replaceDraftFor === turn.id}
                     keyboardDragging={keyboardDrag?.turnId === turn.id}
+                    portalTokenStyle={portalTokenStyle}
                     onHandleKeyDown={(event) => onHandleKeyDown(event, turn.id)}
                     onMove={(nextIndex) => void moveToIndex(turn.id, nextIndex)}
                     onEdit={canEditInComposer ? () => requestEdit(turn) : undefined}
@@ -393,7 +396,7 @@ export function QueueSurface({
             <DragOverlay modifiers={[verticalOnly]}>
               {draggedTurnId ? (
                 <div
-                  className="max-h-20 w-[min(36rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] overflow-hidden rounded-md border border-brand/40 bg-surface px-3 py-2 text-xs text-fg shadow-lg"
+                  className="max-h-20 w-[min(36rem,calc(100vw-2rem))] max-w-[calc(100vw-2rem)] overflow-hidden rounded-md border border-brand/40 bg-surface px-3 py-2 text-og-control text-fg shadow-lg"
                   data-testid="queue-drag-overlay"
                 >
                   <p
@@ -434,14 +437,18 @@ function PendingMachineInputs({
 }) {
   return (
     <section className="border-t border-border px-3 py-2">
-      <p className="text-2xs font-medium text-fg-subtle">
+      <p className="text-og-xs font-medium text-fg-subtle">
         {attached
           ? `${inputs.length} update${inputs.length === 1 ? "" : "s"} will join this prompt`
           : "Incoming updates waiting to run"}
       </p>
       <ol className="mt-1 space-y-1">
         {inputs.map((input) => (
-          <li key={input.id} className="line-clamp-3 break-words text-xs text-fg" dir="auto">
+          <li
+            key={input.id}
+            className="line-clamp-3 break-words text-og-control text-fg"
+            dir="auto"
+          >
             <strong className="capitalize text-fg-muted">
               {input.kind.replace("_terminal", "").replaceAll("_", " ")}
             </strong>{" "}
@@ -756,7 +763,7 @@ function QueuePrompt({
     <div className="w-full min-w-0 max-w-full">
       <div
         aria-label={`Queued prompt ${index + 1} summary: ${preview.summary}`}
-        className="max-w-full overflow-hidden text-xs leading-5 text-fg"
+        className="max-w-full overflow-hidden text-og-control leading-5 text-fg"
         data-testid={`queue-prompt-preview-${index + 1}`}
         dir="auto"
         role="note"
@@ -771,7 +778,7 @@ function QueuePrompt({
           </span>
           {preview.visibleIdentity && preview.visibleIdentityLabel ? (
             <span
-              className="flex min-w-0 max-w-[70%] shrink-0 items-center gap-1 text-2xs leading-4 text-fg-muted sm:mt-0.5 sm:max-w-full"
+              className="flex min-w-0 max-w-[70%] shrink-0 items-center gap-1 text-og-xs leading-4 text-fg-muted sm:mt-0.5 sm:max-w-full"
               data-testid={`queue-prompt-identity-row-${index + 1}`}
             >
               <span className="shrink-0 font-medium text-fg-subtle">
@@ -793,7 +800,7 @@ function QueuePrompt({
         aria-controls={fullContentId}
         aria-expanded={expanded}
         aria-label={`${expanded ? "Hide" : "Show"} full content for queued prompt ${index + 1}`}
-        className="mt-1 inline-flex min-h-7 min-w-0 max-w-full items-center gap-1 whitespace-normal rounded-md text-left text-2xs font-medium text-fg outline-none focus-visible:ring-2 focus-visible:ring-ring/40 pointer-coarse:min-h-[44px]"
+        className="mt-1 inline-flex min-h-7 min-w-0 max-w-full items-center gap-1 whitespace-normal rounded-md text-left text-og-xs font-medium text-fg outline-none focus-visible:ring-2 focus-visible:ring-ring/40 pointer-coarse:min-h-[44px]"
         data-testid={`queue-prompt-disclosure-${index + 1}`}
         onClick={() => {
           const next = !expanded;
@@ -812,7 +819,7 @@ function QueuePrompt({
           id={fullContentId}
           role="region"
           aria-label={`Full content for queued prompt ${index + 1}`}
-          className="mt-1.5 max-h-64 w-full min-w-0 max-w-full overflow-auto overscroll-contain rounded-md border border-border bg-surface-2/60 p-2 whitespace-pre-wrap break-all font-mono text-xs leading-5 text-fg [unicode-bidi:plaintext]"
+          className="mt-1.5 max-h-64 w-full min-w-0 max-w-full overflow-auto overscroll-contain rounded-md border border-border bg-surface-2/60 p-2 whitespace-pre-wrap break-all font-mono text-og-control leading-5 text-fg [unicode-bidi:plaintext]"
           data-testid={`queue-prompt-full-${index + 1}`}
           dir="auto"
           tabIndex={0}
@@ -837,13 +844,13 @@ function ReadOnlyQueueRow({
 }) {
   return (
     <li className="flex min-w-0 items-start gap-2 bg-surface px-3 py-2">
-      <span className="mt-1 shrink-0 font-mono text-2xs text-fg-subtle">{index + 1}</span>
+      <span className="mt-1 shrink-0 font-mono text-og-xs text-fg-subtle">{index + 1}</span>
       <div className="min-w-0 flex-1">
         <QueuePrompt prompt={turn.prompt} index={index} onDisclosureChange={onDisclosureChange} />
         {attachedInputs.length > 0 ? (
           <PendingMachineInputs inputs={attachedInputs} attached />
         ) : null}
-        <div className="mt-1 flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap text-2xs text-fg-subtle">
+        <div className="mt-1 flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap text-og-xs text-fg-subtle">
           {turn.resources.length > 0 ? (
             <span className="shrink-0">
               {turn.resources.length} resource{turn.resources.length === 1 ? "" : "s"}
@@ -870,6 +877,7 @@ function SortableQueueRow({
   pending,
   confirmingReplace,
   keyboardDragging,
+  portalTokenStyle,
   onHandleKeyDown,
   onMove,
   onEdit,
@@ -886,6 +894,7 @@ function SortableQueueRow({
   pending: QueueMutationKind | null;
   confirmingReplace: boolean;
   keyboardDragging: boolean;
+  portalTokenStyle: PortalTokenStyle;
   onHandleKeyDown: (event: ReactKeyboardEvent<HTMLButtonElement>) => void;
   onMove: (index: number) => void;
   onEdit?: (() => void) | undefined;
@@ -924,7 +933,7 @@ function SortableQueueRow({
         >
           <GripVerticalIcon className="size-3.5" />
         </button>
-        <span className="col-start-2 row-start-1 mt-1 shrink-0 font-mono text-2xs text-fg-subtle">
+        <span className="col-start-2 row-start-1 mt-1 shrink-0 font-mono text-og-xs text-fg-subtle">
           {index + 1}
         </span>
         <div className="col-span-full row-start-2 min-w-0 sm:col-span-1 sm:col-start-3 sm:row-start-1">
@@ -932,7 +941,7 @@ function SortableQueueRow({
           {attachedInputs.length > 0 ? (
             <PendingMachineInputs inputs={attachedInputs} attached />
           ) : null}
-          <div className="mt-1 flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap text-2xs text-fg-subtle">
+          <div className="mt-1 flex min-w-0 items-center gap-2 overflow-hidden whitespace-nowrap text-og-xs text-fg-subtle">
             {turn.resources.length > 0 ? (
               <span className="shrink-0">
                 {turn.resources.length} resource{turn.resources.length === 1 ? "" : "s"}
@@ -954,7 +963,7 @@ function SortableQueueRow({
             onClick={onSteer}
             aria-label={`Steer queued prompt ${index + 1}`}
             title="Steer — interrupt the current turn and send this message now"
-            className="inline-flex h-7 shrink-0 items-center justify-center gap-1 rounded-md px-2 text-xs font-medium text-fg outline-none transition-[background-color] hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 pointer-coarse:min-h-[44px] pointer-coarse:min-w-[44px]"
+            className="inline-flex h-7 shrink-0 items-center justify-center gap-1 rounded-md px-2 text-og-control font-medium text-fg outline-none transition-[background-color] hover:bg-surface-2 focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 pointer-coarse:min-h-[44px] pointer-coarse:min-w-[44px]"
           >
             {pending === "steer" ? (
               <Loader2Icon className="size-3.5 animate-spin" />
@@ -996,7 +1005,8 @@ function SortableQueueRow({
               <DropdownMenu.Content
                 align="end"
                 sideOffset={4}
-                className="z-50 w-48 max-w-[calc(100vw-16px)] rounded-md border border-border bg-surface p-1 text-xs text-fg shadow-lg"
+                className="og-root z-50 w-48 max-w-[calc(100vw-16px)] rounded-md border border-border bg-surface p-1 text-og-control text-fg shadow-lg"
+                style={portalTokenStyle}
                 data-testid={`queue-actions-menu-${index + 1}`}
               >
                 {onEdit ? (
@@ -1044,7 +1054,7 @@ function SortableQueueRow({
         </div>
       </div>
       {confirmingReplace ? (
-        <div className="mx-3 mb-2 rounded-md border border-status-waiting/30 bg-status-waiting/10 p-2 text-xs text-fg">
+        <div className="mx-3 mb-2 rounded-md border border-status-waiting/30 bg-status-waiting/10 p-2 text-og-control text-fg">
           <p>Your composer already has a draft. Replace it with this queued prompt?</p>
           <p className="mt-0.5 text-fg-muted">
             The current draft will be permanently discarded; this queued prompt is preserved until

package/src/components/queue-surface-state.tsx

@@ -10,7 +10,7 @@ export function EmptyQueueStateSurface({ queue }: QueueStateProps) {
   const hasError = Boolean(queue.error || queue.mutationError);
   return (
     <div
-      className="mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6"
+      className="og-root mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6"
       data-testid="queue-surface"
     >
       <div className="overflow-hidden rounded-lg border border-border bg-surface/80 shadow-sm">
@@ -31,7 +31,7 @@ export function QueueStoppingStatus({
     <div
       role="status"
       aria-live="polite"
-      className={`flex min-h-11 items-center gap-2.5 bg-status-waiting/[0.07] px-3 py-2 text-xs text-fg ${
+      className={`flex min-h-11 items-center gap-2.5 bg-status-waiting/[0.07] px-3 py-2 text-og-control text-fg ${
         dividerAfter ? "border-b border-status-waiting/20" : ""
       }`}
       data-testid="stopping-previous-attempt"
@@ -64,7 +64,7 @@ export function QueueErrorAlert({
     <div className={`${dividerBefore ? "border-t border-border" : ""} p-2`}>
       <div
         role="alert"
-        className="flex min-w-0 max-w-full flex-wrap items-start gap-2 rounded-md bg-status-failed/10 px-2 py-1.5 text-xs text-status-failed"
+        className="flex min-w-0 max-w-full flex-wrap items-start gap-2 rounded-md bg-status-failed/10 px-2 py-1.5 text-og-control text-status-failed"
       >
         <span
           role="region"

package/src/components/queue-surface.tsx

@@ -43,12 +43,12 @@ function QueueSurfaceFallback() {
   return (
     <div
       aria-live="polite"
-      className="mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6"
+      className="og-root mx-auto mb-2 w-full max-w-3xl shrink-0 px-4 sm:px-6"
       data-testid="queue-surface-loading"
       role="status"
     >
       <div className="overflow-hidden rounded-lg border border-border bg-surface/80 shadow-sm">
-        <div className="flex items-center gap-2 px-3 py-2 text-xs text-fg-muted pointer-coarse:min-h-[44px]">
+        <div className="flex items-center gap-2 px-3 py-2 text-og-control text-fg-muted pointer-coarse:min-h-[44px]">
           <Loader2Icon
             aria-hidden="true"
             className="size-3.5 shrink-0 animate-spin motion-reduce:animate-none"

package/src/components/session-status.tsx

@@ -77,7 +77,7 @@ export function SessionStatus({ status, label, size = "md", className }: Session
       data-status={status}
       className={cn(
         "og-root inline-flex shrink-0 items-center rounded-full border font-medium",
-        size === "sm" ? "gap-1 px-1.5 py-px text-og-xs" : "gap-1.5 px-2 py-0.5 text-xs",
+        size === "sm" ? "gap-1 px-1.5 py-px text-og-xs" : "gap-1.5 px-2 py-0.5 text-og-control",
         meta.badgeClassName,
         className,
       )}

package/src/lib/cn.ts

@@ -15,7 +15,20 @@ import { extendTailwindMerge } from "tailwind-merge";
 const twMerge = extendTailwindMerge({
   extend: {
     classGroups: {
-      "font-size": [{ text: ["og-xs", "og-sm", "og-base", "og-md"] }],
+      "font-size": [
+        {
+          text: [
+            "og-xs",
+            "og-sm",
+            "og-base",
+            "og-md",
+            "og-control",
+            "og-menu",
+            "og-composer",
+            "og-composer-wide",
+          ],
+        },
+      ],
     },
   },
 });

package/src/lib/use-portal-token-style.ts

@@ -34,7 +34,7 @@ export function usePortalTokenStyle(sourceRef: RefObject<HTMLElement | null>): P
       const observer = new MutationObserver(sync);
       observer.observe(ancestor, {
         attributes: true,
-        attributeFilter: ["class", "data-og-theme", "style"],
+        attributeFilter: ["class", "data-og-density", "data-og-theme", "style"],
       });
       observers.push(observer);
       ancestor = ancestor.parentElement;

package/src/provider.tsx

@@ -152,17 +152,17 @@ function ApiContractMismatchScreen({ mismatch }: { mismatch: OpenGeniApiContract
       data-opengeni-api-contract-mismatch
     >
       <div className="w-full max-w-md rounded-xl border border-og-border bg-og-surface p-6 shadow-2xl">
-        <p className="text-sm font-semibold text-og-fg">OpenGeni updated</p>
-        <p className="mt-2 text-sm leading-6 text-og-muted">
+        <p className="text-og-menu font-semibold text-og-fg">OpenGeni updated</p>
+        <p className="mt-2 text-og-menu leading-6 text-og-muted">
           This tab cannot safely continue with the new server version. Reload it before sending or
           controlling work.
         </p>
-        <p className="mt-3 font-mono text-xs text-og-subtle">
+        <p className="mt-3 font-mono text-og-control text-og-subtle">
           Client {mismatch.expected} · API {mismatch.actual}
         </p>
         <button
           type="button"
-          className="mt-5 inline-flex h-9 items-center rounded-md bg-og-fg px-3 text-sm font-medium text-og-bg"
+          className="mt-5 inline-flex h-9 items-center rounded-md bg-og-fg px-3 text-og-menu font-medium text-og-bg"
           onClick={() => window.location.reload()}
         >
           Reload now

package/src/realtime/dropdown-menu.tsx

@@ -2,31 +2,69 @@
 
 import { ChevronRightIcon } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
-import type { ComponentProps } from "react";
+import {
+  createContext,
+  useContext,
+  useRef,
+  type ComponentProps,
+  type Ref,
+  type RefObject,
+} from "react";
 import { cn } from "../lib/cn";
+import { usePortalTokenStyle } from "../lib/use-portal-token-style";
+
+const DropdownMenuSourceContext = createContext<RefObject<HTMLElement | null> | null>(null);
+
+function assignRef<T>(ref: Ref<T> | undefined, value: T | null) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
 
 function DropdownMenu(props: ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
+  const sourceRef = useRef<HTMLElement | null>(null);
+  return (
+    <DropdownMenuSourceContext.Provider value={sourceRef}>
+      <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+    </DropdownMenuSourceContext.Provider>
+  );
 }
 
-function DropdownMenuTrigger(props: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return <DropdownMenuPrimitive.Trigger data-slot="dropdown-menu-trigger" {...props} />;
+function DropdownMenuTrigger({
+  ref,
+  ...props
+}: ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  const sourceRef = useContext(DropdownMenuSourceContext);
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      ref={(node) => {
+        if (sourceRef) sourceRef.current = node;
+        assignRef(ref, node);
+      }}
+      {...props}
+    />
+  );
 }
 
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  style,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  const sourceRef = useContext(DropdownMenuSourceContext);
+  const fallbackRef = useRef<HTMLElement | null>(null);
+  const portalStyle = usePortalTokenStyle(sourceRef ?? fallbackRef);
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          "og-root z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
           className,
         )}
+        style={{ ...portalStyle, ...style }}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
@@ -48,7 +86,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-og-menu outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
         className,
       )}
       {...props}
@@ -84,7 +122,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-og-menu outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         className,
       )}
       {...props}
@@ -97,15 +135,20 @@ function DropdownMenuSubTrigger({
 
 function DropdownMenuSubContent({
   className,
+  style,
   ...props
 }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  const sourceRef = useContext(DropdownMenuSourceContext);
+  const fallbackRef = useRef<HTMLElement | null>(null);
+  const portalStyle = usePortalTokenStyle(sourceRef ?? fallbackRef);
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        "og-root z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         className,
       )}
+      style={{ ...portalStyle, ...style }}
       {...props}
     />
   );

package/src/realtime/realtime-control.tsx

@@ -866,8 +866,8 @@ export function RealtimeVoiceModelPanel(props: {
       <div className="flex shrink-0 items-start gap-1 px-2 pt-1 pb-1.5">
         {props.leading}
         <div className="min-w-0">
-          <div className="text-sm font-medium text-og-fg">Voice model</div>
-          <p className="mt-0.5 text-xs text-og-fg-subtle">
+          <div className="text-og-menu font-medium text-og-fg">Voice model</div>
+          <p className="mt-0.5 text-og-control text-og-fg-subtle">
             Used when you start a voice conversation.
           </p>
         </div>