@agent-native/core 0.76.3 → 0.76.5

package/corpus/templates/chat/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/chat/app/components/ui/sidebar.tsx

@@ -342,7 +342,7 @@ const SidebarInset = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ms-2 md:peer-data-[variant=inset]:ms-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
         className,
       )}
       {...props}
@@ -479,7 +479,7 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute end-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "group-data-[collapsible=icon]:hidden",
@@ -531,7 +531,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-start text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pe-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -625,7 +625,7 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute end-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
         "after:absolute after:-inset-2 after:md:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
@@ -650,7 +650,7 @@ const SidebarMenuBadge = React.forwardRef<
     ref={ref}
     data-sidebar="menu-badge"
     className={cn(
-      "absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+      "absolute end-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
       "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
@@ -709,7 +709,7 @@ const SidebarMenuSub = React.forwardRef<
     ref={ref}
     data-sidebar="menu-sub"
     className={cn(
-      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+      "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5",
       "group-data-[collapsible=icon]:hidden",
       className,
     )}

package/corpus/templates/chat/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/chat/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/clips/app/components/capture-install-options.tsx

@@ -71,7 +71,7 @@ function InstallOptionsContent({ desktopHref = "/download" }) {
           href={clipsChromeExtensionUrl ?? undefined}
           target="_blank"
           rel="noreferrer"
-          className="flex items-start gap-3 rounded-md border border-border p-3 text-left transition hover:bg-accent"
+          className="flex items-start gap-3 rounded-md border border-border p-3 text-start transition hover:bg-accent"
         >
           <IconBrandChrome className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
           <span className="min-w-0 flex-1">
@@ -84,7 +84,7 @@ function InstallOptionsContent({ desktopHref = "/download" }) {
           <IconExternalLink className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
         </a>
       ) : (
-        <div className="flex items-start gap-3 rounded-md border border-dashed border-border p-3 text-left opacity-70">
+        <div className="flex items-start gap-3 rounded-md border border-dashed border-border p-3 text-start opacity-70">
           <IconBrandChrome className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
           <span className="min-w-0 flex-1">
             <span className="block text-sm font-medium">Chrome extension</span>
@@ -97,7 +97,7 @@ function InstallOptionsContent({ desktopHref = "/download" }) {
 
       <Link
         to={desktopHref}
-        className="flex items-start gap-3 rounded-md border border-border p-3 text-left transition hover:bg-accent"
+        className="flex items-start gap-3 rounded-md border border-border p-3 text-start transition hover:bg-accent"
       >
         <DesktopIcon className="mt-0.5 h-4 w-4 shrink-0 text-primary" />
         <span className="min-w-0 flex-1">

package/corpus/templates/clips/app/components/editable-recording-title.tsx

@@ -219,7 +219,7 @@ export function EditableRecordingTitle({
         startEditing();
       }}
       className={cn(
-        "group/title -mx-1 flex min-w-0 max-w-full items-center gap-1 rounded px-1 text-left",
+        "group/title -mx-1 flex min-w-0 max-w-full items-center gap-1 rounded px-1 text-start",
         "hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         className,
       )}

package/corpus/templates/clips/app/components/library/bulk-action-toolbar.tsx

@@ -46,7 +46,7 @@ export function BulkActionToolbar({
         "w-fit",
       )}
     >
-      <span className="pr-2 text-xs font-medium text-foreground">
+      <span className="pe-2 text-xs font-medium text-foreground">
         {count} selected
       </span>
       <div className="h-4 w-px bg-border" />
@@ -82,12 +82,12 @@ export function BulkActionToolbar({
               >
                 <span
                   className="truncate"
-                  style={{ paddingLeft: (target.depth ?? 0) * 12 }}
+                  style={{ paddingInlineStart: (target.depth ?? 0) * 12 }}
                 >
                   {target.name}
                 </span>
                 {target.disabled && (
-                  <span className="ml-auto text-xs text-muted-foreground">
+                  <span className="ms-auto text-xs text-muted-foreground">
                     Current
                   </span>
                 )}

package/corpus/templates/clips/app/components/library/folder-tree.tsx

@@ -143,7 +143,7 @@ function FolderItem({
                 ? "bg-primary/10 text-primary"
                 : "text-foreground hover:bg-accent/60",
             )}
-            style={{ paddingLeft: 6 + depth * 12 }}
+            style={{ paddingInlineStart: 6 + depth * 12 }}
           >
             <button
               type="button"
@@ -158,7 +158,7 @@ function FolderItem({
             >
               <IconChevronRight
                 className={cn(
-                  "h-3 w-3 transition-transform",
+                  "h-3 w-3 transition-transform rtl:-scale-x-100",
                   open && "rotate-90",
                 )}
               />
@@ -183,7 +183,7 @@ function FolderItem({
               setRenameOpen(true);
             }}
           >
-            <IconEdit className="h-3.5 w-3.5 mr-2" /> Rename
+            <IconEdit className="h-3.5 w-3.5 me-2" /> Rename
           </ContextMenuItem>
           <ContextMenuItem
             onSelect={() => {
@@ -191,14 +191,14 @@ function FolderItem({
               setNewOpen(true);
             }}
           >
-            <IconFolderPlus className="h-3.5 w-3.5 mr-2" /> New subfolder
+            <IconFolderPlus className="h-3.5 w-3.5 me-2" /> New subfolder
           </ContextMenuItem>
           <ContextMenuSeparator />
           <ContextMenuItem
             onSelect={() => setConfirmDelete(true)}
             className="text-destructive"
           >
-            <IconTrash className="h-3.5 w-3.5 mr-2" /> Delete
+            <IconTrash className="h-3.5 w-3.5 me-2" /> Delete
           </ContextMenuItem>
         </ContextMenuContent>
       </ContextMenu>

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -256,11 +256,11 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
           {/* Left sidebar */}
           <aside
             className={cn(
-              "fixed inset-y-0 left-0 z-50 flex h-full w-[260px] flex-col overflow-hidden border-r border-border bg-sidebar transition-[width,transform] duration-200 ease-out md:static md:z-auto",
+              "fixed inset-y-0 start-0 z-50 flex h-full w-[260px] flex-col overflow-hidden border-e border-border bg-sidebar transition-[width,transform] duration-200 ease-out md:static md:z-auto",
               showCollapsedSidebar && "md:w-14",
               sidebarOpen
                 ? "translate-x-0"
-                : "-translate-x-full md:translate-x-0",
+                : "-translate-x-full rtl:translate-x-full md:translate-x-0",
             )}
           >
             <div
@@ -550,7 +550,7 @@ export function LibraryLayout({ children }: LibraryLayoutProps) {
                   ref={setHeaderSlot}
                   className="flex min-w-0 flex-1 items-center gap-3 overflow-hidden"
                 />
-                <div className="ml-auto flex items-center gap-2">
+                <div className="ms-auto flex items-center gap-2">
                   <ClipsAgentToggleButton />
                 </div>
               </header>

package/corpus/templates/clips/app/components/library/organization-switcher.tsx

@@ -56,7 +56,7 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
           <button
             type="button"
             className={cn(
-              "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5 text-left",
+              "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5 text-start",
               "hover:bg-accent",
               className,
             )}
@@ -82,7 +82,7 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
           </DropdownMenuLabel>
           {orgs.length === 0 && (
             <DropdownMenuItem disabled>
-              <IconBuilding className="h-3.5 w-3.5 mr-2" />
+              <IconBuilding className="h-3.5 w-3.5 me-2" />
               <span className="text-xs">No organizations yet</span>
             </DropdownMenuItem>
           )}
@@ -100,7 +100,7 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
               }}
               className="flex items-center"
             >
-              <div className="flex h-5 w-5 items-center justify-center rounded text-[10px] font-semibold bg-muted text-muted-foreground mr-2">
+              <div className="flex h-5 w-5 items-center justify-center rounded text-[10px] font-semibold bg-muted text-muted-foreground me-2">
                 {o.orgName.slice(0, 1).toUpperCase()}
               </div>
               <span className="flex-1 truncate text-xs">{o.orgName}</span>
@@ -111,7 +111,7 @@ export function OrganizationSwitcher({ className }: OrganizationSwitcherProps) {
           ))}
           <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={() => setCreateOpen(true)}>
-            <IconPlus className="h-3.5 w-3.5 mr-2" />
+            <IconPlus className="h-3.5 w-3.5 me-2" />
             <span className="text-xs">New organization</span>
           </DropdownMenuItem>
         </DropdownMenuContent>

package/corpus/templates/clips/app/components/library/recording-card.tsx

@@ -186,7 +186,7 @@ export function RecordingCard({
         </div>
 
         {/* Duration badge */}
-        <div className="absolute bottom-2 right-2 rounded bg-black/80 px-1.5 py-0.5 text-[11px] font-medium text-white tabular-nums">
+        <div className="absolute bottom-2 end-2 rounded bg-black/80 px-1.5 py-0.5 text-[11px] font-medium text-white tabular-nums">
           {duration}
         </div>
 
@@ -194,7 +194,7 @@ export function RecordingCard({
         {(selectionMode || hovered || selected) && (
           <div
             onClick={handleCheckbox}
-            className="absolute top-2 left-2 flex h-5 w-5 items-center justify-center rounded bg-background/90 border border-border"
+            className="absolute top-2 start-2 flex h-5 w-5 items-center justify-center rounded bg-background/90 border border-border"
           >
             <Checkbox
               checked={selected}
@@ -207,7 +207,7 @@ export function RecordingCard({
 
         {/* Status pill for non-ready recordings */}
         {recording.status !== "ready" && (
-          <div className="absolute top-2 right-2 rounded-full bg-black/80 px-2 py-0.5 text-[10px] font-medium text-white uppercase tracking-wide">
+          <div className="absolute top-2 end-2 rounded-full bg-black/80 px-2 py-0.5 text-[10px] font-medium text-white uppercase tracking-wide">
             {waitingForStorage ? "storage" : recording.status}
           </div>
         )}
@@ -215,7 +215,7 @@ export function RecordingCard({
         {(recording.status === "failed" || waitingForStorage) && (
           <div
             className={cn(
-              "absolute inset-x-2 bottom-2 rounded-md border bg-background/95 p-2 text-left shadow-sm backdrop-blur",
+              "absolute inset-x-2 bottom-2 rounded-md border bg-background/95 p-2 text-start shadow-sm backdrop-blur",
               waitingForStorage ? "border-primary/30" : "border-destructive/30",
             )}
           >
@@ -303,34 +303,34 @@ export function RecordingCard({
               onClick={(e) => e.stopPropagation()}
             >
               <DropdownMenuItem onSelect={() => onShare?.(recording)}>
-                <IconShare className="h-4 w-4 mr-2" /> Share
+                <IconShare className="h-4 w-4 me-2" /> Share
               </DropdownMenuItem>
               <DropdownMenuItem onSelect={() => onMove?.(recording)}>
-                <IconFolder className="h-4 w-4 mr-2" /> Move to folder
+                <IconFolder className="h-4 w-4 me-2" /> Move to folder
               </DropdownMenuItem>
               {onRename ? (
                 <>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem onSelect={() => onRename(recording)}>
-                    <IconEdit className="h-4 w-4 mr-2" /> Rename
+                    <IconEdit className="h-4 w-4 me-2" /> Rename
                   </DropdownMenuItem>
                 </>
               ) : null}
               <DropdownMenuSeparator />
               {recording.archivedAt ? (
                 <DropdownMenuItem onSelect={() => onArchive?.(recording)}>
-                  <IconCheck className="h-4 w-4 mr-2" /> Unarchive
+                  <IconCheck className="h-4 w-4 me-2" /> Unarchive
                 </DropdownMenuItem>
               ) : (
                 <DropdownMenuItem onSelect={() => onArchive?.(recording)}>
-                  <IconArchive className="h-4 w-4 mr-2" /> Archive
+                  <IconArchive className="h-4 w-4 me-2" /> Archive
                 </DropdownMenuItem>
               )}
               <DropdownMenuItem
                 onSelect={() => onTrash?.(recording)}
                 className="text-destructive focus:text-destructive"
               >
-                <IconTrash className="h-4 w-4 mr-2" /> Delete
+                <IconTrash className="h-4 w-4 me-2" /> Delete
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
@@ -347,7 +347,7 @@ export function RecordingCard({
             {recording.ownerEmail}
           </span>
           {recording.tags.length > 0 && (
-            <div className="ml-auto flex items-center gap-1 truncate">
+            <div className="ms-auto flex items-center gap-1 truncate">
               {recording.tags.slice(0, 2).map((t) => (
                 <span
                   key={t}

package/corpus/templates/clips/app/components/library/search-bar.tsx

@@ -118,7 +118,7 @@ export function SearchBar({ className }: SearchBarProps) {
       <div className={cn("relative w-full", className)}>
         <PopoverTrigger asChild>
           <div className="relative">
-            <IconSearch className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+            <IconSearch className="absolute start-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
             <input
               ref={inputRef}
               value={query}
@@ -128,7 +128,7 @@ export function SearchBar({ className }: SearchBarProps) {
               }}
               onFocus={() => setOpen(true)}
               placeholder="Search recordings…"
-              className="w-full h-8 rounded-md border border-border bg-background pl-8 pr-12 text-xs outline-none focus:ring-2 focus:ring-primary/30"
+              className="w-full h-8 rounded-md border border-border bg-background ps-8 pe-12 text-xs outline-none focus:ring-2 focus:ring-primary/30"
             />
             {query ? (
               <button
@@ -137,12 +137,12 @@ export function SearchBar({ className }: SearchBarProps) {
                   setQuery("");
                   inputRef.current?.focus();
                 }}
-                className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:bg-accent"
+                className="absolute end-1.5 top-1/2 -translate-y-1/2 rounded p-1 text-muted-foreground hover:bg-accent"
               >
                 <IconX className="h-3 w-3" />
               </button>
             ) : (
-              <span className="absolute right-1.5 top-1/2 -translate-y-1/2 inline-flex items-center gap-0.5 rounded border border-border bg-muted px-1 py-0.5 text-[10px] font-medium text-muted-foreground">
+              <span className="absolute end-1.5 top-1/2 -translate-y-1/2 inline-flex items-center gap-0.5 rounded border border-border bg-muted px-1 py-0.5 text-[10px] font-medium text-muted-foreground">
                 {shortcutLabel("cmd+k")}
               </span>
             )}

package/corpus/templates/clips/app/components/library/space-card.tsx

@@ -28,7 +28,7 @@ export function SpaceCard({ space, className }: SpaceCardProps) {
       type="button"
       onClick={() => navigate(`/spaces/${space.id}`)}
       className={cn(
-        "group flex flex-col overflow-hidden rounded-lg border border-border bg-card text-left",
+        "group flex flex-col overflow-hidden rounded-lg border border-border bg-card text-start",
         "hover:border-primary/40",
         "shadow-[0_1px_2px_rgba(15,23,42,0.04)] hover:shadow-md",
         className,

package/corpus/templates/clips/app/components/library/tag-input.tsx

@@ -73,7 +73,7 @@ export function TagInput({
             {value.map((tag) => (
               <span
                 key={tag}
-                className="inline-flex items-center gap-1 rounded-full bg-primary/10 text-primary text-xs pl-2 pr-1 py-0.5"
+                className="inline-flex items-center gap-1 rounded-full bg-primary/10 text-primary text-xs ps-2 pe-1 py-0.5"
               >
                 {tag}
                 <button

package/corpus/templates/clips/app/components/meetings/quick-ask-sidebar.tsx

@@ -178,7 +178,7 @@ export function QuickAskSidebar({
                   key={q.label}
                   type="button"
                   onClick={() => send(q.prompt)}
-                  className="text-left text-xs rounded-md border border-border bg-background px-2.5 py-2 hover:bg-accent/40 cursor-pointer"
+                  className="text-start text-xs rounded-md border border-border bg-background px-2.5 py-2 hover:bg-accent/40 cursor-pointer"
                 >
                   {q.label}
                 </button>
@@ -247,7 +247,7 @@ export function QuickAskSidebar({
             className="cursor-pointer h-9 w-9 shrink-0"
             aria-label="Send"
           >
-            <IconSend className="h-4 w-4" />
+            <IconSend className="h-4 w-4 rtl:-scale-x-100" />
           </Button>
         </form>
       </SheetContent>

package/corpus/templates/clips/app/components/recorder/camera-visualizer.tsx

@@ -292,7 +292,7 @@ export function CameraVisualizer({
   return (
     <div className={cn("space-y-2", disabled && "opacity-70", className)}>
       <div className="flex items-center justify-between gap-2">
-        <div className="flex min-w-0 items-center gap-2 rounded-full border border-border bg-muted/20 py-0.5 pl-2 pr-0.5">
+        <div className="flex min-w-0 items-center gap-2 rounded-full border border-border bg-muted/20 py-0.5 ps-2 pe-0.5">
           <span className="text-[11px] text-muted-foreground">Bubble</span>
           {live || starting ? (
             <span className="rounded-full bg-background px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm">
@@ -324,7 +324,7 @@ export function CameraVisualizer({
           size="sm"
           disabled={disabled || starting}
           onClick={live ? stopTest : startTest}
-          className="ml-auto h-7 shrink-0 px-2.5 text-xs"
+          className="ms-auto h-7 shrink-0 px-2.5 text-xs"
         >
           {live ? "Stop" : starting ? "Opening..." : "Test"}
         </Button>

package/corpus/templates/clips/app/components/recorder/microphone-visualizer.tsx

@@ -467,7 +467,7 @@ export function MicrophoneVisualizer({
           {statusLabel ? (
             <span
               className={cn(
-                "pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-background/85 px-2 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm",
+                "pointer-events-none absolute end-2 top-1/2 -translate-y-1/2 rounded-full bg-background/85 px-2 py-0.5 text-[10px] font-medium text-muted-foreground shadow-sm",
                 error && "text-foreground",
               )}
             >

package/corpus/templates/clips/app/components/recorder/pre-record-panel.tsx

@@ -589,7 +589,7 @@ export function PreRecordPanel({
                 // this click and the ?mode=camera deep-link path.
                 onClick={() => chooseMode(opt.value)}
                 className={cn(
-                  "flex min-h-20 min-w-0 flex-col justify-between rounded-xl border p-3 text-left transition-colors",
+                  "flex min-h-20 min-w-0 flex-col justify-between rounded-xl border p-3 text-start transition-colors",
                   active
                     ? "border-primary bg-primary text-primary-foreground shadow-sm"
                     : "border-border bg-background text-foreground hover:border-foreground/30 hover:bg-muted/45",
@@ -624,7 +624,7 @@ export function PreRecordPanel({
           <CollapsibleTrigger asChild>
             <button
               type="button"
-              className="flex w-full items-center gap-3 px-6 py-4 text-left transition-colors hover:bg-muted/35"
+              className="flex w-full items-center gap-3 px-6 py-4 text-start transition-colors hover:bg-muted/35"
             >
               <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
                 <IconDeviceDesktop className="h-4 w-4" />
@@ -657,7 +657,7 @@ export function PreRecordPanel({
                     type="button"
                     onClick={() => chooseDisplaySurface(opt.value)}
                     className={cn(
-                      "flex min-h-[76px] flex-col rounded-lg border p-2 text-left transition-colors",
+                      "flex min-h-[76px] flex-col rounded-lg border p-2 text-start transition-colors",
                       active
                         ? "border-primary bg-primary/10 text-foreground"
                         : "border-border bg-background text-muted-foreground hover:border-foreground/40 hover:text-foreground",
@@ -687,7 +687,7 @@ export function PreRecordPanel({
         <CollapsibleTrigger asChild>
           <button
             type="button"
-            className="flex w-full items-center gap-3 px-6 py-4 text-left transition-colors hover:bg-muted/35"
+            className="flex w-full items-center gap-3 px-6 py-4 text-start transition-colors hover:bg-muted/35"
           >
             <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
               {needsCamera ? (

package/corpus/templates/clips/app/components/recorder/storage-setup-card.tsx

@@ -130,7 +130,7 @@ export function StorageSetupCard({
         onClick={handleConnect}
         disabled={connecting || connected}
         className={
-          "flex items-start gap-3 rounded-xl border px-4 py-3.5 text-left " +
+          "flex items-start gap-3 rounded-xl border px-4 py-3.5 text-start " +
           (connected
             ? "border-primary/50 bg-primary/5"
             : "border-border bg-background hover:border-foreground/30")

package/corpus/templates/clips/app/components/sharing/share-ui.tsx

@@ -146,7 +146,7 @@ export function ShareCardHeader({
     <div
       className={cn(
         "min-w-0 border-b border-border px-4 pb-3 pt-3",
-        reserveCloseButton && "pr-12",
+        reserveCloseButton && "pe-12",
       )}
     >
       <div className="min-w-0 truncate text-sm font-semibold" title={title}>
@@ -201,7 +201,7 @@ export function GeneralAccessSelect({
             onValueChange={(v) => onChange(v as Visibility)}
             disabled={!canManage || isPending}
           >
-            <SelectTrigger className="h-8 border-0 -ml-2 bg-transparent px-2 shadow-none focus:ring-0 [&>span]:text-left">
+            <SelectTrigger className="h-8 border-0 -ms-2 bg-transparent px-2 shadow-none focus:ring-0 [&>span]:text-start">
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

package/corpus/templates/clips/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/clips/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/clips/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/clips/app/components/ui/calendar.tsx

@@ -27,14 +27,14 @@ function Calendar({
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
+        nav_button_previous: "absolute start-1",
+        nav_button_next: "absolute end-1",
         table: "w-full border-collapse space-y-1",
         head_row: "flex",
         head_cell:
           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
-        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-e-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-s-md last:[&:has([aria-selected])]:rounded-e-md focus-within:relative focus-within:z-20",
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
@@ -54,9 +54,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}