mtxuilib 0.0.487 → 0.0.489

package/dist/esm/curd/CurdViewView.d.ts

@@ -14,6 +14,7 @@ export declare const curdStore: {
     get: <Value>(atom: import("jotai").Atom<Value>) => Value;
     set: <Value_1, Args extends unknown[], Result>(atom: import("jotai").WritableAtom<Value_1, Args, Result>, ...args: Args) => Result;
     sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
+} & Partial<{
     dev_subscribe_store: (l: (action: {
         type: "write";
         flushed: Set<import("jotai").Atom<unknown>>;
@@ -47,16 +48,7 @@ export declare const curdStore: {
         u?: (() => void) | undefined;
     } | undefined;
     dev_restore_atoms: (values: Iterable<readonly [import("jotai").Atom<unknown>, unknown]>) => void;
-} | {
-    get: <Value_2>(atom: import("jotai").Atom<Value_2>) => Value_2;
-    set: <Value_1_1, Args_1 extends unknown[], Result_1>(atom: import("jotai").WritableAtom<Value_1_1, Args_1, Result_1>, ...args: Args_1) => Result_1;
-    sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
-    dev_subscribe_store?: undefined;
-    dev_get_mounted_atoms?: undefined;
-    dev_get_atom_state?: undefined;
-    dev_get_mounted?: undefined;
-    dev_restore_atoms?: undefined;
-};
+}>;
 export declare const CurdViewView: (props: {
     idOrName: string;
 } & PropsWithChildren) => import("react").JSX.Element;

package/dist/esm/demos/atom-example/AtomExample1.atom.d.ts

@@ -26,4 +26,6 @@ export declare const demo1Atom: import("jotai").WritableAtom<(get: <Value>(atom:
 export declare const example102Atom: import("jotai").PrimitiveAtom<string> & {
     init: string;
 };
-export declare const exampleAsyncExampleAtom: import("jotai").Atom<Promise<unknown>>;
+export declare const fetchPosts: (url: string) => Promise<unknown>;
+export declare const exampleAsyncExampleAtom2: import("jotai").WritableAtom<any, [value: any], void>;
+export declare const cached101Atom: import("jotai").Atom<Promise<unknown>>;

package/dist/esm/demos/atom-example/AtomExample1.atom.js

@@ -1 +1 @@
-"use client";var p=(e,o,t)=>new Promise((c,m)=>{var x=l=>{try{r(t.next(l))}catch(s){m(s)}},A=l=>{try{r(t.throw(l))}catch(s){m(s)}},r=l=>l.done?c(l.value):Promise.resolve(l.value).then(x,A);r((t=t.apply(e,o)).next())});import{atom as n}from"jotai";const a=n(1),b=n({callback:e=>e*2}),h=n((e,o)=>({getValue1:()=>e(a)}),(e,o,t)=>(o(a,t),{set1:c=>{console.log("set1 called"),o(a,10)}})),f=n("valueexample102Atom "),u=n("https://jsonplaceholder.typicode.com/posts"),g=n(e=>p(void 0,null,function*(){const o=e(u);return console.log("to fetch url",o),yield(yield fetch(e(u),{next:{revalidate:0}})).json()}));export{h as demo1Atom,b as doublerAtom,f as example102Atom,g as exampleAsyncExampleAtom,a as exampleValue100Atom};
+"use client";var c=(e,t,o)=>new Promise((p,u)=>{var x=s=>{try{a(o.next(s))}catch(l){u(l)}},i=s=>{try{a(o.throw(s))}catch(l){u(l)}},a=s=>s.done?p(s.value):Promise.resolve(s.value).then(x,i);a((o=o.apply(e,t)).next())});import{atom as n}from"jotai";import{atomWithCache as A}from"jotai-cache";const m=n(1),b=n({callback:e=>e*2}),g=n((e,t)=>({getValue1:()=>e(m)}),(e,t,o)=>(t(m,o),{set1:p=>{console.log("set1 called"),t(m,10)}})),v=n("valueexample102Atom "),w=e=>c(void 0,null,function*(){return yield(yield fetch(e,{next:{revalidate:0}})).json()}),r=n(null),V=n(e=>{if(e(r))return console.log("return atom value",e(r)),e(r)},(e,t,o)=>{console.log("exampleAsyncExampleAtom2 set",o),t(r,o)}),d=n("1"),j=A(e=>c(void 0,null,function*(){const t=e(d);return(yield fetch(`https://reqres.in/api/users/${t}?delay=1`,{next:{revalidate:0}})).json()}));export{j as cached101Atom,g as demo1Atom,b as doublerAtom,v as example102Atom,V as exampleAsyncExampleAtom2,m as exampleValue100Atom,w as fetchPosts};

package/dist/esm/demos/atom-example/AtomMain.d.ts

@@ -1,2 +1,5 @@
-/// <reference types="react" />
+import { PropsWithChildren } from 'react';
 export declare const AtomMain: () => import("react").JSX.Element;
+export declare const CacheAtom1Example: () => import("react").JSX.Element;
+export declare const ReactUseExample: () => import("react").JSX.Element;
+export declare const HydratePosts: (props: PropsWithChildren) => import("react").JSX.Element;

package/dist/esm/demos/atom-example/AtomMain.js

@@ -1 +1 @@
-"use client";import{Fragment as v,jsx as t,jsxs as e}from"react/jsx-runtime";import{useAtom as o}from"jotai";import{useHydrateAtoms as u}from"jotai/utils";import{MtButton as i}from"../../ui/ui-mt/Button";import{demo1Atom as n,doublerAtom as c,example102Atom as m,exampleValue100Atom as x}from"./AtomExample1.atom";import{ExampleAsync1 as A}from"./ExampleAsync";const k=()=>{const[l]=o(c),a=l.callback(50),[p,d]=o(n),[r,b]=o(x);u([[m,"example102(hydratedValue)---"]]);const[s,V]=o(m);return e(v,{children:[e("div",{className:"bg-blue-100 p-2",children:["example102Atom:",s]}),e("div",{children:["exampleValue100Atom: ",r]}),e("div",{children:["doubledValue: ",a]}),e("div",{children:[t(i,{onClick:()=>{d(100)},children:"set1"}),t("pre",{children:JSON.stringify(p,null,2)})]}),t(A,{})]})};export{k as AtomMain};
+"use client";var u=(e,s,o)=>new Promise((n,p)=>{var i=a=>{try{l(o.next(a))}catch(d){p(d)}},c=a=>{try{l(o.throw(a))}catch(d){p(d)}},l=a=>a.done?n(a.value):Promise.resolve(a.value).then(i,c);l((o=o.apply(e,s)).next())});import{Fragment as A,jsx as t,jsxs as m}from"react/jsx-runtime";import{useAtom as r}from"jotai";import{useHydrateAtoms as f}from"jotai/utils";import{Suspense as b,use as x}from"react";import{AtomsHydrator as v}from"../../lib/jotai-helper";import{MtButton as g}from"../../ui/ui-mt/Button";import{cached101Atom as E,demo1Atom as C,doublerAtom as H,example102Atom as y,exampleAsyncExampleAtom2 as N,exampleValue100Atom as S}from"./AtomExample1.atom";import{ExampleAsync1 as V}from"./ExampleAsync";const D=()=>{const[e]=r(H),s=e.callback(50),[o,n]=r(C),[p,i]=r(S);f([[y,"example102(hydratedValue)---"]]);const[c,l]=r(y);return m(A,{children:[m("div",{className:"bg-blue-100 p-2",children:["example102Atom:",c]}),m("div",{children:[t(g,{onClick:()=>{n(100)},children:"set1"}),t("pre",{children:JSON.stringify(o,null,2)})]}),t(b,{fallback:t(A,{children:"loading HydratePosts "}),children:t(P,{children:t(V,{})})})]})},L=()=>{const[e,s]=r(E);return m("div",{className:"bg-blue-300 p-2",children:["CacheAtom1Example",t("pre",{children:JSON.stringify(e,null,2)})]})},h=()=>u(void 0,null,function*(){return yield fetch(new URL("/api.v1/demo/posts","http://localhost:3338").toString()).then(e=>e.json())}),j=()=>{const e=x(h());return m("div",{className:"max-h-96 overflow-scroll bg-red-200 p-2",children:["react use data:",t("pre",{children:JSON.stringify(e,null,2)})]})},P=e=>{const s=x(h()),{children:o}=e;return t(v,{atomValues:[[N,s]],children:o})};export{D as AtomMain,L as CacheAtom1Example,P as HydratePosts,j as ReactUseExample};

package/dist/esm/demos/atom-example/ExampleAsync.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="react" />
 export declare const ExampleAsync1: () => import("react").JSX.Element;
+export declare const ExampleAsync1Inner: () => import("react").JSX.Element;

package/dist/esm/demos/atom-example/ExampleAsync.js

@@ -1 +1 @@
-"use client";import{jsx as e}from"react/jsx-runtime";import{useAtom as p}from"jotai";import{exampleAsyncExampleAtom as l}from"./AtomExample1.atom";const n=()=>{const[m,r]=p(l);return e("div",{className:"border bg-red-200 p-2",children:e("pre",{children:JSON.stringify(m,null,2)})})};export{n as ExampleAsync1};
+"use client";import{jsx as e}from"react/jsx-runtime";import{useAtom as m}from"jotai";import{exampleAsyncExampleAtom2 as l}from"./AtomExample1.atom";const c=()=>e("div",{className:"max-h-96 overflow-scroll border bg-red-200 p-2",children:e(s,{})}),s=()=>{const[r,t]=m(l);return e("div",{className:"border bg-red-200 p-2",children:r==null?void 0:r.map((n,o)=>e("li",{children:n.title},o))})};export{c as ExampleAsync1,s as ExampleAsync1Inner};

package/dist/esm/layouts/mail-layout/index.d.ts

@@ -20,6 +20,7 @@ export declare const mailLayoutStore: {
     get: <Value>(atom: import("jotai").Atom<Value>) => Value;
     set: <Value_1, Args extends unknown[], Result>(atom: import("jotai").WritableAtom<Value_1, Args, Result>, ...args: Args) => Result;
     sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
+} & Partial<{
     dev_subscribe_store: (l: (action: {
         type: "write";
         flushed: Set<import("jotai").Atom<unknown>>;
@@ -53,16 +54,7 @@ export declare const mailLayoutStore: {
         u?: (() => void) | undefined;
     } | undefined;
     dev_restore_atoms: (values: Iterable<readonly [import("jotai").Atom<unknown>, unknown]>) => void;
-} | {
-    get: <Value_2>(atom: import("jotai").Atom<Value_2>) => Value_2;
-    set: <Value_1_1, Args_1 extends unknown[], Result_1>(atom: import("jotai").WritableAtom<Value_1_1, Args_1, Result_1>, ...args: Args_1) => Result_1;
-    sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
-    dev_subscribe_store?: undefined;
-    dev_get_mounted_atoms?: undefined;
-    dev_get_atom_state?: undefined;
-    dev_get_mounted?: undefined;
-    dev_restore_atoms?: undefined;
-};
+}>;
 export declare const MailLayout: (props: {} & PropsWithChildren) => import("react").JSX.Element;
 export declare const MailLayoutSidenav: (props: PropsWithChildren) => import("react").JSX.Element;
 export declare const MailLayoutList: (props: PropsWithChildren) => import("react").JSX.Element;

package/dist/esm/layouts/mail-layout/index.js

@@ -1 +1 @@
-"use client";import{Fragment as m,jsx as l,jsxs as C}from"react/jsx-runtime";import{atom as i,createStore as x,useAtom as r,useSetAtom as S}from"jotai";import{useEffect as y}from"react";import b from"use-resize-observer";import{cn as u}from"../../lib/utils";import{ResizableHandle as L,ResizablePanel as d,ResizablePanelGroup as P}from"../../ui/resizable";import{MailLyContent as G}from"./detail/MailLyContent";const c=[20,30,50],f=[40,50,60],z=[10,15,10],p=i(c,(o,t,e)=>{t(p,e)}),h=i(!1,(o,t,e)=>{t(h,e)}),v=i(!1),O=i(void 0),W=i("value1"),k=x(),H=o=>{const{children:t}=o,{ref:e,width:n,height:s}=b();return l(m,{children:l("div",{ref:e,className:"w-full ",children:l(P,{direction:"horizontal",onLayout:a=>{document.cookie=`react-resizable-panels:layout=${JSON.stringify(a)}`},className:u("h-full max-h-full min-h-full  w-full flex-1 items-stretch "),style:{height:(s||1)-1},children:t})})})},J=o=>{const{children:t}=o,[e,n]=r(h),[s]=r(p),a=S(v);return y(()=>{a(!0)},[a]),C(m,{children:[l(d,{defaultSize:s&&s[0]||c[0],collapsedSize:4,collapsible:!0,minSize:z[0],maxSize:f[0],onCollapse:()=>{n(!0),document.cookie=`react-resizable-panels:collapsed=${JSON.stringify(!0)}`},onExpand:()=>{n(!1),document.cookie=`react-resizable-panels:collapsed=${JSON.stringify(!1)}`},className:u(e&&"min-w-[50px] transition-all duration-300 ease-in-out"),children:t}),l(L,{withHandle:!0})]})},T=o=>{const{children:t}=o,[e]=r(p);return l(m,{children:l(d,{defaultSize:e&&e[1]||c[1],minSize:z[1],maxSize:f[1],className:"hidden h-full w-full  md:flex",children:t})})};export{H as MailLayout,T as MailLayoutList,J as MailLayoutSidenav,G as MailLyContent,c as detaultSizes,W as exampleValue1Atom,k as mailLayoutStore,h as mailLyCollapsedAtom,p as mailLySizesAtom,f as maxSizes,z as minSizes,O as trpcListViewAtom};
+"use client";import{Fragment as m,jsx as i,jsxs as x}from"react/jsx-runtime";import{atom as l,createStore as S,useAtom as r,useSetAtom as y}from"jotai";import{useEffect as b}from"react";import v from"use-resize-observer";import{cn as u}from"../../lib/utils";import{ResizableHandle as L,ResizablePanel as d,ResizablePanelGroup as P}from"../../ui/resizable";import{MailLyContent as G}from"./detail/MailLyContent";const c=[20,30,50],f=[40,50,60],z=[10,15,10],p=l(c,(o,t,e)=>{t(p,e)}),h=l(!1,(o,t,e)=>{t(h,e)}),C=l(!1),O=l(void 0),W=l("value1"),k=S(),H=o=>{const{children:t}=o,{ref:e,width:n,height:s}=v();return i(m,{children:i("div",{ref:e,className:"w-full ",children:x(P,{direction:"horizontal",onLayout:a=>{document.cookie=`react-resizable-panels:layout=${JSON.stringify(a)}`},className:u("h-96 max-h-full min-h-full  w-full flex-1 items-stretch "),style:{height:(s||1)-1},children:["startlistview88820000",t]})})})},J=o=>{const{children:t}=o,[e,n]=r(h),[s]=r(p),a=y(C);return b(()=>{a(!0)},[a]),x(m,{children:[i(d,{defaultSize:s&&s[0]||c[0],collapsedSize:4,collapsible:!0,minSize:z[0],maxSize:f[0],onCollapse:()=>{n(!0),document.cookie=`react-resizable-panels:collapsed=${JSON.stringify(!0)}`},onExpand:()=>{n(!1),document.cookie=`react-resizable-panels:collapsed=${JSON.stringify(!1)}`},className:u(e&&"min-w-[50px] transition-all duration-300 ease-in-out"),children:t}),i(L,{withHandle:!0})]})},T=o=>{const{children:t}=o,[e]=r(p);return i(m,{children:i(d,{defaultSize:e&&e[1]||c[1],minSize:z[1],maxSize:f[1],className:"hidden h-full w-full  md:flex",children:t})})};export{H as MailLayout,T as MailLayoutList,J as MailLayoutSidenav,G as MailLyContent,c as detaultSizes,W as exampleValue1Atom,k as mailLayoutStore,h as mailLyCollapsedAtom,p as mailLySizesAtom,f as maxSizes,z as minSizes,O as trpcListViewAtom};

package/dist/esm/store/app.atoms.d.ts

@@ -0,0 +1,3 @@
+export declare const appBackendUrlAtom: import("jotai").PrimitiveAtom<string> & {
+    init: string;
+};

package/dist/esm/store/app.atoms.js

@@ -0,0 +1 @@
+"use client";import{atom as t}from"jotai";const p=t("http://localhost:3338");export{p as appBackendUrlAtom};

package/dist/esm/ui/novel/novel/src/utils/store.d.ts

@@ -2,6 +2,7 @@ export declare const novelStore: {
     get: <Value>(atom: import("jotai").Atom<Value>) => Value;
     set: <Value_1, Args extends unknown[], Result>(atom: import("jotai").WritableAtom<Value_1, Args, Result>, ...args: Args) => Result;
     sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
+} & Partial<{
     dev_subscribe_store: (l: (action: {
         type: "write";
         flushed: Set<import("jotai").Atom<unknown>>;
@@ -35,13 +36,4 @@ export declare const novelStore: {
         u?: (() => void) | undefined;
     } | undefined;
     dev_restore_atoms: (values: Iterable<readonly [import("jotai").Atom<unknown>, unknown]>) => void;
-} | {
-    get: <Value_2>(atom: import("jotai").Atom<Value_2>) => Value_2;
-    set: <Value_1_1, Args_1 extends unknown[], Result_1>(atom: import("jotai").WritableAtom<Value_1_1, Args_1, Result_1>, ...args: Args_1) => Result_1;
-    sub: (atom: import("jotai").Atom<unknown>, listener: () => void) => () => void;
-    dev_subscribe_store?: undefined;
-    dev_get_mounted_atoms?: undefined;
-    dev_get_atom_state?: undefined;
-    dev_get_mounted?: undefined;
-    dev_restore_atoms?: undefined;
-};
+}>;

package/dist/esm/ui/novel/tailwind/extensions.d.ts

@@ -1 +1 @@
-export declare const defaultExtensions: (import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Mark<import("../../../ui/novel/novel/src/extensions/ai-highlight").AIHighlightOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-horizontal-rule").HorizontalRuleOptions, any>)[];
+export declare const defaultExtensions: (import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Mark<import("../novel/src/extensions").AIHighlightOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-horizontal-rule").HorizontalRuleOptions, any>)[];

package/dist/esm/ui/novel/tailwind/image-upload.d.ts

@@ -1 +1 @@
-export declare const uploadFn: import("../../../ui/novel/novel/src/plugins/upload-images").UploadFn;
+export declare const uploadFn: import("../novel/src/plugins").UploadFn;

package/dist/esm/ui/novel/tailwind/slash-command.d.ts

@@ -1,2 +1,2 @@
-export declare const suggestionItems: import("../../../ui/novel/novel/src/extensions/slash-command").SuggestionItem[];
+export declare const suggestionItems: import("../novel/src/extensions").SuggestionItem[];
 export declare const slashCommand: import("@tiptap/core").Extension<any, any>;

package/dist/styles/globals.css

@@ -1,219 +1,219 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-
-    /* novel editor 相关样式开始 */
-    --novel-highlight-default: #ffffff;
-    --novel-highlight-purple: #f6f3f8;
-    --novel-highlight-red: #fdebeb;
-    --novel-highlight-yellow: #fbf4a2;
-    --novel-highlight-blue: #c1ecf9;
-    --novel-highlight-green: #acf79f;
-    --novel-highlight-orange: #faebdd;
-    --novel-highlight-pink: #faf1f5;
-    --novel-highlight-gray: #f1f1ef;
-    /* novel editor 相关样式结束 */
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 85.7% 97.3%;
-    --ring: 217.2 32.6% 17.5%;
-
-    /* novel editor 相关样式开始 */
-    --novel-highlight-default: #000000;
-    --novel-highlight-purple: #3f2c4b;
-    --novel-highlight-red: #5c1a1a;
-    --novel-highlight-yellow: #5c4b1a;
-    --novel-highlight-blue: #1a3d5c;
-    --novel-highlight-green: #1a5c20;
-    --novel-highlight-orange: #5c3a1a;
-    --novel-highlight-pink: #5c1a3a;
-    --novel-highlight-gray: #3a3a3a;
-    /* novel editor 相关样式结束 */
-  }
-}
-
-/* @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-} */
-
-/*
-  细化滚动条。
-  参考： https://github.com/mckaywrigley/chatbot-ui/blob/main/styles/globals.css
-*/
-
-::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  background-color: #a4a4a4;
-  border-radius: 10px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background-color: #838385;
-}
-
-::-webkit-scrollbar-track:hover {
-  background-color: #eaeaea;
-}
-
-::-webkit-scrollbar-corner {
-  background-color: transparent;
-}
-
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-/* vamp 样式开始 ***********************************************************************************************/
-
-@layer utilities {
-  .red-glow {
-    text-shadow: 0px 0px 8px hsla(352, 98%, 60%, 0.6);
-  }
-
-  .button {
-    transition:
-      border 120ms ease 0s,
-      background-color,
-      color,
-      box-shadow,
-      opacity;
-  }
-
-  .primary-button-hover {
-    text-shadow: rgb(0 0 0 / 56%) 0px 3px 12px;
-    box-shadow: rgba(253, 52, 88, 0.6) 0px 1px 40px;
-  }
-
-  .dropdown {
-    /* backdrop-filter: blur(10px) saturate(190%) contrast(70%) brightness(80%);
-      background-color: rgba(29, 30, 43, 0.498);
-      border: 0.5px solid rgba(82, 82, 111, 0.44); */
-    box-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;
-    backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
-    background-color: rgba(29, 30, 43, 0.498);
-    border: 0.5px solid rgba(82, 82, 111, 0.44);
-  }
-}
-
-/* clears the ‘X’ from Internet Explorer */
-input[type="search"]::-ms-clear {
-  display: none;
-  width: 0;
-  height: 0;
-}
-input[type="search"]::-ms-reveal {
-  display: none;
-  width: 0;
-  height: 0;
-}
-/* clears the ‘X’ from Chrome */
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-.is-editor-empty {
-  @apply text-white;
-}
-
-.ProseMirror p.is-editor-empty:first-child::before {
-  color: #adb5bd;
-  content: attr(data-placeholder);
-  float: left;
-  height: 0;
-  opacity: 0.3;
-  pointer-events: none;
-}
-
-::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-  background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-  border-radius: 12px;
-  background-color: #616076;
-}
-
-::-webkit-scrollbar-track {
-  padding: 2px;
-  background-color: transparent;
-}
-
-mux-player {
-  --controls: none;
-  --media-object-fit: cover;
-  height: 100%;
-}
-/* vamp 结束 ***********************************************************************************************/
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+
+    /* novel editor 相关样式开始 */
+    --novel-highlight-default: #ffffff;
+    --novel-highlight-purple: #f6f3f8;
+    --novel-highlight-red: #fdebeb;
+    --novel-highlight-yellow: #fbf4a2;
+    --novel-highlight-blue: #c1ecf9;
+    --novel-highlight-green: #acf79f;
+    --novel-highlight-orange: #faebdd;
+    --novel-highlight-pink: #faf1f5;
+    --novel-highlight-gray: #f1f1ef;
+    /* novel editor 相关样式结束 */
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --ring: 217.2 32.6% 17.5%;
+
+    /* novel editor 相关样式开始 */
+    --novel-highlight-default: #000000;
+    --novel-highlight-purple: #3f2c4b;
+    --novel-highlight-red: #5c1a1a;
+    --novel-highlight-yellow: #5c4b1a;
+    --novel-highlight-blue: #1a3d5c;
+    --novel-highlight-green: #1a5c20;
+    --novel-highlight-orange: #5c3a1a;
+    --novel-highlight-pink: #5c1a3a;
+    --novel-highlight-gray: #3a3a3a;
+    /* novel editor 相关样式结束 */
+  }
+}
+
+/* @layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+} */
+
+/*
+  细化滚动条。
+  参考： https://github.com/mckaywrigley/chatbot-ui/blob/main/styles/globals.css
+*/
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #a4a4a4;
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #838385;
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: #eaeaea;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+/* vamp 样式开始 ***********************************************************************************************/
+
+@layer utilities {
+  .red-glow {
+    text-shadow: 0px 0px 8px hsla(352, 98%, 60%, 0.6);
+  }
+
+  .button {
+    transition:
+      border 120ms ease 0s,
+      background-color,
+      color,
+      box-shadow,
+      opacity;
+  }
+
+  .primary-button-hover {
+    text-shadow: rgb(0 0 0 / 56%) 0px 3px 12px;
+    box-shadow: rgba(253, 52, 88, 0.6) 0px 1px 40px;
+  }
+
+  .dropdown {
+    /* backdrop-filter: blur(10px) saturate(190%) contrast(70%) brightness(80%);
+      background-color: rgba(29, 30, 43, 0.498);
+      border: 0.5px solid rgba(82, 82, 111, 0.44); */
+    box-shadow: rgb(0 0 0 / 20%) 0px 4px 24px;
+    backdrop-filter: blur(20px) saturate(190%) contrast(70%) brightness(80%);
+    background-color: rgba(29, 30, 43, 0.498);
+    border: 0.5px solid rgba(82, 82, 111, 0.44);
+  }
+}
+
+/* clears the ‘X’ from Internet Explorer */
+input[type="search"]::-ms-clear {
+  display: none;
+  width: 0;
+  height: 0;
+}
+input[type="search"]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
+/* clears the ‘X’ from Chrome */
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-results-button,
+input[type="search"]::-webkit-search-results-decoration {
+  display: none;
+}
+
+.is-editor-empty {
+  @apply text-white;
+}
+
+.ProseMirror p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  opacity: 0.3;
+  pointer-events: none;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 12px;
+  background-color: #616076;
+}
+
+::-webkit-scrollbar-track {
+  padding: 2px;
+  background-color: transparent;
+}
+
+mux-player {
+  --controls: none;
+  --media-object-fit: cover;
+  height: 100%;
+}
+/* vamp 结束 ***********************************************************************************************/