@carlonicora/nextjs-jsonapi 3.3.9 → 3.4.1

package/src/components/forms/FormCheckbox.tsx

@@ -15,7 +15,7 @@ type FormCheckboxProps = {
 export function FormCheckbox({ form, id, name, labelBefore, description, isRequired }: FormCheckboxProps) {
   const simpleLabel = () => {
     return (
-      <FieldLabel htmlFor={id} className={`font-normal ${labelBefore ? "" : "ml-3"}`}>
+      <FieldLabel htmlFor={id} className={`font-normal ${labelBefore ? "" : "ms-3"}`}>
         {name}
       </FieldLabel>
     );
@@ -38,10 +38,10 @@ export function FormCheckbox({ form, id, name, labelBefore, description, isRequi
         {(field) => (
           <div className="flex gap-x-4">
             {labelBefore && label()}
-            {labelBefore && isRequired && <span className="ml-1 text-destructive">*</span>}
+            {labelBefore && isRequired && <span className="ms-1 text-destructive">*</span>}
             <Checkbox id={id} checked={field.value ?? false} onCheckedChange={field.onChange} />
             {!labelBefore && label()}
-            {!labelBefore && isRequired && <span className="ml-1 text-destructive">*</span>}
+            {!labelBefore && isRequired && <span className="ms-1 text-destructive">*</span>}
           </div>
         )}
       </FormFieldWrapper>

package/src/components/forms/FormDateTime.tsx

@@ -117,7 +117,7 @@ export function FormDateTime({
                   render={
                     <Button
                       variant={"outline"}
-                      className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+                      className={cn("w-full ps-3 text-start font-normal", !field.value && "text-muted-foreground")}
                     />
                   }
                 >
@@ -126,11 +126,11 @@ export function FormDateTime({
                   ) : (
                     <span>{placeholder ? placeholder : t(`common.pick_date_time`)}</span>
                   )}
-                  <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                  <CalendarIcon className="ms-auto h-4 w-4 opacity-50" />
                 </PopoverTrigger>
                 {field.value && allowEmpty !== false && (
                   <CircleXIcon
-                    className="text-muted hover:text-destructive ml-2 h-6 w-6 cursor-pointer"
+                    className="text-muted hover:text-destructive ms-2 h-6 w-6 cursor-pointer"
                     onClick={() => {
                       if (onChange) onChange(undefined);
                       form.setValue(id, "");

package/src/components/forms/FormFieldWrapper.tsx

@@ -43,7 +43,7 @@ export function FormFieldWrapper<T extends FieldValues>({
           {label && (
             <FieldLabel>
               {label}
-              {isRequired && <span className="ml-1 text-destructive">*</span>}
+              {isRequired && <span className="ms-1 text-destructive">*</span>}
             </FieldLabel>
           )}
           {children(field, fieldState)}

package/src/components/forms/FormPlaceAutocomplete.tsx

@@ -315,14 +315,14 @@ export function FormPlaceAutocomplete({
 
             {/* Loading indicator */}
             {isLoading && (
-              <div className="absolute right-3 top-1/2 -translate-y-1/2">
+              <div className="absolute end-3 top-1/2 -translate-y-1/2">
                 <div className="border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent"></div>
               </div>
             )}
 
             {/* Suggestions dropdown */}
             {showSuggestions && suggestions.length > 0 && (
-              <div className="bg-background absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-md border shadow-lg">
+              <div className="bg-background absolute start-0 end-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-md border shadow-lg">
                 {suggestions.map((suggestion, index) => (
                   <div
                     key={suggestion.place_id || index}

package/src/components/forms/GdprConsentCheckbox.tsx

@@ -28,7 +28,7 @@ export function GdprConsentCheckbox<T extends FieldValues>({
           <div className="space-y-1 leading-none">
             <span className="text-sm font-normal">
               {label}
-              {required && <span className="ml-1 text-destructive">*</span>}
+              {required && <span className="ms-1 text-destructive">*</span>}
             </span>
             {description && <FieldDescription className="text-xs">{description}</FieldDescription>}
           </div>

package/src/components/forms/MultiFileUploader.tsx

@@ -87,7 +87,7 @@ const FilePreviewItem = ({ file, onRemoveClick }: { file: File; onRemoveClick: (
     <div className="text-muted-foreground group relative aspect-square h-full overflow-hidden rounded-lg border">
       <button
         onClick={onRemoveClick}
-        className="absolute top-1.5 right-1.5 z-20 rounded-full bg-black/60 p-1 text-white opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100 hover:bg-red-600 focus:outline-none"
+        className="absolute top-1.5 end-1.5 z-20 rounded-full bg-black/60 p-1 text-white opacity-0 transition-all duration-200 ease-in-out group-hover:opacity-100 hover:bg-red-600 focus:outline-none"
         aria-label="Remove file"
       >
         <XIcon className="h-3.5 w-3.5" />

package/src/components/forms/PasswordInput.tsx

@@ -20,7 +20,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
           type="button"
           variant="ghost"
           size="sm"
-          className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+          className="absolute end-0 top-0 h-full px-3 py-2 hover:bg-transparent"
           onClick={() => setShowPassword((prev) => !prev)}
           disabled={disabled}
         >

package/src/components/forms/__tests__/FormCheckbox.test.tsx

@@ -107,7 +107,7 @@ describe.skip("FormCheckbox", () => {
       expect(labelIndex).toBeLessThan(checkboxIndex);
     });
 
-    it("should apply ml-3 class to label when label is after checkbox", () => {
+    it("should apply ms-3 class to label when label is after checkbox", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" />}
@@ -115,10 +115,10 @@ describe.skip("FormCheckbox", () => {
       );
 
       const label = screen.getByText("Active");
-      expect(label).toHaveClass("ml-3");
+      expect(label).toHaveClass("ms-3");
     });
 
-    it("should not apply ml-3 class when labelBefore is true", () => {
+    it("should not apply ms-3 class when labelBefore is true", () => {
       render(
         <FormWrapper defaultValues={{ active: false }}>
           {(form) => <FormCheckbox form={form} id="active" name="Active" labelBefore={true} />}
@@ -126,7 +126,7 @@ describe.skip("FormCheckbox", () => {
       );
 
       const label = screen.getByText("Active");
-      expect(label).not.toHaveClass("ml-3");
+      expect(label).not.toHaveClass("ms-3");
     });
   });
 

package/src/components/navigations/Header.tsx

@@ -37,8 +37,8 @@ export function Header({ children, mobileChildren, leftContent, logo, className
     <header
       className={`bg-sidebar sticky top-0 z-10 flex h-[var(--app-header-h,calc(3rem_+_env(safe-area-inset-top)))] flex-col items-center justify-start gap-x-4 pt-[env(safe-area-inset-top)] ${className ?? ""}`}
     >
-      <div className="bg-sidebar flex h-12 w-full flex-row items-center justify-between pl-2 pr-4">
-        {isMobile && logo && <div className="flex shrink-0 flex-row items-center pr-1">{logo}</div>}
+      <div className="bg-sidebar flex h-12 w-full flex-row items-center justify-between ps-2 pe-4">
+        {isMobile && logo && <div className="flex shrink-0 flex-row items-center pe-1">{logo}</div>}
         <SidebarTrigger aria-label="Toggle sidebar" id="sidebar-trigger" />
         {leftContent}
         <div className="flex w-full flex-row items-center justify-start">

package/src/components/navigations/PageSection.tsx

@@ -47,7 +47,7 @@ export function PageSection({ children, title, options, open, small, onToggle }:
             {isOpen ? (
               <ChevronDownIcon className={`text-primary h-4 w-4`} />
             ) : (
-              <ChevronRightIcon className="text-primary h-4 w-4" />
+              <ChevronRightIcon className="text-primary h-4 w-4 rtl:rotate-180" />
             )}
             <h2 className={`flex w-full ${small === true ? `text-sm` : `text-lg`} text-primary font-semibold`}>
               {title}

package/src/components/pages/PageContainerContentDetails.tsx

@@ -64,7 +64,7 @@ export function PageContainerContentDetails({ items, section, module, id }: Page
         </TabsList>
       </div>
 
-      <div className="pr-4">
+      <div className="pe-4">
         {items.map((item) => (
           <TabsContent key={item.title} value={item.title}>
             {item.content}

package/src/components/pages/PageContentContainer.tsx

@@ -30,6 +30,7 @@ export function PageContentContainer({ header, details, footer, content, fullBle
   // Returns saved layout and callback to save changes
   const { defaultLayout, onLayoutChanged } = useDefaultLayout({
     id: layoutId,
+    // rtl-ok: persisted panel identifiers, not CSS
     panelIds: ["left-panel", "right-panel"],
     storage: typeof window !== "undefined" ? localStorage : undefined,
   });
@@ -47,7 +48,7 @@ export function PageContentContainer({ header, details, footer, content, fullBle
 
   return (
     <div className="flex h-[calc(100dvh-4rem)] w-full flex-col transition-opacity duration-150 animate-in fade-in">
-      {header && <div className="mb-4 flex w-full shrink-0 border-b pr-4">{header}</div>}
+      {header && <div className="mb-4 flex w-full shrink-0 border-b pe-4">{header}</div>}
       <div className="min-h-0 flex-1">
         {details || footer ? (
           <ResizablePanelGroup
@@ -57,18 +58,20 @@ export function PageContentContainer({ header, details, footer, content, fullBle
             onLayoutChanged={onLayoutChanged}
           >
             <ResizablePanel
+              // rtl-ok: persisted panel identifier, not CSS
               id="left-panel"
               defaultSize={leftPanelDefaultSize}
               minSize={leftPanelMinSize}
               maxSize={leftPanelMaxSize}
             >
-              <div className={`@container flex h-full flex-col ${isMobile ? "pb-4" : "pr-4"}`}>
+              <div className={`@container flex h-full flex-col ${isMobile ? "pb-4" : "pe-4"}`}>
                 <div className="flex-1 overflow-y-auto">{details}</div>
                 {footer && <div className="flex flex-col gap-y-2 pt-2 pb-2">{footer}</div>}
               </div>
             </ResizablePanel>
             <ResizableHandle withHandle />
             <ResizablePanel
+              // rtl-ok: persisted panel identifier, not CSS
               id="right-panel"
               defaultSize={rightPanelDefaultSize}
               className={cn("w-full", isMobile ? "pt-4" : "")}

package/src/components/tables/ContentListTable.tsx

@@ -159,7 +159,7 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
             {props.title && (
               <TableRow>
                 <TableHead
-                  className="bg-card rounded-t-lg text-primary p-4 text-left font-bold"
+                  className="bg-card rounded-t-lg text-primary p-4 text-start font-bold"
                   colSpan={tableColumns.length}
                 >
                   <div className="flex w-full items-center justify-between gap-x-2">
@@ -271,7 +271,7 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
           {showFooter && (
             <TableFooter>
               <TableRow>
-                <TableCell colSpan={tableColumns.length} className="bg-card py-4 text-right">
+                <TableCell colSpan={tableColumns.length} className="bg-card py-4 text-end">
                   <div className="flex items-center justify-end space-x-2">
                     <Button
                       variant="outline"
@@ -286,7 +286,7 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
                       {pendingDirection === "prev" ? (
                         <Loader2 className="h-4 w-4 animate-spin" />
                       ) : (
-                        <ChevronLeft className="h-4 w-4" />
+                        <ChevronLeft className="h-4 w-4 rtl:rotate-180" />
                       )}
                     </Button>
                     {data.pageInfo && (
@@ -307,7 +307,7 @@ export const ContentListTable = memo(function ContentListTable(props: ContentLis
                       {pendingDirection === "next" ? (
                         <Loader2 className="h-4 w-4 animate-spin" />
                       ) : (
-                        <ChevronRight className="h-4 w-4" />
+                        <ChevronRight className="h-4 w-4 rtl:rotate-180" />
                       )}
                     </Button>
                   </div>

package/src/components/tables/ContentTableSearch.tsx

@@ -74,13 +74,13 @@ export function ContentTableSearch({ data }: ContentTableSearchProps) {
           Labels reuse keys that exist in every consuming app; a new package-level key would
           throw MISSING_MESSAGE wherever it had not been added. */}
       {isExpanded ? (
-        <Search aria-hidden className="text-muted-foreground absolute top-1 left-1 size-4" />
+        <Search aria-hidden className="text-muted-foreground absolute top-1 start-1 size-4" />
       ) : (
         <Button
           data-testid="content-table-search-trigger"
           variant="ghost"
           size="icon-sm"
-          className="text-muted-foreground hover:text-foreground absolute top-0 left-0"
+          className="text-muted-foreground hover:text-foreground absolute top-0 start-0"
           onClick={handleSearchIconClick}
         >
           <Search className="size-4" />
@@ -100,19 +100,19 @@ export function ContentTableSearch({ data }: ContentTableSearchProps) {
           onBlur={handleBlur}
           placeholder={t(`ui.search.placeholder_global`)}
           type="text"
-          className="border-border/50 focus-visible:border-border h-10 w-full pr-8 pl-8 text-xs shadow-none focus-visible:ring-0"
+          className="border-border/50 focus-visible:border-border h-10 w-full pe-8 ps-8 text-xs shadow-none focus-visible:ring-0"
           onChange={(e) => setSearchTerm(e.target.value)}
           value={searchTerm}
         />
       )}
       {isExpanded && isSearching && (
-        <RefreshCw className="text-muted-foreground absolute top-1 right-1 h-4 w-4 animate-spin" />
+        <RefreshCw className="text-muted-foreground absolute top-1 end-1 h-4 w-4 animate-spin" />
       )}
       {isExpanded && !isSearching && searchTermRef.current && (
         <Button
           variant="ghost"
           size="icon-sm"
-          className="text-muted-foreground hover:text-foreground absolute top-0 right-0"
+          className="text-muted-foreground hover:text-foreground absolute top-0 end-0"
           onClick={handleClear}
         >
           <X className="size-4" />

package/src/contexts/DirectionContext.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import { DirectionProvider as BaseUIDirectionProvider } from "@base-ui/react/direction-provider";
+
+export type Direction = "ltr" | "rtl";
+
+const DirectionContext = React.createContext<Direction>("ltr");
+
+/**
+ * App-owned direction. The consumer sets <html dir> AND mounts this provider
+ * with the same value; the package never derives direction from locale.
+ * Wraps Base UI's DirectionProvider so popups resolve align/side logically.
+ */
+export function DirectionProvider({ dir = "ltr", children }: { dir?: Direction; children: React.ReactNode }) {
+  return (
+    <DirectionContext.Provider value={dir}>
+      <BaseUIDirectionProvider direction={dir}>{children}</BaseUIDirectionProvider>
+    </DirectionContext.Provider>
+  );
+}
+
+export function useDir(): Direction {
+  return React.useContext(DirectionContext);
+}

package/src/contexts/__tests__/DirectionContext.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { DirectionProvider, useDir } from "../DirectionContext";
+
+function Probe() {
+  return <span data-testid="dir">{useDir()}</span>;
+}
+
+describe("DirectionContext", () => {
+  it("defaults to ltr without a provider", () => {
+    render(<Probe />);
+    expect(screen.getByTestId("dir").textContent).toBe("ltr");
+  });
+  it("provides rtl", () => {
+    render(
+      <DirectionProvider dir="rtl">
+        <Probe />
+      </DirectionProvider>,
+    );
+    expect(screen.getByTestId("dir").textContent).toBe("rtl");
+  });
+});

package/src/contexts/index.ts

@@ -8,6 +8,7 @@ export * from "../features/how-to/contexts/HowToContext";
 export * from "../features/rbac/contexts/RbacContext";
 export * from "../features/assistant/contexts/AssistantContext";
 export * from "./CommonContext";
+export * from "./DirectionContext";
 export * from "./HeaderChildrenContext";
 export * from "./HeaderLeftContentContext";
 export * from "./HeaderLogoContext";

package/src/features/ai-connection/components/lists/AiConnectionTypeCard.tsx

@@ -123,7 +123,7 @@ export function AiConnectionTypeCard({ connectionType }: AiConnectionTypeCardPro
       className={cn("flex items-center gap-3 px-3 py-2", readOnly && "opacity-50")}
       data-testid={`ai-connection-row-${connection.id}`}
     >
-      <span className="text-muted-foreground w-5 text-right text-xs tabular-nums">{index + 1}</span>
+      <span className="text-muted-foreground w-5 text-end text-xs tabular-nums">{index + 1}</span>
       <div className="flex min-w-0 flex-1 flex-col">
         <span className="truncate text-sm">{connection.name}</span>
         <span className="text-muted-foreground truncate text-xs">

package/src/features/assistant/components/containers/AssistantPageContainer.tsx

@@ -70,7 +70,7 @@ export function AssistantPageContainer({
       details={
         // The panel supplies its own padding and border; cancel both so the
         // sidebar reads as the panel body rather than a card inside it.
-        <div className="-m-4 flex h-full min-h-0 [&>aside]:w-full [&>aside]:border-r-0 [&>aside]:bg-transparent">
+        <div className="-m-4 flex h-full min-h-0 [&>aside]:w-full [&>aside]:border-e-0 [&>aside]:bg-transparent">
           <AssistantSidebar
             threads={ctx.threads}
             activeId={ctx.assistant?.id}

package/src/features/assistant/components/parts/AssistantBlockNoteComposer.tsx

@@ -126,10 +126,10 @@ export function AssistantBlockNoteComposer({
           />
         </div>
         <Button onClick={submit} disabled={!canSend} size="sm" className="h-8">
-          <ArrowUp className="mr-1 h-4 w-4" /> {t("features.assistant.send")}
+          <ArrowUp className="me-1 h-4 w-4" /> {t("features.assistant.send")}
         </Button>
       </div>
-      <div className="text-muted-foreground text-right text-xs">{t("features.assistant.keyboard_hint")}</div>
+      <div className="text-muted-foreground text-end text-xs">{t("features.assistant.keyboard_hint")}</div>
     </div>
   );
 }

package/src/features/assistant/components/parts/AssistantComposer.tsx

@@ -47,10 +47,10 @@ export function AssistantComposer({ onSend, disabled, value: controlled, onValue
           className="min-h-[48px] resize-none border-0 bg-transparent focus-visible:ring-0"
         />
         <Button onClick={submit} disabled={!canSend} size="sm" className="h-8">
-          <ArrowUp className="mr-1 h-4 w-4" /> {t("ui.buttons.save")}
+          <ArrowUp className="me-1 h-4 w-4" /> {t("ui.buttons.save")}
         </Button>
       </div>
-      <div className="text-muted-foreground text-right text-xs">{t("features.assistant.keyboard_hint")}</div>
+      <div className="text-muted-foreground text-end text-xs">{t("features.assistant.keyboard_hint")}</div>
     </div>
   );
 }

package/src/features/assistant/components/parts/AssistantEmptyState.tsx

@@ -55,7 +55,7 @@ export function AssistantEmptyState({ onSend, operatorMode = false, onOperatorMo
               <button
                 key={k}
                 type="button"
-                className="border-border bg-muted/30 hover:bg-muted rounded-lg border p-3 text-left text-sm"
+                className="border-border bg-muted/30 hover:bg-muted rounded-lg border p-3 text-start text-sm"
                 onClick={() => setDraft(text)}
               >
                 {text}

package/src/features/assistant/components/parts/AssistantSidebar.tsx

@@ -29,7 +29,7 @@ export function AssistantSidebar({ threads, activeId, onSelect, onNew }: Props)
             type="button"
             onClick={() => onSelect(thread.id)}
             className={
-              "block w-full truncate rounded-md px-2 py-1.5 text-left text-sm " +
+              "block w-full truncate rounded-md px-2 py-1.5 text-start text-sm " +
               (activeId === thread.id ? "bg-primary/10 text-primary" : "hover:bg-muted text-foreground")
             }
           >
@@ -41,10 +41,10 @@ export function AssistantSidebar({ threads, activeId, onSelect, onNew }: Props)
   };
 
   return (
-    <aside className="bg-muted/30 flex w-64 flex-col border-r">
+    <aside className="bg-muted/30 flex w-64 flex-col border-e">
       <div className="border-b p-3">
         <Button onClick={onNew} className="w-full" size="sm">
-          <Plus className="mr-1 h-4 w-4" /> {t("features.assistant.new")}
+          <Plus className="me-1 h-4 w-4" /> {t("features.assistant.new")}
         </Button>
       </div>
       <div className="flex-1 overflow-y-auto p-2">

package/src/features/assistant-action/components/ApprovalActionCard.tsx

@@ -103,7 +103,7 @@ export function ApprovalActionCard({ actionId, summary, onResolved }: Props) {
         <ShieldAlert className="text-warning h-3.5 w-3.5" />
         <span>{t("features.assistant.approval.title")}</span>
         {status && status !== "pending" && (
-          <Badge variant={STATUS_VARIANT[status]} className="ml-auto tracking-normal normal-case">
+          <Badge variant={STATUS_VARIANT[status]} className="ms-auto tracking-normal normal-case">
             {t(STATUS_LABEL_KEY[status])}
           </Badge>
         )}

package/src/features/assistant-action/components/AssistantContainerWithApprovals.tsx

@@ -24,7 +24,7 @@ export function AssistantContainerWithApprovals() {
             onResolved={ctx.appendResolvedMessage}
           />
         ) : (
-          <div className="bg-muted text-foreground rounded-2xl rounded-bl-sm px-3.5 py-2.5 text-sm leading-relaxed">
+          <div className="bg-muted text-foreground rounded-2xl rounded-es-sm px-3.5 py-2.5 text-sm leading-relaxed">
             {message.content}
           </div>
         )

package/src/features/assistant-message/components/MessageItem.tsx

@@ -82,7 +82,7 @@ export function MessageItem({
           renders invisible here, so force the on-primary colour and lean on
           weight for the affordance (links are never underlined in this UI).
         */}
-        <div className="bg-primary text-primary-foreground max-w-[72%] rounded-2xl rounded-br-sm px-3.5 py-2 text-sm [&_a]:text-primary-foreground [&_a]:font-semibold [&_p]:m-0">
+        <div className="bg-primary text-primary-foreground max-w-[72%] rounded-2xl rounded-ee-sm px-3.5 py-2 text-sm [&_a]:text-primary-foreground [&_a]:font-semibold [&_p]:m-0">
           <ReactMarkdown remarkPlugins={[remarkGfm]} urlTransform={mentionUrlTransform} components={markdownComponents}>
             {message.content}
           </ReactMarkdown>
@@ -104,7 +104,7 @@ export function MessageItem({
 
   return (
     <div className="flex min-w-0 max-w-[78%] flex-col gap-1.5">
-      <div className="text-muted-foreground flex items-center gap-2 pl-1 text-xs">
+      <div className="text-muted-foreground flex items-center gap-2 ps-1 text-xs">
         <span className="flex h-4 w-4 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-violet-500 text-white">
           <Sparkles className="h-2.5 w-2.5" />
         </span>
@@ -117,7 +117,7 @@ export function MessageItem({
         // zeroed): restore flow spacing between sibling blocks and give
         // blockquotes a callout treatment — assistant answers use them for
         // proposals and asides that must stand apart from factual prose.
-        <div className="bg-muted text-foreground rounded-2xl rounded-bl-sm px-3.5 py-2.5 text-sm leading-relaxed [&>*+*]:mt-3 [&_blockquote]:border-l-2 [&_blockquote]:border-primary/50 [&_blockquote]:bg-primary/5 [&_blockquote]:rounded-md [&_blockquote]:px-3 [&_blockquote]:py-1.5">
+        <div className="bg-muted text-foreground rounded-2xl rounded-es-sm px-3.5 py-2.5 text-sm leading-relaxed [&>*+*]:mt-3 [&_blockquote]:border-s-2 [&_blockquote]:border-primary/50 [&_blockquote]:bg-primary/5 [&_blockquote]:rounded-md [&_blockquote]:px-3 [&_blockquote]:py-1.5">
           <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents} urlTransform={mentionUrlTransform}>
             {message.content}
           </ReactMarkdown>

package/src/features/assistant-message/components/__tests__/MessageItem.spec.tsx

@@ -59,6 +59,7 @@ function buildMessageStub(p: {
 }
 
 describe("MessageItem", () => {
+  // rtl-ok: prose in the test name, not a CSS class
   it("user message is in a right-aligned bubble with plain text", () => {
     const msg = buildMessageStub({ role: "user", content: "hello" });
     render(<MessageItem message={msg} isLatestAssistant={false} onSelectFollowUp={vi.fn()} />);

package/src/features/assistant-message/components/parts/MessageSourcesPanel.tsx

@@ -96,7 +96,7 @@ export function MessageSourcesPanel({ message, isLatestAssistant, onSelectFollow
         aria-controls={panelId}
         className="text-primary inline-flex items-center gap-1 text-xs font-medium"
       >
-        {open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3" />}
+        {open ? <ChevronDown className="h-3 w-3" /> : <ChevronRight className="h-3 w-3 rtl:rotate-180" />}
         {open
           ? t("features.assistant.message.sources.toggle_hide")
           : t("features.assistant.message.sources.toggle", { count: total })}
@@ -109,7 +109,7 @@ export function MessageSourcesPanel({ message, isLatestAssistant, onSelectFollow
               {visibleTabs.map((key) => (
                 <TabsTrigger key={key} value={key}>
                   {t(`features.assistant.message.sources.tabs.${key === "suggested" ? "suggested_questions" : key}`)}
-                  <span className="text-muted-foreground ml-1.5 text-xs">
+                  <span className="text-muted-foreground ms-1.5 text-xs">
                     {key === "suggested" && suggestionsCount}
                     {key === "references" && refsCount}
                     {key === "citations" && citationsCount}

package/src/features/assistant-message/components/parts/RelevanceMeter.tsx

@@ -18,7 +18,7 @@ export function RelevanceMeter({ value, className = "" }: Props) {
       aria-label={`Relevance ${label}`}
       className={`bg-muted relative mx-auto flex h-5 w-20 items-center justify-center overflow-hidden rounded border ${className}`}
     >
-      <div className="bg-accent absolute top-0 left-0 h-full" style={{ width: `${pct}%` }} />
+      <div className="bg-accent absolute top-0 start-0 h-full" style={{ width: `${pct}%` }} />
       <span
         className={`relative text-xs ${pct < 40 ? "text-muted-foreground" : "text-accent-foreground font-semibold"}`}
       >

package/src/features/assistant-message/components/parts/tabs/SuggestedQuestionsTab.tsx

@@ -14,7 +14,7 @@ export function SuggestedQuestionsTab({ questions, onSelect }: Props) {
           key={q}
           type="button"
           onClick={() => onSelect(q)}
-          className="border-border bg-muted/30 hover:bg-muted rounded-md border px-3 py-1.5 text-left text-sm"
+          className="border-border bg-muted/30 hover:bg-muted rounded-md border px-3 py-1.5 text-start text-sm"
         >
           {q}
         </button>

package/src/features/auth/components/buttons/GoogleSignInButton.tsx

@@ -27,7 +27,7 @@ export function GoogleSignInButton({ referralCode }: GoogleSignInButtonProps) {
         variant="outline"
         data-testid="page-login-button-google"
       >
-        <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24">
+        <svg className="me-2 h-5 w-5" viewBox="0 0 24 24">
           <path
             fill="#4285F4"
             d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"

package/src/features/auth/components/forms/Register.tsx

@@ -304,7 +304,7 @@ export default function Register() {
                             variant="outline"
                             type="button"
                           >
-                            <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24">
+                            <svg className="me-2 h-5 w-5" viewBox="0 0 24 24">
                               <path
                                 fill="#4285F4"
                                 d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
@@ -332,7 +332,7 @@ export default function Register() {
                           className="flex w-full"
                         >
                           <Button className="w-full" variant="outline" type="button">
-                            <svg className="mr-2 h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
+                            <svg className="me-2 h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                               <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
                             </svg>
                             {t("waitlist.buttons.register_with_discord")}

package/src/features/auth/components/two-factor/BackupCodesDialog.tsx

@@ -101,7 +101,7 @@ export function BackupCodesDialog({ remainingCodes, onRegenerate, trigger }: Bac
               <AlertDialogTrigger
                 render={
                   <Button variant="outline" className="w-full">
-                    <RefreshCw className="h-4 w-4 mr-2" />
+                    <RefreshCw className="h-4 w-4 me-2" />
                     {t("auth.two_factor.generate_new_codes")}
                   </Button>
                 }
@@ -131,11 +131,11 @@ export function BackupCodesDialog({ remainingCodes, onRegenerate, trigger }: Bac
             </div>
             <div className="flex gap-2">
               <Button variant="outline" className="flex-1" onClick={handleCopyAll}>
-                <Copy className="h-4 w-4 mr-2" />
+                <Copy className="h-4 w-4 me-2" />
                 {t("auth.two_factor.copy_all")}
               </Button>
               <Button variant="outline" className="flex-1" onClick={handleDownload}>
-                <Download className="h-4 w-4 mr-2" />
+                <Download className="h-4 w-4 me-2" />
                 {t("auth.two_factor.download")}
               </Button>
             </div>

package/src/features/auth/utils/__tests__/clearClientStorage.spec.ts

@@ -63,18 +63,18 @@ describe("clearClientStorage", () => {
   describe("Scenario: Handles keys with special characters", () => {
     it("should properly remove keys containing colons", () => {
       const keys = [
-        "react-resizable-panels:page-content-container-desktop:left-panel:right-panel",
-        "react-resizable-panels:page-content-container-mobile:left-panel:right-panel",
+        "react-resizable-panels:page-content-container-desktop:left-panel:right-panel", // rtl-ok: localStorage key, not a CSS class
+        "react-resizable-panels:page-content-container-mobile:left-panel:right-panel", // rtl-ok: localStorage key, not a CSS class
       ];
 
       clearClientStorage(keys);
 
       expect(window.localStorage.removeItem).toHaveBeenCalledTimes(2);
       expect(window.localStorage.removeItem).toHaveBeenCalledWith(
-        "react-resizable-panels:page-content-container-desktop:left-panel:right-panel",
+        "react-resizable-panels:page-content-container-desktop:left-panel:right-panel", // rtl-ok: localStorage key, not a CSS class
       );
       expect(window.localStorage.removeItem).toHaveBeenCalledWith(
-        "react-resizable-panels:page-content-container-mobile:left-panel:right-panel",
+        "react-resizable-panels:page-content-container-mobile:left-panel:right-panel", // rtl-ok: localStorage key, not a CSS class
       );
     });
   });

package/src/features/billing/components/cards/BillingUsageSummaryCard.tsx

@@ -87,7 +87,7 @@ export function BillingUsageSummaryCard({
             {meters.length > 1 && <p className="text-xs text-muted-foreground">Across {meters.length} meters</p>}
             <span className="flex items-center text-xs text-muted-foreground">
               View details
-              <ChevronRight className="h-3 w-3 ml-1" />
+              <ChevronRight className="h-3 w-3 ms-1 rtl:rotate-180" />
             </span>
           </div>
         )}