@djangocfg/ui-tools 2.1.92 → 2.1.95

package/README.md

@@ -0,0 +1,129 @@
+# @djangocfg/ui-tools
+
+Heavy React tools with lazy loading (React.lazy + Suspense).
+
+**No Next.js dependencies** — works with Electron, Vite, CRA, and any React environment.
+
+**Part of [DjangoCFG](https://djangocfg.com)** — modern Django framework for production-ready SaaS applications.
+
+**[Live Demo & Props](https://djangocfg.com/demo/)**
+
+## Install
+
+```bash
+pnpm add @djangocfg/ui-tools
+```
+
+## Why ui-tools?
+
+This package contains heavy components that are loaded lazily to keep your initial bundle small. Each tool is loaded only when used.
+
+| Package | Use Case |
+|---------|----------|
+| `@djangocfg/ui-core` | Lightweight UI components (60 components) |
+| `@djangocfg/ui-tools` | Heavy tools with lazy loading |
+| `@djangocfg/ui-nextjs` | Next.js apps (extends ui-core) |
+
+## Tools (9)
+
+| Tool | Bundle Size | Description |
+|------|-------------|-------------|
+| `Mermaid` | ~800KB | Diagram rendering |
+| `PrettyCode` | ~500KB | Code syntax highlighting |
+| `OpenapiViewer` | ~400KB | OpenAPI schema viewer & playground |
+| `JsonForm` | ~300KB | JSON Schema form generator |
+| `LottiePlayer` | ~200KB | Lottie animation player |
+| `AudioPlayer` | ~200KB | Audio player with WaveSurfer.js |
+| `VideoPlayer` | ~150KB | Professional video player with Vidstack |
+| `JsonTree` | ~100KB | JSON visualization |
+| `ImageViewer` | ~50KB | Image viewer with zoom/pan/rotate |
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `Markdown` | Markdown renderer with GFM support |
+
+## Stores
+
+| Store | Description |
+|-------|-------------|
+| `useMediaCacheStore` | Media caching for video/audio players |
+
+## Usage
+
+```tsx
+import { VideoPlayer, AudioPlayer, Mermaid } from '@djangocfg/ui-tools';
+import { Markdown } from '@djangocfg/ui-tools';
+
+function Example() {
+  return (
+    <>
+      <VideoPlayer src="https://example.com/video.mp4" />
+      <AudioPlayer src="https://example.com/audio.mp3" />
+      <Mermaid chart={`graph TD; A-->B;`} />
+      <Markdown content="# Hello **World**" />
+    </>
+  );
+}
+```
+
+## JSON Form Example
+
+```tsx
+import { JsonForm } from '@djangocfg/ui-tools';
+
+const schema = {
+  type: 'object',
+  properties: {
+    name: { type: 'string', title: 'Name' },
+    email: { type: 'string', format: 'email', title: 'Email' },
+  },
+};
+
+function Form() {
+  return (
+    <JsonForm
+      schema={schema}
+      onSubmit={(data) => console.log(data)}
+    />
+  );
+}
+```
+
+## Code Highlighting Example
+
+```tsx
+import { PrettyCode } from '@djangocfg/ui-tools';
+
+function CodeBlock() {
+  return (
+    <PrettyCode
+      code={`const hello = "world";`}
+      language="typescript"
+    />
+  );
+}
+```
+
+## Lazy Loading
+
+All tools use React.lazy + Suspense for automatic code splitting:
+
+```tsx
+// Each tool is loaded only when rendered
+<Suspense fallback={<Spinner />}>
+  <Mermaid chart={diagram} />
+</Suspense>
+```
+
+## Requirements
+
+- React >= 18 or >= 19
+- Tailwind CSS >= 4
+- Zustand >= 5
+- @djangocfg/ui-core (peer dependency)
+
+---
+
+**[Full documentation & examples](https://djangocfg.com/demo/)**

package/dist/index.cjs

@@ -4763,6 +4763,121 @@ function ImageViewer({ file, content, src: directSrc, inDialog = false }) {
   );
 }
 chunkUQ3XI5MY_cjs.__name(ImageViewer, "ImageViewer");
+function smartTruncate(content, maxLength) {
+  if (content.length <= maxLength) {
+    return content;
+  }
+  let breakPoint = maxLength;
+  while (breakPoint > maxLength - 50 && breakPoint > 0) {
+    const char = content[breakPoint];
+    if (char === " " || char === "\n" || char === "	") {
+      break;
+    }
+    breakPoint--;
+  }
+  if (breakPoint <= maxLength - 50) {
+    breakPoint = maxLength;
+  }
+  let truncated = content.slice(0, breakPoint).trimEnd();
+  truncated = fixUnclosedMarkdown(truncated);
+  return truncated;
+}
+chunkUQ3XI5MY_cjs.__name(smartTruncate, "smartTruncate");
+function truncateByLines(content, maxLines) {
+  const lines = content.split("\n");
+  if (lines.length <= maxLines) {
+    return content;
+  }
+  let truncated = lines.slice(0, maxLines).join("\n").trimEnd();
+  truncated = fixUnclosedMarkdown(truncated);
+  return truncated;
+}
+chunkUQ3XI5MY_cjs.__name(truncateByLines, "truncateByLines");
+function fixUnclosedMarkdown(content) {
+  let result = content;
+  const countOccurrences = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((str, marker) => {
+    const escaped = marker.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const matches = str.match(new RegExp(escaped, "g"));
+    return matches ? matches.length : 0;
+  }, "countOccurrences");
+  const boldCount = countOccurrences(result, "**");
+  if (boldCount % 2 !== 0) {
+    result += "**";
+  }
+  const withoutBold = result.replace(/\*\*/g, "");
+  const italicCount = countOccurrences(withoutBold, "*");
+  if (italicCount % 2 !== 0) {
+    result += "*";
+  }
+  const codeCount = countOccurrences(result, "`");
+  const tripleCount = countOccurrences(result, "```");
+  const singleCodeCount = codeCount - tripleCount * 3;
+  if (singleCodeCount % 2 !== 0) {
+    result += "`";
+  }
+  if (tripleCount % 2 !== 0) {
+    result += "\n```";
+  }
+  const strikeCount = countOccurrences(result, "~~");
+  if (strikeCount % 2 !== 0) {
+    result += "~~";
+  }
+  const underlineBoldCount = countOccurrences(result, "__");
+  if (underlineBoldCount % 2 !== 0) {
+    result += "__";
+  }
+  const withoutUnderlineBold = result.replace(/__/g, "");
+  const underlineItalicCount = countOccurrences(withoutUnderlineBold, "_");
+  if (underlineItalicCount % 2 !== 0) {
+    result += "_";
+  }
+  return result;
+}
+chunkUQ3XI5MY_cjs.__name(fixUnclosedMarkdown, "fixUnclosedMarkdown");
+function useCollapsibleContent(content, options = {}) {
+  const { maxLength, maxLines, defaultExpanded = false } = options;
+  const [isCollapsed, setIsCollapsed] = React17.useState(!defaultExpanded);
+  const originalLength = content.length;
+  const originalLineCount = content.split("\n").length;
+  const { shouldCollapse, truncatedContent } = React17.useMemo(() => {
+    if (maxLength === void 0 && maxLines === void 0) {
+      return { shouldCollapse: false, truncatedContent: content };
+    }
+    let needsCollapse = false;
+    let result = content;
+    if (maxLines !== void 0 && originalLineCount > maxLines) {
+      needsCollapse = true;
+      result = truncateByLines(result, maxLines);
+    }
+    if (maxLength !== void 0 && result.length > maxLength) {
+      needsCollapse = true;
+      result = smartTruncate(result, maxLength);
+    }
+    return { shouldCollapse: needsCollapse, truncatedContent: result };
+  }, [content, maxLength, maxLines, originalLineCount]);
+  const displayContent = React17.useMemo(() => {
+    if (!shouldCollapse || !isCollapsed) {
+      return content;
+    }
+    return truncatedContent;
+  }, [content, truncatedContent, shouldCollapse, isCollapsed]);
+  const toggleCollapsed = React17.useCallback(() => {
+    setIsCollapsed((prev) => !prev);
+  }, []);
+  const setCollapsed = React17.useCallback((collapsed) => {
+    setIsCollapsed(collapsed);
+  }, []);
+  return {
+    isCollapsed,
+    toggleCollapsed,
+    setCollapsed,
+    displayContent,
+    shouldCollapse,
+    originalLength,
+    originalLineCount
+  };
+}
+chunkUQ3XI5MY_cjs.__name(useCollapsibleContent, "useCollapsibleContent");
 var extractTextFromChildren = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((children) => {
   if (typeof children === "string") {
     return children;
@@ -4910,6 +5025,9 @@ var createMarkdownComponents = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((isUser
   };
 }, "createMarkdownComponents");
 var hasMarkdownSyntax = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((text) => {
+  if (text.trim().includes("\n")) {
+    return true;
+  }
   const markdownPatterns = [
     /^#{1,6}\s/m,
     // Headers
@@ -4944,45 +5062,164 @@ var hasMarkdownSyntax = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name((text) => {
   ];
   return markdownPatterns.some((pattern) => pattern.test(text));
 }, "hasMarkdownSyntax");
+var CollapseToggle = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(({
+  isCollapsed,
+  onClick,
+  readMoreLabel,
+  showLessLabel,
+  isUser,
+  isCompact
+}) => {
+  const textSize = isCompact ? "text-xs" : "text-sm";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `
+        ${textSize} font-medium cursor-pointer
+        transition-colors duration-200
+        ${isUser ? "text-white/80 hover:text-white" : "text-primary hover:text-primary/80"}
+        inline-flex items-center gap-1
+        mt-1
+      `,
+      children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        readMoreLabel,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "w-3 h-3",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M19 9l-7 7-7-7"
+              }
+            )
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        showLessLabel,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "w-3 h-3",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M5 15l7-7 7 7"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}, "CollapseToggle");
 var MarkdownMessage = /* @__PURE__ */ chunkUQ3XI5MY_cjs.__name(({
   content,
   className = "",
   isUser = false,
-  isCompact = false
+  isCompact = false,
+  collapsible = false,
+  maxLength,
+  maxLines,
+  readMoreLabel = "Read more...",
+  showLessLabel = "Show less",
+  defaultExpanded = false,
+  onCollapseChange
 }) => {
+  const trimmedContent = content.trim();
+  const collapsibleOptions = React17__default.default.useMemo(() => {
+    if (!collapsible) return {};
+    return { maxLength, maxLines, defaultExpanded };
+  }, [collapsible, maxLength, maxLines, defaultExpanded]);
+  const {
+    isCollapsed,
+    toggleCollapsed,
+    displayContent,
+    shouldCollapse
+  } = useCollapsibleContent(
+    trimmedContent,
+    collapsible ? collapsibleOptions : {}
+  );
+  React17__default.default.useEffect(() => {
+    if (collapsible && shouldCollapse && onCollapseChange) {
+      onCollapseChange(isCollapsed);
+    }
+  }, [isCollapsed, collapsible, shouldCollapse, onCollapseChange]);
   const components = React17__default.default.useMemo(() => createMarkdownComponents(isUser, isCompact), [isUser, isCompact]);
   const textSizeClass = isCompact ? "text-xs" : "text-sm";
   const proseClass = isCompact ? "prose-xs" : "prose-sm";
-  const isPlainText = !hasMarkdownSyntax(content);
+  const isPlainText = !hasMarkdownSyntax(displayContent);
   if (isPlainText) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${textSizeClass} leading-relaxed break-words ${className}`, children: content });
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${textSizeClass} leading-relaxed break-words ${className}`, children: [
+      displayContent,
+      collapsible && shouldCollapse && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        isCollapsed && "... ",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CollapseToggle,
+          {
+            isCollapsed,
+            onClick: toggleCollapsed,
+            readMoreLabel,
+            showLessLabel,
+            isUser,
+            isCompact
+          }
+        )
+      ] })
+    ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `
-        prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
-        ${isUser ? "prose-invert" : "dark:prose-invert"}
-        ${className}
-      `,
-      style: {
-        // Inherit colors from parent - fixes issues with external CSS variables
-        "--tw-prose-body": "inherit",
-        "--tw-prose-headings": "inherit",
-        "--tw-prose-bold": "inherit",
-        "--tw-prose-links": "inherit",
-        color: "inherit"
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        ReactMarkdown__default.default,
-        {
-          remarkPlugins: [remarkGfm__default.default],
-          components,
-          children: content
-        }
-      )
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `
+          prose ${proseClass} max-w-none break-words overflow-hidden ${textSizeClass}
+          ${isUser ? "prose-invert" : "dark:prose-invert"}
+        `,
+        style: {
+          // Inherit colors from parent - fixes issues with external CSS variables
+          "--tw-prose-body": "inherit",
+          "--tw-prose-headings": "inherit",
+          "--tw-prose-bold": "inherit",
+          "--tw-prose-links": "inherit",
+          color: "inherit"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ReactMarkdown__default.default,
+          {
+            remarkPlugins: [remarkGfm__default.default],
+            components,
+            children: displayContent
+          }
+        )
+      }
+    ),
+    collapsible && shouldCollapse && /* @__PURE__ */ jsxRuntime.jsx(
+      CollapseToggle,
+      {
+        isCollapsed,
+        onClick: toggleCollapsed,
+        readMoreLabel,
+        showLessLabel,
+        isUser,
+        isCompact
+      }
+    )
+  ] });
 }, "MarkdownMessage");
 
 Object.defineProperty(exports, "useLottie", {
@@ -5062,6 +5299,7 @@ exports.safeJsonStringify = safeJsonStringify;
 exports.useAudioCache = useAudioCache;
 exports.useAudioVisualization = useAudioVisualization;
 exports.useBlobUrlCleanup = useBlobUrlCleanup;
+exports.useCollapsibleContent = useCollapsibleContent;
 exports.useHybridAudio = useHybridAudio;
 exports.useHybridAudioAnalysis = useHybridAudioAnalysis;
 exports.useHybridAudioContext = useHybridAudioContext;