@preferred-markdown-stream/core 0.1.9 → 0.2.1

package/README.md

@@ -14,15 +14,21 @@ pnpm add @preferred-markdown-stream/core
 import { splitContent } from '@preferred-markdown-stream/core'
 ```
 
+```ts
+import '@preferred-markdown-stream/core/styles.css'
+```
+
 ## Public API
 
 - `splitContent(message)`
-- `addFadeInClassToTreeNodes(children, loading, fadeInClass?)`
-- `streamingTextStyles`
+- `addFadeInClassToTreeNodes(children, loading, options?)`
 - `StreamingTextNode`
+- `FadeInClassOptions`
 
 ## Notes
 
 - The current implementation keeps the existing behavior from the app.
 - The core package no longer depends on Vue types.
 - Vue-specific node adaptation lives in `@preferred-markdown-stream/vue`.
+- Default animation styles are published via `@preferred-markdown-stream/core/styles.css`.
+- Animation duration and timing can be overridden with CSS variables.

package/dist/index.d.ts

@@ -1,2 +1,2 @@
-export { addFadeInClassToTreeNodes, splitContent, streamingTextStyles, } from './streamingText.js';
-export type { StreamingTextNode } from './streamingText.js';
+export { addFadeInClassToTreeNodes, splitContent, } from './streamingText.js';
+export type { FadeInClassOptions, StreamingTextNode, } from './streamingText.js';

package/dist/index.js

@@ -1 +1 @@
-export { addFadeInClassToTreeNodes, splitContent, streamingTextStyles, } from './streamingText.js';
+export { addFadeInClassToTreeNodes, splitContent, } from './streamingText.js';

package/dist/streamingText.d.ts

@@ -5,6 +5,9 @@ export interface StreamingTextNode {
         [key: string]: unknown;
     } | null;
 }
+export interface FadeInClassOptions {
+    className?: string;
+}
 /**
  * Smart content splitting to avoid displaying incomplete sentences
  * Supports both English and Chinese punctuation
@@ -13,9 +16,4 @@ export declare function splitContent(msg: string): string;
 /**
  * Add a fade-in class to string-backed nodes in a generic tree structure.
  */
-export declare function addFadeInClassToTreeNodes<T extends StreamingTextNode>(childrenRaw: T[], loading: boolean, fadeInClass?: string): T[];
-/**
- * CSS styles for streaming text animation
- * Can be used in your global styles or component styles
- */
-export declare const streamingTextStyles = "\n.fade-in {\n  opacity: 0;\n  animation: fadeIn 1s forwards;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n.streaming-text-wrapper {\n  position: relative;\n}\n\n.streaming-text-wrapper.streaming {\n  /* Additional styling for streaming state */\n}\n";
+export declare function addFadeInClassToTreeNodes<T extends StreamingTextNode>(childrenRaw: T[], loading: boolean, options?: string | FadeInClassOptions): T[];

package/dist/streamingText.js

@@ -6,6 +6,13 @@ const TABLE_SEPARATOR_REGEXP = /^\|[\s:|-]+\|$/;
 const FENCE_DELIMITER_REGEXP = /^(`{3,}|~{3,})/gm;
 const INLINE_CODE_BACKTICK_REGEXP = /(?<!`)`(?!`)/g;
 const COMPLETE_INLINE_MARKUP_REGEXP = /^!?\[[^\]]*\]\([^)]*\)/;
+const DEFAULT_FADE_IN_CLASS_NAME = 'preferred-markdown-stream-fade-in';
+function resolveFadeInClassName(options) {
+    if (typeof options === 'string') {
+        return options;
+    }
+    return options?.className ?? DEFAULT_FADE_IN_CLASS_NAME;
+}
 /**
  * Strip trailing unclosed display-math blocks ($$…) that would render
  * as plain text because the closing $$ has not arrived yet.
@@ -189,7 +196,7 @@ export function splitContent(msg) {
 /**
  * Add a fade-in class to string-backed nodes in a generic tree structure.
  */
-export function addFadeInClassToTreeNodes(childrenRaw, loading, fadeInClass = 'fade-in') {
+function addFadeInClassToTreeNodesWithClassName(childrenRaw, loading, className) {
     // eslint-disable-next-line unicorn/no-magic-array-flat-depth
     const children = childrenRaw.flat(20);
     for (const child of children) {
@@ -207,41 +214,21 @@ export function addFadeInClassToTreeNodes(childrenRaw, loading, fadeInClass = 'f
                 const existingClass = typeof child.props.class === 'string'
                     ? child.props.class
                     : '';
-                child.props.class = `${existingClass} ${fadeInClass}`.trim();
+                child.props.class = `${existingClass} ${className}`.trim();
             }
         }
         if (child.children
             && Array.isArray(child.children)
             && child.children.length > 0) {
-            addFadeInClassToTreeNodes(child.children, loading, fadeInClass);
+            addFadeInClassToTreeNodesWithClassName(child.children, loading, className);
         }
     }
     return children;
 }
 /**
- * CSS styles for streaming text animation
- * Can be used in your global styles or component styles
+ * Add a fade-in class to string-backed nodes in a generic tree structure.
  */
-export const streamingTextStyles = `
-.fade-in {
-  opacity: 0;
-  animation: fadeIn 1s forwards;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.streaming-text-wrapper {
-  position: relative;
-}
-
-.streaming-text-wrapper.streaming {
-  /* Additional styling for streaming state */
+export function addFadeInClassToTreeNodes(childrenRaw, loading, options) {
+    const className = resolveFadeInClassName(options);
+    return addFadeInClassToTreeNodesWithClassName(childrenRaw, loading, className);
 }
-`;

package/dist/styles.css

@@ -0,0 +1,29 @@
+.preferred-markdown-stream-fade-in {
+  opacity: 0;
+  animation-name: var(
+    --preferred-markdown-stream-animation-name,
+    preferred-markdown-stream-fade-in
+  );
+  animation-duration: var(
+    --preferred-markdown-stream-animation-duration,
+    1s
+  );
+  animation-timing-function: var(
+    --preferred-markdown-stream-animation-timing-function,
+    ease
+  );
+  animation-fill-mode: var(
+    --preferred-markdown-stream-animation-fill-mode,
+    forwards
+  );
+}
+
+@keyframes preferred-markdown-stream-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@preferred-markdown-stream/core",
   "type": "module",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "private": false,
   "homepage": "https://github.com/Jannchie/preferred-markdown-stream/tree/main/packages/core#readme",
   "repository": {
@@ -18,6 +18,7 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./styles.css": "./dist/styles.css",
     "./streaming-text": {
       "types": "./dist/streamingText.d.ts",
       "import": "./dist/streamingText.js"
@@ -39,7 +40,7 @@
     "vitest": "^4.1.1"
   },
   "scripts": {
-    "build": "tsc -p ./tsconfig.build.json",
+    "build": "tsc -p ./tsconfig.build.json && node ./scripts/copy-assets.mjs",
     "test": "vitest run --config ./vitest.config.ts",
     "typecheck": "tsc -p ./tsconfig.json"
   }