@jacshuo/onyx 2.5.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);
@@ -145,16 +160,21 @@
   border-radius: 0.25rem;
   font-size: 0.8125em;
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  border: 1px solid var(--color-primary-200);
 }
 
 .dark .tw-rich-prose :not(pre) > code {
-  background-color: var(--color-primary-800);
+  /* primary-900 is darker than the AI bubble's primary-800 — creates visible contrast */
+  background-color: var(--color-primary-900);
   color: var(--color-primary-200);
+  border-color: var(--color-primary-700);
 }
 
 /* ── Fenced code blocks ──────────────────────────────────── */
+
 .tw-rich-prose pre {
   background-color: var(--color-primary-100);
+  border: 1px solid var(--color-primary-200);
   border-radius: 0.5rem;
   padding: 0.875rem 1rem;
   overflow-x: auto;
@@ -165,7 +185,9 @@
 }
 
 .dark .tw-rich-prose pre {
-  background-color: var(--color-primary-800);
+  /* primary-900 (#0f172a) is darker than the AI bubble's primary-800 (#1e293b) */
+  background-color: var(--color-primary-900);
+  border-color: var(--color-primary-700);
 }
 
 .tw-rich-prose pre > code {
@@ -177,6 +199,7 @@
 }
 
 /* ── Blockquotes ─────────────────────────────────────────── */
+
 .tw-rich-prose blockquote {
   border-left: 3px solid var(--color-primary-400);
   padding: 0.375rem 0 0.375rem 1rem;
@@ -191,6 +214,7 @@
 }
 
 /* ── Lists ───────────────────────────────────────────────── */
+
 .tw-rich-prose ul,
 .tw-rich-prose ol {
   padding-left: 1.5rem;
@@ -215,6 +239,7 @@
 }
 
 /* ── Horizontal rule ─────────────────────────────────────── */
+
 .tw-rich-prose hr {
   border: none;
   border-top: 1px solid var(--color-primary-200);
@@ -226,6 +251,7 @@
 }
 
 /* ── Links ───────────────────────────────────────────────── */
+
 .tw-rich-prose a {
   color: var(--color-primary-600);
   text-decoration: underline;
@@ -245,6 +271,7 @@
 }
 
 /* ── strong / em baseline ────────────────────────────────── */
+
 .tw-rich-prose strong {
   font-weight: 700;
 }
@@ -258,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%;
@@ -277,6 +306,7 @@
 }
 
 /* Error state overlay (hidden by default) */
+
 .tw-rich-img-error {
   display: none;
   flex-direction: column;
@@ -300,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;
 }
@@ -307,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/base.css

@@ -2622,9 +2622,6 @@
   .whitespace-pre {
     white-space: pre;
   }
-  .whitespace-pre-wrap {
-    white-space: pre-wrap;
-  }
   .text-\(--accent\) {
     color: var(--accent);
   }

package/dist/styles.css

@@ -2642,9 +2642,6 @@
   .whitespace-pre {
     white-space: pre;
   }
-  .whitespace-pre-wrap {
-    white-space: pre-wrap;
-  }
   .text-\(--accent\) {
     color: var(--accent);
   }
@@ -7081,6 +7078,260 @@
 .dtp-btn-confirm:active {
   transform: translateY(0);
 }
+@keyframes tw-blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+}
+@keyframes tw-cursor-out {
+  0% {
+    opacity: 1;
+  }
+  80% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes tw-img-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.tw-cursor {
+  display: inline-block;
+  line-height: 1;
+  vertical-align: baseline;
+  user-select: none;
+  transform: scaleY(0.88);
+  transform-origin: 50% 90%;
+  color: currentColor;
+}
+.tw-cursor--blink {
+  animation: tw-blink 1s step-end infinite;
+}
+.tw-cursor--solid {
+  opacity: 1;
+  animation: none;
+}
+.tw-cursor--out {
+  animation: tw-cursor-out 0.6s ease-out forwards;
+  pointer-events: none;
+}
+.tw-rich-prose {
+  font-size: 0.875rem;
+  line-height: 1.75;
+  color: var(--color-primary-900);
+  word-break: break-word;
+  overflow-wrap: break-word;
+}
+.dark .tw-rich-prose {
+  color: var(--color-primary-100);
+}
+.tw-rich-prose h1, .tw-rich-prose h2, .tw-rich-prose h3, .tw-rich-prose h4, .tw-rich-prose h5, .tw-rich-prose h6 {
+  font-weight: 700;
+  line-height: 1.3;
+  margin-top: 1.25rem;
+  margin-bottom: 0.375rem;
+  color: var(--color-primary-950);
+}
+.dark .tw-rich-prose h1, .dark .tw-rich-prose h2, .dark .tw-rich-prose h3, .dark .tw-rich-prose h4, .dark .tw-rich-prose h5, .dark .tw-rich-prose h6 {
+  color: var(--color-primary-50);
+}
+.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;
+}
+.tw-rich-prose p {
+  margin-top: 0.625rem;
+  margin-bottom: 0.625rem;
+}
+.tw-rich-prose p:first-child {
+  margin-top: 0;
+}
+.tw-rich-prose p:last-child {
+  margin-bottom: 0;
+}
+.tw-rich-prose :not(pre) > code {
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-700);
+  padding: 0.1em 0.35em;
+  border-radius: 0.25rem;
+  font-size: 0.8125em;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  border: 1px solid var(--color-primary-200);
+}
+.dark .tw-rich-prose :not(pre) > code {
+  background-color: var(--color-primary-900);
+  color: var(--color-primary-200);
+  border-color: var(--color-primary-700);
+}
+.tw-rich-prose pre {
+  background-color: var(--color-primary-100);
+  border: 1px solid var(--color-primary-200);
+  border-radius: 0.5rem;
+  padding: 0.875rem 1rem;
+  overflow-x: auto;
+  margin: 0.75rem 0;
+  font-size: 0.8125rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  line-height: 1.6;
+}
+.dark .tw-rich-prose pre {
+  background-color: var(--color-primary-900);
+  border-color: var(--color-primary-700);
+}
+.tw-rich-prose pre > code {
+  background: none;
+  padding: 0;
+  font-size: inherit;
+  color: inherit;
+  border-radius: 0;
+}
+.tw-rich-prose blockquote {
+  border-left: 3px solid var(--color-primary-400);
+  padding: 0.375rem 0 0.375rem 1rem;
+  margin: 0.75rem 0;
+  color: var(--color-primary-600);
+  font-style: italic;
+}
+.dark .tw-rich-prose blockquote {
+  border-left-color: var(--color-primary-500);
+  color: var(--color-primary-400);
+}
+.tw-rich-prose ul, .tw-rich-prose ol {
+  padding-left: 1.5rem;
+  margin: 0.5rem 0;
+}
+.tw-rich-prose ul {
+  list-style: disc;
+}
+.tw-rich-prose ol {
+  list-style: decimal;
+}
+.tw-rich-prose li {
+  margin: 0.25rem 0;
+}
+.tw-rich-prose li > ul, .tw-rich-prose li > ol {
+  margin: 0.125rem 0 0.125rem 0.25rem;
+}
+.tw-rich-prose hr {
+  border: none;
+  border-top: 1px solid var(--color-primary-200);
+  margin: 1.25rem 0;
+}
+.dark .tw-rich-prose hr {
+  border-top-color: var(--color-primary-700);
+}
+.tw-rich-prose a {
+  color: var(--color-primary-600);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tw-rich-prose a:hover {
+  color: var(--color-primary-800);
+}
+.dark .tw-rich-prose a {
+  color: var(--color-primary-400);
+}
+.dark .tw-rich-prose a:hover {
+  color: var(--color-primary-200);
+}
+.tw-rich-prose strong {
+  font-weight: 700;
+}
+.tw-rich-prose em {
+  font-style: italic;
+}
+.tw-rich-img-wrap {
+  display: block;
+  margin: 0.875rem 0;
+}
+.tw-rich-img {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.1);
+  animation: tw-img-fade-in 0.4s ease-out both;
+}
+.dark .tw-rich-img {
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.3);
+}
+.tw-rich-img-error {
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background-color: var(--color-primary-100);
+  color: var(--color-primary-400);
+  font-size: 0.75rem;
+  font-style: normal;
+  text-align: center;
+  min-height: 80px;
+  max-width: 100%;
+}
+.dark .tw-rich-img-error {
+  background-color: var(--color-primary-800);
+  color: var(--color-primary-500);
+}
+.tw-rich-img-wrap--error .tw-rich-img {
+  display: none;
+}
+.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;
 }
@@ -7354,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.5.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",