feat(ui): replace all left/right css styles for rtl support

Author: userquin

app/assets/main.css

@@ -80,6 +80,10 @@ html {
   }
 }
 
+html[dir='rtl'] .rtl-flip {
+  transform: scale(-1, 1);
+}
+
 body {
   margin: 0;
   background-color: var(--bg);

app/components/AppFooter.vue

@@ -1,54 +1,56 @@
+<script setup lang="ts"></script>
 <template>
   <footer class="border-t border-border mt-auto" :aria-label="$t('footer.site_footer')">
     <div class="container py-3 sm:py-8 flex flex-col gap-2 sm:gap-4 text-fg-subtle text-sm">
-      <div class="flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4">
+      <div class="flex flex-col sm:flex-row items-center justify-start gap-2 sm:gap-4">
         <p class="font-mono m-0 hidden sm:block">{{ $t('tagline') }}</p>
-        <div class="flex items-center gap-3 sm:gap-6">
+        <span aria-hidden="true" class="flex-shrink-1 flex-grow-1" />
+        <div class="flex items-center justify-start gap-3 sm:gap-6">
           <NuxtLink
             to="/about"
             class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center"
           >
-            {{ $t('footer.about') }}
+            <span>{{ $t('footer.about') }}</span>
           </NuxtLink>
           <a
             href="https://docs.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
           >
-            {{ $t('footer.docs') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span>{{ $t('footer.docs') }}</span>
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://repo.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex justify-start items-center gap-1"
           >
-            {{ $t('footer.source') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span>{{ $t('footer.source') }}</span>
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://social.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
           >
-            {{ $t('footer.social') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span>{{ $t('footer.social') }}</span>
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
           <a
             href="https://chat.npmx.dev"
             target="_blank"
             rel="noopener noreferrer"
-            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center gap-1"
+            class="link-subtle font-mono text-xs min-h-8 sm:min-h-11 flex items-center justify-start gap-1"
           >
-            {{ $t('footer.chat') }}
-            <span class="i-carbon-launch w-3 h-3" aria-hidden="true" />
+            <span>{{ $t('footer.chat') }}</span>
+            <span class="i-carbon:launch rtl-flip w-3 h-3" aria-hidden="true" />
           </a>
         </div>
       </div>
-      <p class="text-xs text-fg-muted text-center sm:text-left m-0">
+      <p class="text-xs text-fg-muted text-center sm:text-start m-0">
         <span class="sm:hidden">{{ $t('non_affiliation_disclaimer') }}</span>
         <span class="hidden sm:inline">{{ $t('trademark_disclaimer') }}</span>
       </p>

app/components/AppHeader.vue

@@ -54,8 +54,11 @@ onKeyStroke(',', e => {
     :aria-label="$t('header.site_header')"
     class="sticky top-0 z-50 bg-bg/80 backdrop-blur-md border-b border-border"
   >
-    <nav :aria-label="$t('nav.main_navigation')" class="container h-14 flex items-center">
-      <!-- Left: Logo -->
+    <nav
+      :aria-label="$t('nav.main_navigation')"
+      class="container h-14 flex items-center justify-start"
+    >
+      <!-- Start: Logo -->
       <div class="flex-shrink-0">
         <NuxtLink
           v-if="showLogo"
@@ -87,7 +90,7 @@ onKeyStroke(',', e => {
             <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
               <div class="search-box relative flex items-center">
                 <span
-                  class="absolute left-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
+                  class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none group-focus-within:text-accent z-1"
                 >
                   /
                 </span>
@@ -99,7 +102,7 @@ onKeyStroke(',', e => {
                   name="q"
                   :placeholder="$t('search.placeholder')"
                   v-bind="noCorrect"
-                  class="w-full bg-bg-subtle border border-border rounded-md pl-7 pr-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
+                  class="w-full bg-bg-subtle border border-border rounded-md ps-7 pe-3 py-1.5 font-mono text-sm text-fg placeholder:text-fg-subtle transition-border-color duration-300 motion-reduce:transition-none focus:border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50"
                   @input="handleSearchInput"
                   @focus="isSearchFocused = true"
                   @blur="isSearchFocused = false"
@@ -123,8 +126,8 @@ onKeyStroke(',', e => {
         </ul>
       </div>
 
-      <!-- Right: User status + GitHub -->
-      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ml-auto sm:ml-0">
+      <!-- End: User status + GitHub -->
+      <div class="flex-shrink-0 flex items-center gap-4 sm:gap-6 ms-auto sm:ms-0">
         <NuxtLink
           to="/about"
           class="sm:hidden link-subtle font-mono text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"

app/components/AppTooltip.vue

@@ -10,10 +10,10 @@ const isVisible = shallowRef(false)
 const tooltipId = useId()
 
 const positionClasses: Record<string, string> = {
-  top: 'bottom-full left-1/2 -translate-x-1/2 mb-1',
-  bottom: 'top-full left-0 mt-1',
-  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
-  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+  top: 'bottom-full inset-is-1/2 -translate-x-1/2 mb-1',
+  bottom: 'top-full inset-is-0 me-1',
+  left: 'right-full top-1/2 -translate-y-1/2 me-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ms-2',
 }
 
 const tooltipPosition = computed(() => positionClasses[props.position || 'bottom'])

app/components/CodeDirectoryListing.vue

@@ -97,7 +97,7 @@ function formatBytes(bytes: number): string {
               <span>{{ node.name }}</span>
             </NuxtLink>
           </td>
-          <td class="py-2 px-4 text-right font-mono text-xs text-fg-subtle">
+          <td class="py-2 px-4 text-end font-mono text-xs text-fg-subtle">
             <span v-if="node.type === 'file' && node.size">
               {{ formatBytes(node.size) }}
             </span>

app/components/CodeFileTree.vue

@@ -39,14 +39,14 @@ watch(
       <template v-if="node.type === 'directory'">
         <button
           type="button"
-          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-left font-mono text-sm transition-colors hover:bg-bg-muted"
+          class="w-full flex items-center gap-1.5 py-1.5 px-3 text-start font-mono text-sm transition-colors hover:bg-bg-muted"
           :class="isNodeActive(node) ? 'text-fg' : 'text-fg-muted'"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
         >
           <span
             class="w-4 h-4 shrink-0 transition-transform"
-            :class="[isExpanded(node.path) ? 'i-carbon-chevron-down' : 'i-carbon-chevron-right']"
+            :class="[isExpanded(node.path) ? 'i-carbon:chevron-down' : 'i-carbon:chevron-right']"
           />
           <span
             class="w-4 h-4 shrink-0"

app/components/CodeMobileTreeDrawer.vue

@@ -27,7 +27,7 @@ watch(isOpen, open => (isLocked.value = open))
   <!-- Toggle button (mobile only) -->
   <button
     type="button"
-    class="md:hidden fixed bottom-4 right-4 z-40 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
+    class="md:hidden fixed bottom-4 inset-ie-4 z-40 w-12 h-12 bg-bg-elevated border border-border rounded-full shadow-lg flex items-center justify-center text-fg-muted hover:text-fg transition-colors"
     :aria-label="$t('code.toggle_tree')"
     @click="isOpen = !isOpen"
   >
@@ -57,7 +57,7 @@ watch(isOpen, open => (isLocked.value = open))
   >
     <aside
       v-if="isOpen"
-      class="md:hidden fixed inset-y-0 left-0 z-50 w-72 bg-bg-subtle border-r border-border overflow-y-auto"
+      class="md:hidden fixed inset-y-0 inset-is-0 z-50 w-72 bg-bg-subtle border-ie border-border overflow-y-auto"
     >
       <div
         class="sticky top-0 bg-bg-subtle border-b border-border px-4 py-3 flex items-center justify-between"

app/components/CodeViewer.vue

@@ -58,7 +58,7 @@ watch(
   <div class="code-viewer flex min-h-full">
     <!-- Line numbers column -->
     <div
-      class="line-numbers shrink-0 bg-bg-subtle border-r border-border text-right select-none"
+      class="line-numbers shrink-0 bg-bg-subtle border-ie border-border text-end select-none"
       aria-hidden="true"
     >
       <a

app/components/ConnectorModal.vue

@@ -124,13 +124,13 @@ watch(open, isOpen => {
                 class="flex items-center p-3 bg-bg-muted border border-border rounded-lg font-mono text-sm"
               >
                 <span class="text-fg-subtle">$</span>
-                <span class="text-fg-subtle ml-2">{{ executeNpmxConnectorCommand }}</span>
+                <span class="text-fg-subtle ms-2">{{ executeNpmxConnectorCommand }}</span>
                 <button
                   type="button"
                   :aria-label="
                     copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')
                   "
-                  class="ml-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
+                  class="ms-auto text-fg-subtle hover:text-fg transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 rounded"
                   @click="copyCommand"
                 >
                   <span v-if="!copied" class="i-carbon-copy block w-5 h-5" aria-hidden="true" />

app/components/ConnectorStatus.client.vue

@@ -75,7 +75,7 @@ const ariaLabel = computed(() => {
       <!-- Operation count badge (overlaid) -->
       <span
         v-if="isConnected && operationCount > 0"
-        class="absolute -top-0.5 -right-0.5 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
+        class="absolute -top-0.5 -inset-ie-0.5 min-w-[1rem] h-4 px-1 flex items-center justify-center font-mono text-[10px] rounded-full"
         :class="hasPendingOperations ? 'bg-yellow-500 text-black' : 'bg-blue-500 text-white'"
         aria-hidden="true"
       >
@@ -93,7 +93,7 @@ const ariaLabel = computed(() => {
       <div
         v-if="showTooltip"
         role="tooltip"
-        class="absolute right-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
+        class="absolute inset-ie-0 top-full mt-2 px-2 py-1 font-mono text-xs text-fg bg-bg-elevated border border-border rounded shadow-lg whitespace-nowrap z-50"
       >
         {{ tooltipText }}
       </div>