@personaliai/react-widget 0.1.0

package/dist/styles.css

@@ -0,0 +1,259 @@
+/* Assistant Design Presets
+ *
+ * 10 fully-designed presets, each with its own deliberately-chosen
+ * typeface, corner radius, and shadow language, ported 1:1 from a real
+ * design gallery — the colors below are each design's own curated
+ * *fallback*, not fixed: every themeable surface (header, bot bubble,
+ * user bubble, starter chip, chat input bar, send button) is driven by
+ * the business owner's "Primary Hex Color" picker via var(--primary-color,
+ * <curated-fallback>), so unset the var and a preset renders exactly as
+ * originally designed.
+ *
+ * This used to be .send-btn only — an earlier version let primaryColor
+ * drive every surface directly and caused a real bug: a hardcoded text
+ * color paired against an arbitrary chosen background went unreadable the
+ * moment someone picked a color from the wrong half of the lightness
+ * spectrum (see git history for that bug class). The fix this time isn't
+ * "touch fewer surfaces", it's computing every text color instead of
+ * hardcoding it:
+ *
+ * - Header / user bubble / send button take the FULL primaryColor as a
+ *   solid fill, with --on-primary (getOnColor(primaryColor) — white or
+ *   near-black, computed per bg-lightness in lib/color-contrast.ts) as
+ *   text. Same mechanism send-btn already proved out.
+ * - Bot bubble / starter chip / chat input bar instead blend primaryColor
+ *   partially into that surface's own curated color with CSS color-mix()
+ *   (background at 15-40%, text at 20%, anchored to the pre-verified
+ *   original pairing) — a flat solid fill there would read as an
+ *   error/alert on a reply bubble, and a fixed "tint toward white" would
+ *   break the already-dark presets (Dark Sleek, Glassmorphism); mixing
+ *   toward each surface's OWN original color instead keeps every preset's
+ *   light/dark character intact while still visibly reflecting the brand
+ *   color, with no per-preset special-casing needed.
+ * - A few structural monochrome strokes are left alone on purpose —
+ *   Neubrutalism's black ink outline, Luxury Editorial's gold rule — where
+ *   the color is the design's own genre-defining identity, not a swappable
+ *   accent (see the comments at each).
+ *
+ * Every bg/fg text pair's *curated fallback* is verified >= 4.5:1 WCAG AA
+ * contrast (normal text), including ::placeholder colors and, for
+ * Glassmorphism, checked against the raw gradient stops (not just the
+ * translucent overlay's nominal alpha value, which understates the
+ * effective contrast against a colorful background). A handful of the
+ * ported gallery accents originally fell short of this — e.g. Playful's
+ * #ff8a5c header/button/chip text was only 2.32:1 against white —
+ * darkened in place (same hue, lower lightness) to restore the design's
+ * character while actually being readable. An arbitrary primaryColor pick
+ * can't be pre-verified the same way — the color-mix() partial-blend
+ * approach above is what keeps that case safe in practice, not a formal
+ * guarantee for every possible hex value.
+ *
+ * Ship this file alongside ChattyWidget (import "@chatty/react-widget/styles.css")
+ * — these are plain CSS selectors keyed off classNames the component
+ * renders (.chat-header, .bot-bubble, etc.), not Tailwind-generated
+ * utilities, so nothing else needs to build or scan this package's source.
+ */
+
+/* 1. Minimal — clean SaaS, off-white, DM Sans. */
+.style-minimal {
+  background-color: #f3f2ee !important;
+  color: #1c1a15 !important;
+  border: 1px solid #e6e4de !important;
+  border-radius: 18px !important;
+  box-shadow: 0 12px 32px 0 rgba(0, 0, 0, 0.1) !important;
+  font-family: var(--font-dm-sans), sans-serif !important;
+}
+.style-minimal .chat-header { background-color: var(--primary-color, #ffffff) !important; color: var(--on-primary, #1c1a15) !important; border-bottom: 1px solid color-mix(in srgb, var(--primary-color, #e6e4de) 40%, #e6e4de) !important; }
+.style-minimal .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f3f2ee) 40%, #f3f2ee) !important; color: color-mix(in srgb, var(--on-primary, #1c1a15) 20%, #1c1a15) !important; border: none !important; border-radius: 14px !important; }
+.style-minimal .user-bubble { background-color: var(--primary-color, #1c1a15) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 14px !important; }
+.style-minimal .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #1c1a15) 20%, #1c1a15) !important; border-color: color-mix(in srgb, var(--primary-color, #e0ddd5) 55%, #e0ddd5) !important; border-radius: 20px !important; font-weight: 500; }
+.style-minimal .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 15%, #ffffff) !important; color: #1c1a15 !important; border-color: color-mix(in srgb, var(--primary-color, #e6e4de) 40%, #e6e4de) !important; border-radius: 12px !important; }
+.style-minimal .send-btn { background-color: var(--primary-color, #1c1a15) !important; color: var(--on-primary, #ffffff) !important; }
+.dark .style-minimal { background-color: #171613 !important; color: #f3f2ee !important; border-color: #2a2822 !important; }
+.dark .style-minimal .chat-header { background-color: var(--primary-color, #1e1c18) !important; color: var(--on-primary, #f3f2ee) !important; border-color: color-mix(in srgb, var(--primary-color, #2a2822) 40%, #2a2822) !important; }
+.dark .style-minimal .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #221f1a) 40%, #221f1a) !important; color: color-mix(in srgb, var(--on-primary, #f3f2ee) 20%, #f3f2ee) !important; }
+.dark .style-minimal .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #1e1c18) 15%, #1e1c18) !important; color: #f3f2ee !important; border-color: color-mix(in srgb, var(--primary-color, #2a2822) 40%, #2a2822) !important; }
+
+/* 2. Playful — consumer app, rounded & warm, Quicksand. */
+.style-playful {
+  background-color: #fffaf5 !important;
+  color: #2a1a10 !important;
+  border: none !important;
+  border-radius: 28px !important;
+  box-shadow: 0 16px 36px 0 rgba(255, 138, 92, 0.28) !important;
+  font-family: var(--font-quicksand), sans-serif !important;
+}
+.style-playful .chat-header { background-color: var(--primary-color, #d63d00) !important; color: var(--on-primary, #ffffff) !important; border-bottom: none !important; }
+.style-playful .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #ffe6d9) 40%, #ffe6d9) !important; color: color-mix(in srgb, var(--on-primary, #7a3f24) 20%, #7a3f24) !important; border: none !important; border-radius: 20px !important; }
+.style-playful .user-bubble { background-color: var(--primary-color, #d63d00) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 20px !important; }
+.style-playful .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #d63d00) 20%, #d63d00) !important; border-color: color-mix(in srgb, var(--primary-color, #ffd6c1) 55%, #ffd6c1) !important; border-radius: 24px !important; font-weight: 500; }
+.style-playful .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #fffaf5) 15%, #fffaf5) !important; color: #7a3f24 !important; border: none !important; border-radius: 20px !important; }
+.style-playful .send-btn { background-color: var(--primary-color, #d63d00) !important; color: var(--on-primary, #ffffff) !important; }
+.style-playful ::placeholder { color: #a4623d !important; opacity: 1; }
+.dark .style-playful { background-color: #2a1c14 !important; color: #ffe6d9 !important; }
+.dark .style-playful .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #3a2618) 40%, #3a2618) !important; color: color-mix(in srgb, var(--on-primary, #ffe6d9) 20%, #ffe6d9) !important; }
+.dark .style-playful .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #2a1c14) 15%, #2a1c14) !important; color: #ffe6d9 !important; }
+
+/* 3. Corporate — enterprise SaaS, structured navy, Space Grotesk. */
+.style-corporate {
+  background-color: #eef1f6 !important;
+  color: #1c2e4a !important;
+  border: 1px solid #d7dce3 !important;
+  border-radius: 10px !important;
+  box-shadow: 0 10px 26px 0 rgba(28, 46, 74, 0.14) !important;
+  font-family: var(--font-space-grotesk), sans-serif !important;
+}
+.style-corporate .chat-header { background-color: var(--primary-color, #1c2e4a) !important; color: var(--on-primary, #ffffff) !important; border-bottom: none !important; }
+.style-corporate .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #eef1f6) 40%, #eef1f6) !important; color: color-mix(in srgb, var(--on-primary, #1c2e4a) 20%, #1c2e4a) !important; border: 1px solid color-mix(in srgb, var(--primary-color, #dee3ea) 40%, #dee3ea) !important; border-radius: 8px !important; }
+.style-corporate .user-bubble { background-color: var(--primary-color, #1c2e4a) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 8px !important; }
+.style-corporate .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #1c2e4a) 20%, #1c2e4a) !important; border-color: color-mix(in srgb, var(--primary-color, #c7cfdb) 55%, #c7cfdb) !important; border-radius: 6px !important; font-weight: 500; }
+.style-corporate .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #eef1f6) 15%, #eef1f6) !important; color: #1c2e4a !important; border-color: color-mix(in srgb, var(--primary-color, #dbe0e8) 40%, #dbe0e8) !important; border-radius: 6px !important; }
+.style-corporate .send-btn { background-color: var(--primary-color, #1c2e4a) !important; color: var(--on-primary, #ffffff) !important; border-radius: 6px !important; }
+.style-corporate ::placeholder { color: #636e80 !important; opacity: 1; }
+.dark .style-corporate { background-color: #10151d !important; color: #dbe2ec !important; border-color: #232c38 !important; }
+.dark .style-corporate .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #171e29) 40%, #171e29) !important; color: color-mix(in srgb, var(--on-primary, #dbe2ec) 20%, #dbe2ec) !important; border-color: color-mix(in srgb, var(--primary-color, #232c38) 40%, #232c38) !important; }
+.dark .style-corporate .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #10151d) 15%, #10151d) !important; color: #dbe2ec !important; border-color: color-mix(in srgb, var(--primary-color, #232c38) 40%, #232c38) !important; }
+
+/* 4. Dark Sleek — dev tool, near-black with a teal glow, Space Grotesk. */
+.style-dark-sleek {
+  background-color: #111114 !important;
+  color: #e4e4e8 !important;
+  border: 1px solid rgba(0, 229, 199, 0.25) !important;
+  border-radius: 16px !important;
+  box-shadow: 0 0 40px 0 rgba(0, 229, 199, 0.1) !important;
+  font-family: var(--font-space-grotesk), sans-serif !important;
+}
+.style-dark-sleek .chat-header { background-color: var(--primary-color, #14141a) !important; color: var(--on-primary, #e4e4e8) !important; border-bottom: none !important; }
+.style-dark-sleek .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #1c1c22) 40%, #1c1c22) !important; color: color-mix(in srgb, var(--on-primary, #e4e4e8) 20%, #e4e4e8) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: 12px !important; }
+.style-dark-sleek .user-bubble { background-color: var(--primary-color, #00e5c7) !important; color: var(--on-primary, #05201c) !important; border: none !important; border-radius: 12px !important; }
+.style-dark-sleek .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #1c1c22) 20%, #1c1c22) !important; color: color-mix(in srgb, var(--on-primary, #00e5c7) 20%, #00e5c7) !important; border-color: color-mix(in srgb, var(--primary-color, rgba(0, 229, 199, 0.3)) 55%, rgba(0, 229, 199, 0.3)) !important; border-radius: 8px !important; font-weight: 500; }
+.style-dark-sleek .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #14141a) 15%, #14141a) !important; color: #e4e4e8 !important; border-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.08)) 40%, rgba(255, 255, 255, 0.08)) !important; border-radius: 8px !important; }
+.style-dark-sleek .send-btn { background-color: var(--primary-color, #00e5c7) !important; color: var(--on-primary, #05201c) !important; border-radius: 8px !important; }
+.style-dark-sleek ::placeholder { color: #7e7e8b !important; opacity: 1; }
+
+/* 5. Gradient Glow — startup, vivid purple/pink gradient, Space Grotesk. */
+.style-gradient-glow {
+  background-color: #ffffff !important;
+  color: #2a1245 !important;
+  border: none !important;
+  border-radius: 24px !important;
+  box-shadow: 0 20px 44px 0 rgba(168, 85, 247, 0.28) !important;
+  font-family: var(--font-space-grotesk), sans-serif !important;
+}
+.style-gradient-glow .chat-header { background: var(--primary-color, linear-gradient(120deg, #9733f5, #e0177a)) !important; color: var(--on-primary, #ffffff) !important; border-bottom: none !important; }
+.style-gradient-glow .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f6effc) 40%, #f6effc) !important; color: color-mix(in srgb, var(--on-primary, #4a2467) 20%, #4a2467) !important; border: none !important; border-radius: 16px !important; }
+.style-gradient-glow .user-bubble { background-color: var(--primary-color, #9733f5) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 16px !important; }
+.style-gradient-glow .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #f6effc) 20%, #f6effc) !important; color: color-mix(in srgb, var(--on-primary, #9733f5) 20%, #9733f5) !important; border-color: color-mix(in srgb, var(--primary-color, #e7d7f7) 55%, #e7d7f7) !important; border-radius: 20px !important; font-weight: 500; }
+.style-gradient-glow .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 15%, #ffffff) !important; color: #4a2467 !important; border: none !important; border-radius: 16px !important; }
+.style-gradient-glow .send-btn { background: var(--primary-color, linear-gradient(135deg, #9733f5, #e0177a)) !important; color: var(--on-primary, #ffffff) !important; }
+.style-gradient-glow ::placeholder { color: #9063b3 !important; opacity: 1; }
+.dark .style-gradient-glow { background-color: #1a1025 !important; color: #f0e5fa !important; }
+.dark .style-gradient-glow .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #261a35) 40%, #261a35) !important; color: color-mix(in srgb, var(--on-primary, #f0e5fa) 20%, #f0e5fa) !important; }
+.dark .style-gradient-glow .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #1a1025) 15%, #1a1025) !important; color: #f0e5fa !important; }
+
+/* 6. Glassmorphism — fintech app, frosted glass over a gradient mesh, Space Grotesk. */
+.style-glassmorphism {
+  background: linear-gradient(135deg, #3170eb, #7d58ee 50%, #d127b3) !important;
+  color: #ffffff !important;
+  border: none !important;
+  border-radius: 20px !important;
+  box-shadow: 0 16px 40px 0 rgba(20, 20, 50, 0.25) !important;
+  font-family: var(--font-space-grotesk), sans-serif !important;
+}
+.style-glassmorphism .chat-header { background-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.08)) 40%, rgba(255, 255, 255, 0.08)) !important; color: var(--on-primary, #ffffff) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important; }
+.style-glassmorphism .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.18)) 30%, rgba(255, 255, 255, 0.18)) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.25) !important; border-radius: 14px !important; backdrop-filter: blur(18px) !important; -webkit-backdrop-filter: blur(18px) !important; }
+.style-glassmorphism .user-bubble { background-color: var(--primary-color, rgba(255, 255, 255, 0.9)) !important; color: var(--on-primary, #39396b) !important; border: none !important; border-radius: 14px !important; }
+.style-glassmorphism .starter-chip { background-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.15)) 30%, rgba(255, 255, 255, 0.15)) !important; color: #ffffff !important; border-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.35)) 40%, rgba(255, 255, 255, 0.35)) !important; border-radius: 20px !important; font-weight: 500; }
+.style-glassmorphism .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, rgba(255, 255, 255, 0.08)) 40%, rgba(255, 255, 255, 0.08)) !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; }
+.style-glassmorphism .send-btn { background-color: var(--primary-color, rgba(255, 255, 255, 0.9)) !important; color: var(--on-primary, #39396b) !important; }
+.style-glassmorphism ::placeholder { color: rgba(255, 255, 255, 0.75) !important; opacity: 1; }
+
+/* 7. E-commerce — online shop, teal, order-aware, DM Sans. */
+.style-ecommerce {
+  background-color: #fdf9f2 !important;
+  color: #3a3226 !important;
+  border: 1px solid #e8ddd0 !important;
+  border-radius: 14px !important;
+  box-shadow: 0 14px 32px 0 rgba(15, 157, 140, 0.14) !important;
+  font-family: var(--font-dm-sans), sans-serif !important;
+}
+.style-ecommerce .chat-header { background-color: var(--primary-color, #0c8173) !important; color: var(--on-primary, #ffffff) !important; border-bottom: none !important; }
+.style-ecommerce .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f3efe6) 40%, #f3efe6) !important; color: color-mix(in srgb, var(--on-primary, #3a3226) 20%, #3a3226) !important; border: none !important; border-radius: 14px !important; }
+.style-ecommerce .user-bubble { background-color: var(--primary-color, #0c8173) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 14px !important; }
+.style-ecommerce .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #0c8173) 20%, #0c8173) !important; border-color: color-mix(in srgb, var(--primary-color, #cfe9e4) 55%, #cfe9e4) !important; border-radius: 16px !important; font-weight: 500; }
+.style-ecommerce .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #fdf9f2) 15%, #fdf9f2) !important; color: #3a3226 !important; border-color: color-mix(in srgb, var(--primary-color, #e8ddd0) 40%, #e8ddd0) !important; border-radius: 14px !important; }
+.style-ecommerce .send-btn { background-color: var(--primary-color, #0c8173) !important; color: var(--on-primary, #ffffff) !important; }
+.style-ecommerce ::placeholder { color: #7d7159 !important; opacity: 1; }
+.dark .style-ecommerce { background-color: #1a1712 !important; color: #ede6d8 !important; border-color: #33291d !important; }
+.dark .style-ecommerce .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #241f17) 40%, #241f17) !important; color: color-mix(in srgb, var(--on-primary, #ede6d8) 20%, #ede6d8) !important; }
+.dark .style-ecommerce .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #1a1712) 15%, #1a1712) !important; color: #ede6d8 !important; border-color: color-mix(in srgb, var(--primary-color, #33291d) 40%, #33291d) !important; }
+
+/* 8. Healthcare Calm — clinic, soft sage, serif (Lora). */
+.style-healthcare-calm {
+  background-color: #fbfcf9 !important;
+  color: #2f4235 !important;
+  border: 1px solid #dde8dd !important;
+  border-radius: 18px !important;
+  box-shadow: 0 12px 28px 0 rgba(111, 156, 125, 0.16) !important;
+  font-family: var(--font-lora), serif !important;
+}
+.style-healthcare-calm .chat-header { background-color: var(--primary-color, #eaf1e9) !important; color: var(--on-primary, #2f4235) !important; border-bottom: none !important; }
+.style-healthcare-calm .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #eaf1e9) 40%, #eaf1e9) !important; color: color-mix(in srgb, var(--on-primary, #2f4235) 20%, #2f4235) !important; border: none !important; border-radius: 14px !important; }
+.style-healthcare-calm .user-bubble { background-color: var(--primary-color, #567d62) !important; color: var(--on-primary, #ffffff) !important; border: none !important; border-radius: 14px !important; }
+.style-healthcare-calm .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #fbfcf9) 20%, #fbfcf9) !important; color: color-mix(in srgb, var(--on-primary, #4a6b52) 20%, #4a6b52) !important; border-color: color-mix(in srgb, var(--primary-color, #cfe0cf) 55%, #cfe0cf) !important; border-radius: 14px !important; font-weight: 500; }
+.style-healthcare-calm .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #fbfcf9) 15%, #fbfcf9) !important; color: #2f4235 !important; border-color: color-mix(in srgb, var(--primary-color, #dde8dd) 40%, #dde8dd) !important; border-radius: 12px !important; }
+.style-healthcare-calm .send-btn { background-color: var(--primary-color, #567d62) !important; color: var(--on-primary, #ffffff) !important; }
+.style-healthcare-calm ::placeholder { color: #607b63 !important; opacity: 1; }
+.dark .style-healthcare-calm { background-color: #131a15 !important; color: #d9e8dc !important; border-color: #263429 !important; }
+.dark .style-healthcare-calm .chat-header { background-color: var(--primary-color, #1a2a1e) !important; color: var(--on-primary, #d9e8dc) !important; }
+.dark .style-healthcare-calm .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #1a2a1e) 40%, #1a2a1e) !important; color: color-mix(in srgb, var(--on-primary, #d9e8dc) 20%, #d9e8dc) !important; }
+.dark .style-healthcare-calm .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #131a15) 15%, #131a15) !important; color: #d9e8dc !important; border-color: color-mix(in srgb, var(--primary-color, #263429) 40%, #263429) !important; }
+
+/* 9. Neubrutalism — bold brand, thick borders, hard offset shadows, DM Sans. */
+.style-neubrutalism {
+  background-color: #ffffff !important;
+  color: #111111 !important;
+  border: 3px solid #111111 !important;
+  border-radius: 4px !important;
+  box-shadow: 10px 10px 0 0 #111111 !important;
+  font-family: var(--font-dm-sans), sans-serif !important;
+}
+/* Border color stays the signature solid black ink outline throughout
+   (not primaryColor-driven) — brutalism's thick black stroke is the
+   genre-defining structural language here, the same way its 3px root
+   border and 10px hard shadow above are, not an arbitrary color choice
+   that happens to currently be black. */
+.style-neubrutalism .chat-header { background-color: var(--primary-color, #ffde59) !important; color: var(--on-primary, #111111) !important; border-bottom: 3px solid #111111 !important; }
+.style-neubrutalism .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f2f2f2) 40%, #f2f2f2) !important; color: color-mix(in srgb, var(--on-primary, #111111) 20%, #111111) !important; border: 2px solid #111111 !important; border-radius: 4px !important; }
+.style-neubrutalism .user-bubble { background-color: var(--primary-color, #ea0033) !important; color: var(--on-primary, #ffffff) !important; border: 2px solid #111111 !important; border-radius: 4px !important; }
+.style-neubrutalism .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 20%, #ffffff) !important; color: color-mix(in srgb, var(--on-primary, #111111) 20%, #111111) !important; border: 2px solid #111111 !important; border-radius: 4px !important; font-weight: 600; }
+.style-neubrutalism .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #ffffff) 15%, #ffffff) !important; color: #111111 !important; border: 2px solid #111111 !important; border-radius: 4px !important; }
+.style-neubrutalism .send-btn { background-color: var(--primary-color, #ea0033) !important; color: var(--on-primary, #ffffff) !important; border: 2px solid #111111 !important; border-radius: 4px !important; }
+.style-neubrutalism ::placeholder { color: #666666 !important; opacity: 1; }
+.dark .style-neubrutalism { background-color: #1a1a1a !important; color: #f2f2f2 !important; border-color: #f2f2f2 !important; box-shadow: 10px 10px 0 0 #f2f2f2 !important; }
+.dark .style-neubrutalism .chat-header { border-bottom-color: #f2f2f2 !important; }
+.dark .style-neubrutalism .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #262626) 40%, #262626) !important; color: color-mix(in srgb, var(--on-primary, #f2f2f2) 20%, #f2f2f2) !important; border-color: #f2f2f2 !important; }
+.dark .style-neubrutalism .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #1a1a1a) 15%, #1a1a1a) !important; color: #f2f2f2 !important; border-color: #f2f2f2 !important; }
+
+/* 10. Luxury Editorial — boutique, serif & gold, Playfair Display. */
+.style-luxury-editorial {
+  background-color: #fbf9f5 !important;
+  color: #2a251d !important;
+  border: 1px solid #c9a86a !important;
+  border-radius: 6px !important;
+  box-shadow: 0 18px 36px 0 rgba(0, 0, 0, 0.16) !important;
+  font-family: var(--font-playfair), serif !important;
+}
+.style-luxury-editorial .chat-header { background-color: var(--primary-color, #161412) !important; color: var(--on-primary, #f5efe3) !important; border-bottom: none !important; }
+.style-luxury-editorial .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #f1ebdf) 40%, #f1ebdf) !important; color: color-mix(in srgb, var(--on-primary, #2a251d) 20%, #2a251d) !important; border: none !important; border-radius: 2px !important; }
+.style-luxury-editorial .user-bubble { background-color: var(--primary-color, #161412) !important; color: var(--on-primary, #f5efe3) !important; border: none !important; border-radius: 2px !important; }
+/* Border stays the signature gold rule (not primaryColor-driven) — same
+   reasoning as Neubrutalism's black ink outline: gold is this design's
+   own genre-defining structural language, not a swappable color. */
+.style-luxury-editorial .starter-chip { background-color: color-mix(in srgb, var(--primary-color, #fbf9f5) 20%, #fbf9f5) !important; color: color-mix(in srgb, var(--on-primary, #2a251d) 20%, #2a251d) !important; border-color: #c9a86a !important; border-radius: 2px !important; font-weight: 500; }
+.style-luxury-editorial .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #fbf9f5) 15%, #fbf9f5) !important; color: #2a251d !important; border-color: #ddd1b3 !important; border-radius: 2px !important; }
+.style-luxury-editorial .send-btn { background-color: var(--primary-color, #161412) !important; color: var(--on-primary, #f5efe3) !important; border-radius: 2px !important; }
+.style-luxury-editorial ::placeholder { color: #7d7156 !important; opacity: 1; }
+.dark .style-luxury-editorial { background-color: #14120f !important; color: #efe6d3 !important; border-color: #b08a3e !important; }
+.dark .style-luxury-editorial .bot-bubble { background-color: color-mix(in srgb, var(--primary-color, #201c16) 40%, #201c16) !important; color: color-mix(in srgb, var(--on-primary, #efe6d3) 20%, #efe6d3) !important; }
+.dark .style-luxury-editorial .chat-input-bar { background-color: color-mix(in srgb, var(--primary-color, #14120f) 15%, #14120f) !important; color: #efe6d3 !important; border-color: #4a3f2a !important; }

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@personaliai/react-widget",
+  "version": "0.1.0",
+  "description": "Embed the Chatty chat assistant directly in a React app — no iframe, calls the Chatty API directly. Same UI and behavior as the hosted embed.",
+  "license": "MIT",
+  "type": "module",
+  "keywords": ["chatty", "chatbot", "chat-widget", "react", "ai", "customer-support"],
+  "homepage": "https://chatty.personaliai.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PersonaliAI/chatty.git",
+    "directory": "packages/chatty-react"
+  },
+  "bugs": "https://github.com/PersonaliAI/chatty/issues",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "emoji-picker-react": "^4.19.1",
+    "framer-motion": "^12.38.0",
+    "katex": "^0.16.45",
+    "livekit-client": "^2.22.0",
+    "lucide-react": "^1.14.0",
+    "react-markdown": "^10.1.0",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "tsup": "^8.3.5",
+    "typescript": "^5"
+  }
+}