npm - @cat-factory/app - Versions diffs - 0.54.3 → 0.55.0 - Mend

@cat-factory/app 0.54.3 → 0.55.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/app/app.vue CHANGED Viewed

@@ -1,5 +1,19 @@
 <script setup lang="ts">
 import AuthGate from '~/components/auth/AuthGate.vue'
+// Drive the document's `lang`/`dir` from the active i18n locale. `useLocaleHead` derives
+// these from the locale definitions in `nuxt.config.ts` (including the `dir: 'rtl'` flag on
+// Hebrew), so switching to a RTL locale flips `<html dir="rtl" lang="he">` and the browser
+// mirrors text alignment, flex/grid main-axis direction, and logical CSS properties. Wrapped
+// in a getter so `useHead` tracks the reactive ref and re-applies on every locale change.
+const localeHead = useLocaleHead()
+useHead(() => ({
+  htmlAttrs: {
+    lang: localeHead.value.htmlAttrs?.lang,
+    // `useLocaleHead` types `dir` loosely as string; our locales only ever set ltr/rtl.
+    dir: localeHead.value.htmlAttrs?.dir as 'ltr' | 'rtl' | 'auto' | undefined,
+  },
+}))
 </script>
 <template>

package/app/components/auth/UserMenu.vue CHANGED Viewed

@@ -30,7 +30,7 @@ const items = computed<DropdownMenuItem[][]>(() => [
   <UDropdownMenu v-if="auth.user" :items="items" :content="{ side: 'top', align: 'start' }">
     <button
       type="button"
-      class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-2 text-left transition hover:bg-slate-800/60"
+      class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 p-2 text-start transition hover:bg-slate-800/60"
     >
       <UAvatar
         :src="auth.user.avatarUrl ?? undefined"

package/app/components/board/AddTaskModal.vue CHANGED Viewed

@@ -700,13 +700,13 @@ async function add() {
                   color="neutral"
                   variant="soft"
                   size="xs"
-                  class="ml-1 shrink-0"
+                  class="ms-1 shrink-0"
                 >
                   {{ t('board.addTask.importsOnAdd') }}
                 </UBadge>
                 <button
                   type="button"
-                  class="ml-auto shrink-0 text-slate-400 hover:text-slate-200"
+                  class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
                   @click="removePending(item)"
                 >
                   <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
@@ -772,13 +772,13 @@ async function add() {
                   color="neutral"
                   variant="soft"
                   size="xs"
-                  class="ml-1 shrink-0"
+                  class="ms-1 shrink-0"
                 >
                   {{ t('board.addTask.importsOnAdd') }}
                 </UBadge>
                 <button
                   type="button"
-                  class="ml-auto shrink-0 text-slate-400 hover:text-slate-200"
+                  class="ms-auto shrink-0 text-slate-400 hover:text-slate-200"
                   @click="removePending(item)"
                 >
                   <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
@@ -806,6 +806,7 @@ async function add() {
           color="primary"
           data-testid="add-task-submit"
           :icon="isRecurring ? 'i-lucide-arrow-right' : 'i-lucide-plus'"
+          :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
           :loading="saving"
           :disabled="!canAdd"
           @click="add"

package/app/components/board/nodes/AgentChip.vue CHANGED Viewed

@@ -37,13 +37,13 @@ const dim = computed(() => (props.size === 'sm' ? 'h-7 w-7' : 'h-9 w-9'))
       <UIcon :name="archetype.icon" class="text-base" :style="{ color: archetype.color }" />
       <span
         v-if="step.state === 'working'"
-        class="absolute -bottom-1 -right-1 rounded-full bg-slate-900 p-0.5"
+        class="absolute -bottom-1 -end-1 rounded-full bg-slate-900 p-0.5"
       >
         <UIcon :name="stateIcon.working!" class="h-3 w-3 animate-spin text-indigo-300" />
       </span>
       <span
         v-else-if="stateIcon[step.state]"
-        class="absolute -bottom-1 -right-1 rounded-full bg-slate-900 p-0.5"
+        class="absolute -bottom-1 -end-1 rounded-full bg-slate-900 p-0.5"
       >
         <UIcon
           :name="stateIcon[step.state]!"

package/app/components/board/nodes/BlockNode.vue CHANGED Viewed

@@ -234,16 +234,16 @@ const ITEM_ICON: Record<string, string> = {
       <UIcon
         v-if="bootstrapping"
         name="i-lucide-loader-circle"
-        class="ml-auto h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
+        class="ms-auto h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
         :title="t('board.frame.bootstrapping')"
       />
       <UIcon
         v-else-if="runFailed"
         name="i-lucide-alert-triangle"
-        class="ml-auto h-3.5 w-3.5 shrink-0 text-rose-400"
+        class="ms-auto h-3.5 w-3.5 shrink-0 text-rose-400"
         :title="t('board.frame.runFailed')"
       />
-      <span v-else-if="hasTasks" class="ml-auto shrink-0 text-[11px] text-slate-300">
+      <span v-else-if="hasTasks" class="ms-auto shrink-0 text-[11px] text-slate-300">
         {{ mergedTasks }}/{{ taskCount }}
       </span>
     </div>
@@ -263,7 +263,7 @@ const ITEM_ICON: Record<string, string> = {
             class="h-3.5 w-3.5 shrink-0 animate-spin text-amber-400"
           />
           <span class="text-amber-300">{{ t('board.frame.bootstrapping') }}</span>
-          <span v-if="bootstrapSubtasks" class="ml-auto text-amber-200/80">
+          <span v-if="bootstrapSubtasks" class="ms-auto text-amber-200/80">
             {{ bootstrapSubtasks.completed }}/{{ bootstrapSubtasks.total }}
           </span>
         </div>
@@ -321,7 +321,7 @@ const ITEM_ICON: Record<string, string> = {
           <span v-if="prTasks" class="text-emerald-400"
             >· {{ t('board.frame.prCount', { count: prTasks }) }}</span
           >
-          <UIcon name="i-lucide-chevron-down" class="ml-auto h-3 w-3" />
+          <UIcon name="i-lucide-chevron-down" class="ms-auto h-3 w-3" />
         </button>
       </div>
     </div>
@@ -341,7 +341,7 @@ const ITEM_ICON: Record<string, string> = {
             class="h-4 w-4 shrink-0 animate-spin text-amber-400"
           />
           <span class="text-amber-300">{{ t('board.frame.bootstrappingRepository') }}</span>
-          <span v-if="bootstrapSubtasks" class="ml-auto text-amber-200/80">
+          <span v-if="bootstrapSubtasks" class="ms-auto text-amber-200/80">
             {{
               t('board.frame.bootstrapStepsCount', {
                 completed: bootstrapSubtasks.completed,
@@ -392,7 +392,7 @@ const ITEM_ICON: Record<string, string> = {
       <div class="p-4">
         <!-- frame header: the whole header (the title row AND the stats line below it)
              is the drag handle for the expanded frame. `nopan` stops Vue Flow's pane
-             from panning on a left-drag that starts here (it pans via d3-zoom's
+             from panning on a start-drag that starts here (it pans via d3-zoom's
              mousedown, which our pointerdown stopPropagation can't intercept), so the
              grab drives the frame move. The action buttons on the right opt out via
              `.nodrag` (onFrameHandle ignores them). `pb-3` provides the gap down to the
@@ -499,7 +499,11 @@ const ITEM_ICON: Record<string, string> = {
           <!-- resize handles (drag the borders to resize the service, Miro-style).
                `nopan` (alongside `nodrag`) so the pane doesn't pan while resizing —
-               same reason as the header handle above. -->
+               same reason as the header handle above. These stay PHYSICAL
+               (`right-0`, not `end-0`): the resize math in useFrameResize grows the
+               right/bottom edge from an unmirrored clientX/clientY delta, so a
+               logical (RTL-flipped) grip would render on the opposite edge from the
+               one the drag actually moves. -->
           <div
             class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize touch-none hover:bg-sky-400/20 pointer-coarse:w-4"
             :title="t('board.frame.dragToResize')"

package/app/components/board/nodes/DraggableTask.vue CHANGED Viewed

@@ -40,7 +40,7 @@ function onHandle(e: PointerEvent) {
         pointerEvents: draggingId === taskId ? 'none' : undefined,
       }"
     >
-      <!-- drag handle (`nopan` so the pane doesn't pan on a left-drag from here) -->
+      <!-- drag handle (`nopan` so the pane doesn't pan on a start-drag from here) -->
       <div
         class="nodrag nopan flex cursor-grab touch-none items-center justify-center rounded-t-lg border border-b-0 border-slate-700 bg-slate-800/80 py-px active:cursor-grabbing pointer-coarse:py-2"
         :title="t('board.frame.dragTask')"

package/app/components/board/nodes/EpicNode.vue CHANGED Viewed

@@ -35,7 +35,7 @@ const selected = computed(() => ui.selectedBlockId === props.id)
       <span class="text-[10px] font-semibold uppercase tracking-wide text-violet-300">{{
         t('board.epic.label')
       }}</span>
-      <span class="ml-auto text-[10px] text-slate-400">{{ done }}/{{ total }}</span>
+      <span class="ms-auto text-[10px] text-slate-400">{{ done }}/{{ total }}</span>
     </div>
     <div class="mt-1 truncate text-sm font-medium text-slate-100" :title="block.title">
       {{ block.title }}

package/app/components/board/nodes/ModuleFrame.vue CHANGED Viewed

@@ -49,7 +49,7 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
       zIndex: draggingId === moduleId ? 50 : 5,
     }"
   >
-    <!-- module header / drag handle (`nopan` so a left-drag moves it, not the pane) -->
+    <!-- module header / drag handle (`nopan` so a start-drag moves it, not the pane) -->
     <div
       class="nodrag nopan flex h-[30px] cursor-grab touch-none items-center gap-1 rounded-t-xl bg-violet-500/15 px-2 active:cursor-grabbing"
       @pointerdown="onHandle"
@@ -61,10 +61,10 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
         :style="{ color: MODULE_META.color }"
       />
       <span class="truncate text-[11px] font-semibold text-violet-100">{{ mod.title }}</span>
-      <span v-if="inflight" class="ml-auto shrink-0 text-[9px] text-violet-300/70">
+      <span v-if="inflight" class="ms-auto shrink-0 text-[9px] text-violet-300/70">
         {{ t('board.frame.taskCount', { count: inflight }, inflight) }}
       </span>
-      <span v-else-if="total" class="ml-auto shrink-0 text-[9px] text-violet-300/70">
+      <span v-else-if="total" class="ms-auto shrink-0 text-[9px] text-violet-300/70">
         {{ t('board.frame.taskCount', { count: total }, total) }}
       </span>
     </div>
@@ -75,7 +75,10 @@ function onResize(e: PointerEvent, edge: 'e' | 's' | 'se') {
     </div>
     <!-- resize handles (drag the borders to resize the module, Miro-style).
-         `nopan` (with `nodrag`) so resizing doesn't pan the pane. -->
+         `nopan` (with `nodrag`) so resizing doesn't pan the pane. Kept PHYSICAL
+         (`right-0`, not `end-0`) for the same reason as the service-frame grips in
+         BlockNode: the resize delta is unmirrored, so a logical grip would sit on
+         the opposite edge from the one the drag moves. -->
     <div
       class="nodrag nopan absolute right-0 top-0 h-full w-2 cursor-ew-resize touch-none hover:bg-violet-400/20 pointer-coarse:w-4"
       :title="t('board.frame.dragToResize')"

package/app/components/board/nodes/TaskCard.vue CHANGED Viewed

@@ -181,7 +181,7 @@ function selectTask() {
     :data-block-id="task.id"
     :data-status="task.status"
     data-testid="task-card"
-    class="nodrag w-full cursor-pointer rounded-lg border bg-slate-950/70 p-2 text-left transition"
+    class="nodrag w-full cursor-pointer rounded-lg border bg-slate-950/70 p-2 text-start transition"
     :class="[
       selected ? 'border-white' : 'border-slate-700 hover:border-slate-500',
       task.status === 'pr_ready' ? 'board-pulse-green' : attention ? 'board-pulse' : '',
@@ -204,7 +204,7 @@ function selectTask() {
         "
       />
       <span
-        class="ml-auto truncate text-[9px] uppercase tracking-wide"
+        class="ms-auto truncate text-[9px] uppercase tracking-wide"
         :class="
           runFailed
             ? 'text-rose-400'

package/app/components/board/nodes/TaskPipelineMini.vue CHANGED Viewed

@@ -99,7 +99,7 @@ const ITEM_ICON: Record<string, string> = {
         />
         <span
           v-if="s.subtasks && s.subtasks.total > 0"
-          class="ml-auto shrink-0 font-mono text-[9px] tabular-nums text-slate-400"
+          class="ms-auto shrink-0 font-mono text-[9px] tabular-nums text-slate-400"
         >
           {{ s.subtasks.completed }}/{{ s.subtasks.total }}
         </span>
@@ -108,7 +108,7 @@ const ITEM_ICON: Record<string, string> = {
           :name="
             isFailedStep(s.state, runFailed) ? FAILED_STEP_META.icon : STATE_META[s.state].icon
           "
-          class="ml-auto h-2.5 w-2.5 shrink-0"
+          class="ms-auto h-2.5 w-2.5 shrink-0"
           :class="s.state === 'working' && !runFailed ? 'animate-spin' : ''"
           :style="{
             color: isFailedStep(s.state, runFailed)
@@ -162,7 +162,7 @@ const ITEM_ICON: Record<string, string> = {
           {{ agentKindMeta(companionByStep[i]!.kind).label }}
         </span>
         <span
-          class="ml-auto shrink-0"
+          class="ms-auto shrink-0"
           :class="COMPANION_STATE_META[companionByStep[i]!.state].text"
         >
           {{ COMPANION_STATE_META[companionByStep[i]!.state].label }}

package/app/components/brainstorm/BrainstormWindow.vue CHANGED Viewed

@@ -275,7 +275,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             </h1>
             <p v-if="block" class="truncate text-xs text-slate-500">{{ block.title }}</p>
           </div>
-          <div class="ml-auto flex items-center gap-1.5">
+          <div class="ms-auto flex items-center gap-1.5">
             <UBadge v-if="session" color="neutral" variant="subtle" size="sm">
               {{ t('brainstorm.iteration', { current: iteration, max: maxIterations }) }}
             </UBadge>
@@ -376,7 +376,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                           size="xs"
                           variant="soft"
                           :color="STATUS_COLOR[item.status]"
-                          class="ml-auto"
+                          class="ms-auto"
                         >
                           {{ t(STATUS_LABELS[item.status]) }}
                         </UBadge>
@@ -388,7 +388,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                       <!-- recorded choice -->
                       <div
                         v-if="item.reply"
-                        class="mt-2 rounded-md border-l-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
+                        class="mt-2 rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
                       >
                         <span class="text-[10px] uppercase tracking-wide text-slate-500">
                           {{ t('brainstorm.yourChoice') }}
@@ -464,7 +464,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 <div v-for="s in outline.sections" :key="s.id" class="mb-2">
                   <button
                     v-if="s.title"
-                    class="group flex w-full items-center gap-2 text-left"
+                    class="group flex w-full items-center gap-2 text-start"
                     @click="toggle(s.id)"
                   >
                     <UIcon
@@ -480,7 +480,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   </button>
                   <div
                     v-show="!s.title || !collapsed[s.id]"
-                    class="reader-prose mt-1 pl-5.5 text-[13px] leading-relaxed text-slate-300"
+                    class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-slate-300"
                     v-html="s.bodyHtml"
                   />
                 </div>
@@ -489,7 +489,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           </div>
           <!-- right action rail -->
-          <aside class="hidden w-72 shrink-0 flex-col border-l border-slate-800 lg:flex">
+          <aside class="hidden w-72 shrink-0 flex-col border-s border-slate-800 lg:flex">
             <div class="flex flex-col gap-4 px-4 py-5">
               <div v-if="session" class="space-y-2 text-xs text-slate-400">
                 <div class="flex items-center justify-between">
@@ -506,7 +506,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 </div>
                 <div v-if="session.model" class="flex items-center justify-between">
                   <span>{{ t('brainstorm.rail.model') }}</span>
-                  <span class="truncate pl-2 text-slate-500">{{ session.model }}</span>
+                  <span class="truncate ps-2 text-slate-500">{{ session.model }}</span>
                 </div>
               </div>
@@ -521,6 +521,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   size="sm"
                   block
                   icon="i-lucide-arrow-right"
+                  :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
                   :loading="acting"
                   @click="proceed"
                 >

package/app/components/clarity/ClarityReviewWindow.vue CHANGED Viewed

@@ -258,7 +258,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
             <h1 class="truncate text-base font-semibold text-white">{{ t('clarity.title') }}</h1>
             <p v-if="block" class="truncate text-xs text-slate-500">{{ block.title }}</p>
           </div>
-          <div class="ml-auto flex items-center gap-1.5">
+          <div class="ms-auto flex items-center gap-1.5">
             <UBadge v-if="review" color="neutral" variant="subtle" size="sm">
               {{ t('clarity.iteration', { current: iteration, max: maxIterations }) }}
             </UBadge>
@@ -360,7 +360,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                           size="xs"
                           variant="soft"
                           :color="STATUS_COLOR[item.status]"
-                          class="ml-auto"
+                          class="ms-auto"
                         >
                           {{ t(STATUS_LABELS[item.status]) }}
                         </UBadge>
@@ -372,7 +372,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                       <!-- recorded answer -->
                       <div
                         v-if="item.reply"
-                        class="mt-2 rounded-md border-l-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
+                        class="mt-2 rounded-md border-s-2 border-slate-700 bg-slate-950/40 px-3 py-1.5 text-sm text-slate-300"
                       >
                         <span class="text-[10px] uppercase tracking-wide text-slate-500">
                           {{ t('clarity.answerLabel') }}
@@ -449,7 +449,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 <div v-for="s in outline.sections" :key="s.id" class="mb-2">
                   <button
                     v-if="s.title"
-                    class="group flex w-full items-center gap-2 text-left"
+                    class="group flex w-full items-center gap-2 text-start"
                     @click="toggle(s.id)"
                   >
                     <UIcon
@@ -465,7 +465,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   </button>
                   <div
                     v-show="!s.title || !collapsed[s.id]"
-                    class="reader-prose mt-1 pl-5.5 text-[13px] leading-relaxed text-slate-300"
+                    class="reader-prose mt-1 ps-5.5 text-[13px] leading-relaxed text-slate-300"
                     v-html="s.bodyHtml"
                   />
                 </div>
@@ -474,7 +474,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
           </div>
           <!-- right action rail -->
-          <aside class="hidden w-72 shrink-0 flex-col border-l border-slate-800 lg:flex">
+          <aside class="hidden w-72 shrink-0 flex-col border-s border-slate-800 lg:flex">
             <div class="flex flex-col gap-4 px-4 py-5">
               <div v-if="review" class="space-y-2 text-xs text-slate-400">
                 <div class="flex items-center justify-between">
@@ -491,7 +491,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                 </div>
                 <div v-if="review.model" class="flex items-center justify-between">
                   <span>{{ t('clarity.rail.model') }}</span>
-                  <span class="truncate pl-2 text-slate-500">{{ review.model }}</span>
+                  <span class="truncate ps-2 text-slate-500">{{ review.model }}</span>
                 </div>
               </div>
@@ -506,6 +506,7 @@ async function resolveExceeded(choice: 'extra-round' | 'proceed' | 'stop-reset')
                   size="sm"
                   block
                   icon="i-lucide-arrow-right"
+                  :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
                   :loading="acting"
                   @click="proceed"
                 >

package/app/components/consensus/ConsensusSessionWindow.vue CHANGED Viewed

@@ -195,7 +195,7 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
                     t('consensus.expert', { letter: String.fromCharCode(65 + i) })
                   }}</span>
                   <span class="text-slate-400"> · {{ p.role }}</span>
-                  <span v-if="p.modelId" class="ml-1 text-slate-500">({{ p.modelId }})</span>
+                  <span v-if="p.modelId" class="ms-1 text-slate-500">({{ p.modelId }})</span>
                 </div>
               </div>
             </section>
@@ -219,7 +219,7 @@ function topScore(c: ConsensusContribution): { label: string; value: number } |
                     <span class="text-xs text-slate-500">{{ roleFor(c.participantId) }}</span>
                     <span
                       v-if="topScore(c)"
-                      class="ml-auto rounded bg-slate-800 px-1.5 py-0.5 text-xs text-slate-300"
+                      class="ms-auto rounded bg-slate-800 px-1.5 py-0.5 text-xs text-slate-300"
                       >{{
                         t('consensus.topScore', {
                           label: topScore(c)!.label,

package/app/components/documents/ContextDocumentPicker.vue CHANGED Viewed

@@ -199,12 +199,12 @@ onMounted(() => {
         v-for="d in importedRows"
         :key="`imp:${d.externalId}`"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
         @click="pickImported(d.externalId, d.title, d.excerpt)"
       >
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-indigo-400" />
         <span class="truncate">{{ d.title }}</span>
-        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">{{
+        <UBadge color="neutral" variant="soft" size="xs" class="ms-auto shrink-0">{{
           t('documents.picker.importedBadge')
         }}</UBadge>
       </button>
@@ -214,7 +214,7 @@ onMounted(() => {
         v-for="r in searchRows"
         :key="`hit:${r.externalId}`"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
         @click="pickSearch(r)"
       >
         <UIcon :name="icon" class="h-3.5 w-3.5 shrink-0 text-slate-400" />
@@ -225,7 +225,7 @@ onMounted(() => {
       <button
         v-if="refRow"
         type="button"
-        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-xs text-slate-300 hover:bg-slate-800/70"
+        class="flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-start text-xs text-slate-300 hover:bg-slate-800/70"
         @click="pickRef(refRow)"
       >
         <UIcon name="i-lucide-link" class="h-3.5 w-3.5 shrink-0 text-slate-400" />

package/app/components/documents/SpawnPreviewModal.vue CHANGED Viewed

@@ -115,7 +115,7 @@ async function spawn() {
           {{ t('documents.spawn.buildingPlan') }}
         </div>
-        <div v-else-if="plan" class="max-h-80 space-y-3 overflow-y-auto pr-1">
+        <div v-else-if="plan" class="max-h-80 space-y-3 overflow-y-auto pe-1">
           <div
             v-for="(frame, fi) in plan.frames"
             :key="fi"
@@ -127,7 +127,7 @@ async function spawn() {
               <UBadge variant="subtle" size="sm" color="neutral">{{ frame.type }}</UBadge>
             </div>
-            <ul v-if="frame.tasks.length" class="mt-2 space-y-1 pl-6">
+            <ul v-if="frame.tasks.length" class="mt-2 space-y-1 ps-6">
               <li
                 v-for="(task, ti) in frame.tasks"
                 :key="`t-${ti}`"
@@ -138,12 +138,12 @@ async function spawn() {
               </li>
             </ul>
-            <div v-for="(mod, mi) in frame.modules" :key="`m-${mi}`" class="mt-2 pl-4">
+            <div v-for="(mod, mi) in frame.modules" :key="`m-${mi}`" class="mt-2 ps-4">
               <div class="flex items-center gap-1.5 text-xs font-medium text-slate-200">
                 <UIcon name="i-lucide-folder" class="h-3.5 w-3.5 text-amber-400" />
                 {{ mod.name }}
               </div>
-              <ul class="mt-1 space-y-1 pl-5">
+              <ul class="mt-1 space-y-1 ps-5">
                 <li
                   v-for="(task, ti) in mod.tasks"
                   :key="`mt-${ti}`"

package/app/components/focus/BlockFocusView.vue CHANGED Viewed

@@ -60,10 +60,17 @@ function openApprovalFor(approvalId: string) {
   >
     <!-- header / breadcrumb -->
     <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
-      <UButton icon="i-lucide-arrow-left" color="neutral" variant="ghost" size="sm" @click="close">
+      <UButton
+        icon="i-lucide-arrow-left"
+        :ui="{ leadingIcon: 'rtl:-scale-x-100', trailingIcon: 'rtl:-scale-x-100' }"
+        color="neutral"
+        variant="ghost"
+        size="sm"
+        @click="close"
+      >
         {{ t('focus.board') }}
       </UButton>
-      <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600" />
+      <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600 rtl:-scale-x-100" />
       <div
         class="flex h-9 w-9 items-center justify-center rounded-lg"
         :style="{ backgroundColor: typeMeta.accent + '22' }"
@@ -76,10 +83,10 @@ function openApprovalFor(approvalId: string) {
           {{ t('focus.typeSubtitle', { type: typeMeta.label }) }}
         </div>
       </div>
-      <UBadge :color="statusMeta.chip as any" variant="subtle" class="ml-2">
+      <UBadge :color="statusMeta.chip as any" variant="subtle" class="ms-2">
         {{ statusMeta.label }}
       </UBadge>
-      <div class="ml-auto flex items-center gap-2">
+      <div class="ms-auto flex items-center gap-2">
         <UDropdownMenu :items="runMenu">
           <UButton
             color="primary"

package/app/components/fragments/FragmentLibraryManager.vue CHANGED Viewed

@@ -284,7 +284,7 @@ async function unlinkSource(id: string) {
           >
             {{ t('fragments.catalog.live', { source: f.documentRef.source }) }}
           </UBadge>
-          <span class="ml-auto font-mono text-[11px] text-slate-500">{{ f.id }}</span>
+          <span class="ms-auto font-mono text-[11px] text-slate-500">{{ f.id }}</span>
         </div>
         <p class="mt-1 text-sm text-slate-400">{{ f.summary }}</p>
         <div v-if="f.tags?.length" class="mt-1 flex flex-wrap gap-1">
@@ -316,7 +316,7 @@ async function unlinkSource(id: string) {
           size="xs"
           color="error"
           variant="ghost"
-          class="ml-auto"
+          class="ms-auto"
           @click="removeFragment(f.id)"
         />
       </div>
@@ -380,7 +380,7 @@ async function unlinkSource(id: string) {
             {{ t('fragments.documents.lastResolved', { date: d(new Date(f.resolvedAt), 'long') }) }}
           </p>
         </div>
-        <div class="ml-auto flex gap-1">
+        <div class="ms-auto flex gap-1">
           <UButton
             icon="i-lucide-refresh-cw"
             size="xs"
@@ -465,7 +465,7 @@ async function unlinkSource(id: string) {
           size="xs"
           color="warning"
           variant="subtle"
-          class="ml-auto"
+          class="ms-auto"
         >
           {{
             t(
@@ -475,7 +475,7 @@ async function unlinkSource(id: string) {
             )
           }}
         </UBadge>
-        <div class="ml-auto flex gap-1">
+        <div class="ms-auto flex gap-1">
           <UButton
             icon="i-lucide-search-check"
             size="xs"

package/app/components/gates/GateResultView.vue CHANGED Viewed

@@ -324,7 +324,7 @@ const conflictVerdict = computed(() => {
                       {{ c.name }}
                       <UIcon
                         name="i-lucide-external-link"
-                        class="ml-0.5 inline h-3 w-3 opacity-60 group-hover:opacity-100"
+                        class="ms-0.5 inline h-3 w-3 opacity-60 group-hover:opacity-100"
                       />
                     </a>
                     <span v-else class="min-w-0 flex-1 truncate text-[13px] text-slate-200">{{
@@ -397,7 +397,7 @@ const conflictVerdict = computed(() => {
                         size="sm"
                         >{{ OUTCOME_LABELS[a.outcome] }}</UBadge
                       >
-                      <span v-if="formatClock(a.at)" class="ml-auto text-[11px] text-slate-500">{{
+                      <span v-if="formatClock(a.at)" class="ms-auto text-[11px] text-slate-500">{{
                         formatClock(a.at)
                       }}</span>
                     </div>
@@ -415,7 +415,7 @@ const conflictVerdict = computed(() => {
           <!-- Sidebar: gate state -->
           <aside
-            class="hidden w-60 shrink-0 flex-col gap-4 border-l border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
+            class="hidden w-60 shrink-0 flex-col gap-4 border-s border-slate-800 bg-slate-900/50 px-4 py-4 lg:flex"
           >
             <div v-if="gate">
               <h4 class="mb-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500">

package/app/components/github/GitHubPanel.vue CHANGED Viewed

@@ -361,7 +361,7 @@ async function merge(pr: GitHubPullRequest) {
                   v-for="r in github.availableRepos"
                   :key="r.githubId"
                   type="button"
-                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-left transition hover:bg-slate-800/60"
+                  class="flex w-full items-center gap-2 rounded px-2 py-1.5 text-start transition hover:bg-slate-800/60"
                   @click="toggleSelected(r.githubId)"
                 >
                   <UIcon
@@ -400,7 +400,10 @@ async function merge(pr: GitHubPullRequest) {
               class="rounded-md border border-slate-800 bg-slate-900/60"
             >
               <div class="flex items-center justify-between gap-2 px-3 py-2">
-                <button class="flex min-w-0 items-center gap-2 text-left" @click="toggleRepo(repo)">
+                <button
+                  class="flex min-w-0 items-center gap-2 text-start"
+                  @click="toggleRepo(repo)"
+                >
                   <UIcon
                     :name="
                       expandedRepo === repo.githubId

package/app/components/humanTest/HumanTestWindow.vue CHANGED Viewed

@@ -309,7 +309,7 @@ const canDestroy = computed(
                         : t('humanTest.history.pulledMain')
                     }}</span>
                     <span
-                      class="ml-1.5 rounded px-1 text-[10px] uppercase"
+                      class="ms-1.5 rounded px-1 text-[10px] uppercase"
                       :class="
                         r.outcome === 'completed'
                           ? 'bg-emerald-500/15 text-emerald-300'