listpage-next 0.0.237 → 0.0.239

package/dist/features/ChatClient/ui/Bubble/Bubble.d.ts

@@ -11,7 +11,8 @@ export type BubbleProps = {
     references?: ReferenceListProps['references'];
     placement?: 'start' | 'end';
     role?: 'user' | 'assistant';
-    markdownRender?: (text: string) => ReactNode;
+    status?: 'pending' | 'success' | 'error';
+    markdownRender?: (text: string, status: BubbleProps['status']) => ReactNode;
     reasoningMarkdownRender?: (text: string) => ReactNode;
 };
 export declare const Bubble: (props: BubbleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/features/ChatClient/ui/Bubble/Bubble.js

@@ -6,16 +6,17 @@ import { Markdown } from "./Markdown.js";
 import { Reasoning } from "./Reasoning.js";
 import { ReferenceList } from "./ReferenceList.js";
 const Bubble = (props)=>{
-    const { className, content, reasoning_content, extra, feedback, markdownRender, reasoningMarkdownRender = markdownRender, references, suggests, role = 'user', placement = 'user' === role ? 'end' : 'start', showFeedback = (hovered)=>hovered } = props;
+    const { className, content, reasoning_content, extra, feedback, markdownRender, reasoningMarkdownRender = markdownRender, references, suggests, role = 'user', status, placement = 'user' === role ? 'end' : 'start', showFeedback = (hovered)=>hovered } = props;
     const containerRef = useRef(null);
     const feedbackRef = useRef(null);
     const containerHovered = useHover(containerRef);
     const feedbackHovered = useHover(feedbackRef);
     const hovered = containerHovered || feedbackHovered;
-    const messageMarkdownEle = markdownRender ? markdownRender(content || '') : /*#__PURE__*/ jsx(Markdown, {
-        content: content || ''
+    const cursorPlaceholder = 'pending' === status && 'assistant' === role ? '<placeholder type="pending" />' : '';
+    const messageMarkdownEle = markdownRender ? markdownRender(content || '', status) : /*#__PURE__*/ jsx(Markdown, {
+        content: (content || '') + cursorPlaceholder
     });
-    const reasoningMarkdownEle = reasoningMarkdownRender ? reasoningMarkdownRender(reasoning_content || '') : /*#__PURE__*/ jsx(Markdown, {
+    const reasoningMarkdownEle = reasoningMarkdownRender ? reasoningMarkdownRender(reasoning_content || '', status) : /*#__PURE__*/ jsx(Markdown, {
         content: reasoning_content || ''
     });
     const message = 'user' === role ? /*#__PURE__*/ jsx(UserContentWrapper, {

package/dist/features/JsonEditor/JsonEditor.d.ts

@@ -1,8 +1,8 @@
 import { type JsonValue } from './types';
 export interface JsonEditorProps {
-    defaultValue?: JsonValue;
     value?: JsonValue;
     onChange?: (v: JsonValue) => void;
+    schema?: any;
 }
 export interface JsonEditorHandle {
     update: () => void;

package/dist/features/JsonEditor/JsonEditor.js

@@ -3,6 +3,7 @@ import { Flex, message } from "antd";
 import { forwardRef, useImperativeHandle, useState } from "react";
 import { Card } from "../../components/index.js";
 import styled_components from "styled-components";
+import { JSONSchemaFaker } from "json-schema-faker";
 import { Toolbar } from "./Toolbar.js";
 import { CodeEditor } from "./CodeEditor.js";
 import { formatJson, minifyJson, validateJson } from "./utils.js";
@@ -41,8 +42,8 @@ const InfoBar = styled_components.div`
   border-radius: 4px;
 `;
 const JsonEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { value, onChange, defaultValue } = props;
-    const initialText = void 0 !== value ? JSON.stringify(value, null, 2) : defaultValue ? JSON.stringify(defaultValue, null, 2) : '';
+    const { value, onChange, schema } = props;
+    const initialText = void 0 !== value ? JSON.stringify(value, null, 2) : '';
     const [jsonInput, setJsonInput] = useState(initialText);
     const [validation, setValidation] = useState({
         isValid: true,
@@ -61,7 +62,7 @@ const JsonEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
     };
     useImperativeHandle(ref, ()=>({
             update: ()=>{
-                updateInput(initialText);
+                setJsonInput(initialText);
             }
         }), [
         initialText,
@@ -79,7 +80,24 @@ const JsonEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
         navigator.clipboard.writeText(jsonInput);
         message.success('复制成功');
     };
+    const handleGenerateMock = ()=>{
+        if (schema) try {
+            JSONSchemaFaker.option({
+                alwaysFakeOptionals: true,
+                fillProperties: false
+            });
+            const mock = JSONSchemaFaker.generate(schema);
+            const formatted = JSON.stringify(mock, null, 2);
+            updateInput(formatted);
+        } catch (error) {
+            message.error('Mock 数据生成失败');
+            console.log(error);
+        }
+    };
     return /*#__PURE__*/ jsx(Card, {
+        style: {
+            height: '100%'
+        },
         title: /*#__PURE__*/ jsxs(Flex, {
             align: "center",
             gap: 6,
@@ -99,7 +117,8 @@ const JsonEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
                 disabled: !validation.isValid,
                 onFormat: handleFormat,
                 onMinify: handleMinify,
-                onCopy: handleCopy
+                onCopy: handleCopy,
+                onGenerateMock: schema && handleGenerateMock
             })
         }),
         children: /*#__PURE__*/ jsx(EditorWrapper, {

package/dist/features/JsonEditor/Toolbar.d.ts

@@ -3,6 +3,7 @@ interface ToolbarProps {
     onFormat: () => void;
     onMinify: () => void;
     onCopy: () => void;
+    onGenerateMock: () => void;
 }
-export declare const Toolbar: ({ onFormat, onMinify, onCopy, disabled, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toolbar: ({ onGenerateMock, onFormat, onMinify, onCopy, disabled, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/features/JsonEditor/Toolbar.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Tooltip } from "antd";
-import { Braces, Copy, FileArchive } from "lucide-react";
+import { Braces, Copy, FileArchive, Sparkles } from "lucide-react";
 import styled_components from "styled-components";
 const ToolbarContainer = styled_components.div`
   display: flex;
@@ -12,8 +12,23 @@ const ActionButton = styled_components(Button)`
     background-color: rgba(31, 41, 55, 0.5);
   }
 `;
-const Toolbar = ({ onFormat, onMinify, onCopy, disabled })=>/*#__PURE__*/ jsxs(ToolbarContainer, {
+const Toolbar = ({ onGenerateMock, onFormat, onMinify, onCopy, disabled })=>/*#__PURE__*/ jsxs(ToolbarContainer, {
         children: [
+            onGenerateMock && /*#__PURE__*/ jsx(Tooltip, {
+                title: "随机生成数据",
+                children: /*#__PURE__*/ jsx(ActionButton, {
+                    disabled: disabled,
+                    size: "small",
+                    type: "text",
+                    onClick: onGenerateMock,
+                    icon: /*#__PURE__*/ jsx(Sparkles, {
+                        style: {
+                            width: 14,
+                            height: 14
+                        }
+                    })
+                })
+            }),
             /*#__PURE__*/ jsx(Tooltip, {
                 title: "格式化",
                 children: /*#__PURE__*/ jsx(ActionButton, {
@@ -23,7 +38,8 @@ const Toolbar = ({ onFormat, onMinify, onCopy, disabled })=>/*#__PURE__*/ jsxs(T
                     onClick: onFormat,
                     icon: /*#__PURE__*/ jsx(Braces, {
                         style: {
-                            fontSize: 16
+                            width: 14,
+                            height: 14
                         }
                     })
                 })
@@ -37,7 +53,8 @@ const Toolbar = ({ onFormat, onMinify, onCopy, disabled })=>/*#__PURE__*/ jsxs(T
                     onClick: onMinify,
                     icon: /*#__PURE__*/ jsx(FileArchive, {
                         style: {
-                            fontSize: 16
+                            width: 14,
+                            height: 14
                         }
                     })
                 })
@@ -51,7 +68,8 @@ const Toolbar = ({ onFormat, onMinify, onCopy, disabled })=>/*#__PURE__*/ jsxs(T
                     onClick: onCopy,
                     icon: /*#__PURE__*/ jsx(Copy, {
                         style: {
-                            fontSize: 16
+                            width: 14,
+                            height: 14
                         }
                     })
                 })

package/dist/ui/Button/index.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+export interface ButtonProps {
+    onClick?: () => void;
+    disabled?: boolean;
+    loading?: boolean;
+    children?: ReactNode;
+    type?: 'primary' | 'secondary';
+    size?: 'large' | 'medium' | 'small';
+}
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/PromptEditor/index.d.ts

@@ -0,0 +1,8 @@
+import 'prismjs/components/prism-markdown';
+export interface PromptEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}
+export declare const PromptEditor: ({ value, onChange, placeholder, className, }: PromptEditorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui/index.d.ts

@@ -0,0 +1,2 @@
+export { PromptEditor, type PromptEditorProps } from './PromptEditor';
+export { Button, type ButtonProps } from './Button';

package/dist/ui.css

@@ -0,0 +1,625 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-900: oklch(37.9% 0.146 265.522);
+    --color-slate-300: oklch(86.9% 0.022 252.894);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --font-weight-medium: 500;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --animate-spin: spin 1s linear infinite;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .visible {
+    visibility: visible;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .table {
+    display: table;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .flex-shrink {
+    flex-shrink: 1;
+  }
+  .flex-grow {
+    flex-grow: 1;
+  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .resize {
+    resize: both;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded {
+    border-radius: 0.25rem;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-gray-700 {
+    border-color: var(--color-gray-700);
+  }
+  .bg-\[\#0B1120\] {
+    background-color: #0B1120;
+  }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
+  .text-slate-300 {
+    color: var(--color-slate-300);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-blue-900\/20 {
+    --tw-shadow-color: color-mix(in srgb, oklch(37.9% 0.146 265.522) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-blue-900) 20%, transparent) var(--tw-shadow-alpha), transparent);
+    }
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .hover\:scale-\[1\.02\] {
+    &:hover {
+      @media (hover: hover) {
+        scale: 1.02;
+      }
+    }
+  }
+  .hover\:bg-blue-500 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-500);
+      }
+    }
+  }
+  .hover\:bg-gray-800 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-800);
+      }
+    }
+  }
+  .hover\:text-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-visible\:ring-blue-500 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-blue-500);
+    }
+  }
+  .focus-visible\:ring-gray-500 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-gray-500);
+    }
+  }
+  .focus-visible\:ring-offset-2 {
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .focus-visible\:outline-none {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .active\:scale-\[0\.98\] {
+    &:active {
+      scale: 0.98;
+    }
+  }
+  .active\:bg-gray-700 {
+    &:active {
+      background-color: var(--color-gray-700);
+    }
+  }
+  .disabled\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "listpage-next",
-  "version": "0.0.237",
+  "version": "0.0.239",
   "description": "A React component library for creating filter forms with Ant Design",
   "type": "module",
   "main": "./dist/index.js",
@@ -9,7 +9,12 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
-    }
+    },
+    "./ui": {
+      "types": "./dist/ui/ui.d.ts",
+      "import": "./dist/ui/ui.js"
+    },
+    "./ui.css": "./dist/ui.css"
   },
   "types": "./dist/index.d.ts",
   "files": [
@@ -25,7 +30,8 @@
   ],
   "license": "MIT",
   "scripts": {
-    "build": "rslib build",
+    "build": "rslib build && npm run build:css || true",
+    "build:css": "npx -p @tailwindcss/cli@4.1.17 -p tailwindcss@4.1.17 tailwindcss -c tailwind.config.cjs -i ./src/ui/tailwind.css -o ./dist/ui.css --min",
     "format": "prettier --write .",
     "prepublishOnly": "npm run build"
   },
@@ -41,7 +47,11 @@
     "typescript": "^5.9.2",
     "react": "^19.1.1",
     "react-router-dom": ">=6.0.0",
-    "@types/markdown-it": "~14.1.2"
+    "@types/markdown-it": "~14.1.2",
+    "tailwindcss": "~4.1.17",
+    "@tailwindcss/cli": "^4.1.0",
+    "postcss": "^8.4.49",
+    "autoprefixer": "^10.4.20"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -70,6 +80,10 @@
     "@tiptap/core": "~3.10.7",
     "@tiptap/pm": "~3.10.7",
     "prosemirror-state": "~1.4.4",
-    "lucide-react": "~0.555.0"
+    "lucide-react": "~0.555.0",
+    "react-simple-code-editor": "~0.14.1",
+    "prismjs": "~1.30.0",
+    "@types/prismjs": "~1.26.5",
+    "json-schema-faker": "~0.5.9"
   }
 }