chore(release): sync frontend from monorepo v4

src/index.css

@@ -51,6 +51,14 @@
     --sidebar-accent-foreground: 8 40% 78%;
     --sidebar-border: 240 18% 20%;
     --sidebar-ring: 8 50% 58%;
+
+    /* Chart palette — used by Recharts via hsl(var(--chart-N)). Kept on the
+       warm/cool axis so pairs read well together when stacked. */
+    --chart-1: 8 50% 54%;
+    --chart-2: 220 70% 52%;
+    --chart-3: 152 60% 42%;
+    --chart-4: 38 92% 50%;
+    --chart-5: 280 55% 55%;
   }
 
   .dark {
@@ -99,6 +107,12 @@
     --sidebar-accent-foreground: 8 40% 75%;
     --sidebar-border: 240 18% 13%;
     --sidebar-ring: 8 50% 55%;
+
+    --chart-1: 8 52% 62%;
+    --chart-2: 220 65% 65%;
+    --chart-3: 152 50% 55%;
+    --chart-4: 38 75% 60%;
+    --chart-5: 280 55% 68%;
   }
 }
 
@@ -120,3 +134,103 @@
     font-family: 'JetBrains Mono', monospace;
   }
 }
+
+/* -------------------------------------------------------------------------
+ * RTL / Arabic support
+ *
+ * `tailwindcss-rtl` handles the bulk of the work: physical margin / padding /
+ * position / border / rounded / text-align / space-x utilities are mirrored
+ * automatically when `html[dir="rtl"]` is active.
+ *
+ * Below we cover the things Tailwind can't: the webfont (Inter has weak
+ * Arabic glyphs, so swap in Cairo), recharts tooltips/axes which have their
+ * own DOM, and a few icons that should NOT mirror (arrows used as pure
+ * visual affordance e.g. ChevronRight in a dropdown).
+ * ------------------------------------------------------------------------- */
+
+html[dir="rtl"] body,
+html[dir="rtl"] h1,
+html[dir="rtl"] h2,
+html[dir="rtl"] h3,
+html[dir="rtl"] h4,
+html[dir="rtl"] h5,
+html[dir="rtl"] h6,
+html[dir="rtl"] input,
+html[dir="rtl"] textarea,
+html[dir="rtl"] button,
+html[dir="rtl"] select {
+  font-family: 'Cairo', 'Inter', system-ui, sans-serif;
+}
+
+html[dir="rtl"] code,
+html[dir="rtl"] pre {
+  font-family: 'JetBrains Mono', monospace;
+}
+
+html[dir="rtl"] .recharts-wrapper,
+html[dir="rtl"] .recharts-legend-wrapper {
+  direction: ltr;
+}
+
+/* Breadcrumb and submenu chevrons: always pointing "forward" in reading
+   direction. Lucide's ChevronRight is ">" which is forward in LTR, but in
+   RTL the same arrow must become "<". We flip via CSS so no component has
+   to know about direction. */
+html[dir="rtl"] nav[aria-label="breadcrumb"] li[role="presentation"] > svg,
+html[dir="rtl"] [data-radix-menu-content] [role="menuitem"] > svg:last-child,
+html[dir="rtl"] [data-radix-popper-content-wrapper] [role="menuitem"] > svg:last-child {
+  transform: rotate(180deg);
+}
+
+/* Numbers, percentages, emails, URLs, dates should stay LTR-isolated even
+   when embedded in Arabic paragraphs, otherwise slashes / percent signs /
+   dashes drift to the wrong side and the value becomes unreadable.
+   <bdi> already gives us this per-element; the helper classes below are
+   for places where adding a wrapper element is awkward. */
+.ltr-nums,
+.dir-ltr {
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
+/* Pure-number cells & badges align to the end (right in LTR, left in RTL)
+   but the digits themselves still read left-to-right. */
+html[dir="rtl"] .numeric {
+  text-align: end;
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
+/* Some lucide icons are pure affordances (play, external-link, send) and
+   should NOT be mirrored even if tailwindcss-rtl would otherwise flip the
+   button that contains them. Authors opt-in with data-no-flip. */
+html[dir="rtl"] [data-no-flip] {
+  transform: none !important;
+}
+
+/* Keep code snippets, identifiers, and file paths readable in RTL. */
+html[dir="rtl"] code,
+html[dir="rtl"] pre,
+html[dir="rtl"] kbd,
+html[dir="rtl"] samp,
+html[dir="rtl"] [data-monospace] {
+  direction: ltr;
+  unicode-bidi: isolate;
+  text-align: start;
+}
+
+/* Scrollbars inside horizontally-scrollable tables already flip naturally
+   in RTL, but the shadow Radix portals (dropdowns, tooltips, dialogs) use
+   `right-0` / `left-0` positioning computed in JS. For safety, make sure
+   they inherit the document direction. */
+html[dir="rtl"] [data-radix-popper-content-wrapper] {
+  direction: rtl;
+}
+
+/* Inputs with dir="ltr" (email, password, URL) override but keep the
+   placeholder aligned to the visual start (right in RTL, left in LTR). */
+html[dir="rtl"] input[dir="ltr"]::placeholder,
+html[dir="rtl"] textarea[dir="ltr"]::placeholder {
+  text-align: right;
+}
+