@hubstr/kit 0.1.5 → 0.1.6

package/ui/src/Markdown/SyntaxMarkdown/CachedMarkdown.tsx

@@ -1,122 +0,0 @@
-'use client';
-
-import { type Nodes, type Root } from 'hast';
-import { toJsxRuntime } from 'hast-util-to-jsx-runtime';
-import { urlAttributes } from 'html-url-attributes';
-import { useMemo } from 'react';
-import { Fragment, jsx, jsxs } from 'react/jsx-runtime';
-import { defaultUrlTransform, type Options } from 'react-markdown';
-import remarkParse from 'remark-parse';
-import remarkRehype from 'remark-rehype';
-import { type PluggableList, unified } from 'unified';
-import { type BuildVisitor, visit } from 'unist-util-visit';
-import { VFile } from 'vfile';
-
-const EMPTY_PLUGINS: PluggableList = [];
-const DEFAULT_REMARK_REHYPE_OPTIONS = { allowDangerousHtml: true };
-
-/**
- * Render-equivalent of react-markdown's synchronous `<Markdown>` that keeps
- * the unified processor across renders. react-markdown rebuilds the whole
- * plugin chain on every render; the streaming tail block re-renders on every
- * reveal commit (~20/s) with identical plugin identities, so caching the
- * processor removes the per-commit chain construction. `post`/`transform`
- * mirror react-markdown@10 — keep them in sync when upgrading it.
- */
-export const CachedMarkdown = (options: Options) => {
-  const { children, rehypePlugins, remarkPlugins, remarkRehypeOptions } = options;
-
-  const processor = useMemo(() => {
-    return unified()
-      .use(remarkParse)
-      .use(remarkPlugins || EMPTY_PLUGINS)
-      .use(
-        remarkRehype,
-        remarkRehypeOptions
-          ? { ...remarkRehypeOptions, ...DEFAULT_REMARK_REHYPE_OPTIONS }
-          : DEFAULT_REMARK_REHYPE_OPTIONS,
-      )
-      .use(rehypePlugins || EMPTY_PLUGINS);
-  }, [rehypePlugins, remarkPlugins, remarkRehypeOptions]);
-
-  const file = new VFile();
-  file.value = typeof children === 'string' ? children : '';
-
-  return post(processor.runSync(processor.parse(file), file) as Nodes, options);
-};
-
-function post(tree: Nodes, options: Options) {
-  const {
-    allowedElements,
-    allowElement,
-    components,
-    disallowedElements,
-    skipHtml,
-    unwrapDisallowed,
-  } = options;
-  const urlTransform = options.urlTransform || defaultUrlTransform;
-
-  if (allowedElements && disallowedElements) {
-    throw new Error(
-      'Unexpected combined `allowedElements` and `disallowedElements`, expected one or the other',
-    );
-  }
-
-  const transform: BuildVisitor<Root> = (node, index, parent) => {
-    if (node.type === 'raw' && parent && typeof index === 'number') {
-      if (skipHtml) {
-        parent.children.splice(index, 1);
-      } else {
-        parent.children[index] = { type: 'text', value: node.value };
-      }
-
-      return index;
-    }
-
-    if (node.type === 'element') {
-      let key: string;
-
-      for (key in urlAttributes) {
-        if (Object.hasOwn(urlAttributes, key) && Object.hasOwn(node.properties, key)) {
-          const value = node.properties[key];
-          const test = urlAttributes[key];
-          if (test === null || test.includes(node.tagName)) {
-            node.properties[key] = urlTransform(String(value || ''), key, node);
-          }
-        }
-      }
-
-      let remove = allowedElements
-        ? !allowedElements.includes(node.tagName)
-        : disallowedElements
-          ? disallowedElements.includes(node.tagName)
-          : false;
-
-      if (!remove && allowElement && typeof index === 'number') {
-        remove = !allowElement(node, index, parent);
-      }
-
-      if (remove && parent && typeof index === 'number') {
-        if (unwrapDisallowed && node.children) {
-          parent.children.splice(index, 1, ...node.children);
-        } else {
-          parent.children.splice(index, 1);
-        }
-
-        return index;
-      }
-    }
-  };
-
-  visit(tree as Root, transform);
-
-  return toJsxRuntime(tree, {
-    Fragment,
-    components: components as Parameters<typeof toJsxRuntime>[1]['components'],
-    ignoreInvalidStyle: true,
-    jsx,
-    jsxs,
-    passKeys: true,
-    passNode: true,
-  });
-}

package/ui/src/Markdown/SyntaxMarkdown/MarkdownRender.tsx

@@ -1,34 +0,0 @@
-'use client';
-
-import { memo } from 'react';
-import Markdown, { type Options } from 'react-markdown';
-
-import {
-  useMarkdownComponents,
-  useMarkdownContent,
-  useMarkdownRehypePlugins,
-  useMarkdownRemarkPlugins,
-} from '../../hooks/useMarkdown';
-
-const MarkdownRenderer = memo<Options>(
-  ({ children, ...rest }) => {
-    const escapedContent = useMarkdownContent(children || '');
-    const components = useMarkdownComponents();
-    const rehypePluginsList = useMarkdownRehypePlugins();
-    const remarkPluginsList = useMarkdownRemarkPlugins();
-
-    return (
-      <Markdown
-        {...rest}
-        components={components}
-        rehypePlugins={rehypePluginsList}
-        remarkPlugins={remarkPluginsList}
-      >
-        {escapedContent}
-      </Markdown>
-    );
-  },
-  (prevProps, nextProps) => prevProps.children === nextProps.children,
-);
-
-export default MarkdownRenderer;

package/ui/src/Markdown/SyntaxMarkdown/StreamdownRender.tsx

@@ -1,463 +0,0 @@
-'use client';
-
-import { marked } from 'marked';
-import {
-  memo,
-  Profiler,
-  type ProfilerOnRenderCallback,
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-} from 'react';
-import { type Options } from 'react-markdown';
-import remend from 'remend';
-import type { Pluggable, PluggableList } from 'unified';
-
-import {
-  useMarkdownComponents,
-  useMarkdownContent,
-  useMarkdownRehypePlugins,
-  useMarkdownRemarkPlugins,
-} from '../../hooks/useMarkdown';
-import { useStableValue } from '../../hooks/useStableValue';
-import { useMarkdownContext } from '../components/MarkdownProvider';
-import {
-  rehypeStreamAnimated,
-  type StreamAnimatedRuntime,
-} from '../plugins/rehypeStreamAnimated';
-import { useStreamdownProfiler } from '../streamProfiler';
-import { type StreamAnimationGranularity } from '../type';
-import { getNow } from '../../utils/getNow';
-import { isDeepEqual } from '../../utils/isDeepEqual';
-
-import { CachedMarkdown } from './CachedMarkdown';
-import { type BlockAnimationMeta, resolveBlockAnimationMeta } from './streamAnimationMeta';
-import { STREAM_FADE_DURATION, styles } from './style';
-import { countChars, useSmoothStreamContent } from './useSmoothStreamContent';
-import { type BlockInfo, type BlockState, useStreamQueue } from './useStreamQueue';
-
-const isSamePlugin = (prevPlugin: Pluggable, nextPlugin: Pluggable): boolean => {
-  const prevTuple = Array.isArray(prevPlugin) ? prevPlugin : [prevPlugin];
-  const nextTuple = Array.isArray(nextPlugin) ? nextPlugin : [nextPlugin];
-
-  if (prevTuple.length !== nextTuple.length) return false;
-  if (prevTuple[0] !== nextTuple[0]) return false;
-
-  return isDeepEqual(prevTuple.slice(1), nextTuple.slice(1));
-};
-
-const isSamePlugins = (
-  prevPlugins?: PluggableList | null,
-  nextPlugins?: PluggableList | null,
-): boolean => {
-  if (prevPlugins === nextPlugins) return true;
-  if (!prevPlugins || !nextPlugins) return !prevPlugins && !nextPlugins;
-  if (prevPlugins.length !== nextPlugins.length) return false;
-
-  for (let i = 0; i < prevPlugins.length; i++) {
-    if (!isSamePlugin(prevPlugins[i], nextPlugins[i])) return false;
-  }
-
-  return true;
-};
-
-const useStablePlugins = (plugins: PluggableList): PluggableList => {
-  const stableRef = useRef<PluggableList>(plugins);
-
-  if (!isSamePlugins(stableRef.current, plugins)) {
-    stableRef.current = plugins;
-  }
-
-  return stableRef.current;
-};
-
-const StreamdownBlock = memo<Options>(
-  ({ children, ...rest }) => {
-    return <CachedMarkdown {...rest}>{children}</CachedMarkdown>;
-  },
-  (prevProps, nextProps) =>
-    prevProps.children === nextProps.children &&
-    prevProps.components === nextProps.components &&
-    isSamePlugins(prevProps.rehypePlugins, nextProps.rehypePlugins) &&
-    isSamePlugins(prevProps.remarkPlugins, nextProps.remarkPlugins),
-);
-
-StreamdownBlock.displayName = 'StreamdownBlock';
-
-interface BlockRuntime extends StreamAnimatedRuntime {
-  charCount: number;
-  charDelay?: number;
-  rawLength: number;
-  settled: boolean;
-}
-
-interface BlockPluginsCacheEntry {
-  base: PluggableList;
-  granularity: StreamAnimationGranularity;
-  value: PluggableList;
-}
-
-interface UpdateBlockAnimationArgs {
-  blocks: BlockInfo[];
-  charDelay: number;
-  getBlockState: (index: number) => BlockState;
-  pluginsCache: Map<number, BlockPluginsCacheEntry>;
-  renderNow: number;
-  revealClock: { lastTs: number };
-  runtimes: Map<number, BlockRuntime>;
-}
-
-const MIN_STREAM_CHAR_PACE_MS = 2;
-const MAX_REVEAL_GAP_MS = 160;
-
-// Runs in the render phase: extends each visible block's birth timeline in
-// place and resolves its animation meta in one pass. Mutations are
-// idempotent for a given block content/length, so discarded or StrictMode
-// double renders re-derive the same state.
-const updateBlockAnimation = ({
-  blocks,
-  charDelay,
-  getBlockState,
-  pluginsCache,
-  renderNow,
-  revealClock,
-  runtimes,
-}: UpdateBlockAnimationArgs): Map<number, BlockAnimationMeta> => {
-  const blockAnimationMeta = new Map<number, BlockAnimationMeta>();
-  const alive = new Set<number>();
-  let revealedNewChars = false;
-
-  for (const [index, block] of blocks.entries()) {
-    alive.add(block.startOffset);
-
-    // Queued blocks are not rendered. Defer birth assignment so that
-    // when the block later transitions to animating/streaming, its
-    // chars start fading from that moment instead of having already
-    // "aged out" of the fade window.
-    const state = getBlockState(index);
-    if (state === 'queued') continue;
-
-    let runtime = runtimes.get(block.startOffset);
-    if (!runtime) {
-      runtime = { births: [], charCount: 0, rawLength: -1, settled: false, styles: [] };
-      runtimes.set(block.startOffset, runtime);
-    }
-
-    if (runtime.rawLength !== block.content.length) {
-      runtime.charCount = countChars(block.content);
-      runtime.rawLength = block.content.length;
-    }
-
-    const blockCharCount = runtime.charCount;
-    const births = runtime.births;
-
-    if (births.length > blockCharCount) {
-      // Block content shrunk (stream restart or upstream rewrite).
-      births.length = blockCharCount;
-      runtime.styles.length = blockCharCount;
-    }
-
-    if (births.length < blockCharCount) {
-      // Chain each new char monotonically after the previous one so fades
-      // never race out of order. Cap how far the fade queue can run ahead
-      // of renderNow to prevent stream-faster-than-fade producing seconds
-      // of invisible backlog at the tail.
-      //
-      // The streaming tail paces its stagger from the observed reveal-commit
-      // gap instead of the queue's fixed charDelay: a commit's chars are
-      // spread to land exactly until the next commit arrives, so the flow
-      // stays per-char continuous no matter how far apart the throttled
-      // commits are.
-      const newChars = blockCharCount - births.length;
-      let pace = charDelay;
-      let cap = renderNow + STREAM_FADE_DURATION;
-      if (state === 'streaming') {
-        revealedNewChars = true;
-        const gapMs = Math.min(Math.max(renderNow - revealClock.lastTs, 16), MAX_REVEAL_GAP_MS);
-        pace = Math.min(charDelay, Math.max(gapMs / newChars, MIN_STREAM_CHAR_PACE_MS));
-        cap = renderNow + gapMs + STREAM_FADE_DURATION;
-      }
-      for (let i = births.length; i < blockCharCount; i++) {
-        const prevBirth = i > 0 ? births[i - 1] : renderNow - pace;
-        const chained = prevBirth + pace;
-        births.push(Math.min(cap, Math.max(chained, renderNow)));
-      }
-    }
-
-    let meta: BlockAnimationMeta;
-    if (runtime.settled) {
-      // Settled is monotone: a revealed block's births are frozen, so once
-      // its last fade completed it stays settled until the runtime is
-      // pruned by a stream restart.
-      meta = { charDelay: runtime.charDelay ?? charDelay, settled: true };
-    } else {
-      const lastBirthTs = births.length > 0 ? (births.at(-1) ?? renderNow) : renderNow;
-      meta = resolveBlockAnimationMeta({
-        currentCharDelay: charDelay,
-        fadeDuration: STREAM_FADE_DURATION,
-        lastElapsedMs: renderNow - lastBirthTs,
-        previousCharDelay: runtime.charDelay,
-        state,
-      });
-      runtime.settled = meta.settled;
-    }
-    runtime.charDelay = meta.charDelay;
-
-    blockAnimationMeta.set(block.startOffset, meta);
-  }
-
-  if (revealedNewChars) {
-    revealClock.lastTs = renderNow;
-  }
-
-  for (const key of runtimes.keys()) {
-    if (!alive.has(key)) {
-      runtimes.delete(key);
-      pluginsCache.delete(key);
-    }
-  }
-
-  return blockAnimationMeta;
-};
-
-interface StreamdownBlocksProps {
-  content: string;
-  markdownOptions: Omit<Options, 'children'>;
-}
-
-const StreamdownBlocks = memo<StreamdownBlocksProps>(
-  ({ content: smoothedContent, markdownOptions: rest }) => {
-    const { streamAnimationGranularity = 'char' } = useMarkdownContext();
-    const profiler = useStreamdownProfiler();
-    const components = useMarkdownComponents();
-    const baseRehypePlugins = useStablePlugins(useMarkdownRehypePlugins());
-    const remarkPlugins = useStablePlugins(useMarkdownRemarkPlugins());
-    const generatedId = useId();
-
-    const processedContentResult = useMemo(() => {
-      const start = profiler ? getNow() : 0;
-      const value = remend(smoothedContent);
-
-      return {
-        durationMs: profiler ? getNow() - start : 0,
-        value,
-      };
-    }, [profiler, smoothedContent]);
-    const processedContent = processedContentResult.value;
-
-    const blocksResult = useMemo(() => {
-      const start = profiler ? getNow() : 0;
-      const tokens = marked.lexer(processedContent);
-      let offset = 0;
-
-      const value = tokens.map((token) => {
-        const block = { content: token.raw, startOffset: offset };
-        offset += token.raw.length;
-        return block;
-      });
-
-      return {
-        durationMs: profiler ? getNow() - start : 0,
-        value,
-      };
-    }, [processedContent, profiler]);
-    const blocks: BlockInfo[] = blocksResult.value;
-
-    const { getBlockState, charDelay } = useStreamQueue(blocks);
-    const blockRuntimesRef = useRef<Map<number, BlockRuntime>>(new Map());
-    const blockPluginsRef = useRef<Map<number, BlockPluginsCacheEntry>>(new Map());
-    const revealClockRef = useRef<{ lastTs: number }>({ lastTs: 0 });
-
-    const renderNow = getNow();
-
-    const animationStart = profiler ? getNow() : 0;
-    const blockAnimationMeta = updateBlockAnimation({
-      blocks,
-      charDelay,
-      getBlockState,
-      pluginsCache: blockPluginsRef.current,
-      renderNow,
-      revealClock: revealClockRef.current,
-      runtimes: blockRuntimesRef.current,
-    });
-    const blockAnimationDurationMs = profiler ? getNow() - animationStart : 0;
-
-    useEffect(() => {
-      if (!profiler) return;
-
-      profiler.recordCalculation({
-        durationMs: processedContentResult.durationMs,
-        name: 'content-normalize',
-        textLength: processedContent.length,
-      });
-    }, [processedContent.length, processedContentResult.durationMs, profiler]);
-
-    useEffect(() => {
-      if (!profiler) return;
-
-      profiler.recordCalculation({
-        durationMs: blocksResult.durationMs,
-        itemCount: blocks.length,
-        name: 'block-lex',
-        textLength: processedContent.length,
-      });
-    }, [blocks.length, blocksResult.durationMs, processedContent.length, profiler]);
-
-    useEffect(() => {
-      if (!profiler) return;
-
-      profiler.recordCalculation({
-        durationMs: blockAnimationDurationMs,
-        itemCount: blocks.length,
-        name: 'block-births',
-        textLength: processedContent.length,
-      });
-    }, [blockAnimationDurationMs, blocks.length, processedContent.length, profiler]);
-
-    const resolveBlockPlugins = (startOffset: number, settled: boolean): PluggableList => {
-      if (settled) return baseRehypePlugins;
-
-      const cache = blockPluginsRef.current;
-      const entry = cache.get(startOffset);
-      if (
-        entry &&
-        entry.base === baseRehypePlugins &&
-        entry.granularity === streamAnimationGranularity
-      ) {
-        return entry.value;
-      }
-
-      const runtime = blockRuntimesRef.current.get(startOffset);
-      const value: PluggableList = [
-        ...baseRehypePlugins,
-        [
-          rehypeStreamAnimated,
-          {
-            fadeDuration: STREAM_FADE_DURATION,
-            granularity: streamAnimationGranularity,
-            runtime,
-          },
-        ],
-      ];
-      cache.set(startOffset, {
-        base: baseRehypePlugins,
-        granularity: streamAnimationGranularity,
-        value,
-      });
-      return value;
-    };
-
-    const handleRootRender = useCallback<ProfilerOnRenderCallback>(
-      (_, phase, actualDuration, baseDuration) => {
-        profiler?.recordRootCommit({
-          actualDuration,
-          baseDuration,
-          blockCount: blocks.length,
-          phase,
-          textLength: processedContent.length,
-        });
-      },
-      [blocks.length, processedContent.length, profiler],
-    );
-
-    const handleBlockRender = useCallback<ProfilerOnRenderCallback>(
-      (id, phase, actualDuration, baseDuration) => {
-        if (!profiler) return;
-
-        const [, indexText, offsetText] = id.split(':');
-        const blockIndex = Number(indexText);
-
-        if (!Number.isFinite(blockIndex)) return;
-
-        const block = blocks[blockIndex];
-        if (!block) return;
-
-        profiler.recordBlockCommit({
-          actualDuration,
-          baseDuration,
-          blockChars: countChars(block.content),
-          blockIndex,
-          blockKey: offsetText ?? String(block.startOffset),
-          phase,
-          state: getBlockState(blockIndex),
-        });
-      },
-      [blocks, getBlockState, profiler],
-    );
-
-    const content = (
-      <div className={styles.animated}>
-        {blocks.map((block, index) => {
-          const animationMeta = blockAnimationMeta.get(block.startOffset);
-          if (!animationMeta) return null;
-
-          const plugins = resolveBlockPlugins(block.startOffset, animationMeta.settled);
-          const key = `${generatedId}-${block.startOffset}`;
-
-          if (!profiler) {
-            return (
-              <StreamdownBlock
-                {...rest}
-                components={components}
-                key={key}
-                rehypePlugins={plugins}
-                remarkPlugins={remarkPlugins}
-              >
-                {block.content}
-              </StreamdownBlock>
-            );
-          }
-
-          return (
-            <Profiler
-              id={`streamdown-block:${index}:${block.startOffset}`}
-              key={key}
-              onRender={handleBlockRender}
-            >
-              <StreamdownBlock
-                {...rest}
-                components={components}
-                rehypePlugins={plugins}
-                remarkPlugins={remarkPlugins}
-              >
-                {block.content}
-              </StreamdownBlock>
-            </Profiler>
-          );
-        })}
-      </div>
-    );
-
-    if (!profiler) return content;
-
-    return (
-      <Profiler id={'streamdown-root'} onRender={handleRootRender}>
-        {content}
-      </Profiler>
-    );
-  },
-);
-
-StreamdownBlocks.displayName = 'StreamdownBlocks';
-
-// The outer component absorbs the upstream per-chunk prop churn: every
-// streamed chunk re-renders it, but it only feeds the smoother and renders
-// a memoized child keyed on the smoother's output — so the expensive block
-// pipeline runs per reveal commit, not per chunk AND per commit.
-export const StreamdownRender = memo<Options>(({ children, ...rest }) => {
-  const { streamSmoothingPreset = 'balanced' } = useMarkdownContext();
-  const escapedContent = useMarkdownContent(children || '');
-  const smoothedContent = useSmoothStreamContent(
-    typeof escapedContent === 'string' ? escapedContent : '',
-    { preset: streamSmoothingPreset },
-  );
-  const markdownOptions = useStableValue(rest);
-
-  return <StreamdownBlocks content={smoothedContent} markdownOptions={markdownOptions} />;
-});
-
-StreamdownRender.displayName = 'StreamdownRender';
-
-export default StreamdownRender;

package/ui/src/Markdown/SyntaxMarkdown/fenceState.test.ts

@@ -1,55 +0,0 @@
-import { describe, expect, it } from 'vitest';
-
-import { findOpenFenceLanguage } from './fenceState';
-
-describe('findOpenFenceLanguage', () => {
-  it('returns null for plain prose', () => {
-    expect(findOpenFenceLanguage('Hello there')).toBe(null);
-    expect(findOpenFenceLanguage('')).toBe(null);
-  });
-
-  it('returns the language while a fence is open', () => {
-    expect(findOpenFenceLanguage('```html\n<!DOCTYPE')).toBe('html');
-    expect(findOpenFenceLanguage('intro\n\n```html\n<html>')).toBe('html');
-  });
-
-  it('returns null when the fence has closed', () => {
-    expect(findOpenFenceLanguage('```html\n<p>x</p>\n```')).toBe(null);
-    expect(findOpenFenceLanguage('```html\n<p>x</p>\n```\ntrailing')).toBe(null);
-  });
-
-  it('lowercases the language', () => {
-    expect(findOpenFenceLanguage('```HTML\n<!DOCTYPE')).toBe('html');
-    expect(findOpenFenceLanguage('```JavaScript\nconst x')).toBe('javascript');
-  });
-
-  it('handles a bare ``` open fence (no language)', () => {
-    expect(findOpenFenceLanguage('```\nplain code')).toBe('');
-  });
-
-  it('tracks alternating open/close correctly', () => {
-    // 3 fences: open html, close, open js — last is js, open
-    expect(findOpenFenceLanguage('```html\nx\n```\n```js\ny')).toBe('js');
-  });
-
-  it('ignores ``` not at line start', () => {
-    // backticks in the middle of a line are inline code, not a fence
-    expect(findOpenFenceLanguage('inline `code` and ``` not-a-fence')).toBe(null);
-  });
-
-  it('returns language while streaming inside the fence', () => {
-    // Simulate progressive arrival
-    const stages = [
-      '```',
-      '```html',
-      '```html\n',
-      '```html\n<!DOC',
-      '```html\n<!DOCTYPE html>\n<html>',
-    ];
-    for (const s of stages.slice(1)) {
-      // First stage has empty language since newline hasn't arrived
-      const result = findOpenFenceLanguage(s);
-      expect(result === 'html' || result === '').toBe(true);
-    }
-  });
-});