feat(v4): UI refresh

.yarnrc.yml

@@ -2,4 +2,4 @@ nodeLinker: node-modules
 
 enableGlobalCache: false
 
-yarnPath: .yarn/releases/yarn-4.6.0.cjs
+yarnPath: .yarn/releases/yarn-4.18.0.cjs

examples/demo-react/src/App.css

@@ -6,10 +6,11 @@
   padding: 0;
   box-sizing: border-box;
 }
+
 body {
-  font-family: 'TikTok Sans', 'sans-serif';
+  font-family: 'TikTok Sans', sans-serif;
   min-height: 100vh;
-  background: radial-gradient(125% 125% at 50% 90%, #fff 40%, #7c3aed 100%);
+  background: #fff;
   color: #333;
   line-height: 1.6;
 }
@@ -25,6 +26,11 @@ body {
   justify-content: center;
 }
 
+html.dark .app-container,
+html.dark body {
+  background-color: #171717;
+}
+
 /* header styles */
 .app-header {
   text-align: center;
@@ -34,13 +40,16 @@ body {
 .app-title {
   font-size: 2rem;
   font-weight: 700;
-  color: black;
+  color: #000;
   margin-block-end: 0;
 }
 
+html.dark .app-title {
+  color: rgb(248 248 248);
+}
+
 .app-subtitle {
   font-size: 1rem;
-  color: black;
   color: #666;
   font-weight: 400;
 }
@@ -57,18 +66,21 @@ main {
   background: white;
   border-radius: 16px;
   padding: 2rem;
-  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 10px 30px rgb(0 0 0 / 10%);
   backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid rgb(255 255 255 / 20%);
+}
+
+html.dark .demo-section {
+  background-color: #171717;
 }
 
 .section-description {
   text-align: center;
   color: #666;
   font-family: 'Source Code Pro', monospace;
   font-size: 0.9rem;
-  margin-block-end: 1rem;
-  margin-block-start: -1rem;
+  margin-block: -1rem 1rem;
   opacity: 0.8;
 }
 
@@ -102,7 +114,7 @@ main {
 }
 
 /* responsive design */
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .app-container {
     padding: 1rem;
   }
@@ -114,33 +126,12 @@ main {
   .demo-section {
     padding: 1.5rem;
   }
+
   .section-description {
     font-size: 0.8rem;
   }
 }
 
-/* docsearch button customization */
-.search-wrapper .DocSearch-Button {
-  margin: 0 !important;
-  background: #f7fafc !important;
-  border: 2px solid #e2e8f0 !important;
-  border-radius: 12px !important;
-  padding: 12px 16px !important;
-  font-size: 16px !important;
-  transition: all 0.2s ease !important;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
-}
-
-.search-wrapper .DocSearch-Button:hover {
-  border-color: #667eea !important;
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15) !important;
-  transform: translateY(-1px) !important;
-}
-
-.search-wrapper .DocSearch-Button-Placeholder {
-  color: #718096 !important;
-}
-
 /* add subtle animations */
 .demo-section {
   animation: fadeInUp 0.6s ease forwards;
@@ -159,6 +150,7 @@ main {
     opacity: 0;
     transform: translateY(20px);
   }
+
   to {
     opacity: 1;
     transform: translateY(0);

examples/demo-react/src/App.tsx

@@ -1,12 +1,13 @@
 /* eslint-disable react/react-in-jsx-scope */
+import { useState, type JSX } from 'react';
 import { version } from 'typesense-docsearch-react';
 import { DocSearchSidepanel } from 'typesense-docsearch-react/sidepanel';
-import type { JSX } from 'react';
 
 import './App.css';
 import 'typesense-docsearch-css/dist/style.css';
 import 'typesense-docsearch-css/dist/sidepanel.css';
 
+import { defaultAskAi, defaultCollection, typesenseServerConfig } from './config';
 import { AgentStudioExample } from './examples/agent-studio';
 import Basic from './examples/basic';
 import BasicAskAI from './examples/basic-askai';
@@ -18,15 +19,24 @@ import MultiIndex from './examples/multi-index';
 import WHitComponent from './examples/w-hit-component';
 import WTransformItems from './examples/w-hit-transformItems';
 import WResultsFooter from './examples/w-results-footer';
-import { defaultAskAi, defaultCollection, typesenseServerConfig } from './config';
 
 function App(): JSX.Element {
+  const [dark, setDark] = useState(false);
   return (
     <div className="body-container">
       <div className="app-container">
         <header className="app-header">
           <h1 className="app-title">DocSearch v{version}</h1>
           <p className="app-subtitle">Experience the power of intelligent documentation search</p>
+          <button
+            type="button"
+            onClick={() => {
+              setDark(!dark);
+              document.documentElement.classList.toggle('dark', !dark);
+            }}
+          >
+            {dark ? '☀️ Light' : '🌙 Dark'}
+          </button>{' '}
         </header>
 
         <main>
@@ -114,7 +124,7 @@ function App(): JSX.Element {
         typesenseCollectionName={defaultCollection}
         askAi={defaultAskAi}
         panel={{
-          suggestedQuestions: ["test suggestion"],
+          suggestedQuestions: ['test suggestion'],
         }}
       />
     </div>

package.json

@@ -72,5 +72,5 @@
     "vitest": "3.0.2",
     "watch": "1.0.2"
   },
-  "packageManager": "yarn@4.6.0"
+  "packageManager": "yarn@4.18.0"
 }

packages/docsearch-css/build-css.js

@@ -5,6 +5,8 @@ const { execSync } = require('child_process');
 const fs = require('fs');
 const util = require('util');
 
+const mediaMinMax = require('@csstools/postcss-media-minmax');
+const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 const postcss = require('postcss');
 
@@ -26,7 +28,7 @@ function build({ input, output, banner }) {
       throw error;
     }
 
-    postcss([cssnano])
+    postcss([autoprefixer, mediaMinMax(), cssnano])
       .process(css, { from: input, to: output })
       .then((result) => {
         fs.writeFile(output, [banner, result.css].join('\n'), () => true);
@@ -55,13 +57,13 @@ async function buildStyle() {
   const buttonCss = await readFile('src/button.css');
   const modalCss = await readFile('src/modal.css');
 
-  const variablesOutput = await postcss([cssnano]).process(variablesCss, {
+  const variablesOutput = await postcss([autoprefixer, mediaMinMax(), cssnano]).process(variablesCss, {
     from: undefined,
   });
-  const buttonOutput = await postcss([cssnano]).process(buttonCss, {
+  const buttonOutput = await postcss([autoprefixer, mediaMinMax(), cssnano]).process(buttonCss, {
     from: undefined,
   });
-  const modalOutput = await postcss([cssnano]).process(modalCss, {
+  const modalOutput = await postcss([autoprefixer, mediaMinMax(), cssnano]).process(modalCss, {
     from: undefined,
   });
 
@@ -83,8 +85,8 @@ async function buildSidepanel() {
   const sidepanelCss = await readFile('src/sidepanel.css');
 
   const [variablesOutput, sidepanelOutput] = await Promise.all([
-    postcss([cssnano]).process(variablesCss, { from: undefined }),
-    postcss([cssnano]).process(sidepanelCss, { from: undefined }),
+    postcss([autoprefixer, mediaMinMax(), cssnano]).process(variablesCss, { from: undefined }),
+    postcss([autoprefixer, mediaMinMax(), cssnano]).process(sidepanelCss, { from: undefined }),
   ]);
 
   fs.writeFile(

packages/docsearch-css/package.json

@@ -28,6 +28,14 @@
     "watch": "nodemon --watch 'src/**/*.css' --exec 'yarn build:css' --ext css"
   },
   "devDependencies": {
+    "@csstools/postcss-media-minmax": "^3.0.4",
+    "autoprefixer": "^10.5.4",
     "nodemon": "^3.1.9"
-  }
+  },
+  "browserslist": [
+    "> 0.5%",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead"
+  ]
 }