@jacshuo/onyx 2.6.0 → 2.7.0

package/dist/styles/Extras/TypewriterText.css

@@ -1,6 +1,7 @@
 /* TypewriterText.css — cursor animations */
 
 /* ── Block cursor blink ────────────────────────────────── */
+
 @keyframes tw-blink {
   0%,
   100% {
@@ -12,6 +13,7 @@
 }
 
 /* ── Gentle fade-out on completion ───────────────────────── */
+
 @keyframes tw-cursor-out {
   0% {
     opacity: 1;
@@ -25,6 +27,7 @@
 }
 
 /* ── Image fade-in for rich mode ─────────────────────────── */
+
 @keyframes tw-img-fade-in {
   from {
     opacity: 0;
@@ -37,6 +40,7 @@
 }
 
 /* ── Base cursor element ─────────────────────────────────── */
+
 .tw-cursor {
   display: inline-block;
   line-height: 1;
@@ -50,17 +54,20 @@
 }
 
 /* Thinking / waiting — slow, step-style blink */
+
 .tw-cursor--blink {
   animation: tw-blink 1s step-end infinite;
 }
 
 /* Actively typing — solid, no blink */
+
 .tw-cursor--solid {
   opacity: 1;
   animation: none;
 }
 
 /* Done — fade away */
+
 .tw-cursor--out {
   animation: tw-cursor-out 0.6s ease-out forwards;
   pointer-events: none;
@@ -71,6 +78,7 @@
    ═══════════════════════════════════════════════════════════ */
 
 /* ── Prose container ─────────────────────────────────────── */
+
 .tw-rich-prose {
   font-size: 0.875rem;
   line-height: 1.75;
@@ -84,6 +92,7 @@
 }
 
 /* ── Headings ────────────────────────────────────────────── */
+
 .tw-rich-prose h1,
 .tw-rich-prose h2,
 .tw-rich-prose h3,
@@ -109,21 +118,26 @@
 .tw-rich-prose h1 {
   font-size: 1.5rem;
 }
+
 .tw-rich-prose h2 {
   font-size: 1.25rem;
 }
+
 .tw-rich-prose h3 {
   font-size: 1.125rem;
 }
+
 .tw-rich-prose h4 {
   font-size: 1rem;
 }
+
 .tw-rich-prose h5,
 .tw-rich-prose h6 {
   font-size: 0.875rem;
 }
 
 /* ── Paragraphs ──────────────────────────────────────────── */
+
 .tw-rich-prose p {
   margin-top: 0.625rem;
   margin-bottom: 0.625rem;
@@ -138,6 +152,7 @@
 }
 
 /* ── Inline code ─────────────────────────────────────────── */
+
 .tw-rich-prose :not(pre) > code {
   background-color: var(--color-primary-100);
   color: var(--color-primary-700);
@@ -156,6 +171,7 @@
 }
 
 /* ── Fenced code blocks ──────────────────────────────────── */
+
 .tw-rich-prose pre {
   background-color: var(--color-primary-100);
   border: 1px solid var(--color-primary-200);
@@ -183,6 +199,7 @@
 }
 
 /* ── Blockquotes ─────────────────────────────────────────── */
+
 .tw-rich-prose blockquote {
   border-left: 3px solid var(--color-primary-400);
   padding: 0.375rem 0 0.375rem 1rem;
@@ -197,6 +214,7 @@
 }
 
 /* ── Lists ───────────────────────────────────────────────── */
+
 .tw-rich-prose ul,
 .tw-rich-prose ol {
   padding-left: 1.5rem;
@@ -221,6 +239,7 @@
 }
 
 /* ── Horizontal rule ─────────────────────────────────────── */
+
 .tw-rich-prose hr {
   border: none;
   border-top: 1px solid var(--color-primary-200);
@@ -232,6 +251,7 @@
 }
 
 /* ── Links ───────────────────────────────────────────────── */
+
 .tw-rich-prose a {
   color: var(--color-primary-600);
   text-decoration: underline;
@@ -251,6 +271,7 @@
 }
 
 /* ── strong / em baseline ────────────────────────────────── */
+
 .tw-rich-prose strong {
   font-weight: 700;
 }
@@ -264,12 +285,14 @@
    ═══════════════════════════════════════════════════════════ */
 
 /* Figure wrapper */
+
 .tw-rich-img-wrap {
   display: block;
   margin: 0.875rem 0;
 }
 
 /* Actual image */
+
 .tw-rich-img {
   display: block;
   max-width: 100%;
@@ -283,6 +306,7 @@
 }
 
 /* Error state overlay (hidden by default) */
+
 .tw-rich-img-error {
   display: none;
   flex-direction: column;
@@ -306,6 +330,7 @@
 }
 
 /* Toggle error state via JS class added by the image error handler */
+
 .tw-rich-img-wrap--error .tw-rich-img {
   display: none;
 }
@@ -313,3 +338,48 @@
 .tw-rich-img-wrap--error .tw-rich-img-error {
   display: flex;
 }
+
+/* ═══════════════════════════════════════════════════════════
+   LATEX / KATEX — math formula rendering
+   Requires: @import 'katex/dist/katex.min.css' in your app CSS.
+   ═══════════════════════════════════════════════════════════ */
+
+/* ── Display (block) math ────────────────────────────────── */
+
+.tw-rich-prose .katex-display {
+  display: block;
+  margin: 0.875rem 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  text-align: center;
+}
+
+/* ── Inline math ─────────────────────────────────────────── */
+
+.tw-rich-prose .katex {
+  font-size: 1.05em;
+  line-height: 1.2;
+}
+
+/* ── Dark-mode: KaTeX inherits color by default, but
+      the KaTeX SVG path elements need a nudge ─────────────── */
+
+.dark .tw-rich-prose .katex {
+  color: inherit;
+}
+
+/* ── Fallback for failed / unsupported LaTeX ────────────── */
+
+.tw-latex-raw {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.8125em;
+  color: var(--color-warning-600);
+  background-color: var(--color-warning-50);
+  padding: 0.1em 0.3em;
+  border-radius: 0.25rem;
+}
+
+.dark .tw-latex-raw {
+  color: var(--color-warning-400);
+  background-color: color-mix(in srgb, var(--color-warning-900) 40%, transparent);
+}

package/dist/styles.css

@@ -7303,6 +7303,35 @@
 .tw-rich-img-wrap--error .tw-rich-img-error {
   display: flex;
 }
+.tw-rich-prose .katex-display {
+  display: block;
+  margin: 0.875rem 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  text-align: center;
+}
+.tw-rich-prose .katex {
+  font-size: 1.05em;
+  line-height: 1.2;
+}
+.dark .tw-rich-prose .katex {
+  color: inherit;
+}
+.tw-latex-raw {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.8125em;
+  color: var(--color-warning-600);
+  background-color: var(--color-warning-50);
+  padding: 0.1em 0.3em;
+  border-radius: 0.25rem;
+}
+.dark .tw-latex-raw {
+  color: var(--color-warning-400);
+  background-color: color-mix(in srgb, oklch(40.8% 0.123 38.172) 40%, transparent);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in srgb, var(--color-warning-900) 40%, transparent);
+  }
+}
 .slider-root * {
   user-select: none;
 }
@@ -7576,6 +7605,43 @@ circle.chart-dot:hover, circle.chart-dot.chart-dot--active {
       font-size: 16px !important;
     }
   }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: transparent transparent;
+  }
+  :hover {
+    scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
+  }
+  .dark :hover {
+    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
+  }
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: transparent;
+    border-radius: 9999px;
+    transition: background 0.2s;
+  }
+  :hover::-webkit-scrollbar-thumb {
+    background: rgba(156, 163, 175, 0.4);
+  }
+  :hover::-webkit-scrollbar-thumb:hover {
+    background: rgba(156, 163, 175, 0.6);
+  }
+  .dark ::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+  .dark :hover::-webkit-scrollbar-thumb {
+    background: rgba(75, 85, 99, 0.5);
+  }
+  .dark :hover::-webkit-scrollbar-thumb:hover {
+    background: rgba(75, 85, 99, 0.7);
+  }
 }
 @property --tw-translate-x {
   syntax: "*";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jacshuo/onyx",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "Cross-platform React UI component library — works in web & Electron",
   "type": "module",
   "main": "dist/index.cjs",
@@ -99,8 +99,10 @@
     "@tiptap/pm": "^3.20.4",
     "@tiptap/react": "^3.20.4",
     "@tiptap/starter-kit": "^3.20.4",
+    "@types/katex": "^0.16.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "katex": "^0.16.40",
     "lucide-react": "^0.577.0",
     "marked": "^17.0.5",
     "shiki": "^4.0.2",