@carlonicora/nextjs-jsonapi 3.3.8 → 3.4.0

package/src/features/billing/stripe-price/hooks/useStripePriceTableStructure.tsx

@@ -49,9 +49,9 @@ export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInte
       header: t("billing.admin.prices.fields.amount"),
       cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
         const price: StripePriceInterface = row.original.jsonApiData;
-        // Typography role 15 (numeric): tabular-nums, right-aligned. NEVER font-mono.
+        // Typography role 15 (numeric): tabular-nums, end-aligned. NEVER font-mono.
         return (
-          <span className="block text-xs tabular-nums text-right">
+          <span className="block text-xs tabular-nums text-end">
             {formatCurrency(price.unitAmount, price.currency)}
           </span>
         );
@@ -77,7 +77,7 @@ export const useStripePriceTableStructure: UseTableStructureHook<StripePriceInte
       header: t("billing.admin.prices.fields.token"),
       cell: ({ row }: { row: TableContent<StripePriceInterface> }) => {
         const price: StripePriceInterface = row.original.jsonApiData;
-        return <span className="block text-xs tabular-nums text-right">{price.token ?? ""}</span>;
+        return <span className="block text-xs tabular-nums text-end">{price.token ?? ""}</span>;
       },
       enableSorting: false,
       enableHiding: false,

package/src/features/billing/stripe-product/hooks/useStripeProductTableStructure.tsx

@@ -59,9 +59,9 @@ export const useStripeProductTableStructure: UseTableStructureHook<StripeProduct
       header: t("billing.admin.products.fields.prices"),
       cell: ({ row }: { row: TableContent<StripeProductInterface> }) => {
         const product: StripeProductInterface = row.original.jsonApiData;
-        // Typography role 15 (numeric): tabular-nums, right-aligned. NEVER
+        // Typography role 15 (numeric): tabular-nums, end-aligned. NEVER
         // font-mono — no monospace font is loaded in these apps.
-        return <span className="block text-xs tabular-nums text-right">{product.stripePrices.length}</span>;
+        return <span className="block text-xs tabular-nums text-end">{product.stripePrices.length}</span>;
       },
       enableSorting: false,
       enableHiding: false,

package/src/features/billing/stripe-subscription/components/lists/SubscriptionsList.tsx

@@ -60,8 +60,8 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
               <TableHead>Status</TableHead>
               <TableHead>Plan</TableHead>
               <TableHead>Period</TableHead>
-              <TableHead className="text-right">Amount</TableHead>
-              <TableHead className="text-right">Actions</TableHead>
+              <TableHead className="text-end">Amount</TableHead>
+              <TableHead className="text-end">Actions</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -84,8 +84,8 @@ export function SubscriptionsList({ subscriptions, onSubscriptionsChange, onChan
                   </TableCell>
                   <TableCell className="font-medium">{formatPlanName(price)}</TableCell>
                   <TableCell className="text-muted-foreground text-sm">{period}</TableCell>
-                  <TableCell className="text-right font-medium">{amount}</TableCell>
-                  <TableCell className="text-right">
+                  <TableCell className="text-end font-medium">{amount}</TableCell>
+                  <TableCell className="text-end">
                     {(subscription.status === SubscriptionStatus.ACTIVE ||
                       subscription.status === SubscriptionStatus.TRIALING) &&
                       onChangePlan && (

package/src/features/billing/stripe-subscription/components/widgets/PricingCard.tsx

@@ -61,7 +61,7 @@ export function PricingCard({
       )}
     >
       {isCurrentPlan && (
-        <Badge variant="secondary" className="absolute top-2 right-2">
+        <Badge variant="secondary" className="absolute top-2 end-2">
           Current
         </Badge>
       )}
@@ -73,7 +73,7 @@ export function PricingCard({
       <CardContent className="pb-4 grow">
         <div className="mb-4">
           <span className="text-3xl font-bold">{formattedPrice}</span>
-          <span className="text-muted-foreground ml-1">{interval}</span>
+          <span className="text-muted-foreground ms-1">{interval}</span>
         </div>
 
         {features.length > 0 && (

package/src/features/billing/stripe-subscription/components/widgets/SubscriptionConfirmation.tsx

@@ -54,7 +54,7 @@ export function SubscriptionConfirmation({ price, isLoading, onConfirm, onCancel
           <Button onClick={onConfirm} disabled={isLoading}>
             {isLoading ? (
               <>
-                <Loader2 className="h-4 w-4 animate-spin mr-2" />
+                <Loader2 className="h-4 w-4 animate-spin me-2" />
                 Processing...
               </>
             ) : (

package/src/features/billing/stripe-subscription/components/wizards/WizardStepReview.tsx

@@ -127,7 +127,7 @@ export function WizardStepReview({
             <p className="font-medium">{selectedPrice.product?.name}</p>
             {selectedPrice.nickname && <p className="text-sm text-muted-foreground">{selectedPrice.nickname}</p>}
           </div>
-          <div className="text-right">
+          <div className="text-end">
             {discountedPrice !== null ? (
               <>
                 <p className="text-sm text-muted-foreground line-through">
@@ -168,7 +168,7 @@ export function WizardStepReview({
             <span className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-foreground"}`}>
               {discountedImmediateCharge !== null ? (
                 <>
-                  <span className="line-through text-muted-foreground mr-2">
+                  <span className="line-through text-muted-foreground me-2">
                     {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)}
                   </span>
                   <span className="text-success">

package/src/features/billing/stripe-usage/components/lists/UsageHistoryTable.tsx

@@ -47,7 +47,7 @@ export function UsageHistoryTable({ usageRecords }: UsageHistoryTableProps) {
             <TableRow>
               <TableHead>Date & Time</TableHead>
               <TableHead>Meter Event</TableHead>
-              <TableHead className="text-right">Quantity</TableHead>
+              <TableHead className="text-end">Quantity</TableHead>
               <TableHead>Event ID</TableHead>
             </TableRow>
           </TableHeader>
@@ -60,7 +60,7 @@ export function UsageHistoryTable({ usageRecords }: UsageHistoryTableProps) {
                 <TableRow key={record.id}>
                   <TableCell className="font-medium">{dateTime}</TableCell>
                   <TableCell className="text-muted-foreground">{record.meterEventName}</TableCell>
-                  <TableCell className="text-right font-medium">{quantity}</TableCell>
+                  <TableCell className="text-end font-medium">{quantity}</TableCell>
                   <TableCell className="text-muted-foreground text-sm tabular-nums">{record.stripeEventId}</TableCell>
                 </TableRow>
               );

package/src/features/company/components/forms/CompanyDeleter.tsx

@@ -99,7 +99,7 @@ function CompanyDeleterInternal({ company, isAdministrator }: CompanyDeleterInte
             <div className="flex w-full flex-col">
               <Label className="flex items-center">
                 {t(`company.fields.name.label`)}
-                <span className="ml-1 text-destructive">*</span>
+                <span className="ms-1 text-destructive">*</span>
               </Label>
               <Input
                 className={`w-full`}
@@ -109,7 +109,7 @@ function CompanyDeleterInternal({ company, isAdministrator }: CompanyDeleterInte
             </div>
           </div>
           <div className="flex justify-end">
-            <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+            <Button className="me-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
               {t(`ui.buttons.cancel`)}
             </Button>
             <Button
@@ -136,7 +136,7 @@ function CompanyDeleterInternal({ company, isAdministrator }: CompanyDeleterInte
           </AlertDialogHeader>
           <div className="bg-destructive/10 border-destructive text-destructive rounded-md border p-4 text-sm">
             <p className="mb-3 font-semibold">{t(`common.delete.finalWarning.description`)}</p>
-            <ul className="list-disc space-y-1 pl-5">
+            <ul className="list-disc space-y-1 ps-5">
               <li>{t(`common.delete.finalWarning.bullet1`)}</li>
               <li>{t(`common.delete.finalWarning.bullet2`)}</li>
               <li>{t(`common.delete.finalWarning.bullet3`)}</li>
@@ -145,7 +145,7 @@ function CompanyDeleterInternal({ company, isAdministrator }: CompanyDeleterInte
             </ul>
           </div>
           <div className="flex justify-end">
-            <Button className="mr-2" variant={"outline"} type={`button`} onClick={handleGoBack} disabled={isDeleting}>
+            <Button className="me-2" variant={"outline"} type={`button`} onClick={handleGoBack} disabled={isDeleting}>
               {t(`ui.buttons.go_back`)}
             </Button>
             <Button

package/src/features/content/hooks/useContentTableStructure.tsx

@@ -75,7 +75,7 @@ export const useContentTableStructure = <U extends string = ContentFields>(
         return (
           <div className="relative flex h-5 w-20 items-center justify-center overflow-clip rounded border text-center">
             <div
-              className={`bg-accent absolute top-0 left-0 h-full opacity-${Math.round(content.relevance)}`}
+              className={`bg-accent absolute top-0 start-0 h-full opacity-${Math.round(content.relevance)}`}
               style={{ width: `${content.relevance}%` }}
             ></div>
             <span

package/src/features/feature/components/forms/FormFeatures.tsx

@@ -37,7 +37,7 @@ export function FormFeatures({ form, name, features, featureField = "featureIds"
         </SectionHeader>
       )}
       <ScrollArea className="h-[40vh]">
-        <div className="flex flex-col gap-y-2 pr-4">
+        <div className="flex flex-col gap-y-2 pe-4">
           {features
             .filter((feature) => !feature.isCore)
             .map((feature) => (
@@ -49,7 +49,7 @@ export function FormFeatures({ form, name, features, featureField = "featureIds"
                     toggleFeature(feature, val === true);
                   }}
                 />
-                <Label htmlFor={feature.id} className="ml-3 cursor-pointer font-normal">
+                <Label htmlFor={feature.id} className="ms-3 cursor-pointer font-normal">
                   {feature.name}
                 </Label>
               </div>

package/src/features/help/components/HelpAssistantSheet.tsx

@@ -10,8 +10,9 @@ export function HelpAssistantSheet({ open, onOpenChange }: { open: boolean; onOp
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
-        side="right"
-        className="flex w-full flex-col data-[side=right]:sm:max-w-2xl data-[side=right]:lg:max-w-3xl"
+        side="end"
+        /* rtl-ok: keyed to the resolved physical side ("right" in LTR, "left" in RTL) */
+        className="flex w-full flex-col data-[side=right]:sm:max-w-2xl data-[side=right]:lg:max-w-3xl data-[side=left]:sm:max-w-2xl data-[side=left]:lg:max-w-3xl"
       >
         <AssistantProvider manageUrl={false}>
           <HelpAssistantSheetBody />

package/src/features/help/components/HelpHint.tsx

@@ -52,7 +52,7 @@ export function HelpHint({ contextKey }: { contextKey: string }) {
       <SheetTrigger render={<Button variant="ghost" size="icon-sm" aria-label={t("help.hint.trigger")} />}>
         <HelpCircleIcon className="h-4 w-4" />
       </SheetTrigger>
-      <SheetContent side="right" className="w-full max-w-md sm:max-w-lg">
+      <SheetContent side="end" className="w-full max-w-md sm:max-w-lg">
         <SheetHeader>
           <SheetTitle>{active ? active.name : t("help.hint.pickArticle")}</SheetTitle>
           <SheetDescription>{active?.summary ?? ""}</SheetDescription>
@@ -71,7 +71,7 @@ export function HelpHint({ contextKey }: { contextKey: string }) {
                 <button
                   type="button"
                   onClick={() => setPicked(a)}
-                  className="hover:bg-muted block w-full rounded px-2 py-1 text-left text-sm"
+                  className="hover:bg-muted block w-full rounded px-2 py-1 text-start text-sm"
                 >
                   <div className="font-medium">{a.name}</div>
                   <div className="text-muted-foreground text-xs">{a.summary}</div>

package/src/features/help/components/HelpTOC.tsx

@@ -30,7 +30,7 @@ export function HelpTOC({ headings }: { headings: readonly HelpHeading[] }) {
       <MicroLabel className="mb-2">{t("help.toc.title")}</MicroLabel>
       <ul className="space-y-1 text-sm">
         {headings.map((h) => (
-          <li key={h.slug} style={{ paddingLeft: `${(h.depth - 2) * 0.75}rem` }}>
+          <li key={h.slug} style={{ paddingInlineStart: `${(h.depth - 2) * 0.75}rem` }}>
             <a
               href={`#${h.slug}`}
               className={

package/src/features/how-to/components/containers/HowToCommand.tsx

@@ -184,7 +184,7 @@ export default function HowToCommand({ pathname, extraGroups, onStartChat }: How
                   <CommandGroup heading={t(`howto.command.relevant`)}>
                     {relevantHowTos.map((howTo: HowToInterface) => (
                       <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
-                        <ArrowRight className="h-4 w-4" />
+                        <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                         <span>{howTo.name}</span>
                       </CommandItem>
                     ))}
@@ -196,7 +196,7 @@ export default function HowToCommand({ pathname, extraGroups, onStartChat }: How
                   <CommandGroup heading={searchTerm ? undefined : t(`howto.command.all`)}>
                     {otherHowTos.map((howTo: HowToInterface) => (
                       <CommandItem key={howTo.id} onSelect={() => setSelectedHowTo(howTo)} className="cursor-pointer">
-                        <ArrowRight className="h-4 w-4" />
+                        <ArrowRight className="h-4 w-4 rtl:rotate-180" />
                         <span>{howTo.name}</span>
                       </CommandItem>
                     ))}

package/src/features/how-to/components/containers/HowToCommandViewer.tsx

@@ -27,8 +27,8 @@ export default function HowToCommandViewer({ howTo, onBack, onStartChat }: HowTo
       {/* Header with back button, title, and reading time */}
       <div className="flex items-center gap-3 border-b px-4 py-3">
         <Button variant="ghost" size="sm" onClick={onBack} className="h-8 px-2">
-          <ArrowLeft className="h-4 w-4" />
-          <span className="ml-1">{t("howto.command.back")}</span>
+          <ArrowLeft className="h-4 w-4 rtl:rotate-180" />
+          <span className="ms-1">{t("howto.command.back")}</span>
         </Button>
         <SectionHeader level={2} className="flex-1 truncate">
           {howTo.name}
@@ -43,14 +43,14 @@ export default function HowToCommandViewer({ howTo, onBack, onStartChat }: HowTo
       <div className="flex min-h-0 flex-1">
         {/* Left sidebar - table of contents */}
         {headings.length > 0 && (
-          <div className="w-50 shrink-0 overflow-y-auto border-r p-4">
+          <div className="w-50 shrink-0 overflow-y-auto border-e p-4">
             <nav className="space-y-1">
               {headings.map((heading) => (
                 <a
                   key={heading.id}
                   href={`#${heading.id}`}
                   className="text-muted-foreground hover:text-foreground block truncate text-sm"
-                  style={{ paddingLeft: `${(heading.level - 1) * 0.75}rem` }}
+                  style={{ paddingInlineStart: `${(heading.level - 1) * 0.75}rem` }}
                 >
                   {heading.text}
                 </a>
@@ -69,7 +69,7 @@ export default function HowToCommandViewer({ howTo, onBack, onStartChat }: HowTo
       {onStartChat && (
         <div className="flex items-center justify-end gap-2 border-t px-4 py-3">
           <Button onClick={onStartChat} variant="default" size="sm">
-            <MessageSquare className="mr-2 h-4 w-4" />
+            <MessageSquare className="me-2 h-4 w-4" />
             {t("howto.command.chat_button")}
           </Button>
         </div>

package/src/features/how-to/components/forms/HowToEditor.tsx

@@ -77,11 +77,11 @@ function PageSelector({
         <PopoverContent align="start" className="w-(--anchor-width) p-0">
           <Command shouldFilter={false}>
             <div className="relative w-full border-b">
-              <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+              <SearchIcon className="text-muted-foreground absolute top-2.5 start-2.5 h-4 w-4" />
               <Input
                 placeholder={placeholder}
                 type="text"
-                className="rounded-none border-0 pl-8 focus-visible:ring-0"
+                className="rounded-none border-0 ps-8 focus-visible:ring-0"
                 onChange={(e) => setSearch(e.target.value)}
                 value={search}
               />
@@ -339,7 +339,7 @@ function HowToEditorInternal({
               />
             ))}
             <Button type="button" variant="outline" size="sm" onClick={addPage}>
-              <PlusIcon className="mr-2 h-4 w-4" />
+              <PlusIcon className="me-2 h-4 w-4" />
               {t(`howto.fields.pages.add`)}
             </Button>
           </div>

package/src/features/how-to/components/forms/HowToSelector.tsx

@@ -111,7 +111,7 @@ export default function HowToSelector({
               </PopoverTrigger>
               {field.value && (
                 <CircleX
-                  className="text-muted hover:text-destructive ml-2 h-4 w-4 shrink-0 cursor-pointer"
+                  className="text-muted hover:text-destructive ms-2 h-4 w-4 shrink-0 cursor-pointer"
                   onClick={() => setHowTo()}
                 />
               )}
@@ -119,19 +119,19 @@ export default function HowToSelector({
             <PopoverContent align="start" className="w-(--anchor-width)">
               <Command shouldFilter={false}>
                 <div className="relative mb-2 w-full">
-                  <SearchIcon className="text-muted-foreground absolute top-2.5 left-2.5 h-4 w-4" />
+                  <SearchIcon className="text-muted-foreground absolute top-2.5 start-2.5 h-4 w-4" />
                   <Input
                     placeholder={t(`generic.search.placeholder`, { type: t(`entities.howtos`, { count: 1 }) })}
                     type="text"
-                    className="w-full pr-8 pl-8"
+                    className="w-full pe-8 ps-8"
                     onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
                     value={searchTerm}
                   />
                   {isSearching ? (
-                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 right-2.5 h-4 w-4 animate-spin" />
+                    <RefreshCwIcon className="text-muted-foreground absolute top-2.5 end-2.5 h-4 w-4 animate-spin" />
                   ) : searchTermRef.current ? (
                     <XIcon
-                      className={`absolute top-2.5 right-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
+                      className={`absolute top-2.5 end-2.5 h-4 w-4 ${searchTermRef.current ? "cursor-pointer" : "text-muted-foreground"}`}
                       onClick={() => {
                         setSearchTerm("");
                         search("");

package/src/features/notification/components/lists/NotificationsList.tsx

@@ -44,7 +44,7 @@ export function NotificationsList({ archived }: NotificationsListProps) {
         <Card key={i}>
           <CardContent className="p-2">
             <div className="flex w-full flex-row items-center">
-              <Skeleton className="mr-4 h-8 w-8 rounded-full" />
+              <Skeleton className="me-4 h-8 w-8 rounded-full" />
               <div className="flex-1 space-y-2">
                 <Skeleton className="h-4 w-3/4" />
                 <Skeleton className="h-3 w-1/2" />
@@ -108,7 +108,7 @@ export function NotificationsList({ archived }: NotificationsListProps) {
                               e.stopPropagation();
                               archiveNotification(notification);
                             }}
-                            className="text-muted-foreground hover:text-destructive ml-2"
+                            className="text-muted-foreground hover:text-destructive ms-2"
                           >
                             <ArchiveIcon className="h-4 w-4 cursor-pointer" />
                           </Button>

package/src/features/notification/components/modals/NotificationModal.tsx

@@ -200,7 +200,7 @@ function NotificationModalContent({ isOpen, setIsOpen }: NotificationModalProps)
           {t(`entities.notifications`, { count: 2 })}
         </SidebarMenuButton>
       </PopoverTrigger>
-      <PopoverContent className="relative left-10 w-80 border-0 p-0 shadow-none">
+      <PopoverContent className="relative start-10 w-80 border-0 p-0 shadow-none">
         <Card>
           <CardHeader className="p-4">
             <CardTitle>{t(`entities.notifications`, { count: 2 })}</CardTitle>

package/src/features/oauth/components/OAuthClientCard.tsx

@@ -68,7 +68,7 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
                         onEdit();
                       }}
                     >
-                      <Pencil className="h-4 w-4 mr-2" />
+                      <Pencil className="h-4 w-4 me-2" />
                       Edit
                     </DropdownMenuItem>
                   )}
@@ -80,7 +80,7 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
                       }}
                       className="text-destructive"
                     >
-                      <Trash2 className="h-4 w-4 mr-2" />
+                      <Trash2 className="h-4 w-4 me-2" />
                       Delete
                     </DropdownMenuItem>
                   )}

package/src/features/oauth/components/OAuthClientDetail.tsx

@@ -194,13 +194,13 @@ export function OAuthClientDetail({
           <div className="flex gap-3 pt-4">
             {onEdit && (
               <Button variant="outline" onClick={onEdit} disabled={isLoading}>
-                <Pencil className="h-4 w-4 mr-2" />
+                <Pencil className="h-4 w-4 me-2" />
                 Edit
               </Button>
             )}
             {onDelete && (
               <Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={isLoading}>
-                <Trash2 className="h-4 w-4 mr-2" />
+                <Trash2 className="h-4 w-4 me-2" />
                 Delete
               </Button>
             )}

package/src/features/oauth/components/OAuthClientList.tsx

@@ -80,7 +80,7 @@ export function OAuthClientList({
           <SectionHeader level={2}>{title}</SectionHeader>
           {onCreateClick && (
             <Button onClick={onCreateClick}>
-              <Plus className="h-4 w-4 mr-2" />
+              <Plus className="h-4 w-4 me-2" />
               New App
             </Button>
           )}
@@ -91,7 +91,7 @@ export function OAuthClientList({
           <p className="text-muted-foreground mb-4">{emptyStateMessage}</p>
           {onCreateClick && (
             <Button onClick={onCreateClick}>
-              <Plus className="h-4 w-4 mr-2" />
+              <Plus className="h-4 w-4 me-2" />
               Create Application
             </Button>
           )}
@@ -107,7 +107,7 @@ export function OAuthClientList({
         <SectionHeader level={2}>{title}</SectionHeader>
         {onCreateClick && (
           <Button onClick={onCreateClick}>
-            <Plus className="h-4 w-4 mr-2" />
+            <Plus className="h-4 w-4 me-2" />
             New App
           </Button>
         )}

package/src/features/oauth/components/OAuthRedirectUriInput.tsx

@@ -135,7 +135,7 @@ export function OAuthRedirectUriInput({
       </div>
 
       <Button type="button" variant="outline" size="sm" onClick={handleAdd} disabled={disabled} className="mt-2">
-        <Plus className="h-4 w-4 mr-2" />
+        <Plus className="h-4 w-4 me-2" />
         Add Redirect URI
       </Button>
 

package/src/features/oauth/components/OAuthScopeSelector.tsx

@@ -78,7 +78,7 @@ export function OAuthScopeSelector({
         {Object.entries(groupedScopes).map(([groupName, scopes]) => (
           <div key={groupName} className="space-y-2">
             <h4 className="text-sm font-medium capitalize">{groupName}</h4>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 pl-2">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-2 ps-2">
               {scopes.map((scopeInfo) => {
                 const isChecked = value.includes(scopeInfo.scope);
                 const isAdmin = scopeInfo.scope === "admin";
@@ -99,7 +99,7 @@ export function OAuthScopeSelector({
                     <div className="flex-1">
                       <Label htmlFor={`scope-${scopeInfo.scope}`} className="cursor-pointer">
                         {scopeInfo.name}
-                        {isAdmin && <span className="ml-2 text-xs text-destructive">(Dangerous)</span>}
+                        {isAdmin && <span className="ms-2 text-xs text-destructive">(Dangerous)</span>}
                       </Label>
                       <p className="text-xs text-muted-foreground">{scopeInfo.description}</p>
                     </div>

package/src/features/onboarding/components/OnboardingCard.tsx

@@ -18,13 +18,7 @@ export function OnboardingCard({
 }: OnboardingCardRenderProps) {
   return (
     <Card className="w-[320px] relative" data-shepherd-card>
-      <Button
-        variant="ghost"
-        size="icon"
-        className="absolute right-2 top-2"
-        onClick={onClose}
-        aria-label={labels.close}
-      >
+      <Button variant="ghost" size="icon" className="absolute end-2 top-2" onClick={onClose} aria-label={labels.close}>
         <X className="h-4 w-4" />
       </Button>
       <CardHeader>

package/src/features/rbac/components/RbacByRoleContainer.tsx

@@ -156,7 +156,7 @@ export default function RbacByRoleContainer() {
   return (
     <RoundPageContainer fullWidth forceHeader>
       <div className="flex h-full w-full">
-        <aside className="w-60 shrink-0 overflow-y-auto border-r bg-muted/20">
+        <aside className="w-60 shrink-0 overflow-y-auto border-e bg-muted/20">
           <ul className="py-1">
             {sortedRoleIds.map((id) => (
               <li key={id}>
@@ -165,7 +165,7 @@ export default function RbacByRoleContainer() {
                   onClick={() => handleSelectRole(id)}
                   aria-current={id === selectedRoleId ? "true" : undefined}
                   className={cn(
-                    "block w-full px-4 py-1.5 text-left text-sm hover:bg-muted",
+                    "block w-full px-4 py-1.5 text-start text-sm hover:bg-muted",
                     id === selectedRoleId && "bg-muted font-medium text-foreground",
                     id !== selectedRoleId && "text-muted-foreground",
                   )}
@@ -184,7 +184,7 @@ export default function RbacByRoleContainer() {
                 <table className="w-full text-sm">
                   <thead className="sticky top-0 z-10">
                     <tr className="border-b bg-muted/80 backdrop-blur-sm">
-                      <th className="w-40 px-4 py-2 text-left text-xs font-medium text-muted-foreground">
+                      <th className="w-40 px-4 py-2 text-start text-xs font-medium text-muted-foreground">
                         {t("rbac.module")}
                       </th>
                       {ACTION_TYPES.map((action) => (

package/src/features/rbac/components/RbacContainer.tsx

@@ -118,7 +118,7 @@ const ModuleEditor = memo(function ModuleEditor({
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b bg-muted/50">
-              <th className="w-40 px-4 py-2 text-left text-xs font-medium text-muted-foreground">{t("rbac.role")}</th>
+              <th className="w-40 px-4 py-2 text-start text-xs font-medium text-muted-foreground">{t("rbac.role")}</th>
               {ACTION_TYPES.map((action) => (
                 <th key={action} className="min-w-28 px-2 py-2 text-center text-xs font-medium text-muted-foreground">
                   {ACTION_LABELS[action]}
@@ -295,7 +295,7 @@ export default function RbacContainer() {
     <RoundPageContainer fullWidth forceHeader>
       <div className="flex h-full w-full">
         {/* Sidebar: module list */}
-        <aside className="w-60 shrink-0 overflow-y-auto border-r bg-muted/20">
+        <aside className="w-60 shrink-0 overflow-y-auto border-e bg-muted/20">
           <ul className="py-1">
             {sortedModuleIds.map((id) => (
               <li key={id}>
@@ -304,7 +304,7 @@ export default function RbacContainer() {
                   onClick={() => handleSelectModule(id)}
                   aria-current={id === selectedModuleId ? "true" : undefined}
                   className={cn(
-                    "block w-full px-4 py-1.5 text-left text-sm hover:bg-muted",
+                    "block w-full px-4 py-1.5 text-start text-sm hover:bg-muted",
                     id === selectedModuleId && "bg-muted font-medium text-foreground",
                     id !== selectedModuleId && "text-muted-foreground",
                   )}

package/src/features/referral/components/ReferralWidget.tsx

@@ -110,6 +110,7 @@ async function copyToClipboard(text: string): Promise<boolean> {
     const textArea = document.createElement("textarea");
     textArea.value = text;
     textArea.style.position = "fixed";
+    // rtl-ok: off-screen clipboard fallback, not layout — physical offset is deliberate
     textArea.style.left = "-999999px";
     textArea.style.top = "-999999px";
     document.body.appendChild(textArea);

package/src/features/role/components/forms/FormRoles.tsx

@@ -47,7 +47,7 @@ export function FormRoles({ form, id, name, roles }: FormRolesProps) {
                     />
                     <Tooltip>
                       <TooltipTrigger>
-                        <FieldLabel htmlFor={`role-${role.id}`} className="ml-3 cursor-pointer font-normal">
+                        <FieldLabel htmlFor={`role-${role.id}`} className="ms-3 cursor-pointer font-normal">
                           {t(`role.roles`, { role: role.id.replaceAll(`-`, ``) })}
                         </FieldLabel>
                       </TooltipTrigger>

package/src/features/role/components/forms/RemoveUserFromRole.tsx

@@ -84,7 +84,7 @@ export function RemoveUserFromRole({ role, user, refresh }: RemoveUserFromRolePr
           <>
             {t(`role.remove_user.description_allowed`, { role: roleName, user: user.name })}
             <div className="flex justify-end">
-              <Button className="mr-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
+              <Button className="me-2" variant={"outline"} type={`button`} onClick={() => setOpen(false)}>
                 {t(`ui.buttons.cancel`)}
               </Button>
               <Button

package/src/features/role/components/forms/UserRoleAdd.tsx

@@ -82,7 +82,7 @@ export function UserRoleAdd({ user, refresh }: UserRoleAddProps) {
   return (
     <>
       <Button size="sm" onClick={() => setOpen(true)}>
-        <PlusCircle className="mr-3 h-3.5 w-3.5" />
+        <PlusCircle className="me-3 h-3.5 w-3.5" />
         {t(`common.association.label`, {
           source: t(`entities.roles`, { count: 1 }),
           destination: t(`entities.users`, { count: 1 }),

package/src/features/tokenusage/components/TokenUsageBreakdownTable.tsx

@@ -104,7 +104,7 @@ export function TokenUsageBreakdownTable({ rows, metric }: Props) {
         <TableHeader>
           <TableRow>
             {columns.map((column) => (
-              <TableHead key={column.key} className={cn(column.numeric && "text-right")}>
+              <TableHead key={column.key} className={cn(column.numeric && "text-end")}>
                 <button
                   type="button"
                   onClick={() => toggleSort(column.key)}
@@ -137,19 +137,19 @@ export function TokenUsageBreakdownTable({ rows, metric }: Props) {
                 </TableCell>
                 <TableCell className="text-muted-foreground text-xs">{row.sublabel ?? ""}</TableCell>
                 {showActiveUsers && (
-                  <TableCell className="text-right text-xs tabular-nums">
+                  <TableCell className="text-end text-xs tabular-nums">
                     {row.activeUsers === undefined ? "" : decimal(row.activeUsers, 0)}
                   </TableCell>
                 )}
-                <TableCell className="text-right text-xs tabular-nums">{decimal(row.calls, 0)}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{decimal(row.tokensIn, 0)}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{decimal(row.tokensOut, 0)}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">
+                <TableCell className="text-end text-xs tabular-nums">{decimal(row.calls, 0)}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{decimal(row.tokensIn, 0)}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{decimal(row.tokensOut, 0)}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">
                   {percent(cacheHitPercentage(row.cached, row.tokensIn))}
                 </TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{formatValue(row.cost, "cost")}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{formatValue(row.credits, "credits")}</TableCell>
-                <TableCell className="text-right text-xs tabular-nums">{percent(share)}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{formatValue(row.cost, "cost")}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{formatValue(row.credits, "credits")}</TableCell>
+                <TableCell className="text-end text-xs tabular-nums">{percent(share)}</TableCell>
               </TableRow>
             );
           })}