@carlonicora/nextjs-jsonapi 3.3.9 → 3.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carlonicora/nextjs-jsonapi",
-  "version": "3.3.9",
+  "version": "3.4.1",
   "description": "Next.js JSON:API client with server/client support and caching",
   "author": "Carlo Nicora",
   "license": "GPL-3.0-or-later",
@@ -73,7 +73,7 @@
     "build": "rm -rf dist && NODE_OPTIONS='--max-old-space-size=8192' tsup && tsc -p scripts/generate-web-module/tsconfig.json",
     "dev": "NODE_OPTIONS='--max-old-space-size=8192' tsup --watch",
     "clean": "rm -rf dist",
-    "lint": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" --fix",
+    "lint": "eslint \"src/**/*.ts\" \"src/**/*.tsx\" --fix && node scripts/check-rtl-classes.mjs",
     "format": "prettier --write \"src/**/*.ts\"",
     "prepublishOnly": "pnpm build",
     "prepare": "tsc -p scripts/generate-web-module/tsconfig.json",
@@ -117,17 +117,17 @@
     }
   },
   "dependencies": {
-    "@base-ui/react": "1.6.0",
-    "@blocknote/core": "^0.52.1",
-    "@blocknote/react": "^0.52.1",
-    "@blocknote/shadcn": "^0.52.1",
-    "@blocknote/xl-ai": "^0.52.1",
+    "@base-ui/react": "1.7.0",
+    "@blocknote/core": "^0.54.0",
+    "@blocknote/react": "^0.54.0",
+    "@blocknote/shadcn": "^0.54.0",
+    "@blocknote/xl-ai": "^0.54.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.27.20",
     "@handlewithcare/prosemirror-inputrules": "^0.1.4",
-    "@hookform/resolvers": "^5.5.7",
+    "@hookform/resolvers": "^5.9.1",
     "@radix-ui/react-label": "^2.1.15",
     "@radix-ui/react-slot": "^1.3.3",
     "@simplewebauthn/browser": "^13.3.0",
@@ -135,7 +135,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "codice-fiscale-js": "^2.3.23",
+    "codice-fiscale-js": "~2.3.23",
     "commander": "^15.0.0",
     "cookies-next": "^6.1.1",
     "d3": "^7.9.0",
@@ -143,30 +143,30 @@
     "date-fns": "^4.4.0",
     "embla-carousel-react": "^8.6.0",
     "fuse.js": "^7.5.0",
-    "input-otp": "^1.4.2",
-    "jotai": "^2.20.2",
+    "input-otp": "^1.5.0",
+    "jotai": "^2.20.3",
     "jotai-family": "^1.1.0",
-    "lucide-react": "^1.28.0",
+    "lucide-react": "^1.34.0",
     "next-mdx-remote": "^6.0.0",
     "next-themes": "^0.4.6",
     "pako": "^3.0.1",
     "qrcode.react": "^4.2.0",
     "react-day-picker": "^10.0.1",
-    "react-dropzone": "^19.1.1",
-    "react-hook-form": "7.83.0",
+    "react-dropzone": "^20.1.1",
+    "react-hook-form": "7.86.0",
     "react-markdown": "^10.1.0",
-    "react-resizable-panels": "^4.12.2",
+    "react-resizable-panels": "^4.12.3",
     "recharts": "^3.10.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.1",
-    "shadcn": "^4.16.1",
-    "shepherd.js": "^15.2.2",
+    "shadcn": "^4.19.0",
+    "shepherd.js": "^15.3.0",
     "socket.io-client": "^4.8.3",
-    "sonner": "^2.0.7",
+    "sonner": "^2.0.8",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0",
-    "uuid": "^14.0.1",
+    "uuid": "^14.0.2",
     "vaul": "^1.1.2",
     "zod": "^4.4.3"
   },
@@ -175,40 +175,40 @@
     "@eslint/js": "^9.39.5",
     "@semantic-release/changelog": "^7.0.0",
     "@semantic-release/git": "^11.0.1",
-    "@stripe/react-stripe-js": "^6.8.0",
-    "@stripe/stripe-js": "^9.13.0",
+    "@stripe/react-stripe-js": "^6.8.2",
+    "@stripe/stripe-js": "^9.14.0",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^7.0.0",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/user-event": "^14.6.6",
     "@types/d3": "^7.4.3",
     "@types/dagre": "^0.7.54",
-    "@types/node": "^26.1.2",
+    "@types/node": "^26.3.0",
     "@types/qrcode.react": "^3.0.0",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
-    "@typescript-eslint/eslint-plugin": "^8.65.0",
-    "@typescript-eslint/parser": "^8.65.0",
-    "@vitejs/plugin-react": "^6.0.5",
-    "@vitest/coverage-v8": "^4.1.10",
-    "@vitest/ui": "^4.1.10",
+    "@types/react-dom": "19.2.5",
+    "@typescript-eslint/eslint-plugin": "^8.68.0",
+    "@typescript-eslint/parser": "^8.68.0",
+    "@vitejs/plugin-react": "^6.1.0",
+    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/ui": "^4.1.11",
     "conventional-changelog-conventionalcommits": "9.3.1",
     "eslint": "^9.39.5",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",
-    "globals": "^17.8.0",
+    "globals": "^17.11.0",
     "jsdom": "^30.0.1",
-    "next": "16.3.0",
-    "next-intl": "^4.13.4",
+    "next": "16.3.2",
+    "next-intl": "^4.13.7",
     "prettier": "^3.9.6",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "react-hook-form": "7.83.0",
+    "react-hook-form": "7.86.0",
     "semantic-release": "^25.0.8",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "keywords": [
     "nextjs",

package/scripts/check-rtl-classes.mjs

@@ -0,0 +1,60 @@
+// Lint-time guard: physical directional Tailwind classes / CSS props are
+// forbidden in src/ — use logical equivalents, or escape with `rtl-ok`.
+import { readFileSync, readdirSync, realpathSync, statSync } from "node:fs";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const PATTERNS = [
+  /(?<![-\w:[])(?:ml|mr|pl|pr)-(?:\[|\d|auto|px)/g,
+  /(?<![-\w:[])-?(?:left|right)-(?:\[|\d|px|full)/g,
+  /(?<![-\w])text-(?:left|right)(?![-\w])/g,
+  /(?<![-\w])rounded-(?:[lr]|tl|tr|bl|br)(?![a-z])/g,
+  /(?<![-\w])border-[lr](?![a-z])/g,
+  /(?<![-\w])float-(?:left|right)(?![-\w])/g,
+  /(?<![-\w])scroll-(?:ml|mr|pl|pr)-/g,
+  /\b(?:marginLeft|marginRight|paddingLeft|paddingRight)\s*[:=]/g,
+];
+
+export function findViolations(source, file) {
+  if (/__tests__|\.(test|spec)\.[tj]sx?$/.test(file)) return [];
+  const out = [];
+  const lines = source.split("\n");
+  lines.forEach((line, i) => {
+    if (line.includes("rtl-ok") || (i > 0 && lines[i - 1].includes("rtl-ok"))) return;
+    if (line.includes("data-[side=")) return; // rtl-ok by design (resolved physical side)
+    for (const p of PATTERNS) {
+      for (const m of line.matchAll(p)) out.push({ file, line: i + 1, match: m[0] });
+    }
+  });
+  return out;
+}
+
+function* walk(dir) {
+  for (const name of readdirSync(dir)) {
+    const p = join(dir, name);
+    if (statSync(p).isDirectory()) yield* walk(p);
+    else if (/\.(ts|tsx)$/.test(name)) yield p;
+  }
+}
+
+// `process.argv[1]` is not symlink-resolved by node while `import.meta.url` is,
+// so compare real paths — otherwise the CLI silently does nothing.
+function isDirectInvocation() {
+  try {
+    return realpathSync(process.argv[1]) === realpathSync(fileURLToPath(import.meta.url));
+  } catch {
+    return false;
+  }
+}
+
+if (isDirectInvocation()) {
+  const root = join(fileURLToPath(new URL(".", import.meta.url)), "..", "src");
+  const all = [];
+  for (const f of walk(root)) all.push(...findViolations(readFileSync(f, "utf8"), f));
+  if (all.length) {
+    for (const v of all) console.error(`${v.file}:${v.line}  ${v.match}`);
+    console.error(`\n${all.length} physical directional class(es). Use logical utilities or add an rtl-ok comment.`);
+    process.exit(1);
+  }
+  console.log("check-rtl-classes: clean");
+}

package/scripts/check-rtl-classes.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { findViolations } from "./check-rtl-classes.mjs";
+
+const hits = (src: string) => findViolations(src, "x.tsx").map((v) => v.match);
+
+describe("check-rtl-classes", () => {
+  it("flags physical directional utilities", () => {
+    expect(hits(`<div className="ml-2 pr-4 text-left rounded-l-md border-r left-0 -right-4" />`)).toHaveLength(7);
+    expect(hits(`<li style={{ paddingLeft: "1rem" }} />`)).toHaveLength(1);
+  });
+  it("ignores logical, symmetric, compound and rtl-variant classes", () => {
+    expect(
+      hits(
+        `<div className="ms-2 pe-4 text-start rounded-s-md border-e start-0 inset-x-2 space-x-2 divide-x translate-x-1/2 slide-in-from-left-10 rounded-lg border-x blur-md rtl:rotate-180 rtl:-translate-x-2 data-[side=left]:left-0" />`,
+      ),
+    ).toHaveLength(0);
+  });
+  it("honours rtl-ok escapes on the same or previous line", () => {
+    expect(hits(`{/* rtl-ok */}\n<div className="ml-2" />`)).toHaveLength(0);
+    expect(hits(`<div className="ml-2" /> {/* rtl-ok */}`)).toHaveLength(0);
+  });
+  it("skips test files", () => {
+    expect(findViolations(`"ml-2"`, "src/x/__tests__/y.test.tsx")).toHaveLength(0);
+  });
+});

package/src/components/TableCellAvatar.tsx

@@ -10,7 +10,7 @@ type TableCellAvatarProps = {
 
 export function TableCellAvatar({ image, name, className }: TableCellAvatarProps) {
   return (
-    <Avatar className={cn("mr-2 h-10 w-10 shrink-0", className)}>
+    <Avatar className={cn("me-2 h-10 w-10 shrink-0", className)}>
       {image ? <AvatarImage src={image} alt={name} /> : null}
       <AvatarFallback className="text-xs">{getInitials(name)}</AvatarFallback>
     </Avatar>

package/src/components/containers/PageContainer.tsx

@@ -19,7 +19,7 @@ export function PageContainer({ children, testId, className }: PageContainerProp
       <Header leftContent={headerLeftContent} logo={headerLogo} mobileChildren={headerMobileChildren}>
         {headerChildren}
       </Header>
-      <main className={cn(`flex w-full flex-1 flex-col gap-y-4 pt-4 pl-4 pr-0`, className)}>{children}</main>
+      <main className={cn(`flex w-full flex-1 flex-col gap-y-4 pt-4 ps-4 pe-0`, className)}>{children}</main>
     </div>
   );
 }

package/src/components/containers/ReactMarkdownContainer.tsx

@@ -57,7 +57,7 @@ export function ReactMarkdownContainer({
               li: ({ children }) => <li className={size === "small" ? "text-xs" : ""}>{children}</li>,
               table: ({ children }) => <table className="w-full table-auto border-collapse border">{children}</table>,
               th: ({ children }) => (
-                <th className={`border px-4 py-2 text-left ${size === "small" ? "px-2 py-1 text-xs" : ""}`}>
+                <th className={`border px-4 py-2 text-start ${size === "small" ? "px-2 py-1 text-xs" : ""}`}>
                   {children}
                 </th>
               ),
@@ -65,9 +65,25 @@ export function ReactMarkdownContainer({
                 <td className={`border px-4 py-2 ${size === "small" ? "px-2 py-1 text-xs" : ""}`}>{children}</td>
               ),
               tr: ({ children }) => <tr className="even:bg-gray-50">{children}</tr>,
-              ul: ({ children }) => <ul className={`list-disc ${size === "small" ? "pl-3" : "pl-4"}`}>{children}</ul>,
+              ul: ({ children }) => <ul className={`list-disc ${size === "small" ? "ps-3" : "ps-4"}`}>{children}</ul>,
               ol: ({ children }) => (
-                <ol className={`list-decimal ${size === "small" ? "pl-3" : "pl-4"}`}>{children}</ol>
+                <ol className={`list-decimal ${size === "small" ? "ps-3" : "ps-4"}`}>{children}</ol>
+              ),
+              // Code is not prose: identifiers, paths and command lines read
+              // left-to-right in every locale, so both the fenced block and the
+              // inline span are deliberate LTR islands. `node` is react-markdown's
+              // hast node — it must not reach the DOM element.
+              // rtl-ok: deliberate LTR island (code)
+              pre: ({ children, node: _node, ...props }) => (
+                <pre dir="ltr" {...props}>
+                  {children}
+                </pre>
+              ),
+              // rtl-ok: deliberate LTR island (code)
+              code: ({ children, node: _node, ...props }) => (
+                <code dir="ltr" {...props}>
+                  {children}
+                </code>
               ),
               h1: ({ children }) => (
                 <h1 className={size === "small" ? "my-1 mt-2 text-sm font-bold" : "my-2 mt-4 text-3xl font-semibold"}>
@@ -98,7 +114,7 @@ export function ReactMarkdownContainer({
         </div>
 
         {collapsible && !isExpanded && showExpandButton && (
-          <div className="pointer-events-none absolute right-0 bottom-0 left-0 h-12 bg-gradient-to-t from-white to-transparent" />
+          <div className="pointer-events-none absolute end-0 bottom-0 start-0 h-12 bg-gradient-to-t from-white to-transparent" />
         )}
       </div>
 

package/src/components/containers/RoundPageContainer.tsx

@@ -96,10 +96,10 @@ type RoundPageContainerProps = {
 };
 
 // Rail trigger class: override the horizontal TabsTrigger defaults for a
-// vertical, left-aligned, dark-filled active state. tailwind-merge inside cn()
+// vertical, start-aligned, dark-filled active state. tailwind-merge inside cn()
 // resolves the conflicts with the base classes.
 const railTriggerClass = cn(
-  "flex w-full items-center justify-start rounded-md px-3 py-1.5 text-left text-sm leading-tight whitespace-normal",
+  "flex w-full items-center justify-start rounded-md px-3 py-1.5 text-start text-sm leading-tight whitespace-normal",
   "text-muted-foreground",
   "hover:bg-muted hover:text-foreground",
   "data-[state=active]:bg-foreground data-[state=active]:text-background",
@@ -237,7 +237,7 @@ export function RoundPageContainer({
             // render 78px tall; below the bar it became a visible gap. The
             // swipe-up gesture region is unaffected either way — it is a gesture
             // area, not painted chrome.
-            isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 pl-0",
+            isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 ps-0",
           )}
         >
           {/* `min-h-0 flex-1`, NOT `h-full`: the bar below is an in-flow sibling in
@@ -280,7 +280,7 @@ export function RoundPageContainer({
           // render 78px tall; below the bar it became a visible gap. The
           // swipe-up gesture region is unaffected either way — it is a gesture
           // area, not painted chrome.
-          isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 pl-0",
+          isMobile ? "gap-1 p-1 pt-0" : "p-2 pt-0 ps-0",
         )}
       >
         {/* `min-h-0 flex-1`, NOT `h-full`: MobileNavigationBar below is an in-flow
@@ -323,7 +323,7 @@ export function RoundPageContainer({
                   {/* Flush-left section rail — md and up */}
                   <aside
                     data-testid="round-page-rail"
-                    className="hidden shrink-0 border-r p-4 md:flex md:w-56 md:flex-col md:overflow-y-auto"
+                    className="hidden shrink-0 border-e p-4 md:flex md:w-56 md:flex-col md:overflow-y-auto"
                   >
                     {/* `w-full` is load-bearing: TabsList's base variant carries
                         `w-fit`, which shrinks the rail list to its widest label.
@@ -506,7 +506,7 @@ export function RoundPageContainer({
           {details &&
             (isMobile ? (
               <Sheet open={showDetails} onOpenChange={setShowDetails}>
-                <SheetContent side="right">
+                <SheetContent side="end">
                   <SheetHeader>
                     <SheetTitle>{detailsTitle ?? "Details"}</SheetTitle>
                   </SheetHeader>
@@ -533,7 +533,7 @@ export function RoundPageContainer({
                   // vertically too. Making this the containing block lets
                   // `overflow-hidden` clip them again.
                   "relative flex h-full shrink-0 flex-col overflow-hidden transition-all duration-300 ease-in-out",
-                  showDetails ? "w-96 border-l opacity-100" : "ml-0 w-0 border-l-0 opacity-0",
+                  showDetails ? "w-96 border-s opacity-100" : "ms-0 w-0 border-s-0 opacity-0",
                 )}
               >
                 {detailsTitle && (

package/src/components/contents/AttributeElement.tsx

@@ -14,7 +14,7 @@ export function AttributeElement({ inline, title, value, className }: AttributeE
   return (
     <div className={cn(`flex ${inline === true ? "flex-row" : "flex-col"} my-1 justify-start`, className)}>
       {title && (
-        <div className={`${inline === true ? "min-w-48 pr-4" : "w-full"} text-xs text-muted-foreground`}>{title}</div>
+        <div className={`${inline === true ? "min-w-48 pe-4" : "w-full"} text-xs text-muted-foreground`}>{title}</div>
       )}
       {value && <div className="flex w-full flex-col text-sm">{value}</div>}
     </div>

package/src/components/editors/BlockNoteDiffInlineContent.tsx

@@ -51,7 +51,7 @@ export const diffWordInlineContentSpec = createReactInlineContentSpec(
       if (diffType === "buttons") {
         const diffIdList = diffId.split(",");
         return (
-          <span className="ml-2 inline-flex items-center gap-1">
+          <span className="ms-2 inline-flex items-center gap-1">
             <Button
               size="sm"
               variant="ghost"
@@ -108,7 +108,7 @@ export const diffWordInlineContentSpec = createReactInlineContentSpec(
           </span>
 
           {!accepted && !rejected && (diffType === "added" || diffType === "removed") && (
-            <span className="absolute -top-8 left-0 z-10 hidden items-center gap-1 rounded border bg-white p-1 shadow-lg group-hover:flex">
+            <span className="absolute -top-8 start-0 z-10 hidden items-center gap-1 rounded border bg-white p-1 shadow-lg group-hover:flex">
               <Button
                 size="sm"
                 variant="ghost"

package/src/components/editors/BlockNoteEditorMentionHoverCard.tsx

@@ -87,6 +87,7 @@ export function BlockNoteEditorMentionHoverCard({
       style={{
         position: "fixed",
         top: rect.bottom + 4,
+        // rtl-ok: viewport-anchored floating position
         left: rect.left,
         zIndex: 50,
       }}

package/src/components/forms/CommonDeleter.tsx

@@ -107,7 +107,7 @@ export function CommonDeleter({
         )}
         <div className="flex justify-end">
           <Button
-            className="mr-2"
+            className="me-2"
             variant={"outline"}
             type={`button`}
             onClick={() => setOpen(false)}

package/src/components/forms/CommonEditorButtons.tsx

@@ -45,7 +45,7 @@ export function CommonEditorButtons({
   return (
     <div className="flex justify-end">
       <Button
-        className="mr-2"
+        className="me-2"
         variant={"outline"}
         type={`button`}
         onClick={() => setOpen(false)}

package/src/components/forms/DatePickerPopover.tsx

@@ -163,10 +163,10 @@ export const DatePickerPopover = ({
               value={inputValue}
               onChange={(e) => handleInputChange(e.target.value)}
               placeholder={datePlaceholder}
-              className="pr-16"
+              className="pe-16"
               onClick={(e) => e.stopPropagation()}
             />
-            <div className="absolute right-1 top-1/2 flex -translate-y-1/2 items-center space-x-1">
+            <div className="absolute end-1 top-1/2 flex -translate-y-1/2 items-center space-x-1">
               <button
                 type="button"
                 className="flex h-8 w-8 items-center justify-center rounded-md hover:bg-muted"

package/src/components/forms/DateRangeSelector.tsx

@@ -94,7 +94,7 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
         <Button
           id="date"
           variant={"outline"}
-          className={cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground")}
+          className={cn("w-[300px] justify-start text-start font-normal", !date && "text-muted-foreground")}
         >
           <CalendarIcon />
           {date?.from ? (
@@ -122,7 +122,7 @@ export function DateRangeSelector({ onDateChange, avoidSettingDates, showPreviou
             <Button
               id="date"
               variant={"outline"}
-              className={cn("w-[300px] justify-start text-left font-normal", !date && "text-muted-foreground")}
+              className={cn("w-[300px] justify-start text-start font-normal", !date && "text-muted-foreground")}
             />
           }
         >

package/src/components/forms/EditorSheet.tsx

@@ -57,12 +57,20 @@ function resolveTriggerIsNativeButton(trigger: ReactNode): boolean {
   return true;
 }
 
+/**
+ * The sheet opens on the inline end (`side="end"`), which SheetContent resolves
+ * to the physical `right` in LTR and `left` in RTL — and its own width classes
+ * are keyed to that resolved physical side. Each size therefore has to be
+ * declared for BOTH sides, or an RTL sheet would fall back to SheetContent's
+ * base `data-[side=left]:sm:max-w-sm`.
+ */
+// rtl-ok: keyed to the resolved physical side, not to a writing direction
 const sizeClasses: Record<EditorSheetSize, string> = {
-  sm: "data-[side=right]:sm:max-w-2xl",
-  md: "data-[side=right]:sm:max-w-3xl",
-  lg: "data-[side=right]:sm:max-w-5xl",
-  xl: "data-[side=right]:sm:max-w-7xl",
-  "2xl": "data-[side=right]:sm:!max-w-[min(96rem,90vw)]",
+  sm: "data-[side=right]:sm:max-w-2xl data-[side=left]:sm:max-w-2xl",
+  md: "data-[side=right]:sm:max-w-3xl data-[side=left]:sm:max-w-3xl",
+  lg: "data-[side=right]:sm:max-w-5xl data-[side=left]:sm:max-w-5xl",
+  xl: "data-[side=right]:sm:max-w-7xl data-[side=left]:sm:max-w-7xl",
+  "2xl": "data-[side=right]:sm:!max-w-[min(96rem,90vw)] data-[side=left]:sm:!max-w-[min(96rem,90vw)]",
 };
 
 export type EditorSheetProps<T extends FieldValues> = {
@@ -106,7 +114,7 @@ export type EditorSheetProps<T extends FieldValues> = {
     closeWithoutConfirm: (open: boolean) => void;
   }) => ReactNode;
 
-  /** Rendered on the right-hand side of the header, next to the title/description
+  /** Rendered on the inline-end side of the header, next to the title/description
    *  block. This sits OUTSIDE the <form> element — interactive elements here must
    *  use onClick handlers, never type="submit". */
   actions?: ReactNode;
@@ -271,11 +279,12 @@ export function EditorSheet<T extends FieldValues>({
               )}
             </SheetTrigger>
           ))}
-        <SheetContent side="right" className={sizeClasses[size]}>
+        <SheetContent side="end" className={sizeClasses[size]}>
           <SheetHeader className="border-b px-6 py-4">
             {actions ? (
-              // pr-10 clears the SheetContent close button (absolute top-4 right-4).
-              <div className="flex items-start justify-between gap-x-4 pr-10">
+              // pe-10 clears the SheetContent close button, which sits at the
+              // inline end of the sheet (absolute top-4 end-4).
+              <div className="flex items-start justify-between gap-x-4 pe-10">
                 <div className="flex min-w-0 flex-col gap-y-1.5">
                   <SheetTitle>{headerTitle}</SheetTitle>
                   <SheetDescription>{headerDescription}</SheetDescription>

package/src/components/forms/EntityMultiSelector.tsx

@@ -229,32 +229,32 @@ export function EntityMultiSelector<T extends { id: string }>({
                 >
                   {selectedValues.length > 0 ? (
                     <>
-                      <span className="text-foreground min-w-0 flex-1 truncate text-left">{triggerSummary}</span>
+                      <span className="text-foreground min-w-0 flex-1 truncate text-start">{triggerSummary}</span>
                       <span className="bg-primary/10 text-primary shrink-0 rounded-full px-1.5 py-0.5 text-xs font-medium">
                         {selectedValues.length}
                       </span>
                     </>
                   ) : (
-                    <span className="text-muted-foreground flex-1 text-left">{placeholder}</span>
+                    <span className="text-muted-foreground flex-1 text-start">{placeholder}</span>
                   )}
                   <ChevronDownIcon className="text-muted-foreground size-3.5 shrink-0" />
                 </div>
               </PopoverTrigger>
               <PopoverContent className="w-(--anchor-width) flex flex-col gap-0 p-0" align="start">
                 <div className="relative p-1.5">
-                  <SearchIcon className="text-muted-foreground pointer-events-none absolute top-1/2 left-3.5 size-3.5 -translate-y-1/2" />
+                  <SearchIcon className="text-muted-foreground pointer-events-none absolute top-1/2 start-3.5 size-3.5 -translate-y-1/2" />
                   <Input
                     ref={searchInputRef}
                     placeholder={placeholder}
                     type="text"
-                    className="h-8 w-full pr-7 pl-7 text-xs"
+                    className="h-8 w-full pe-7 ps-7 text-xs"
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
                   />
                   {searchTerm && (
                     <button
                       type="button"
-                      className="text-muted-foreground hover:text-foreground absolute top-1/2 right-3.5 -translate-y-1/2"
+                      className="text-muted-foreground hover:text-foreground absolute top-1/2 end-3.5 -translate-y-1/2"
                       onClick={() => setSearchTerm("")}
                     >
                       <XIcon className="size-3.5" />
@@ -271,7 +271,7 @@ export function EntityMultiSelector<T extends { id: string }>({
                         <button
                           key={option.id}
                           type="button"
-                          className="hover:bg-muted flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-left text-xs/relaxed"
+                          className="hover:bg-muted flex w-full items-center gap-2.5 rounded-md px-2.5 py-1.5 text-start text-xs/relaxed"
                           onClick={() => toggleEntity(option)}
                         >
                           {renderOption && option.entityData ? (
@@ -313,7 +313,7 @@ export function EntityMultiSelector<T extends { id: string }>({
                   <Badge
                     key={value.id}
                     variant="outline"
-                    className="h-auto gap-1.5 rounded-md px-2.5 py-1 pr-1.5 text-xs"
+                    className="h-auto gap-1.5 rounded-md px-2.5 py-1 pe-1.5 text-xs"
                   >
                     {stableGetFormValueLabel(value)}
                     <button

package/src/components/forms/EntitySelector.tsx

@@ -169,7 +169,7 @@ export default function EntitySelector<T extends BaseEntity>({
                     hasValue(effectiveValue) ? "" : "text-muted-foreground"
                   } ${disabled ? "cursor-not-allowed opacity-50" : ""}`}
                 >
-                  <span className="min-w-0 flex-1 truncate text-left">
+                  <span className="min-w-0 flex-1 truncate text-start">
                     {hasValue(effectiveValue)
                       ? getSelectedItemDisplay
                         ? getSelectedItemDisplay(effectiveValue)
@@ -178,7 +178,7 @@ export default function EntitySelector<T extends BaseEntity>({
                   </span>
                   {hasValue(effectiveValue) && !disabled && (
                     <CircleX
-                      className="text-muted hover:text-destructive ml-auto h-4 w-4 shrink-0 cursor-pointer"
+                      className="text-muted hover:text-destructive ms-auto h-4 w-4 shrink-0 cursor-pointer"
                       onClick={(e) => {
                         e.stopPropagation();
                         e.preventDefault();
@@ -191,19 +191,19 @@ export default function EntitySelector<T extends BaseEntity>({
               <PopoverContent align="start" className="w-(--anchor-width) pointer-events-auto">
                 <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={placeholder}
                       type="text"
-                      className="w-full pr-8 pl-8"
+                      className="w-full pe-8 ps-8"
                       onChange={(e) => 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 cursor-pointer"
+                        className="absolute top-2.5 end-2.5 h-4 w-4 cursor-pointer"
                         onClick={() => {
                           setSearchTerm("");
                           search("");
@@ -221,9 +221,9 @@ export default function EntitySelector<T extends BaseEntity>({
                         onSelect={handleCreateNew}
                       >
                         {isCreating ? (
-                          <RefreshCwIcon className="mr-2 h-4 w-4 animate-spin" />
+                          <RefreshCwIcon className="me-2 h-4 w-4 animate-spin" />
                         ) : (
-                          <Plus className="mr-2 h-4 w-4" />
+                          <Plus className="me-2 h-4 w-4" />
                         )}
                         <span>{createNewLabel ? createNewLabel(searchTerm) : searchTerm.trim() || ""}</span>
                       </CommandItem>

package/src/components/forms/FileUploader.tsx

@@ -317,6 +317,7 @@ export const FileUploaderItem = forwardRef<HTMLDivElement, { index: number } & R
         </div>
         <button
           type="button"
+          // rtl-ok: already direction-aware — resolves the physical corner from the component's own `dir` prop
           className={cn("absolute", direction === "rtl" ? "top-1 left-1" : "top-1 right-1")}
           onClick={() => removeFileFromSet(index)}
         >