listpage-next 0.0.236 → 0.0.238

package/dist/features/JsonEditor/utils.js

@@ -1,15 +1,52 @@
-const highlightJson = (jsonString)=>{
-    const escapeHtml = (unsafe)=>unsafe.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;');
-    if (!jsonString.trim().startsWith('{') && !jsonString.trim().startsWith('[')) return escapeHtml(jsonString);
+const validateJson = (jsonString)=>{
+    if (!jsonString.trim()) return {
+        isValid: true,
+        data: null
+    };
     try {
-        return escapeHtml(jsonString).replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:))/g, '<span class="json-key">$1</span>').replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(?!\s*:))/g, '<span class="json-string">$1</span>').replace(/(?<=:)\s*(-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)/g, ' <span class="json-number">$1</span>').replace(/(?<=:)\s*(true|false)/g, ' <span class="json-boolean">$1</span>').replace(/(?<=:)\s*(null)/g, ' <span class="json-null">$1</span>').replace(/([{}[\],:])/g, '<span class="json-punctuation">$1</span>');
+        const data = JSON.parse(jsonString);
+        return {
+            isValid: true,
+            data
+        };
     } catch (e) {
-        return escapeHtml(jsonString);
+        const message = e instanceof Error ? e.message : String(e);
+        return {
+            isValid: false,
+            error: message
+        };
     }
 };
-const calculateLineCount = (text)=>{
-    if (!text) return 1;
-    const lines = text.split('\n').length;
-    return lines;
+const formatJson = (jsonString)=>{
+    try {
+        const obj = JSON.parse(jsonString);
+        return JSON.stringify(obj, null, 2);
+    } catch (_) {
+        return jsonString;
+    }
+};
+const minifyJson = (jsonString)=>{
+    try {
+        const obj = JSON.parse(jsonString);
+        return JSON.stringify(obj);
+    } catch (_) {
+        return jsonString;
+    }
+};
+const getType = (value)=>{
+    if (null === value) return 'null';
+    if (Array.isArray(value)) return 'array';
+    return typeof value;
+};
+const highlightJson = (json)=>{
+    if (!json) return '';
+    const htmlEscaped = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    return htmlEscaped.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, (match)=>{
+        let cls = 'json-token number';
+        if (/^"/.test(match)) cls = /:$/.test(match) ? 'json-token key' : 'json-token string';
+        else if (/true|false/.test(match)) cls = 'json-token boolean';
+        else if (/null/.test(match)) cls = 'json-token null';
+        return `<span class="${cls}">${match}</span>`;
+    });
 };
-export { calculateLineCount, highlightJson };
+export { formatJson, getType, highlightJson, minifyJson, validateJson };

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 @@
+export { PromptEditor, type PromptEditorProps } from './PromptEditor';

package/dist/ui.css

@@ -0,0 +1,366 @@
+/*! 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-slate-300: oklch(86.9% 0.022 252.894);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --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,);
+  }
+  .resize {
+    resize: both;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .bg-\[\#0B1120\] {
+    background-color: #0B1120;
+  }
+  .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-slate-300 {
+    color: var(--color-slate-300);
+  }
+  .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));
+  }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+}
+@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-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;
+}
+@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-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.236",
+  "version": "0.0.238",
   "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",
@@ -69,6 +79,11 @@
     "@tiptap/extension-hard-break": "~3.10.7",
     "@tiptap/core": "~3.10.7",
     "@tiptap/pm": "~3.10.7",
-    "prosemirror-state": "~1.4.4"
+    "prosemirror-state": "~1.4.4",
+    "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"
   }
 }

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

@@ -1,12 +0,0 @@
-import React from 'react';
-export interface JsonEditorProps {
-    value?: any;
-    onChange?: (value: any) => void;
-    placeholder?: string;
-    readOnly?: boolean;
-    style?: React.CSSProperties;
-    className?: string;
-    height?: number | string;
-}
-export declare const JsonEditor: React.FC<JsonEditorProps>;
-export default JsonEditor;

package/dist/features/JsonEditor/Container.js

@@ -1,122 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Button } from "antd";
-import { CompressOutlined, FormatPainterOutlined } from "@ant-design/icons";
-import { LineNumberEditor } from "./LineNumberEditor.js";
-import { CardHeader, EditorWrapper, ErrorMessage, HeaderActions, HeaderTitle, JsonEditorContainer } from "./style.js";
-const JsonEditor = ({ value, onChange, placeholder = 'Enter JSON here...', readOnly = false, style, className, height })=>{
-    const [textValue, setTextValue] = useState('');
-    const [error, setError] = useState(null);
-    useEffect(()=>{
-        if (void 0 !== value) if ('string' == typeof value) {
-            setTextValue(value);
-            setError(null);
-        } else try {
-            const jsonString = JSON.stringify(value, null, 2);
-            setTextValue(jsonString);
-            setError(null);
-        } catch (err) {
-            setTextValue('');
-            setError('Invalid JSON value provided');
-        }
-        else setTextValue('');
-    }, [
-        value
-    ]);
-    const handleChange = (newText)=>{
-        setTextValue(newText);
-        if (readOnly) return;
-        if ('' === newText.trim() || !newText.startsWith('{') && !newText.startsWith('[')) {
-            onChange?.(newText);
-            setError(null);
-            return;
-        }
-        try {
-            if ('' === newText.trim()) {
-                onChange?.(void 0);
-                setError(null);
-            } else {
-                let parsed;
-                try {
-                    parsed = JSON.parse(newText);
-                } catch (parseError) {
-                    parsed = newText;
-                }
-                onChange?.(parsed);
-                setError(null);
-            }
-        } catch (err) {
-            setError('Invalid JSON format');
-        }
-    };
-    const handleFormat = ()=>{
-        if ('' === textValue.trim() || !textValue.startsWith('{') && !textValue.startsWith('[')) return void setError(null);
-        try {
-            const parsed = JSON.parse(textValue);
-            const formatted = JSON.stringify(parsed, null, 2);
-            setTextValue(formatted);
-            setError(null);
-        } catch (err) {
-            setError('Cannot format: Invalid JSON');
-        }
-    };
-    const handleCompress = ()=>{
-        if ('' === textValue.trim() || !textValue.startsWith('{') && !textValue.startsWith('[')) return void setError(null);
-        try {
-            const parsed = JSON.parse(textValue);
-            const compressed = JSON.stringify(parsed);
-            setTextValue(compressed);
-            setError(null);
-        } catch (err) {
-            setError('Cannot compress: Invalid JSON');
-        }
-    };
-    return /*#__PURE__*/ jsxs(JsonEditorContainer, {
-        className: className,
-        style: {
-            ...style,
-            height: height || style?.height
-        },
-        children: [
-            /*#__PURE__*/ jsxs(CardHeader, {
-                children: [
-                    /*#__PURE__*/ jsx(HeaderTitle, {
-                        children: "JSON"
-                    }),
-                    /*#__PURE__*/ jsxs(HeaderActions, {
-                        children: [
-                            /*#__PURE__*/ jsx(Button, {
-                                onClick: handleFormat,
-                                disabled: readOnly,
-                                size: "small",
-                                icon: /*#__PURE__*/ jsx(FormatPainterOutlined, {}),
-                                title: "Format JSON"
-                            }),
-                            /*#__PURE__*/ jsx(Button, {
-                                onClick: handleCompress,
-                                disabled: readOnly,
-                                size: "small",
-                                icon: /*#__PURE__*/ jsx(CompressOutlined, {}),
-                                title: "Compress JSON"
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ jsx(EditorWrapper, {
-                children: /*#__PURE__*/ jsx(LineNumberEditor, {
-                    value: textValue,
-                    onChange: handleChange,
-                    placeholder: placeholder,
-                    readOnly: readOnly,
-                    hasError: !!error
-                })
-            }),
-            error && /*#__PURE__*/ jsx(ErrorMessage, {
-                children: error
-            })
-        ]
-    });
-};
-const Container = JsonEditor;
-export { JsonEditor, Container as default };

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

@@ -1,10 +0,0 @@
-import React from 'react';
-interface LineNumberEditorProps {
-    value: string;
-    onChange: (value: string) => void;
-    readOnly?: boolean;
-    hasError?: boolean;
-    placeholder?: string;
-}
-export declare const LineNumberEditor: React.FC<LineNumberEditorProps>;
-export {};