@agent-native/core 0.76.2 → 0.76.4

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

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

@@ -649,7 +649,7 @@ function CopyField({
 const selectContentClass =
   "z-[2100] min-w-[12rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md";
 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";
 
 function SelectItems({
   items,
@@ -664,7 +664,7 @@ function SelectItems({
           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>
@@ -734,7 +734,7 @@ function VisibilitySelect(props: {
         aria-label="General access"
         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",
         )}
       >
         <Select.Value>{current.label}</Select.Value>

package/corpus/core/src/deploy/build.ts

@@ -2123,11 +2123,11 @@ export default bundle;
     copyInstalledFfmpegStaticPackage(nitro.options.output.serverDir);
   }
 
-  // Durable background agent runs (default-ON; opt out with a falsy
+  // Durable background agent runs (default-OFF / opt-in; enable with a truthy
   // AGENT_CHAT_DURABLE_BACKGROUND). Additive ONLY: emits a SECOND Netlify
   // function whose name ends in `-background` re-exporting the same handler
   // bundle, so the chat `_process-run` POST lands on Netlify's async (15-min)
-  // function. When explicitly opted out this is a no-op and the single-function
+  // function. When not opted in this is a no-op and the single-function
   // deploy is byte-for-byte unchanged.
   if (preset === "netlify" && isDurableBackgroundDeployEnabled()) {
     try {

package/corpus/core/src/styles/agent-conversation.css

@@ -31,7 +31,7 @@
 
 .agent-conversation__scroll-bottom {
   position: absolute;
-  right: 18px;
+  inset-inline-end: 18px;
   bottom: 92px;
   z-index: 2;
   display: flex;
@@ -115,12 +115,12 @@
 
 .agent-conversation-markdown ul,
 .agent-conversation-markdown ol {
-  padding-left: 20px;
+  padding-inline-start: 20px;
 }
 
 .agent-conversation-markdown li {
   margin: 3px 0;
-  padding-left: 2px;
+  padding-inline-start: 2px;
 }
 
 .agent-conversation-markdown li > p {
@@ -248,7 +248,7 @@
 }
 
 .agent-conversation-tool__summary {
-  margin-left: auto;
+  margin-inline-start: auto;
   font-size: 11px;
 }
 
@@ -410,7 +410,7 @@
   display: inline-flex;
   align-items: center;
   gap: 5px;
-  margin-left: auto;
+  margin-inline-start: auto;
   color: hsl(var(--muted-foreground));
   text-decoration: none;
 }
@@ -496,7 +496,7 @@
 .agent-markdown ul,
 .agent-markdown ol {
   margin: 0.5em 0;
-  padding-left: 1.5em;
+  padding-inline-start: 1.5em;
 }
 
 .agent-markdown li {
@@ -576,8 +576,8 @@
 }
 
 .agent-markdown blockquote {
-  border-left: 2px solid hsl(var(--border, 0 0% 20%));
-  padding-left: 0.75em;
+  border-inline-start: 2px solid hsl(var(--border, 0 0% 20%));
+  padding-inline-start: 0.75em;
   margin: 0.5em 0;
   opacity: 0.8;
 }
@@ -592,7 +592,7 @@
 .agent-markdown td {
   border: 1px solid hsl(var(--border, 0 0% 20%));
   padding: 0.35em 0.65em;
-  text-align: left;
+  text-align: start;
 }
 
 .agent-markdown th {
@@ -608,7 +608,7 @@
   display: inline-block;
   width: 0.42em;
   height: 1em;
-  margin-left: 0.12em;
+  margin-inline-start: 0.12em;
   border-radius: 999px;
   background: currentColor;
   opacity: 0.35;

package/corpus/core/src/styles/blocks.css

@@ -642,7 +642,7 @@
 .plan-code-chrome-float {
   position: absolute;
   top: 0.5rem;
-  right: 0.5rem;
+  inset-inline-end: 0.5rem;
   z-index: 2;
 }
 
@@ -917,7 +917,7 @@
   background: transparent;
   color: hsl(var(--foreground));
   font-size: 0.8rem;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
 }
 

package/corpus/core/src/styles/rich-markdown-editor.css

@@ -317,7 +317,7 @@
 .an-rich-md-prose h3.is-empty::before,
 .an-rich-md-prose h4.is-empty::before {
   content: attr(data-placeholder);
-  float: left;
+  float: inline-start;
   color: hsl(var(--muted-foreground));
   opacity: 0.55;
   pointer-events: none;
@@ -432,7 +432,7 @@
   align-items: center;
   gap: 8px;
   padding: 6px 10px;
-  text-align: left;
+  text-align: start;
   background: none;
   border: none;
   cursor: pointer;

package/corpus/templates/analytics/app/components/layout/MobileNav.tsx

@@ -19,7 +19,7 @@ export function MobileNav() {
     <div className="flex h-12 shrink-0 items-center border-b border-border bg-sidebar px-4 md:hidden">
       <button
         onClick={() => setOpen(true)}
-        className="mr-3 p-2.5 -ml-1 rounded-md hover:bg-sidebar-accent/50"
+        className="me-3 p-2.5 -ms-1 rounded-md hover:bg-sidebar-accent/50"
         aria-label={t("navigation.openNavigation")}
       >
         <IconMenu className="h-5 w-5 text-foreground" />

package/corpus/templates/analytics/app/components/ui/alert-dialog.tsx

@@ -49,7 +49,7 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      "flex flex-col space-y-2 text-center sm:text-start",
       className,
     )}
     {...props}

package/corpus/templates/analytics/app/components/ui/alert.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg~*]:ps-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg]:text-foreground",
   {
     variants: {
       variant: {

package/corpus/templates/analytics/app/components/ui/breadcrumb.tsx

@@ -83,7 +83,7 @@ const BreadcrumbSeparator = ({
     className={cn("[&>svg]:size-3.5", className)}
     {...props}
   >
-    {children ?? <IconChevronRight />}
+    {children ?? <IconChevronRight className="rtl:-scale-x-100" />}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

package/corpus/templates/analytics/app/components/ui/calendar.tsx

@@ -25,11 +25,11 @@ function Calendar({
         nav: "flex items-center gap-1",
         button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1 top-1 z-10",
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute start-1 top-1 z-10",
         ),
         button_next: cn(
           buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 top-1 z-10",
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute end-1 top-1 z-10",
         ),
         month_grid: "w-full border-collapse",
         weekdays: "flex",
@@ -47,8 +47,8 @@ function Calendar({
         outside: "text-muted-foreground opacity-50",
         disabled: "text-muted-foreground opacity-50",
         hidden: "invisible",
-        range_start: "rounded-l-md",
-        range_end: "rounded-r-md",
+        range_start: "rounded-s-md",
+        range_end: "rounded-e-md",
         range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
         ...classNames,
@@ -56,9 +56,9 @@ function Calendar({
       components={{
         Chevron: (props) => {
           if (props.orientation === "left") {
-            return <IconChevronLeft className="h-4 w-4" />;
+            return <IconChevronLeft className="h-4 w-4 rtl:-scale-x-100" />;
           }
-          return <IconChevronRight className="h-4 w-4" />;
+          return <IconChevronRight className="h-4 w-4 rtl:-scale-x-100" />;
         },
       }}
       {...props}

package/corpus/templates/analytics/app/components/ui/carousel.tsx

@@ -160,7 +160,7 @@ const CarouselContent = React.forwardRef<
         ref={ref}
         className={cn(
           "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
           className,
         )}
         {...props}
@@ -183,7 +183,7 @@ const CarouselItem = React.forwardRef<
       aria-roledescription="slide"
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+        orientation === "horizontal" ? "ps-4" : "pt-4",
         className,
       )}
       {...props}
@@ -206,7 +206,7 @@ const CarouselPrevious = React.forwardRef<
       className={cn(
         "absolute  h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
+          ? "-start-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className,
       )}
@@ -214,7 +214,7 @@ const CarouselPrevious = React.forwardRef<
       onClick={scrollPrev}
       {...props}
     >
-      <IconArrowLeft className="h-4 w-4" />
+      <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
       <span className="sr-only">Previous slide</span>
     </Button>
   );
@@ -235,7 +235,7 @@ const CarouselNext = React.forwardRef<
       className={cn(
         "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
+          ? "-end-12 top-1/2 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className,
       )}
@@ -243,7 +243,7 @@ const CarouselNext = React.forwardRef<
       onClick={scrollNext}
       {...props}
     >
-      <IconArrowRight className="h-4 w-4" />
+      <IconArrowRight className="h-4 w-4 rtl:-scale-x-100" />
       <span className="sr-only">Next slide</span>
     </Button>
   );

package/corpus/templates/analytics/app/components/ui/command.tsx

@@ -41,7 +41,7 @@ const CommandInput = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <IconSearch className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <IconSearch className="me-2 h-4 w-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
@@ -132,7 +132,7 @@ const CommandShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
       {...props}

package/corpus/templates/analytics/app/components/ui/context-menu.tsx

@@ -30,13 +30,13 @@ const ContextMenuSubTrigger = 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 focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
-      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" />
   </ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
@@ -83,7 +83,7 @@ const ContextMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -98,13 +98,13 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none 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">
       <ContextMenuPrimitive.ItemIndicator>
         <IconCheck className="h-4 w-4" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -122,12 +122,12 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-none 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">
       <ContextMenuPrimitive.ItemIndicator>
         <IconCircleFilled className="h-2 w-2" />
       </ContextMenuPrimitive.ItemIndicator>
@@ -147,7 +147,7 @@ const ContextMenuLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-foreground",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -174,7 +174,7 @@ const ContextMenuShortcut = ({
   return (
     <span
       className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
+        "ms-auto text-xs tracking-widest text-muted-foreground",
         className,
       )}
       {...props}

package/corpus/templates/analytics/app/components/ui/date-picker.tsx

@@ -35,7 +35,7 @@ export function DatePicker({
         <Button
           variant="outline"
           className={cn(
-            "h-8 justify-start text-left font-normal text-xs gap-2 px-2.5",
+            "h-8 justify-start text-start font-normal text-xs gap-2 px-2.5",
             !validDate && "text-muted-foreground",
             className,
           )}

package/corpus/templates/analytics/app/components/ui/dialog.tsx

@@ -51,7 +51,7 @@ const DialogContent = React.forwardRef<
     >
       {children}
       {!hideClose && (
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <IconX className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
@@ -67,7 +67,7 @@ const DialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
+      "flex flex-col space-y-1.5 text-center sm:text-start",
       className,
     )}
     {...props}

package/corpus/templates/analytics/app/components/ui/drawer.tsx

@@ -58,7 +58,7 @@ const DrawerHeader = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    className={cn("grid gap-1.5 p-4 text-center sm:text-start", className)}
     {...props}
   />
 );

package/corpus/templates/analytics/app/components/ui/dropdown-menu.tsx

@@ -30,13 +30,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 =
@@ -96,7 +96,7 @@ const DropdownMenuItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center 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}
@@ -111,13 +111,13 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default 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-default 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>
@@ -135,12 +135,12 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default 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-default 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>
         <IconCircleFilled className="h-2 w-2" />
       </DropdownMenuPrimitive.ItemIndicator>
@@ -160,7 +160,7 @@ const DropdownMenuLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
+      inset && "ps-8",
       className,
     )}
     {...props}
@@ -186,7 +186,7 @@ const DropdownMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <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/templates/analytics/app/components/ui/input-otp.tsx

@@ -39,7 +39,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex h-10 w-10 items-center justify-center border-y border-e border-input text-sm transition-all first:rounded-s-md first:border-s last:rounded-e-md",
         isActive && "z-10 ring-2 ring-ring ring-offset-background",
         className,
       )}