@agent-native/core 0.76.2 → 0.76.4

package/corpus/templates/clips/app/routes/share.$shareId.tsx

@@ -567,7 +567,7 @@ export default function ShareRoute() {
             shareId ? (
               <Button asChild size="sm">
                 <a href={buildSignInHref(`/r/${shareId}`)} className="gap-1.5">
-                  <IconLogin2 className="h-4 w-4" />
+                  <IconLogin2 className="h-4 w-4 rtl:-scale-x-100" />
                   Sign in
                 </a>
               </Button>
@@ -642,7 +642,7 @@ export default function ShareRoute() {
             {message}
           </p>
           {isFailure && detail && canManageStorage ? (
-            <div className="mb-4 w-full max-w-xl rounded-md border border-border bg-card p-4 text-left shadow-sm">
+            <div className="mb-4 w-full max-w-xl rounded-md border border-border bg-card p-4 text-start shadow-sm">
               <div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
                 Details
               </div>
@@ -675,14 +675,14 @@ export default function ShareRoute() {
             {!session && isFailure ? (
               <Button asChild size="sm">
                 <a href={signInHref} className="gap-1.5">
-                  <IconLogin2 className="h-4 w-4" />
+                  <IconLogin2 className="h-4 w-4 rtl:-scale-x-100" />
                   Sign in to finish
                 </a>
               </Button>
             ) : !session && !sessionLoading && !isFailure ? (
               <Button asChild variant="ghost" size="sm">
                 <a href={signInHref} className="gap-1.5">
-                  <IconLogin2 className="h-4 w-4" />
+                  <IconLogin2 className="h-4 w-4 rtl:-scale-x-100" />
                   Sign in if this is yours
                 </a>
               </Button>
@@ -724,7 +724,7 @@ export default function ShareRoute() {
               onClick={() => navigate("/")}
               aria-label="Back to home"
             >
-              <IconArrowLeft className="h-4 w-4" />
+              <IconArrowLeft className="h-4 w-4 rtl:-scale-x-100" />
             </Button>
           ) : null}
           <div className="min-w-0 flex-1">
@@ -906,7 +906,7 @@ export default function ShareRoute() {
         </div>
       </div>
 
-      <aside className="flex min-h-[420px] w-full shrink-0 flex-col border-t border-border bg-background lg:min-h-0 lg:w-[380px] lg:border-l lg:border-t-0">
+      <aside className="flex min-h-[420px] w-full shrink-0 flex-col border-t border-border bg-background lg:min-h-0 lg:w-[380px] lg:border-s lg:border-t-0">
         <Tabs defaultValue="agent" className="flex h-full flex-col">
           <TabsList className="mx-3 mt-3 grid w-auto grid-cols-4">
             <TabsTrigger value="agent" className="text-xs">
@@ -915,7 +915,7 @@ export default function ShareRoute() {
             <TabsTrigger value="comments" className="text-xs gap-1">
               Comments
               {comments.length > 0 ? (
-                <span className="ml-0.5 rounded-full bg-accent px-1.5 text-[10px] tabular-nums">
+                <span className="ms-0.5 rounded-full bg-accent px-1.5 text-[10px] tabular-nums">
                   {comments.length}
                 </span>
               ) : null}

package/corpus/templates/content/app/components/EmptyState.tsx

@@ -77,7 +77,7 @@ export function EmptyState() {
           {t("empty.noPageDescription")}
         </p>
         <Button onClick={handleCreate} size="sm">
-          <IconPlus size={14} className="mr-1.5" />
+          <IconPlus size={14} className="me-1.5" />
           {t("empty.newPage")}
         </Button>
       </div>

package/corpus/templates/content/app/components/editor/DocumentToolbar.tsx

@@ -507,14 +507,14 @@ export function DocumentToolbar({
 
   return (
     <>
-      <div className="absolute top-2 right-2 z-10 flex items-center gap-0.5 rounded-xl border border-border/70 bg-background/95 p-1 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/85 sm:top-3 sm:right-4 sm:gap-1">
+      <div className="absolute top-2 end-2 z-10 flex items-center gap-0.5 rounded-xl border border-border/70 bg-background/95 p-1 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/85 sm:top-3 sm:end-4 sm:gap-1">
         {/* Presence — shared PresenceBar (agent + collaborator avatars) */}
         <PresenceBar
           activeUsers={activeUsers ?? []}
           agentPresent={agentPresent}
           agentActive={agentActive}
           currentUserEmail={currentUserEmail}
-          className="mr-1"
+          className="me-1"
         />
         {isLocalFileDocument ? (
           <Button
@@ -589,24 +589,24 @@ export function DocumentToolbar({
                   Local file
                 </DropdownMenuLabel>
                 <DropdownMenuItem disabled className="min-w-0">
-                  <IconFileText className="mr-2 h-4 w-4 shrink-0" />
+                  <IconFileText className="me-2 h-4 w-4 shrink-0" />
                   <span className="truncate">{source?.path}</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   disabled={revealLocalSource.isPending}
                   onSelect={() => void handleRevealLocalPath()}
                 >
-                  <IconFolderOpen className="mr-2 h-4 w-4" />
+                  <IconFolderOpen className="me-2 h-4 w-4" />
                   Reveal in Finder
                 </DropdownMenuItem>
                 <DropdownMenuItem onSelect={handleCopyLocalRelativePath}>
-                  <IconCopy className="mr-2 h-4 w-4" />
+                  <IconCopy className="me-2 h-4 w-4" />
                   Copy relative path
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onSelect={() => void handleCopyLocalAbsolutePath()}
                 >
-                  <IconCopy className="mr-2 h-4 w-4" />
+                  <IconCopy className="me-2 h-4 w-4" />
                   Copy absolute path
                 </DropdownMenuItem>
               </DropdownMenuGroup>
@@ -614,7 +614,7 @@ export function DocumentToolbar({
               <>
                 <DropdownMenuGroup>
                   <DropdownMenuItem onSelect={() => setHistoryOpen(true)}>
-                    <IconHistory className="mr-2 h-4 w-4" />
+                    <IconHistory className="me-2 h-4 w-4" />
                     Version history
                   </DropdownMenuItem>
                 </DropdownMenuGroup>
@@ -622,9 +622,9 @@ export function DocumentToolbar({
                 <DropdownMenuSub>
                   <DropdownMenuSubTrigger disabled={exportDocument.isPending}>
                     {exportDocument.isPending ? (
-                      <IconLoader2 className="mr-2 h-4 w-4 animate-spin" />
+                      <IconLoader2 className="me-2 h-4 w-4 animate-spin" />
                     ) : (
-                      <IconDownload className="mr-2 h-4 w-4" />
+                      <IconDownload className="me-2 h-4 w-4" />
                     )}
                     Export
                   </DropdownMenuSubTrigger>
@@ -633,21 +633,21 @@ export function DocumentToolbar({
                       disabled={exportDocument.isPending}
                       onSelect={() => void handleExport("pdf")}
                     >
-                      <IconFileTypePdf className="mr-2 h-4 w-4" />
+                      <IconFileTypePdf className="me-2 h-4 w-4" />
                       PDF
                     </DropdownMenuItem>
                     <DropdownMenuItem
                       disabled={exportDocument.isPending}
                       onSelect={() => void handleExport("markdown")}
                     >
-                      <IconMarkdown className="mr-2 h-4 w-4" />
+                      <IconMarkdown className="me-2 h-4 w-4" />
                       Markdown
                     </DropdownMenuItem>
                     <DropdownMenuItem
                       disabled={exportDocument.isPending}
                       onSelect={() => void handleExport("html")}
                     >
-                      <IconFileTypeHtml className="mr-2 h-4 w-4" />
+                      <IconFileTypeHtml className="me-2 h-4 w-4" />
                       HTML
                     </DropdownMenuItem>
                   </DropdownMenuSubContent>
@@ -666,25 +666,25 @@ export function DocumentToolbar({
                         isLinked ? "text-foreground" : "text-muted-foreground",
                       )}
                     >
-                      <span className="mr-2 flex h-4 w-4 shrink-0 items-center justify-center">
+                      <span className="me-2 flex h-4 w-4 shrink-0 items-center justify-center">
                         {hasConflict ? (
                           <span className="relative">
                             <NotionIcon className="h-4 w-4" />
                             <IconAlertTriangle
                               size={8}
-                              className="absolute -right-1 -top-1 text-amber-500"
+                              className="absolute -end-1 -top-1 text-amber-500"
                             />
                           </span>
                         ) : isLinked && autoSync ? (
                           <span className="relative">
                             <NotionIcon className="h-4 w-4" />
-                            <span className="absolute -right-0.5 -top-0.5 h-2 w-2 rounded-full bg-emerald-500" />
+                            <span className="absolute -end-0.5 -top-0.5 h-2 w-2 rounded-full bg-emerald-500" />
                           </span>
                         ) : (
                           <NotionIcon className="h-4 w-4" />
                         )}
                       </span>
-                      <span className="min-w-0 flex-1 truncate text-left">
+                      <span className="min-w-0 flex-1 truncate text-start">
                         {isLinked
                           ? "Notion sync"
                           : isConnected
@@ -994,7 +994,7 @@ export function DocumentToolbar({
               ) : null}
               <div className="group relative">
                 <NotificationsBell className="!h-8 !w-full !justify-start !rounded-sm !px-2 !py-1.5 !text-sm hover:!bg-accent hover:!text-accent-foreground focus-visible:!ring-0" />
-                <span className="pointer-events-none absolute left-8 top-1/2 -translate-y-1/2 text-sm text-muted-foreground group-hover:text-accent-foreground">
+                <span className="pointer-events-none absolute start-8 top-1/2 -translate-y-1/2 text-sm text-muted-foreground group-hover:text-accent-foreground">
                   Notifications
                 </span>
               </div>

package/corpus/templates/content/app/components/layout/Layout.tsx

@@ -129,7 +129,7 @@ export function Layout({ children }: LayoutProps) {
               <button
                 type="button"
                 aria-label={t("navigation.openSidebar")}
-                className="fixed left-3 top-3 z-30 flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground md:hidden"
+                className="fixed start-3 top-3 z-30 flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-foreground md:hidden"
                 onClick={() => setMobileSidebarOpen(true)}
               >
                 <IconMenu2 size={18} />
@@ -169,7 +169,7 @@ export function Layout({ children }: LayoutProps) {
               <Header sidebarTrigger={mobileSidebarTrigger} />
             ) : null}
             <InvitationBanner
-              className={`${showHeader ? "pl-4" : "pl-16"} sm:pl-4 [&>div]:flex-wrap [&>div]:items-start [&>div>span]:min-w-0 [&>div>span]:flex-1`}
+              className={`${showHeader ? "ps-4" : "ps-16"} sm:ps-4 [&>div]:flex-wrap [&>div]:items-start [&>div>span]:min-w-0 [&>div>span]:flex-1`}
             />
             {children}
           </main>

package/corpus/templates/content/app/components/sidebar/DocumentSidebar.tsx

@@ -588,7 +588,7 @@ export function DocumentSidebar({
       onClick={() => navigate("/local-files")}
     >
       <IconFolderOpen size={15} className="shrink-0" />
-      <span className="min-w-0 flex-1 truncate text-left">Local files</span>
+      <span className="min-w-0 flex-1 truncate text-start">Local files</span>
     </button>
   );
 
@@ -603,7 +603,7 @@ export function DocumentSidebar({
       onClick={() => navigate("/settings")}
     >
       <IconSettings size={15} className="shrink-0" />
-      <span className="min-w-0 flex-1 truncate text-left">
+      <span className="min-w-0 flex-1 truncate text-start">
         {t("navigation.settings")}
       </span>
     </button>
@@ -622,7 +622,7 @@ export function DocumentSidebar({
       <button
         type="button"
         aria-expanded={!collapsed}
-        className="flex w-full items-center gap-1 rounded-md px-3 py-1.5 text-left text-[10px] font-semibold uppercase tracking-wider text-muted-foreground hover:bg-accent/40 hover:text-foreground"
+        className="flex w-full items-center gap-1 rounded-md px-3 py-1.5 text-start text-[10px] font-semibold uppercase tracking-wider text-muted-foreground hover:bg-accent/40 hover:text-foreground"
         onClick={() => toggleSection(id)}
       >
         <IconChevronRight
@@ -630,6 +630,7 @@ export function DocumentSidebar({
           className={cn(
             "shrink-0 transition-transform",
             !collapsed && "rotate-90",
+            "rtl:-scale-x-100",
           )}
         />
         <span className="min-w-0 flex-1 truncate">{label}</span>
@@ -696,7 +697,7 @@ export function DocumentSidebar({
 
   if (collapsed) {
     return (
-      <div className="flex flex-col h-full w-12 border-r border-border bg-muted/30 items-center py-3 gap-1">
+      <div className="flex flex-col h-full w-12 border-e border-border bg-muted/30 items-center py-3 gap-1">
         <Tooltip>
           <TooltipTrigger asChild>
             <button
@@ -758,7 +759,7 @@ export function DocumentSidebar({
   return (
     <div
       className={cn(
-        "relative flex h-full min-h-0 flex-col border-r border-border bg-muted/30",
+        "relative flex h-full min-h-0 flex-col border-e border-border bg-muted/30",
         width === undefined && "w-full",
       )}
       style={width === undefined ? undefined : { width, flexShrink: 0 }}
@@ -829,7 +830,7 @@ export function DocumentSidebar({
       )}
 
       <ScrollArea className="min-h-0 flex-1">
-        <div className="min-w-full w-max py-2 pr-2">
+        <div className="min-w-full w-max py-2 pe-2">
           {/* Search results */}
           {filteredDocuments ? (
             <>
@@ -846,7 +847,7 @@ export function DocumentSidebar({
                     <button
                       key={doc.id}
                       className={cn(
-                        "w-full flex items-center gap-2 px-3 py-[5px] text-sm text-left rounded-md",
+                        "w-full flex items-center gap-2 px-3 py-[5px] text-sm text-start rounded-md",
                         doc.id === activeDocumentId
                           ? "bg-accent text-accent-foreground"
                           : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -883,7 +884,7 @@ export function DocumentSidebar({
                     <button
                       key={doc.id}
                       className={cn(
-                        "w-full flex items-center gap-2 px-4 py-[5px] text-sm text-left rounded-md",
+                        "w-full flex items-center gap-2 px-4 py-[5px] text-sm text-start rounded-md",
                         doc.id === activeDocumentId
                           ? "bg-accent text-accent-foreground"
                           : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
@@ -996,7 +997,7 @@ export function DocumentSidebar({
       {onResize && (
         <div
           className={cn(
-            "absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-primary/20 active:bg-primary/30",
+            "absolute top-0 end-0 w-1 h-full cursor-col-resize hover:bg-primary/20 active:bg-primary/30",
             isResizing && "bg-primary/30",
           )}
           onMouseDown={handleMouseDown}

package/corpus/templates/content/app/components/sidebar/DocumentTreeItem.tsx

@@ -140,7 +140,7 @@ export function DocumentTreeItem({
         {...(isLocalFileNode ? {} : listeners)}
         aria-label={node.title || "Untitled"}
         className={cn(
-          "group relative flex min-w-56 items-center gap-1.5 rounded-md py-[5px] pr-2 text-sm cursor-pointer select-none",
+          "group relative flex min-w-56 items-center gap-1.5 rounded-md py-[5px] pe-2 text-sm cursor-pointer select-none",
           canEdit && !isLocalFileNode && "cursor-grab active:cursor-grabbing",
           isDragging && "bg-accent/70 text-accent-foreground shadow-sm",
           isActive
@@ -148,7 +148,7 @@ export function DocumentTreeItem({
             : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
         )}
         style={{
-          paddingLeft: `${indent}px`,
+          paddingInlineStart: `${indent}px`,
           width: rowWidth === undefined ? undefined : `${rowWidth}px`,
         }}
         onClick={() => {
@@ -190,7 +190,11 @@ export function DocumentTreeItem({
             >
               <IconChevronRight
                 size={14}
-                className={cn("transition-transform", expanded && "rotate-90")}
+                className={cn(
+                  "transition-transform",
+                  expanded && "rotate-90",
+                  "rtl:-scale-x-100",
+                )}
               />
             </button>
           )}
@@ -201,7 +205,7 @@ export function DocumentTreeItem({
         </span>
 
         <div
-          className="absolute right-1 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 flex items-center gap-0.5 flex-shrink-0 bg-inherit"
+          className="absolute end-1 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 flex items-center gap-0.5 flex-shrink-0 bg-inherit"
           onPointerDown={(e) => e.stopPropagation()}
         >
           {hasMenuActions && (
@@ -224,7 +228,7 @@ export function DocumentTreeItem({
                   >
                     <IconStar
                       size={14}
-                      className={cn("mr-2", node.isFavorite && "fill-current")}
+                      className={cn("me-2", node.isFavorite && "fill-current")}
                     />
                     {node.isFavorite
                       ? "Remove from favorites"
@@ -240,7 +244,7 @@ export function DocumentTreeItem({
                       setDeleteDialogOpen(true);
                     }}
                   >
-                    <IconTrash size={14} className="mr-2" />
+                    <IconTrash size={14} className="me-2" />
                     Delete
                   </DropdownMenuItem>
                 )}

package/corpus/templates/content/app/components/sidebar/NotionButton.tsx

@@ -269,7 +269,7 @@ export function NotionButton() {
                   )}
                 >
                   <button
-                    className="flex items-start gap-2 w-full text-left"
+                    className="flex items-start gap-2 w-full text-start"
                     onClick={() => setCurrentStep(i)}
                   >
                     <span className="mt-0.5 shrink-0">
@@ -303,7 +303,7 @@ export function NotionButton() {
                   </button>
 
                   {active && (
-                    <div className="mt-2 ml-5 space-y-2">
+                    <div className="mt-2 ms-5 space-y-2">
                       <p className="text-xs text-muted-foreground leading-relaxed">
                         {step.description}
                       </p>
@@ -391,7 +391,7 @@ export function NotionButton() {
                             <>
                               <IconLoader2
                                 size={12}
-                                className="mr-1 animate-spin"
+                                className="me-1 animate-spin"
                               />
                               Complete steps above first
                             </>

package/corpus/templates/content/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/content/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/content/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/content/app/components/ui/scroll-area.tsx

@@ -32,7 +32,7 @@ const ScrollBar = React.forwardRef<
     className={cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        "h-full w-2.5 border-s border-s-transparent p-[1px]",
       orientation === "horizontal" &&
         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className,

package/corpus/templates/content/app/components/ui/sheet.tsx

@@ -83,7 +83,7 @@ const SheetContent = React.forwardRef<
       >
         {children}
         {showClose ? (
-          <SheetPrimitive.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-secondary">
+          <SheetPrimitive.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-secondary">
             <IconX className="h-4 w-4" />
             <span className="sr-only">Close</span>
           </SheetPrimitive.Close>
@@ -100,7 +100,7 @@ const SheetHeader = ({
 }: 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/content/app/components/ui/table.tsx

@@ -73,7 +73,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      "h-12 px-4 text-start align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pe-0",
       className,
     )}
     {...props}
@@ -87,7 +87,7 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pe-0", className)}
     {...props}
   />
 ));

package/corpus/templates/content/app/components/ui/toast.tsx

@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col sm:max-w-[36rem]",
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:end-0 sm:top-auto sm:flex-col sm:max-w-[36rem]",
       className,
     )}
     {...props}
@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-md border p-6 pe-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
@@ -75,7 +75,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute end-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
       className,
     )}
     toast-close=""

package/corpus/templates/design/app/components/layout/Layout.tsx

@@ -118,10 +118,10 @@ export function Layout({ children }: LayoutProps) {
             )}
             <div
               className={cn(
-                "fixed inset-y-0 left-0 z-50 md:static md:z-auto",
+                "fixed inset-y-0 start-0 z-50 md:static md:z-auto",
                 mobileSidebarOpen
                   ? "translate-x-0"
-                  : "-translate-x-full md:translate-x-0",
+                  : "-translate-x-full rtl:translate-x-full md:translate-x-0 md:rtl:translate-x-0",
               )}
             >
               <Sidebar />
@@ -132,7 +132,7 @@ export function Layout({ children }: LayoutProps) {
                 <div className="flex h-12 shrink-0 items-center border-b border-border bg-sidebar px-4 md:hidden">
                   <button
                     onClick={openMobileSidebar}
-                    className="-ml-1 mr-3 cursor-pointer rounded-md p-2.5 hover:bg-sidebar-accent/50"
+                    className="-ms-1 me-3 cursor-pointer rounded-md p-2.5 hover:bg-sidebar-accent/50"
                     aria-label={t("navigation.openNavigation")}
                   >
                     <IconMenu2 className="h-5 w-5 text-foreground" />

package/corpus/templates/design/app/components/layout/Sidebar.tsx

@@ -61,7 +61,7 @@ export function Sidebar() {
   return (
     <aside
       className={cn(
-        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-r border-border bg-sidebar text-sidebar-foreground",
+        "flex h-full min-w-0 shrink-0 flex-col overflow-hidden border-e border-border bg-sidebar text-sidebar-foreground",
         collapsed ? "w-14" : "w-56",
       )}
     >
@@ -102,9 +102,9 @@ export function Sidebar() {
               }
             >
               {collapsed ? (
-                <IconLayoutSidebarLeftExpand className="h-4 w-4" />
+                <IconLayoutSidebarLeftExpand className="h-4 w-4 rtl:-scale-x-100" />
               ) : (
-                <IconLayoutSidebarLeftCollapse className="h-4 w-4" />
+                <IconLayoutSidebarLeftCollapse className="h-4 w-4 rtl:-scale-x-100" />
               )}
             </button>
           </TooltipTrigger>

package/corpus/templates/design/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/design/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: {