@mieweb/ui 0.10.0-dev.3 → 0.10.0-dev.30

package/dist/chunk-VPTASZ2O.cjs

@@ -0,0 +1,171 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+// src/hooks/useStickToBottom.ts
+function pinToBottom(el) {
+  el.scrollTop = el.scrollHeight;
+}
+function useStickToBottom({
+  threshold = 100,
+  disabled = false
+} = {}) {
+  const containerRef = React__namespace.useRef(null);
+  const contentRef = React__namespace.useRef(null);
+  const [isAtBottom, setIsAtBottom] = React__namespace.useState(true);
+  const pinnedRef = React__namespace.useRef(true);
+  const readingRef = React__namespace.useRef(false);
+  const anchorTargetRef = React__namespace.useRef(null);
+  const anchorDistanceRef = React__namespace.useRef(Infinity);
+  const [containerEl, setContainerEl] = React__namespace.useState(
+    null
+  );
+  const [contentEl, setContentEl] = React__namespace.useState(null);
+  React__namespace.useEffect(() => {
+    if (containerRef.current !== containerEl)
+      setContainerEl(containerRef.current);
+    if (contentRef.current !== contentEl) setContentEl(contentRef.current);
+  });
+  React__namespace.useEffect(() => {
+    if (disabled) return;
+    const el = containerEl;
+    if (!el) return;
+    const handleScroll = () => {
+      const anchorTarget = anchorTargetRef.current;
+      if (anchorTarget != null) {
+        const distance = Math.abs(el.scrollTop - anchorTarget);
+        if (distance < 2) {
+          anchorTargetRef.current = null;
+        } else if (distance > anchorDistanceRef.current + 1) {
+          anchorTargetRef.current = null;
+        } else {
+          anchorDistanceRef.current = distance;
+          return;
+        }
+      }
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;
+      if (!atBottom) readingRef.current = false;
+      pinnedRef.current = atBottom && !readingRef.current;
+      setIsAtBottom(atBottom);
+    };
+    if (pinnedRef.current) pinToBottom(el);
+    handleScroll();
+    el.addEventListener("scroll", handleScroll, { passive: true });
+    return () => el.removeEventListener("scroll", handleScroll);
+  }, [containerEl, threshold, disabled]);
+  React__namespace.useEffect(() => {
+    if (disabled) return;
+    const el = containerEl;
+    if (!el || typeof globalThis.ResizeObserver === "undefined") return;
+    const observer = new globalThis.ResizeObserver(() => {
+      if (pinnedRef.current) {
+        pinToBottom(el);
+        return;
+      }
+      if (anchorTargetRef.current != null) return;
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;
+      if (!atBottom) readingRef.current = false;
+      setIsAtBottom(atBottom);
+    });
+    observer.observe(el);
+    if (contentEl) observer.observe(contentEl);
+    return () => observer.disconnect();
+  }, [containerEl, contentEl, threshold, disabled]);
+  const scrollToBottom = React__namespace.useCallback(
+    (behavior = "auto") => {
+      const el = containerRef.current;
+      if (!el) return;
+      readingRef.current = false;
+      anchorTargetRef.current = null;
+      pinnedRef.current = true;
+      setIsAtBottom(true);
+      if (typeof el.scrollTo === "function") {
+        el.scrollTo({ top: el.scrollHeight, behavior });
+      } else {
+        pinToBottom(el);
+      }
+    },
+    []
+  );
+  const anchorToTurnStart = React__namespace.useCallback(
+    (target, behavior = "auto") => {
+      const el = containerRef.current;
+      if (!el) return;
+      readingRef.current = true;
+      pinnedRef.current = false;
+      const top = Math.min(
+        target.getBoundingClientRect().top - el.getBoundingClientRect().top + el.scrollTop,
+        el.scrollHeight - el.clientHeight
+      );
+      if (Math.abs(el.scrollTop - top) < 2) return;
+      anchorTargetRef.current = top;
+      anchorDistanceRef.current = Infinity;
+      if (typeof el.scrollTo === "function") {
+        el.scrollTo({ top, behavior });
+      } else {
+        el.scrollTop = top;
+      }
+    },
+    []
+  );
+  const followIfPinned = React__namespace.useCallback(
+    (behavior = "auto") => {
+      if (!pinnedRef.current) return false;
+      scrollToBottom(behavior);
+      return true;
+    },
+    [scrollToBottom]
+  );
+  const stopFollowing = React__namespace.useCallback(() => {
+    readingRef.current = true;
+    pinnedRef.current = false;
+  }, []);
+  return {
+    containerRef,
+    contentRef,
+    isAtBottom,
+    scrollToBottom,
+    anchorToTurnStart,
+    followIfPinned,
+    stopFollowing
+  };
+}
+function useStreamEndedBelowFold(newest, isAtBottom, onEnded, onEndedAtBottom) {
+  const streamingIdRef = React__namespace.useRef(null);
+  React__namespace.useEffect(() => {
+    if (newest?.status === "streaming") {
+      streamingIdRef.current = newest.id;
+      return;
+    }
+    if (streamingIdRef.current && newest?.id === streamingIdRef.current) {
+      streamingIdRef.current = null;
+      if (!isAtBottom) onEnded();
+      else onEndedAtBottom?.();
+    }
+  }, [newest, isAtBottom, onEnded, onEndedAtBottom]);
+}
+
+exports.useStickToBottom = useStickToBottom;
+exports.useStreamEndedBelowFold = useStreamEndedBelowFold;
+//# sourceMappingURL=chunk-VPTASZ2O.cjs.map
+//# sourceMappingURL=chunk-VPTASZ2O.cjs.map

package/dist/chunk-VPTASZ2O.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useStickToBottom.ts"],"names":["React"],"mappings":"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","file":"chunk-VPTASZ2O.cjs","sourcesContent":["import * as React from 'react';\n\n/**\n * Options for {@link useStickToBottom}.\n */\nexport interface UseStickToBottomOptions {\n  /**\n   * Distance from the bottom (px) within which the user still counts as \"at\n   * the bottom\" — small offsets from rounding or momentum scrolling shouldn't\n   * break pinning.\n   */\n  threshold?: number;\n  /**\n   * Disable all behavior (listeners and observers detach). Useful when the\n   * scroll container anchors somewhere other than the bottom (e.g. a\n   * newest-first feed).\n   */\n  disabled?: boolean;\n}\n\nexport interface UseStickToBottomReturn {\n  /** Attach to the scrollable container. */\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  /**\n   * Attach to the element wrapping the container's content. Its growth (e.g.\n   * a streaming message) re-pins the scroll while the user is at the bottom.\n   */\n  contentRef: React.RefObject<HTMLDivElement | null>;\n  /** Whether the user is currently at (or within `threshold` of) the bottom. */\n  isAtBottom: boolean;\n  /** Scroll to the bottom and resume pinning. */\n  scrollToBottom: (behavior?: ScrollBehavior) => void;\n  /**\n   * Scroll so `target`'s top aligns with the viewport top and enter “reading”\n   * mode: content growing past the fold no longer auto-follows, so the reader\n   * consumes the response at their own pace (the ChatGPT/Claude send UX).\n   * Following resumes when they explicitly return to the bottom — a\n   * jump-to-bottom click (`scrollToBottom`) or scrolling there by hand.\n   */\n  anchorToTurnStart: (target: HTMLElement, behavior?: ScrollBehavior) => void;\n  /**\n   * Scroll to the bottom only while actually following (at the bottom and not\n   * in reading mode). Returns whether it scrolled — hosts use this to decide\n   * between following an appended message and raising a “new messages” hint.\n   */\n  followIfPinned: (behavior?: ScrollBehavior) => boolean;\n  /**\n   * Hold the current position: enter reading mode without scrolling, so an\n   * incoming stream fills below the fold instead of pushing the view up.\n   * Call right after a streaming message appends (optionally after revealing\n   * its first line with `followIfPinned`). Following resumes exactly as after\n   * `anchorToTurnStart`: an explicit `scrollToBottom` or the reader returning\n   * to the bottom by hand.\n   */\n  stopFollowing: () => void;\n}\n\nfunction pinToBottom(el: HTMLElement) {\n  el.scrollTop = el.scrollHeight;\n}\n\n/**\n * Keeps a scroll container pinned to its bottom edge while the user is there,\n * and — crucially — leaves the scroll position alone once they scroll up.\n *\n * Designed for chat threads with streaming responses:\n * - While the user is at the bottom, content growth (new tokens, new\n *   messages) and container resizes (on-screen keyboard, growing composer)\n *   keep the newest content in view via a `ResizeObserver` on both the\n *   content and the container.\n * - Once the user scrolls up, nothing moves until they return to the bottom\n *   themselves or the host calls `scrollToBottom` (e.g. a jump-to-bottom\n *   button, or an outgoing message from the local user).\n *\n * The hook only pins; *when* to force a scroll (own message sent, thread\n * switched) stays a host decision through `scrollToBottom`,\n * `anchorToTurnStart` (ChatGPT-style: scroll a fresh turn to the viewport top\n * and pause following while the reader digests the reply), and\n * `followIfPinned` (follow an append only while actually at the bottom).\n *\n * @example\n * ```tsx\n * const { containerRef, contentRef, isAtBottom, scrollToBottom } =\n *   useStickToBottom();\n * return (\n *   <div className=\"relative min-h-0 flex-1\">\n *     <div ref={containerRef} className=\"h-full overflow-y-auto\">\n *       <div ref={contentRef}>{rows}</div>\n *     </div>\n *     {!isAtBottom && <JumpToBottom onClick={() => scrollToBottom('smooth')} />}\n *   </div>\n * );\n * ```\n */\nexport function useStickToBottom({\n  threshold = 100,\n  disabled = false,\n}: UseStickToBottomOptions = {}): UseStickToBottomReturn {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const [isAtBottom, setIsAtBottom] = React.useState(true);\n  // Mirror of `isAtBottom` readable synchronously from observer callbacks\n  // without re-subscribing them on every scroll.\n  const pinnedRef = React.useRef(true);\n  // “Reading” mode (entered via `anchorToTurnStart`): the viewport sits at the\n  // reserved space below a fresh turn — geometrically the bottom — but growth\n  // must NOT follow. Cleared once the position genuinely leaves the bottom\n  // (content outgrew the reserve or the user scrolled up), after which the\n  // normal pin-at-bottom rules apply again.\n  const readingRef = React.useRef(false);\n  // In-flight anchor animation: a smooth `anchorToTurnStart` fires scroll\n  // events that are neither the user's nor at the bottom — they must not end\n  // reading mode or re-pin. Cleared on arrival at the target, or when the\n  // distance to it grows (the user grabbed the scroll mid-animation).\n  const anchorTargetRef = React.useRef<number | null>(null);\n  const anchorDistanceRef = React.useRef(Infinity);\n\n  // Hosts can re-attach the refs to new DOM nodes without remounting (e.g.\n  // SuperChat swapping its plain thread for the virtualized one when the\n  // conversation grows). Mirror the current nodes into state so the listener\n  // and observer effects below re-bind whenever the target changes.\n  const [containerEl, setContainerEl] = React.useState<HTMLDivElement | null>(\n    null\n  );\n  const [contentEl, setContentEl] = React.useState<HTMLDivElement | null>(null);\n  // Intentionally dep-less: ref mutations don't trigger renders, so this must\n  // check after every render. The inequality guards make it settle immediately.\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  React.useEffect(() => {\n    if (containerRef.current !== containerEl)\n      setContainerEl(containerRef.current);\n    if (contentRef.current !== contentEl) setContentEl(contentRef.current);\n  });\n\n  // Track the user's position: at (or near) the bottom means \"pinned\".\n  React.useEffect(() => {\n    if (disabled) return;\n    const el = containerEl;\n    if (!el) return;\n\n    const handleScroll = () => {\n      const anchorTarget = anchorTargetRef.current;\n      if (anchorTarget != null) {\n        const distance = Math.abs(el.scrollTop - anchorTarget);\n        if (distance < 2) {\n          anchorTargetRef.current = null; // arrived — handle normally\n        } else if (distance > anchorDistanceRef.current + 1) {\n          anchorTargetRef.current = null; // user took over mid-animation\n        } else {\n          anchorDistanceRef.current = distance;\n          return; // the animation's own events don't change pinning\n        }\n      }\n      const atBottom =\n        el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;\n      if (!atBottom) readingRef.current = false;\n      pinnedRef.current = atBottom && !readingRef.current;\n      setIsAtBottom(atBottom);\n    };\n\n    // A freshly attached node starts at `scrollTop` 0 — re-assert carried-over\n    // pinning (e.g. across SuperChat's plain ⇄ virtualized swap) instead of\n    // letting the initial read demote a pinned reader to \"scrolled up\".\n    if (pinnedRef.current) pinToBottom(el);\n    handleScroll(); // initial position\n    el.addEventListener('scroll', handleScroll, { passive: true });\n    return () => el.removeEventListener('scroll', handleScroll);\n  }, [containerEl, threshold, disabled]);\n\n  // While pinned, follow growth of the content (streaming tokens, appended\n  // rows) and shrinking of the container (on-screen keyboard, composer\n  // growing) so the newest content stays in view. While unpinned this\n  // observer never touches the scroll position.\n  React.useEffect(() => {\n    if (disabled) return;\n    const el = containerEl;\n    if (!el || typeof globalThis.ResizeObserver === 'undefined') return;\n\n    const observer = new globalThis.ResizeObserver(() => {\n      if (pinnedRef.current) {\n        pinToBottom(el);\n        return;\n      }\n      // Mid-anchor-animation the position is transient — judge nothing yet.\n      if (anchorTargetRef.current != null) return;\n      // Not following: growth can still silently carry the position away from\n      // the bottom (no scroll event fires), so recompute the state here — it\n      // drives the jump-to-bottom affordance and ends reading mode once the\n      // response outgrows its reserved space.\n      const atBottom =\n        el.scrollHeight - el.scrollTop - el.clientHeight <= threshold;\n      if (!atBottom) readingRef.current = false;\n      setIsAtBottom(atBottom);\n    });\n    observer.observe(el);\n    if (contentEl) observer.observe(contentEl);\n    return () => observer.disconnect();\n  }, [containerEl, contentEl, threshold, disabled]);\n\n  const scrollToBottom = React.useCallback(\n    (behavior: ScrollBehavior = 'auto') => {\n      const el = containerRef.current;\n      if (!el) return;\n      // Pin immediately so a concurrent stream keeps following while a\n      // smooth scroll animates down.\n      readingRef.current = false;\n      anchorTargetRef.current = null;\n      pinnedRef.current = true;\n      setIsAtBottom(true);\n      if (typeof el.scrollTo === 'function') {\n        el.scrollTo({ top: el.scrollHeight, behavior });\n      } else {\n        pinToBottom(el); // jsdom fallback\n      }\n    },\n    []\n  );\n\n  const anchorToTurnStart = React.useCallback(\n    (target: HTMLElement, behavior: ScrollBehavior = 'auto') => {\n      const el = containerRef.current;\n      if (!el) return;\n      readingRef.current = true;\n      pinnedRef.current = false;\n      // Clamp to the reachable range so the “arrived” check always resolves.\n      const top = Math.min(\n        target.getBoundingClientRect().top -\n          el.getBoundingClientRect().top +\n          el.scrollTop,\n        el.scrollHeight - el.clientHeight\n      );\n      // Already there: `scrollTo` emits no scroll event, so tracking an\n      // in-flight animation would swallow observer updates forever.\n      if (Math.abs(el.scrollTop - top) < 2) return;\n      anchorTargetRef.current = top;\n      anchorDistanceRef.current = Infinity;\n      if (typeof el.scrollTo === 'function') {\n        el.scrollTo({ top, behavior });\n      } else {\n        el.scrollTop = top; // jsdom fallback\n      }\n    },\n    []\n  );\n\n  const followIfPinned = React.useCallback(\n    (behavior: ScrollBehavior = 'auto') => {\n      if (!pinnedRef.current) return false;\n      scrollToBottom(behavior);\n      return true;\n    },\n    [scrollToBottom]\n  );\n\n  const stopFollowing = React.useCallback(() => {\n    readingRef.current = true;\n    pinnedRef.current = false;\n  }, []);\n\n  return {\n    containerRef,\n    contentRef,\n    isAtBottom,\n    scrollToBottom,\n    anchorToTurnStart,\n    followIfPinned,\n    stopFollowing,\n  };\n}\n\n/**\n * Companion to {@link useStickToBottom}: fires `onEnded` when the newest\n * message finishes streaming while the reader is away from the bottom — the\n * end of the reply landed below the fold, so the jump-to-bottom button should\n * upgrade to its “new messages” hint. When the whole reply fit above the fold\n * (the reader is still at the bottom), `onEndedAtBottom` fires instead so the\n * host can exit the stream's hold and resume following (`scrollToBottom`).\n */\nexport function useStreamEndedBelowFold(\n  newest: { id: string; status?: string } | undefined,\n  isAtBottom: boolean,\n  onEnded: () => void,\n  onEndedAtBottom?: () => void\n) {\n  const streamingIdRef = React.useRef<string | null>(null);\n  React.useEffect(() => {\n    if (newest?.status === 'streaming') {\n      streamingIdRef.current = newest.id;\n      return;\n    }\n    if (streamingIdRef.current && newest?.id === streamingIdRef.current) {\n      streamingIdRef.current = null;\n      if (!isAtBottom) onEnded();\n      else onEndedAtBottom?.();\n    }\n  }, [newest, isAtBottom, onEnded, onEndedAtBottom]);\n}\n"]}