@agent-native/core 0.76.3 → 0.76.4

package/corpus/core/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @agent-native/core
 
+## 0.76.4
+
+### Patch Changes
+
+- 6067f27: Fix right-to-left (`ar-SA`) layout in shared framework chrome. Physical directional CSS in the agent panel, command menu, language picker, shadcn `ui/*` primitives, settings/composer/org/sharing/onboarding panels, and the agent-conversation/blocks/rich-markdown styles is converted to logical utilities (`ms`/`me`, `ps`/`pe`, `start`/`end`, `text-start`/`text-end`, `border-s`/`border-e`), and directional icons are mirrored with `rtl:-scale-x-100`. No change to left-to-right rendering (logical utilities are identical to physical in LTR).
+
 ## 0.76.3
 
 ### Patch Changes

package/corpus/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/core",
-  "version": "0.76.3",
+  "version": "0.76.4",
   "type": "module",
   "engines": {
     "node": ">=22"

package/corpus/core/src/client/AgentPanel.tsx

@@ -1038,7 +1038,7 @@ function AgentPanelInner({
               type="button"
               tabIndex={-1}
               aria-hidden="true"
-              className="pointer-events-none absolute right-0 top-full h-px w-px opacity-0"
+              className="pointer-events-none absolute end-0 top-full h-px w-px opacity-0"
             />
           }
         />
@@ -1344,7 +1344,7 @@ function AgentPanelInner({
                                   : "text-muted-foreground hover:bg-accent hover:text-foreground",
                               )}
                             >
-                              <span className="truncate pr-1">{tab.label}</span>
+                              <span className="truncate pe-1">{tab.label}</span>
                               {tab.status === "running" && (
                                 <span className="h-1.5 w-1.5 shrink-0 rounded-full bg-muted-foreground/50 animate-pulse" />
                               )}
@@ -1458,7 +1458,7 @@ function AgentPanelInner({
                               : "text-muted-foreground hover:bg-accent hover:text-foreground",
                           )}
                         >
-                          <span className="truncate pr-1">
+                          <span className="truncate pe-1">
                             {tab.subAgentName || tab.label}
                           </span>
                           {tab.status === "running" && (

package/corpus/core/src/client/AgentTaskCard.tsx

@@ -185,7 +185,7 @@ export function AgentTaskCard({
       <button
         type="button"
         aria-expanded={expanded}
-        className="flex w-full items-center gap-2 px-3 py-2 text-left transition-colors hover:bg-muted/45"
+        className="flex w-full items-center gap-2 px-3 py-2 text-start transition-colors hover:bg-muted/45"
         onClick={() => setExpanded(!expanded)}
       >
         <span className="inline-flex h-5 shrink-0 items-center gap-1 rounded-md border border-border/60 bg-background/70 px-1.5 text-[10px] font-medium text-muted-foreground">
@@ -212,6 +212,7 @@ export function AgentTaskCard({
           className={cn(
             "h-3 w-3 shrink-0 text-muted-foreground/40 transition-transform duration-150",
             expanded && "rotate-90",
+            "rtl:-scale-x-100",
           )}
         />
       </button>

package/corpus/core/src/client/AppearancePicker.tsx

@@ -59,7 +59,7 @@ export function AppearancePicker({
                     style={{ background: preset.swatch }}
                   />
                   {active && (
-                    <span className="pointer-events-none absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full border border-border bg-background">
+                    <span className="pointer-events-none absolute -end-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full border border-border bg-background">
                       <IconCheck
                         className="h-3 w-3 text-foreground"
                         stroke={3}

package/corpus/core/src/client/AssistantChat.tsx

@@ -392,8 +392,8 @@ function ComposerAttachmentPreviewCard({
         className={cn(
           "absolute flex h-6 w-6 items-center justify-center rounded-full border border-border/60 bg-background/95 text-muted-foreground shadow-sm transition hover:text-foreground",
           isImage
-            ? "right-1.5 top-1.5 opacity-100 md:opacity-0 md:group-hover:opacity-100"
-            : "right-1.5 top-1.5",
+            ? "end-1.5 top-1.5 opacity-100 md:opacity-0 md:group-hover:opacity-100"
+            : "end-1.5 top-1.5",
         )}
         aria-label={`Remove ${attachment.name}`}
       >
@@ -3133,7 +3133,7 @@ const AssistantChatInner = forwardRef<
                                   content: [{ type: "text", text: suggestion }],
                                 });
                               }}
-                              className="w-full rounded-lg border border-border px-3 py-2 text-left text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground"
+                              className="w-full rounded-lg border border-border px-3 py-2 text-start text-[13px] text-muted-foreground hover:bg-accent hover:text-foreground"
                             >
                               {suggestion}
                             </button>

package/corpus/core/src/client/CommandMenu.tsx

@@ -179,7 +179,7 @@ function CommandShortcut({ children, className }: CommandShortcutProps) {
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
     >
@@ -514,7 +514,7 @@ export function CommandMenu({
             >
               {/* Search input */}
               <div className="flex items-center border-b px-3">
-                <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+                <IconSearch className="me-2 h-4 w-4 shrink-0 opacity-50" />
                 <input
                   ref={inputRef}
                   value={search}
@@ -554,7 +554,7 @@ export function CommandMenu({
                         <span>{changelogLabel}</span>
                         {changelogUnseen && (
                           <span
-                            className="ml-auto h-2 w-2 rounded-full bg-primary"
+                            className="ms-auto h-2 w-2 rounded-full bg-primary"
                             aria-label="New updates available"
                           />
                         )}
@@ -600,7 +600,7 @@ export function CommandMenu({
                           )}
                         </span>
                         {search.trim() && (
-                          <span className="ml-auto text-xs text-muted-foreground">
+                          <span className="ms-auto text-xs text-muted-foreground">
                             ↵
                           </span>
                         )}

package/corpus/core/src/client/ErrorBoundary.tsx

@@ -132,7 +132,7 @@ function ErrorScreen({ error }: { error: unknown }) {
           Reload
         </button>
         {stack && (
-          <pre className="mt-6 w-full text-left text-xs overflow-auto p-4 bg-muted rounded">
+          <pre className="mt-6 w-full text-start text-xs overflow-auto p-4 bg-muted rounded">
             <code>{stack}</code>
           </pre>
         )}

package/corpus/core/src/client/MultiTabAssistantChat.tsx

@@ -196,7 +196,7 @@ function ChatSkeleton({
       {header ?? (
         <div className="flex items-center px-1 py-1 border-b border-border shrink-0 gap-0.5">
           <div className="h-[22px] w-20 rounded-md bg-muted animate-pulse" />
-          <div className="ml-auto flex gap-0.5">
+          <div className="ms-auto flex gap-0.5">
             <div className="h-[22px] w-[22px] rounded-md bg-muted animate-pulse" />
             <div className="h-[22px] w-[22px] rounded-md bg-muted animate-pulse" />
           </div>
@@ -290,7 +290,7 @@ function ScopeBadge({
             <span className="min-w-0 truncate">{heading}</span>
             {otherCount > 0 && (
               <span
-                className="ml-0.5 shrink-0 rounded-full bg-muted px-1.5 py-px text-[10px] leading-none text-muted-foreground"
+                className="ms-0.5 shrink-0 rounded-full bg-muted px-1.5 py-px text-[10px] leading-none text-muted-foreground"
                 aria-label={`${otherCount} other chats for ${objectLabel}`}
               >
                 +{otherCount}
@@ -373,7 +373,7 @@ function PreviousScopedChatsHint({
             key={thread.id}
             type="button"
             onClick={() => onSelectThread(thread.id)}
-            className="flex items-baseline justify-between gap-2 rounded-md border border-border px-2.5 py-1.5 text-left hover:bg-accent cursor-pointer"
+            className="flex items-baseline justify-between gap-2 rounded-md border border-border px-2.5 py-1.5 text-start hover:bg-accent cursor-pointer"
           >
             <span className="truncate text-[12px] text-foreground">
               {thread.title || thread.preview || "Chat"}
@@ -443,7 +443,7 @@ function renderThreadRow(
         onClose();
       }}
       className={cn(
-        "w-full px-3 py-2 text-left hover:bg-accent/50 cursor-pointer",
+        "w-full px-3 py-2 text-start hover:bg-accent/50 cursor-pointer",
         isActive && "bg-accent/30",
       )}
     >
@@ -568,7 +568,7 @@ function HistoryPopover({
   return (
     <Popover open onOpenChange={(open) => !open && onClose()}>
       <PopoverAnchor asChild>
-        <span aria-hidden className="absolute right-2 top-0 h-px w-px" />
+        <span aria-hidden className="absolute end-2 top-0 h-px w-px" />
       </PopoverAnchor>
       <PopoverContent
         align="end"
@@ -682,7 +682,7 @@ function HelpPopover({ onClose }: { onClose: () => void }) {
   return (
     <>
       <div className="fixed inset-0 z-40" onClick={onClose} />
-      <div className="absolute right-2 top-0 z-50 w-72 rounded-lg border border-border bg-popover shadow-lg">
+      <div className="absolute end-2 top-0 z-50 w-72 rounded-lg border border-border bg-popover shadow-lg">
         <div className="flex items-center justify-between px-3 py-2 border-b border-border">
           <span className="text-xs font-medium text-foreground">
             Available Commands
@@ -2548,9 +2548,9 @@ export function MultiTabAssistantChat({
                             <button
                               type="button"
                               onClick={() => switchThread(tab.id)}
-                              className="flex items-center gap-1 px-2.5 py-1.5 min-w-0 flex-1 text-left"
+                              className="flex items-center gap-1 px-2.5 py-1.5 min-w-0 flex-1 text-start"
                             >
-                              <span className="truncate pr-1">{tab.label}</span>
+                              <span className="truncate pe-1">{tab.label}</span>
                               {tab.status === "running" && (
                                 <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/50 shrink-0 animate-pulse" />
                               )}
@@ -2583,7 +2583,7 @@ export function MultiTabAssistantChat({
                       })}
                     </div>
                     <TooltipProvider delayDuration={200}>
-                      <div className="flex items-center gap-px shrink-0 ml-auto">
+                      <div className="flex items-center gap-px shrink-0 ms-auto">
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <button
@@ -2646,9 +2646,9 @@ export function MultiTabAssistantChat({
                             <button
                               type="button"
                               onClick={() => switchThread(tab.id)}
-                              className="flex items-center gap-1 px-2 py-1 min-w-0 flex-1 text-left"
+                              className="flex items-center gap-1 px-2 py-1 min-w-0 flex-1 text-start"
                             >
-                              <span className="truncate pr-1">
+                              <span className="truncate pe-1">
                                 {tab.subAgentName || tab.label}
                               </span>
                               {tab.status === "running" && (

package/corpus/core/src/client/NewWorkspaceAppFlow.tsx

@@ -344,7 +344,7 @@ export function NewWorkspaceAppFlow({
                   href={branchUrl}
                   target="_blank"
                   rel="noreferrer"
-                  className="ml-2 inline-flex items-center gap-1 font-medium text-foreground underline"
+                  className="ms-2 inline-flex items-center gap-1 font-medium text-foreground underline"
                 >
                   Open branch <IconArrowUpRight className="h-3 w-3" />
                 </a>
@@ -394,7 +394,7 @@ export function NewWorkspaceAppFlow({
                       type="button"
                       aria-pressed={selected}
                       onClick={() => toggleSecret(secret.id)}
-                      className="flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                      className="flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                     >
                       <span
                         className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border transition ${
@@ -421,7 +421,7 @@ export function NewWorkspaceAppFlow({
                         <IconChevronDown className="h-3 w-3 transition-transform group-open/details:rotate-180" />
                         Details
                       </summary>
-                      <div className="mt-1.5 space-y-1 pb-0.5 pl-4">
+                      <div className="mt-1.5 space-y-1 pb-0.5 ps-4">
                         <div className="truncate">
                           Provider: {secret.provider || "Not specified"}
                         </div>
@@ -470,7 +470,7 @@ export function NewWorkspaceAppFlow({
                       type="button"
                       aria-pressed={selected}
                       onClick={() => toggleResource(resource.id)}
-                      className="flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
+                      className="flex w-full cursor-pointer items-start gap-3 rounded-md px-3 py-2 text-start focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30"
                     >
                       <span
                         className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded border transition ${
@@ -498,7 +498,7 @@ export function NewWorkspaceAppFlow({
                         <IconChevronDown className="h-3 w-3 transition-transform group-open/details:rotate-180" />
                         Details
                       </summary>
-                      <div className="mt-1.5 space-y-1 pb-0.5 pl-4">
+                      <div className="mt-1.5 space-y-1 pb-0.5 ps-4">
                         <div className="truncate">
                           Scope:{" "}
                           {resource.scope === "all"

package/corpus/core/src/client/components/ui/dropdown-menu.tsx

@@ -21,13 +21,13 @@ const DropdownMenuSubTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
   >
     {children}
-    <IconChevronRight className="ml-auto h-4 w-4" />
+    <IconChevronRight className="ms-auto h-4 w-4 rtl:-scale-x-100" />
   </DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -77,7 +77,7 @@ const DropdownMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -92,13 +92,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <IconCheck className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -116,12 +116,12 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="absolute start-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <IconCircle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -141,7 +141,7 @@ const DropdownMenuLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-xs font-semibold text-muted-foreground",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -166,7 +166,7 @@ const DropdownMenuShortcut = ({
   ...props
 }: React.HTMLAttributes<HTMLSpanElement>) => (
   <span
-    className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+    className={cn("ms-auto text-xs tracking-widest opacity-60", className)}
     {...props}
   />
 );

package/corpus/core/src/client/components/ui/sheet.tsx

@@ -44,7 +44,7 @@ const SheetContent = React.forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+      <SheetPrimitive.Close className="absolute end-3 top-3 flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
         <IconX className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>

package/corpus/core/src/client/composer/ComposerPlusMenu.tsx

@@ -565,7 +565,7 @@ function ComposerPlusMenuFull({
       }}
       className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground mb-1.5"
     >
-      <IconArrowLeft className="h-3 w-3" />
+      <IconArrowLeft className="h-3 w-3 rtl:-scale-x-100" />
       Back
     </button>
   );
@@ -656,7 +656,7 @@ function ComposerPlusMenuFull({
                       type="button"
                       onClick={item.action}
                       className={cn(
-                        "flex w-full items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50",
+                        "flex w-full items-center gap-2.5 px-3 py-2 text-start hover:bg-accent/50",
                         isSkill && skillFlyoutOpen && "bg-accent/50",
                       )}
                     >
@@ -670,7 +670,7 @@ function ComposerPlusMenuFull({
                         </div>
                       </div>
                       {isSkill && (
-                        <span className="ml-auto text-muted-foreground/60">
+                        <span className="ms-auto text-muted-foreground/60">
                           ›
                         </span>
                       )}
@@ -694,7 +694,7 @@ function ComposerPlusMenuFull({
                             setSkillFlyoutOpen(false);
                             setOpen(false);
                           }}
-                          className="flex w-full items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50"
+                          className="flex w-full items-center gap-2.5 px-3 py-2 text-start hover:bg-accent/50"
                         >
                           <span className="text-muted-foreground">
                             <IconBulb className="h-3.5 w-3.5" />
@@ -714,7 +714,7 @@ function ComposerPlusMenuFull({
                             setSkillFlyoutOpen(false);
                             skillFileInputRef.current?.click();
                           }}
-                          className="flex w-full items-center gap-2.5 px-3 py-2 text-left hover:bg-accent/50"
+                          className="flex w-full items-center gap-2.5 px-3 py-2 text-start hover:bg-accent/50"
                         >
                           <span className="text-muted-foreground">
                             <IconUpload className="h-3.5 w-3.5" />
@@ -743,7 +743,7 @@ function ComposerPlusMenuFull({
                 onClick={() => setView("menu")}
                 className="mb-1.5 flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground"
               >
-                <IconArrowLeft className="h-3 w-3" />
+                <IconArrowLeft className="h-3 w-3 rtl:-scale-x-100" />
                 Back
               </button>
               <label className="mb-1 block text-[11px] font-semibold text-foreground">

package/corpus/core/src/client/composer/MentionPopover.tsx

@@ -299,7 +299,7 @@ export const MentionPopover = forwardRef<
                           <button
                             key={item.id}
                             data-mention-index={idx}
-                            className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm ${
+                            className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm ${
                               idx === selectedIndex
                                 ? "bg-accent text-accent-foreground"
                                 : "hover:bg-accent/50"
@@ -312,7 +312,7 @@ export const MentionPopover = forwardRef<
                               {item.label}
                             </span>
                             {item.description && (
-                              <span className="ml-auto shrink-0 truncate max-w-[160px] text-xs text-muted-foreground">
+                              <span className="ms-auto shrink-0 truncate max-w-[160px] text-xs text-muted-foreground">
                                 {item.description}
                               </span>
                             )}
@@ -337,7 +337,7 @@ export const MentionPopover = forwardRef<
                               <button
                                 key={cmd.name}
                                 data-mention-index={i}
-                                className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm ${
+                                className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm ${
                                   i === selectedIndex
                                     ? "bg-accent text-accent-foreground"
                                     : "hover:bg-accent/50"
@@ -374,7 +374,7 @@ export const MentionPopover = forwardRef<
                               <button
                                 key={skill.path}
                                 data-mention-index={i}
-                                className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm ${
+                                className={`flex w-full items-center gap-2 rounded px-2 py-1.5 text-start text-sm ${
                                   i === selectedIndex
                                     ? "bg-accent text-accent-foreground"
                                     : "hover:bg-accent/50"

package/corpus/core/src/client/composer/PastedTextChip.tsx

@@ -74,11 +74,11 @@ export function PastedTextChip({
         <button
           type="button"
           className={cn(
-            "group relative inline-flex items-center gap-2 rounded-md border border-border/70 bg-muted/50 text-left text-foreground hover:bg-muted/70 cursor-pointer",
+            "group relative inline-flex items-center gap-2 rounded-md border border-border/70 bg-muted/50 text-start text-foreground hover:bg-muted/70 cursor-pointer",
             compact
               ? "max-w-[220px] px-2 py-1.5 text-xs"
               : "max-w-[260px] px-2.5 py-2 text-xs",
-            onRemove && !compact && "pr-7",
+            onRemove && !compact && "pe-7",
           )}
           aria-label="Preview pasted text"
         >
@@ -106,7 +106,7 @@ export function PastedTextChip({
               aria-label="Remove pasted text"
               className={cn(
                 "flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground hover:text-foreground",
-                compact ? "" : "absolute right-1.5 top-1.5",
+                compact ? "" : "absolute end-1.5 top-1.5",
               )}
             >
               <IconX className="h-3 w-3" />

package/corpus/core/src/client/composer/PromptComposer.tsx

@@ -314,7 +314,7 @@ function ImagePreviewLightbox({
         type="button"
         onClick={onClose}
         aria-label="Close preview"
-        className="absolute right-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-white/30 bg-black/40 text-white hover:bg-black/60"
+        className="absolute end-4 top-4 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full border border-white/30 bg-black/40 text-white hover:bg-black/60"
       >
         <IconX className="h-4 w-4" />
       </button>
@@ -371,7 +371,7 @@ function AttachmentChip({
               }
             }}
             aria-label={`Remove ${attachment.name}`}
-            className="absolute right-1 top-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border border-border/60 bg-background/90 text-muted-foreground hover:text-foreground"
+            className="absolute end-1 top-1 flex h-5 w-5 cursor-pointer items-center justify-center rounded-full border border-border/60 bg-background/90 text-muted-foreground hover:text-foreground"
           >
             <IconX className="h-3 w-3" />
           </span>
@@ -539,7 +539,7 @@ function PromptComposerInner({
 
   return (
     <AgentComposerFrame
-      className={cn("text-left", className)}
+      className={cn("text-start", className)}
       rootClassName={rootClassName}
       style={style}
       rootStyle={rootStyle}

package/corpus/core/src/client/composer/TiptapComposer.tsx

@@ -323,7 +323,7 @@ function ComposerModeChip({
       <button
         type="button"
         onClick={onRemove}
-        className="ml-0.5 rounded-sm text-muted-foreground hover:text-foreground cursor-pointer"
+        className="ms-0.5 rounded-sm text-muted-foreground hover:text-foreground cursor-pointer"
       >
         <IconX className="h-3 w-3" />
       </button>
@@ -539,7 +539,7 @@ function ModeSelector({
             onChange("build");
             setOpen(false);
           }}
-          className="flex w-full items-center gap-3 px-3 py-2 hover:bg-accent/50 text-left"
+          className="flex w-full items-center gap-3 px-3 py-2 hover:bg-accent/50 text-start"
         >
           <IconPencil className="h-4 w-4 shrink-0 text-muted-foreground" />
           <div className="flex-1 min-w-0">
@@ -561,7 +561,7 @@ function ModeSelector({
             onChange("plan");
             setOpen(false);
           }}
-          className={`flex w-full items-center gap-3 px-3 py-2 text-left ${
+          className={`flex w-full items-center gap-3 px-3 py-2 text-start ${
             planModeDisabled
               ? "cursor-not-allowed opacity-60"
               : "hover:bg-accent/50"
@@ -861,7 +861,7 @@ function ModelSelector({
                 }
               }}
               disabled={!onConnectProvider && builderFlow.connecting}
-              className="flex w-full items-start gap-2 px-3 py-2 text-left hover:bg-accent/50 disabled:opacity-60"
+              className="flex w-full items-start gap-2 px-3 py-2 text-start hover:bg-accent/50 disabled:opacity-60"
             >
               <IconPlugConnected className="h-4 w-4 shrink-0 mt-0.5 text-blue-500" />
               <span className="flex-1 min-w-0">
@@ -885,12 +885,12 @@ function ModelSelector({
                 type="button"
                 aria-expanded={imageExpanded}
                 onClick={() => setImageExpanded((prev) => !prev)}
-                className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-left"
+                className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start"
               >
                 {imageExpanded ? (
                   <IconChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
                 ) : (
-                  <IconChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+                  <IconChevronRight className="h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" />
                 )}
                 <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0">
                   {imageModel.label ?? "Image model"}
@@ -911,7 +911,7 @@ function ModelSelector({
                     imageModel.onChange(option.value);
                     setImageExpanded(false);
                   }}
-                  className="flex w-full items-center gap-3 pl-7 pr-3 py-1.5 text-left hover:bg-accent/50"
+                  className="flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start hover:bg-accent/50"
                 >
                   <span className="flex-1 min-w-0 text-[13px] text-foreground truncate">
                     {option.label}
@@ -931,7 +931,7 @@ function ModelSelector({
               onChange("auto", autoModelGroup.engine);
               setOpen(false);
             }}
-            className="flex w-full items-center gap-3 px-3 py-1.5 text-left hover:bg-accent/50"
+            className="flex w-full items-center gap-3 px-3 py-1.5 text-start hover:bg-accent/50"
           >
             <span className="flex-1 min-w-0 text-[13px] text-foreground truncate">
               Auto
@@ -956,9 +956,9 @@ function ModelSelector({
                   type="button"
                   aria-expanded={isExpanded}
                   onClick={() => toggleGroup(groupKey)}
-                  className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-left"
+                  className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start"
                 >
-                  <ChevronIcon className="h-3 w-3 shrink-0 text-muted-foreground" />
+                  <ChevronIcon className="h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" />
                   <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0">
                     {group.label}
                   </span>
@@ -971,7 +971,7 @@ function ModelSelector({
                 {!group.configured && (
                   <button
                     type="button"
-                    className="text-[10px] text-muted-foreground/60 hover:text-foreground cursor-pointer pr-3 py-1.5"
+                    className="text-[10px] text-muted-foreground/60 hover:text-foreground cursor-pointer pe-3 py-1.5"
                     onClick={openLlmSettings}
                   >
                     needs API key
@@ -999,7 +999,7 @@ function ModelSelector({
                       }
                       setOpen(false);
                     }}
-                    className={`flex w-full items-center gap-3 pl-7 pr-3 py-1.5 text-left ${
+                    className={`flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start ${
                       group.configured
                         ? "hover:bg-accent/50"
                         : "opacity-40 cursor-default"
@@ -1024,12 +1024,12 @@ function ModelSelector({
                 type="button"
                 aria-expanded={reasoningExpanded}
                 onClick={() => setReasoningExpanded((prev) => !prev)}
-                className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-left"
+                className="flex flex-1 min-w-0 items-center gap-1.5 px-2 py-1.5 cursor-pointer text-start"
               >
                 {reasoningExpanded ? (
                   <IconChevronDown className="h-3 w-3 shrink-0 text-muted-foreground" />
                 ) : (
-                  <IconChevronRight className="h-3 w-3 shrink-0 text-muted-foreground" />
+                  <IconChevronRight className="h-3 w-3 shrink-0 text-muted-foreground rtl:-scale-x-100" />
                 )}
                 <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wide shrink-0">
                   Reasoning
@@ -1047,7 +1047,7 @@ function ModelSelector({
                   key={option}
                   type="button"
                   onClick={() => onEffortChange?.(option)}
-                  className="flex w-full items-center gap-3 pl-7 pr-3 py-1.5 text-left hover:bg-accent/50"
+                  className="flex w-full items-center gap-3 ps-7 pe-3 py-1.5 text-start hover:bg-accent/50"
                 >
                   <span className="flex-1 min-w-0 text-[13px] text-foreground truncate">
                     {reasoningEffortLabel(option)}
@@ -2154,7 +2154,7 @@ export function TiptapComposer({
                 type="button"
                 onClick={() => onRemoveContextItem?.(item.key)}
                 aria-label={`Remove ${item.title} context`}
-                className="ml-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
+                className="ms-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
               >
                 <IconX className="h-3 w-3" />
               </button>