@agent-native/core 0.76.3 → 0.76.4

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",

package/corpus/core/src/client/org/OrgSwitcher.tsx

@@ -208,7 +208,7 @@ function AppsSubmenu({
       <PopoverPrimitive.Trigger asChild>
         <button type="button" className={`${ITEM_CLASS} cursor-pointer`}>
           <IconApps className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-          <span className="flex-1 text-left">Apps</span>
+          <span className="flex-1 text-start">Apps</span>
           <span className="text-[11px] text-muted-foreground">
             {isLoading ? (
               <IconLoader2 className="h-3 w-3 animate-spin" />
@@ -216,7 +216,7 @@ function AppsSubmenu({
               apps.length
             )}
           </span>
-          <IconChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+          <IconChevronRight className="h-3.5 w-3.5 shrink-0 text-muted-foreground rtl:-scale-x-100" />
         </button>
       </PopoverPrimitive.Trigger>
       <PopoverPrimitive.Portal>
@@ -366,7 +366,7 @@ export function OrgSwitcher({
           className={`flex w-full items-center gap-2 rounded-md border border-border/50 px-2.5 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer ${className ?? ""}`}
         >
           <ButtonIcon className="h-3.5 w-3.5 shrink-0" />
-          <span className="truncate flex-1 text-left">{buttonLabel}</span>
+          <span className="truncate flex-1 text-start">{buttonLabel}</span>
           <IconSelector className="h-3 w-3 shrink-0 opacity-50" />
         </button>
       </PopoverPrimitive.Trigger>
@@ -390,7 +390,7 @@ export function OrgSwitcher({
                   aria-disabled="true"
                 >
                   <IconUser className="h-3.5 w-3.5 shrink-0" />
-                  <span className="truncate flex-1 text-left">
+                  <span className="truncate flex-1 text-start">
                     Personal ({personalLabel})
                   </span>
                 </div>
@@ -418,7 +418,9 @@ export function OrgSwitcher({
                   className={`${ITEM_CLASS} cursor-pointer`}
                 >
                   <IconBuilding className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                  <span className="truncate flex-1 text-left">{o.orgName}</span>
+                  <span className="truncate flex-1 text-start">
+                    {o.orgName}
+                  </span>
                   {o.orgId === org.orgId && (
                     <IconCheck className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                   )}
@@ -535,7 +537,7 @@ export function OrgSwitcher({
                   className={`${ITEM_CLASS} cursor-pointer`}
                 >
                   <IconSettings className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                  <span className="flex-1 text-left">
+                  <span className="flex-1 text-start">
                     Organization settings
                   </span>
                 </button>
@@ -552,7 +554,7 @@ export function OrgSwitcher({
                 className={`${ITEM_CLASS} cursor-pointer`}
               >
                 <IconPlus className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                <span className="flex-1 text-left">Create organization</span>
+                <span className="flex-1 text-start">Create organization</span>
               </button>
               {canInvite && (
                 <button
@@ -564,7 +566,7 @@ export function OrgSwitcher({
                   className={`${ITEM_CLASS} cursor-pointer`}
                 >
                   <IconUserPlus className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-                  <span className="flex-1 text-left">Invite member</span>
+                  <span className="flex-1 text-start">Invite member</span>
                 </button>
               )}
 
@@ -578,12 +580,12 @@ export function OrgSwitcher({
                 {signingOut ? (
                   <IconLoader2 className="h-3.5 w-3.5 shrink-0 animate-spin text-muted-foreground" />
                 ) : (
-                  <IconLogout className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+                  <IconLogout className="h-3.5 w-3.5 shrink-0 text-muted-foreground rtl:-scale-x-100" />
                 )}
-                <span className="flex-1 text-left">
+                <span className="flex-1 text-start">
                   Sign out
                   {org.email ? (
-                    <span className="ml-1 text-muted-foreground">
+                    <span className="ms-1 text-muted-foreground">
                       ({org.email})
                     </span>
                   ) : null}

package/corpus/core/src/client/org/TeamPage.tsx

@@ -866,7 +866,7 @@ function BulkInviteForm({
             <ul className="space-y-0.5 text-[11px] text-red-500">
               {resultBanner.failed.map((f) => (
                 <li key={f.email}>
-                  <IconAlertTriangle className="inline h-3 w-3 -mt-0.5 mr-1" />
+                  <IconAlertTriangle className="inline h-3 w-3 -mt-0.5 me-1" />
                   {f.email}: {f.error}
                 </li>
               ))}
@@ -1176,7 +1176,7 @@ function A2ASecretSection({ secret }: { secret: string | null | undefined }) {
             {syncResult.failed > 0 ? ` (${syncResult.failed} failed)` : ""}.
           </p>
           {syncResult.failed > 0 && (
-            <ul className="text-[11px] text-red-500 list-disc pl-5 space-y-0.5">
+            <ul className="text-[11px] text-red-500 list-disc ps-5 space-y-0.5">
               {syncResult.results
                 .filter((r) => !r.ok)
                 .map((r) => (

package/corpus/core/src/client/settings/AgentsSection.tsx

@@ -62,7 +62,7 @@ function AgentEditPopover({
   return (
     <div
       ref={popoverRef}
-      className="absolute right-0 top-full z-50 mt-1 w-64 rounded-lg border border-border bg-popover p-2.5 shadow-lg"
+      className="absolute end-0 top-full z-50 mt-1 w-64 rounded-lg border border-border bg-popover p-2.5 shadow-lg"
     >
       <div className="flex flex-col gap-1.5">
         <input
@@ -163,7 +163,7 @@ function AgentAddPopover({
   return (
     <div
       ref={popoverRef}
-      className="absolute right-0 top-full z-50 mt-1 w-64 rounded-lg border border-border bg-popover p-2.5 shadow-lg"
+      className="absolute end-0 top-full z-50 mt-1 w-64 rounded-lg border border-border bg-popover p-2.5 shadow-lg"
     >
       <div className="flex flex-col gap-1.5">
         <input
@@ -393,7 +393,7 @@ export function AgentsSection() {
                 <span className="text-[11px] font-medium text-foreground truncate shrink-0">
                   {agent.name}
                 </span>
-                <span className="flex-1 text-[10px] text-muted-foreground/60 truncate text-right">
+                <span className="flex-1 text-[10px] text-muted-foreground/60 truncate text-end">
                   {agent.url}
                 </span>
                 <Tooltip>

package/corpus/core/src/client/settings/AutomationsSection.tsx

@@ -354,12 +354,12 @@ export function AutomationsSection() {
                   </span>
                 </div>
                 {item.scheduleDescription && (
-                  <p className="text-[10px] text-muted-foreground mt-0.5 ml-[17px]">
+                  <p className="text-[10px] text-muted-foreground mt-0.5 ms-[17px]">
                     {item.scheduleDescription}
                   </p>
                 )}
                 {item.schedule && !item.scheduleDescription && (
-                  <p className="text-[10px] text-muted-foreground mt-0.5 ml-[17px] font-mono">
+                  <p className="text-[10px] text-muted-foreground mt-0.5 ms-[17px] font-mono">
                     {item.schedule}
                   </p>
                 )}
@@ -430,7 +430,7 @@ export function AutomationsSection() {
               </div>
             </div>
             {item.lastRun && (
-              <p className="text-[10px] text-muted-foreground mt-1 ml-[17px]">
+              <p className="text-[10px] text-muted-foreground mt-1 ms-[17px]">
                 Last run:{" "}
                 {new Date(item.lastRun).toLocaleString(undefined, {
                   month: "short",

package/corpus/core/src/client/settings/SecretsSection.tsx

@@ -370,7 +370,7 @@ function SecretCard({ secret, onChanged, focusInput }: SecretCardProps) {
                 href={secret.docsUrl}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-1 rounded border border-border px-2 py-1 text-[10px] no-underline text-muted-foreground hover:text-foreground ml-auto"
+                className="inline-flex items-center gap-1 rounded border border-border px-2 py-1 text-[10px] no-underline text-muted-foreground hover:text-foreground ms-auto"
               >
                 Get key
                 <IconExternalLink size={10} />
@@ -626,7 +626,7 @@ function AdHocKeysSection() {
               <option value="user">Personal</option>
               <option value="workspace">Workspace</option>
             </select>
-            <div className="ml-auto flex items-center gap-1.5">
+            <div className="ms-auto flex items-center gap-1.5">
               <button
                 type="button"
                 onClick={resetForm}

package/corpus/core/src/client/settings/SettingsPanel.tsx

@@ -116,7 +116,7 @@ function SettingsSelect({
       </div>
       <SelectPrimitive.Root value={value} onValueChange={onValueChange}>
         <SelectPrimitive.Trigger
-          className="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"
+          className="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={label}
           style={CONTROL_STYLE}
         >
@@ -141,7 +141,7 @@ function SettingsSelect({
                   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"
                   style={CONTROL_STYLE}
                 >
-                  <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 size={14} />
                     </SelectPrimitive.ItemIndicator>
@@ -406,7 +406,7 @@ function UseBuilderCard({
       type="button"
       onClick={() => builderFlow.start({ trackingSource, trackingFlow })}
       disabled={builderFlow.connecting}
-      className={`block w-full rounded-md border border-border px-3 py-3 text-left no-underline bg-gradient-to-br from-teal-500/10 via-transparent to-transparent hover:border-foreground/30 transition-colors disabled:cursor-wait disabled:opacity-70`}
+      className={`block w-full rounded-md border border-border px-3 py-3 text-start no-underline bg-gradient-to-br from-teal-500/10 via-transparent to-transparent hover:border-foreground/30 transition-colors disabled:cursor-wait disabled:opacity-70`}
     >
       <div className="flex items-start gap-2.5">
         <div className="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-foreground text-background">
@@ -980,7 +980,7 @@ function LLMSectionInner({
                       <TooltipTrigger asChild>
                         <button
                           onClick={handleDisconnect}
-                          className="ml-auto rounded border border-border px-2.5 py-1 text-[10px] font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/40"
+                          className="ms-auto rounded border border-border px-2.5 py-1 text-[10px] font-medium text-muted-foreground hover:bg-destructive/10 hover:text-destructive hover:border-destructive/40"
                         >
                           Disconnect
                         </button>
@@ -1955,9 +1955,7 @@ function CapabilityStatusRow({
         />
         {label}
       </span>
-      <span className="min-w-0 truncate text-right text-foreground">
-        {value}
-      </span>
+      <span className="min-w-0 truncate text-end text-foreground">{value}</span>
     </div>
   );
 }

package/corpus/core/src/client/settings/SettingsSection.tsx

@@ -35,7 +35,7 @@ export function SettingsSection({
       <button
         type="button"
         onClick={onToggle}
-        className="flex w-full cursor-pointer items-center justify-between px-3 py-2.5 text-left rounded-lg hover:bg-accent/40 transition-colors"
+        className="flex w-full cursor-pointer items-center justify-between px-3 py-2.5 text-start rounded-lg hover:bg-accent/40 transition-colors"
       >
         <div className="flex items-center gap-2 min-w-0">
           <span className="shrink-0 text-muted-foreground">{icon}</span>

package/corpus/core/src/client/settings/UsageSection.tsx

@@ -139,7 +139,7 @@ function BucketBars({
             </span>
             <span className="shrink-0 text-muted-foreground tabular-nums">
               {formatSpend(b.cents, billing)}
-              <span className="ml-1 opacity-60">
+              <span className="ms-1 opacity-60">
                 · {formatTokens(b.inputTokens + b.outputTokens)} tok
               </span>
             </span>
@@ -268,7 +268,7 @@ export function UsageSection() {
                   {formatSpend(data.totalCents, billing)}
                 </div>
               </div>
-              <div className="text-right">
+              <div className="text-end">
                 <div className="text-[10px] text-muted-foreground">
                   {data.totalCalls} calls
                 </div>
@@ -350,7 +350,7 @@ export function UsageSection() {
                         {new Date(r.createdAt).toLocaleString()} · {r.model}
                       </div>
                     </div>
-                    <div className="shrink-0 text-right tabular-nums text-muted-foreground">
+                    <div className="shrink-0 text-end tabular-nums text-muted-foreground">
                       {formatSpend(r.cents, billing)}
                     </div>
                   </div>

package/corpus/core/src/client/settings/VoiceTranscriptionSection.tsx

@@ -506,7 +506,7 @@ export function VoiceTranscriptionSection() {
             {showAdvanced ? (
               <IconChevronDown size={12} />
             ) : (
-              <IconChevronRight size={12} />
+              <IconChevronRight size={12} className="rtl:-scale-x-100" />
             )}
             Add API keys
           </span>
@@ -763,7 +763,7 @@ function ProviderOption({
       aria-pressed={selected}
       aria-disabled={disabled || undefined}
       // Theme tokens; streaming agent owns layout.
-      className={`w-full text-left rounded-md border px-2.5 py-2 flex items-start gap-2 ${
+      className={`w-full text-start rounded-md border px-2.5 py-2 flex items-start gap-2 ${
         selected
           ? "border-primary bg-primary/10"
           : "border-border bg-accent/30 hover:bg-accent/50"
@@ -944,7 +944,7 @@ function SystemAudioStatus() {
         <button
           type="button"
           onClick={openPrivacy}
-          className="ml-1 inline-flex items-center gap-1 rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-accent/40 hover:text-foreground"
+          className="ms-1 inline-flex items-center gap-1 rounded border border-border px-1.5 py-0.5 text-[10px] text-muted-foreground hover:bg-accent/40 hover:text-foreground"
         >
           <IconLockOpen size={10} />
           Open System Settings

package/corpus/core/src/client/sharing/ShareButton.tsx

@@ -1028,7 +1028,7 @@ function AdvancedAccessPopover({
             disabled={!canManage || control.pending}
             onClick={onToggle}
             className={cn(
-              "flex w-full items-start gap-3 rounded-md border border-border/70 bg-background px-3 py-2.5 text-left transition-colors hover:bg-accent/45 disabled:cursor-not-allowed disabled:opacity-60",
+              "flex w-full items-start gap-3 rounded-md border border-border/70 bg-background px-3 py-2.5 text-start transition-colors hover:bg-accent/45 disabled:cursor-not-allowed disabled:opacity-60",
               control.checked && "border-border bg-accent/35 text-foreground",
             )}
           >
@@ -1181,7 +1181,7 @@ function MemberAutocomplete({
             aria-hidden
             size={15}
             strokeWidth={1.8}
-            className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
+            className="pointer-events-none absolute start-2.5 top-1/2 -translate-y-1/2 text-muted-foreground"
           />
           <input
             ref={inputRef}
@@ -1209,14 +1209,14 @@ function MemberAutocomplete({
             }}
             onKeyDown={handleKeyDown}
             autoComplete="off"
-            className="h-9 w-full min-w-0 rounded-md border border-input bg-background pl-8 pr-8 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
+            className="h-9 w-full min-w-0 rounded-md border border-input bg-background ps-8 pe-8 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
           />
           {search.isLoading ? (
             <IconLoader2
               aria-hidden
               size={15}
               strokeWidth={1.8}
-              className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 animate-spin text-muted-foreground"
+              className="pointer-events-none absolute end-2.5 top-1/2 -translate-y-1/2 animate-spin text-muted-foreground"
             />
           ) : null}
         </div>
@@ -1377,7 +1377,7 @@ function CopyLinkField({
 const selectContentClass =
   "z-[2100] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0";
 const selectItemClass =
-  "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm py-2 pl-8 pr-3 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+  "relative flex w-full cursor-pointer select-none items-start gap-2 rounded-sm py-2 ps-8 pe-3 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 
 interface ShadSelectItemProps {
   value: string;
@@ -1394,7 +1394,7 @@ function SelectItems({ items }: { items: ShadSelectItemProps[] }) {
           value={it.value}
           className={selectItemClass}
         >
-          <span className="absolute left-2 top-2 flex h-4 w-4 items-center justify-center">
+          <span className="absolute start-2 top-2 flex h-4 w-4 items-center justify-center">
             <Select.ItemIndicator>
               <IconCheck size={14} />
             </Select.ItemIndicator>
@@ -1485,7 +1485,7 @@ function VisibilitySelect(props: {
       <Select.Trigger
         className={cn(
           BUTTON_BASE,
-          "h-7 px-1 -ml-1 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
+          "h-7 px-1 -ms-1 bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
         )}
         aria-label="General access"
       >