@timbal-ai/timbal-react 0.2.2 → 0.3.0

package/dist/styles.css

@@ -0,0 +1,210 @@
+/*
+ * Optional companion styles for `@timbal-ai/timbal-react`.
+ *
+ * Import this once from your app entry to get the polished defaults that
+ * the blueprint used inline:
+ *
+ *   import "@timbal-ai/timbal-react/styles.css";
+ *
+ * Tailwind v4 is required for the design tokens (`var(--primary)`, etc.).
+ * The package itself ships no bundled CSS — you can drop this file entirely
+ * and ship your own.
+ */
+
+/* ── AI breathing icon (welcome screen) ── */
+@keyframes timbal-ai-breathe {
+  0%, 100% { transform: scale(1); opacity: 0.72; }
+  50% { transform: scale(1.1); opacity: 1; }
+}
+
+@keyframes timbal-ai-ring-glow {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+
+@keyframes timbal-ai-pulse-ring {
+  0%   { box-shadow: 0 0 0 0 oklch(from var(--primary, #6366f1) l c h / 0.18); }
+  65%  { box-shadow: 0 0 0 8px oklch(from var(--primary, #6366f1) l c h / 0); }
+  100% { box-shadow: 0 0 0 0 oklch(from var(--primary, #6366f1) l c h / 0); }
+}
+
+.animate-ai-breathe {
+  animation: timbal-ai-breathe 3.2s ease-in-out infinite;
+}
+
+.animate-ai-ring-glow {
+  animation: timbal-ai-ring-glow 3.2s ease-in-out infinite;
+}
+
+.animate-ai-pulse-ring {
+  animation: timbal-ai-pulse-ring 3.2s ease-in-out infinite;
+  border-radius: var(--radius-xl, 12px);
+}
+
+/* ── Markdown inline code ── */
+.dark code:not(pre code) {
+  background-color: oklch(0.269 0 0 / 0.8);
+}
+
+/* ── Shiki dual-theme support ── */
+.shiki-wrapper pre {
+  background: var(--shiki-light-bg, oklch(0.98 0 0)) !important;
+}
+.shiki-wrapper code,
+.shiki-wrapper code span {
+  color: var(--shiki-light, inherit);
+}
+.dark .shiki-wrapper pre {
+  background: var(--shiki-dark-bg, oklch(0.13 0 0)) !important;
+}
+.dark .shiki-wrapper code,
+.dark .shiki-wrapper code span {
+  color: var(--shiki-dark, inherit);
+}
+
+/* Code-block line numbers */
+.shiki-wrapper code {
+  counter-reset: line;
+}
+.shiki-wrapper code > .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 1.5rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: oklch(0.556 0 0 / 0.3);
+  font-size: 0.7em;
+  user-select: none;
+}
+.dark .shiki-wrapper code > .line::before {
+  color: oklch(0.556 0 0 / 0.25);
+}
+
+/* ── KaTeX math rendering ── */
+.katex-display {
+  margin: 1.25rem 0 !important;
+  padding: 1rem 1.25rem;
+  background: oklch(0.97 0 0 / 0.6);
+  border: 1px solid oklch(0.922 0 0);
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+.dark .katex-display {
+  background: oklch(0.2 0 0 / 0.5);
+  border-color: oklch(1 0 0 / 0.08);
+}
+.katex-display > .katex {
+  text-align: center;
+}
+.katex {
+  font-size: 1.05em !important;
+}
+.katex-display .katex {
+  font-size: 1.15em !important;
+}
+.katex:not(.katex-display .katex) {
+  padding: 0 0.15em;
+}
+
+/* ── Markdown table zebra striping ── */
+.aui-md-table tbody tr:nth-child(even) {
+  background: oklch(0.97 0 0 / 0.4);
+}
+.dark .aui-md-table tbody tr:nth-child(even) {
+  background: oklch(0.2 0 0 / 0.3);
+}
+
+/* ── Code header polish ── */
+.aui-code-header {
+  backdrop-filter: blur(8px);
+}
+
+/* ── Smooth link transitions ── */
+.aui-md-a {
+  transition: color 0.15s ease, text-decoration-color 0.15s ease;
+}
+
+/* ── Blockquote gradient border ── */
+.aui-md-blockquote {
+  border-image: linear-gradient(
+    to bottom,
+    oklch(0.488 0.243 264.376 / 0.6),
+    oklch(0.627 0.265 303.9 / 0.3)
+  ) 1;
+}
+
+/* ── GFM task list checkboxes ── */
+.aui-md-li input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid oklch(0.556 0 0 / 0.4);
+  border-radius: 4px;
+  margin-right: 0.4em;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+  cursor: default;
+  transition: all 0.15s ease;
+}
+.aui-md-li input[type="checkbox"]:checked {
+  background: oklch(0.488 0.243 264.376);
+  border-color: oklch(0.488 0.243 264.376);
+}
+.aui-md-li input[type="checkbox"]:checked::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 45%;
+  width: 3px;
+  height: 6px;
+  border: solid white;
+  border-width: 0 1.5px 1.5px 0;
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+/* ── Custom scrollbars ── */
+.aui-thread-root,
+.aui-thread-root * {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0.708 0 0 / 0.3) transparent;
+}
+
+.aui-thread-root *::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.aui-thread-root *::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 4px;
+}
+
+.aui-thread-root *::-webkit-scrollbar-thumb {
+  background: oklch(0.708 0 0 / 0.3);
+  border-radius: 4px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  transition: all 0.2s ease;
+}
+
+.aui-thread-root *::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.708 0 0 / 0.5);
+  background-clip: content-box;
+}
+
+.dark .aui-thread-root,
+.dark .aui-thread-root * {
+  scrollbar-color: oklch(0.708 0 0 / 0.4) transparent;
+}
+
+.dark .aui-thread-root *::-webkit-scrollbar-thumb {
+  background: oklch(0.708 0 0 / 0.4);
+}
+
+.dark .aui-thread-root *::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.708 0 0 / 0.6);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@timbal-ai/timbal-react",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "React components and runtime for building Timbal chat UIs",
   "type": "module",
   "main": "dist/index.cjs",
@@ -11,7 +11,8 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.esm.js",
       "require": "./dist/index.cjs"
-    }
+    },
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist",