@agent-native/core 0.76.3 → 0.76.5

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>

package/corpus/core/src/client/guided-questions.tsx

@@ -475,7 +475,7 @@ export function GuidedQuestionFlow({
           </div>
         </div>
 
-        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto pr-1">
+        <div className="min-h-0 flex-1 space-y-4 overflow-y-auto pe-1">
           {questions.map((question, index) => (
             <QuestionCard
               key={question.id}
@@ -516,7 +516,7 @@ export function GuidedQuestionFlow({
               className="inline-flex cursor-pointer items-center gap-2 rounded-md bg-primary px-3.5 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-45"
             >
               {submitLabel}
-              <IconChevronRight className="h-4 w-4" />
+              <IconChevronRight className="h-4 w-4 rtl:-scale-x-100" />
             </button>
           </div>
         </div>
@@ -551,7 +551,7 @@ function QuestionCard({
           <h3 className="text-sm font-medium leading-5 text-foreground">
             {question.question}
             {question.required && (
-              <span className="ml-1 text-destructive">*</span>
+              <span className="ms-1 text-destructive">*</span>
             )}
           </h3>
           {question.description && (
@@ -700,7 +700,7 @@ function OptionButton({
       onClick={onClick}
       aria-pressed={selected}
       className={cn(
-        "group flex min-h-[56px] cursor-pointer items-start gap-2 rounded-md border px-3 py-2 text-left transition-colors",
+        "group flex min-h-[56px] cursor-pointer items-start gap-2 rounded-md border px-3 py-2 text-start transition-colors",
         selected
           ? "border-primary bg-primary/10 text-foreground ring-2 ring-primary/25"
           : "border-border bg-muted/30 text-muted-foreground hover:border-muted-foreground/50 hover:bg-muted/45 hover:text-foreground",
@@ -831,10 +831,8 @@ function SliderQuestion({
         onChange={(event) => onChange(Number(event.target.value))}
         className="h-2 flex-1 cursor-pointer accent-primary"
       />
-      <span className="w-8 text-right text-xs text-muted-foreground">
-        {max}
-      </span>
-      <span className="min-w-10 text-right text-sm font-medium tabular-nums text-foreground">
+      <span className="w-8 text-end text-xs text-muted-foreground">{max}</span>
+      <span className="min-w-10 text-end text-sm font-medium tabular-nums text-foreground">
         {current}
       </span>
     </div>

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

@@ -543,7 +543,7 @@ export function LanguagePicker({
           className={
             variant === "icon"
               ? "flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground"
-              : "flex h-9 w-full items-center justify-between rounded-md border border-border bg-background px-3 text-left text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground"
+              : "flex h-9 w-full items-center justify-between rounded-md border border-border bg-background px-3 text-start text-[12px] text-foreground outline-none transition-colors hover:bg-accent/40 data-[placeholder]:text-muted-foreground"
           }
           aria-label={resolvedLabel}
           title={selected?.label ?? resolvedLabel}
@@ -581,7 +581,7 @@ export function LanguagePicker({
                   value={option.value}
                   className="relative flex w-full cursor-pointer select-none items-start gap-2 rounded-md px-8 py-2.5 text-[12px] outline-none data-[highlighted]:bg-accent/60 data-[state=checked]:bg-accent/40"
                 >
-                  <span className="absolute left-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground">
+                  <span className="absolute start-2 top-2.5 flex h-4 w-4 items-center justify-center text-muted-foreground">
                     <SelectPrimitive.ItemIndicator>
                       <IconCheck className="h-3.5 w-3.5" />
                     </SelectPrimitive.ItemIndicator>

package/corpus/core/src/client/integrations/IntegrationCard.tsx

@@ -99,7 +99,7 @@ export function IntegrationCard({
     <div className="rounded-md border border-border bg-background">
       <button
         onClick={() => setExpanded(!expanded)}
-        className="flex w-full items-center gap-2 px-2.5 py-2 text-left hover:bg-accent/50"
+        className="flex w-full items-center gap-2 px-2.5 py-2 text-start hover:bg-accent/50"
       >
         {expanded ? (
           <IconChevronDown
@@ -109,7 +109,7 @@ export function IntegrationCard({
         ) : (
           <IconChevronRight
             size={12}
-            className="text-muted-foreground shrink-0"
+            className="text-muted-foreground shrink-0 rtl:-scale-x-100"
           />
         )}
         <Icon size={16} className="text-muted-foreground shrink-0" />

package/corpus/core/src/client/integrations/IntegrationsPanel.tsx

@@ -243,7 +243,7 @@ function IntegrationDetail({
         onClick={onBack}
         className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2"
       >
-        <IconChevronLeft size={12} />
+        <IconChevronLeft size={12} className="rtl:-scale-x-100" />
         Back
       </button>
 
@@ -444,7 +444,7 @@ function AddIntegrationPicker({
         <button
           key={platform.id}
           onClick={() => onSelect(platform)}
-          className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent/50"
+          className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start hover:bg-accent/50"
         >
           <platform.icon size={14} className="shrink-0 text-muted-foreground" />
           <div className="flex-1 min-w-0">
@@ -498,7 +498,7 @@ export function IntegrationsPanel() {
           onClick={() => setShowPicker(false)}
           className="flex items-center gap-1 text-[10px] text-muted-foreground hover:text-foreground mb-2"
         >
-          <IconChevronLeft size={12} />
+          <IconChevronLeft size={12} className="rtl:-scale-x-100" />
           Back
         </button>
         <div className="text-[10px] font-medium text-muted-foreground mb-1.5">
@@ -575,7 +575,7 @@ export function IntegrationsPanel() {
               <button
                 key={platform.id}
                 onClick={() => setSelectedPlatform(platform)}
-                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent/50"
+                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-start hover:bg-accent/50"
               >
                 <platform.icon
                   size={14}

package/corpus/core/src/client/notifications/NotificationsBell.tsx

@@ -244,7 +244,7 @@ export function NotificationsBell({
           {hasUnread ? (
             <span
               aria-hidden
-              className="an-notifications-bell__badge absolute -right-0.5 -top-0.5 rounded-full bg-destructive px-1 text-[10px] leading-[14px] font-medium text-destructive-foreground"
+              className="an-notifications-bell__badge absolute -end-0.5 -top-0.5 rounded-full bg-destructive px-1 text-[10px] leading-[14px] font-medium text-destructive-foreground"
             >
               {unreadCount > 99 ? "99+" : unreadCount}
             </span>
@@ -314,7 +314,7 @@ export function NotificationsBell({
                     type="button"
                     onClick={onItemClick}
                     className={
-                      "flex w-full flex-col items-start gap-0.5 px-3 py-2 pr-8 text-left" +
+                      "flex w-full flex-col items-start gap-0.5 px-3 py-2 pe-8 text-start" +
                       (link ? " cursor-pointer" : "")
                     }
                   >
@@ -340,7 +340,7 @@ export function NotificationsBell({
                       e.stopPropagation();
                       void dismiss(n.id);
                     }}
-                    className="absolute right-2 top-2 hidden rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground group-hover:flex"
+                    className="absolute end-2 top-2 hidden rounded p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground group-hover:flex"
                   >
                     <IconX size={12} />
                   </button>

package/corpus/core/src/client/onboarding/OnboardingBanner.tsx

@@ -38,7 +38,7 @@ export function OnboardingBanner({
       </span>
       <span style={styles.cta}>
         Continue
-        <IconChevronRight size={12} />
+        <IconChevronRight size={12} className="rtl:-scale-x-100" />
       </span>
     </button>
   );
@@ -57,11 +57,11 @@ const styles: Record<string, React.CSSProperties> = {
     color: "inherit",
     fontSize: 12,
     cursor: "pointer",
-    textAlign: "left" as const,
+    textAlign: "start" as const,
   },
   left: { display: "flex", alignItems: "center", gap: 6 },
   title: { fontWeight: 600 },
-  counter: { opacity: 0.65, marginLeft: 4 },
+  counter: { opacity: 0.65, marginInlineStart: 4 },
   cta: {
     display: "flex",
     alignItems: "center",

package/corpus/core/src/client/onboarding/OnboardingPanel.tsx

@@ -108,7 +108,11 @@ export function OnboardingPanel({
                 {completeCount} of {totalCount}
               </span>
               <span
-                style={{ marginLeft: "auto", opacity: 0.5, display: "flex" }}
+                style={{
+                  marginInlineStart: "auto",
+                  opacity: 0.5,
+                  display: "flex",
+                }}
               >
                 <IconChevronDown size={14} />
               </span>
@@ -226,7 +230,7 @@ function StepCard({
           {expanded ? (
             <IconChevronDown size={14} />
           ) : (
-            <IconChevronRight size={14} />
+            <IconChevronRight size={14} className="rtl:-scale-x-100" />
           )}
         </span>
       </button>
@@ -360,7 +364,7 @@ function ManagedProviderMethodGroup({
               {showKeyForm ? (
                 <IconChevronDown size={14} />
               ) : (
-                <IconChevronRight size={14} />
+                <IconChevronRight size={14} className="rtl:-scale-x-100" />
               )}
             </span>
           </button>
@@ -550,7 +554,9 @@ function LinkMethod({
       style={{ ...buttonPrimary(method.primary), textDecoration: "none" }}
     >
       Continue
-      {external && <IconExternalLink size={12} style={{ marginLeft: 4 }} />}
+      {external && (
+        <IconExternalLink size={12} style={{ marginInlineStart: 4 }} />
+      )}
     </a>
   );
 }
@@ -657,7 +663,7 @@ function BuilderCliAuthMethod({
           <>
             <IconLoader2
               size={12}
-              style={{ marginRight: 4 }}
+              style={{ marginInlineEnd: 4 }}
               className="animate-spin"
             />
             Waiting for Builder...
@@ -740,7 +746,7 @@ function badgeStyle(
     soon: { bg: "rgba(148,163,184,0.15)", fg: "#cbd5e1" },
   }[kind];
   return {
-    marginLeft: 6,
+    marginInlineStart: 6,
     fontSize: 10,
     padding: "1px 6px",
     borderRadius: 4,
@@ -798,7 +804,7 @@ const styles: Record<string, React.CSSProperties> = {
   headerCounter: {
     opacity: 0.5,
     fontSize: 11,
-    marginLeft: 4,
+    marginInlineStart: 4,
   },
   dismissBtn: {
     background: "transparent",
@@ -837,7 +843,7 @@ const styles: Record<string, React.CSSProperties> = {
     color: "inherit",
     padding: "7px 9px",
     cursor: "pointer",
-    textAlign: "left" as const,
+    textAlign: "start" as const,
   },
   cardHeaderLeft: {
     display: "flex",
@@ -880,7 +886,8 @@ const styles: Record<string, React.CSSProperties> = {
     border: "1px solid rgba(255,255,255,0.2)",
   },
   cardBody: {
-    padding: "0 10px 10px 34px",
+    paddingBlock: "0 10px",
+    paddingInline: "34px 10px",
     display: "flex",
     flexDirection: "column",
     gap: 8,
@@ -934,7 +941,7 @@ const styles: Record<string, React.CSSProperties> = {
     cursor: "pointer",
     fontSize: 11,
     fontWeight: 500,
-    textAlign: "left" as const,
+    textAlign: "start" as const,
   },
   secondaryToggleLeft: {
     display: "flex",