@nswds/app 1.85.0 → 1.85.1

package/dist/index.js

@@ -5,7 +5,7 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import * as React5 from 'react';
-import React5__default, { forwardRef, useEffect, createContext, useState, useContext, memo as memo$1, useMemo, useRef, useInsertionEffect, useLayoutEffect, Fragment as Fragment$1, createElement, useCallback, Suspense, useId, Children, Component } from 'react';
+import React5__default, { forwardRef, useEffect, createContext, useState, useContext, memo as memo$1, useRef, useMemo, useInsertionEffect, useLayoutEffect, Fragment as Fragment$1, createElement, useCallback, Suspense, useId, Children, useSyncExternalStore, Component } from 'react';
 import * as Headless4 from '@headlessui/react';
 import { PopoverGroup, Popover as Popover$1, PopoverButton, PopoverPanel, Dialog as Dialog$1, DialogPanel } from '@headlessui/react';
 import Link12 from 'next/link';
@@ -7987,8 +7987,18 @@ var formatNumber = (num) => {
 };
 var BarLabels = ({ values }) => {
   const sumValues = React5__default.useMemo(() => sumNumericArray(values), [values]);
-  let prefixSum = 0;
-  let sumConsecutiveHiddenLabels = 0;
+  const prefixSums = values.reduce((acc, val, idx) => {
+    acc.push((acc[idx - 1] ?? 0) + val);
+    return acc;
+  }, []);
+  let runningSum = 0;
+  const sumConsecutiveHiddenLabelsArr = values.map(() => 0);
+  values.forEach((widthPercentage, index) => {
+    const prefixSum = prefixSums[index];
+    const showLabel = (widthPercentage >= 0.1 * sumValues || runningSum >= 0.09 * sumValues) && sumValues - prefixSum >= 0.1 * sumValues && prefixSum >= 0.1 * sumValues && prefixSum < 0.9 * sumValues;
+    sumConsecutiveHiddenLabelsArr[index] = runningSum;
+    runningSum = showLabel ? 0 : runningSum + widthPercentage;
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -8001,9 +8011,9 @@ var BarLabels = ({ values }) => {
       children: [
         /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 flex items-center", children: "0" }),
         values.map((widthPercentage, index) => {
-          prefixSum += widthPercentage;
+          const prefixSum = prefixSums[index];
+          const sumConsecutiveHiddenLabels = sumConsecutiveHiddenLabelsArr[index];
           const showLabel = (widthPercentage >= 0.1 * sumValues || sumConsecutiveHiddenLabels >= 0.09 * sumValues) && sumValues - prefixSum >= 0.1 * sumValues && prefixSum >= 0.1 * sumValues && prefixSum < 0.9 * sumValues;
-          sumConsecutiveHiddenLabels = showLabel ? 0 : sumConsecutiveHiddenLabels += widthPercentage;
           const widthPositionLeft = getPositionLeft(widthPercentage, sumValues);
           return /* @__PURE__ */ jsx(
             "div",
@@ -17493,7 +17503,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.83.6"};
+  version: "1.85.0"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -18810,13 +18820,14 @@ function useSelectorHeight(selector = "header") {
     const element = document.querySelector(selector);
     if (!element) return;
     elementRef.current = element;
-    setHeight(element.offsetHeight);
-    resizeObserverRef.current = new ResizeObserver(() => {
-      if (elementRef.current) {
-        setHeight(elementRef.current.offsetHeight);
-      }
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const target = entry?.target ?? elementRef.current;
+      if (!target) return;
+      setHeight(target.offsetHeight);
     });
-    resizeObserverRef.current.observe(element);
+    resizeObserverRef.current = resizeObserver;
+    resizeObserver.observe(element);
     return () => {
       resizeObserverRef.current?.disconnect();
     };
@@ -26074,6 +26085,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       this.treeScale = { x: 1, y: 1 };
       this.eventHandlers = /* @__PURE__ */ new Map();
       this.hasTreeAnimated = false;
+      this.layoutVersion = 0;
       this.updateScheduled = false;
       this.scheduleUpdate = () => this.update();
       this.projectionUpdateScheduled = false;
@@ -26091,6 +26103,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
         this.nodes.forEach(cleanDirtyNodes);
       };
       this.resolvedRelativeTargetAt = 0;
+      this.linkedParentVersion = 0;
       this.hasProjected = false;
       this.isVisible = true;
       this.animationProgress = 0;
@@ -26346,6 +26359,7 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       }
       const prevLayout = this.layout;
       this.layout = this.measure(false);
+      this.layoutVersion++;
       this.layoutCorrected = createBox();
       this.isLayoutDirty = false;
       this.projectionDelta = void 0;
@@ -26513,17 +26527,15 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       if (!this.layout || !(layout2 || layoutId))
         return;
       this.resolvedRelativeTargetAt = frameData.timestamp;
+      const relativeParent = this.getClosestProjectingParent();
+      if (relativeParent && this.linkedParentVersion !== relativeParent.layoutVersion && !relativeParent.options.layoutRoot) {
+        this.removeRelativeTarget();
+      }
       if (!this.targetDelta && !this.relativeTarget) {
-        const relativeParent = this.getClosestProjectingParent();
-        if (relativeParent && relativeParent.layout && this.animationProgress !== 1) {
-          this.relativeParent = relativeParent;
-          this.forceRelativeParentToResolveTarget();
-          this.relativeTarget = createBox();
-          this.relativeTargetOrigin = createBox();
-          calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox);
-          copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+        if (relativeParent && relativeParent.layout) {
+          this.createRelativeTarget(relativeParent, this.layout.layoutBox, relativeParent.layout.layoutBox);
         } else {
-          this.relativeParent = this.relativeTarget = void 0;
+          this.removeRelativeTarget();
         }
       }
       if (!this.relativeTarget && !this.targetDelta)
@@ -26547,14 +26559,8 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
       }
       if (this.attemptToResolveRelativeTarget) {
         this.attemptToResolveRelativeTarget = false;
-        const relativeParent = this.getClosestProjectingParent();
         if (relativeParent && Boolean(relativeParent.resumingFrom) === Boolean(this.resumingFrom) && !relativeParent.options.layoutScroll && relativeParent.target && this.animationProgress !== 1) {
-          this.relativeParent = relativeParent;
-          this.forceRelativeParentToResolveTarget();
-          this.relativeTarget = createBox();
-          this.relativeTargetOrigin = createBox();
-          calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target);
-          copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+          this.createRelativeTarget(relativeParent, this.target, relativeParent.target);
         } else {
           this.relativeParent = this.relativeTarget = void 0;
         }
@@ -26573,6 +26579,18 @@ function createProjectionNode2({ attachResizeListener, defaultParent, measureScr
     isProjecting() {
       return Boolean((this.relativeTarget || this.targetDelta || this.options.layoutRoot) && this.layout);
     }
+    createRelativeTarget(relativeParent, layout2, parentLayout) {
+      this.relativeParent = relativeParent;
+      this.linkedParentVersion = relativeParent.layoutVersion;
+      this.forceRelativeParentToResolveTarget();
+      this.relativeTarget = createBox();
+      this.relativeTargetOrigin = createBox();
+      calcRelativePosition(this.relativeTargetOrigin, layout2, parentLayout);
+      copyBoxInto(this.relativeTarget, this.relativeTargetOrigin);
+    }
+    removeRelativeTarget() {
+      this.relativeParent = this.relativeTarget = void 0;
+    }
     calcProjection() {
       const lead = this.getLead();
       const isShared = Boolean(this.resumingFrom) || this !== lead;
@@ -28997,9 +29015,9 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React5.useMemo(() => {
+  const [width] = React5.useState(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
-  }, []);
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -30341,66 +30359,47 @@ function ThemeColorPaletteLoading() {
     ] }, i)) })
   ] });
 }
+function getInitialThemeState(searchParams) {
+  const themeParam = searchParams.get("theme");
+  const primaryParam = searchParams.get("primary");
+  const accentParam = searchParams.get("accent");
+  const themeCategory = themeParam === "aboriginal" ? "aboriginal" : "brand";
+  let primaryColor = "blue";
+  let accentColor = "red";
+  const availableColors = Object.keys(colorThemes[themeCategory]);
+  if (primaryParam && availableColors.includes(primaryParam)) {
+    primaryColor = primaryParam;
+  } else if (!availableColors.includes(primaryColor)) {
+    primaryColor = availableColors[0];
+  }
+  if (accentParam && availableColors.includes(accentParam) && accentParam !== primaryColor) {
+    accentColor = accentParam;
+  } else {
+    const newAccent = availableColors.find((c) => c !== primaryColor);
+    if (newAccent) accentColor = newAccent;
+  }
+  const neutralKey = Object.keys(colorThemes[themeCategory]).find((k) => k.toLowerCase().includes("grey")) ?? "grey";
+  return { themeCategory, primaryColor, accentColor, greyColor: neutralKey };
+}
 function ThemeColorPaletteContent() {
   const searchParams = useSearchParams();
   const baseColors = {
     brand,
     aboriginal
   };
+  const {
+    themeCategory: initialThemeCategory,
+    primaryColor: initialPrimaryColor,
+    accentColor: initialAccentColor,
+    greyColor: initialGreyColor
+  } = getInitialThemeState(searchParams);
   const [format, setFormat] = useState("hex");
   const [viewMode, setViewMode] = useState("grid");
-  const [themeCategory, setThemeCategory] = useState("brand");
-  const [primaryColor, setPrimaryColor] = useState("blue");
-  const [accentColor, setAccentColor] = useState("red");
-  const [greyColor, setGreyColor] = useState("grey");
+  const [themeCategory, setThemeCategory] = useState(initialThemeCategory);
+  const [primaryColor, setPrimaryColor] = useState(initialPrimaryColor);
+  const [accentColor, setAccentColor] = useState(initialAccentColor);
+  const [greyColor, setGreyColor] = useState(initialGreyColor);
   const [sheetOpen, setSheetOpen] = useState(false);
-  const [isInitialized, setIsInitialized] = useState(false);
-  useEffect(() => {
-    const themeParam = searchParams.get("theme");
-    const primaryParam = searchParams.get("primary");
-    const accentParam = searchParams.get("accent");
-    const hasUrlParams = themeParam || primaryParam || accentParam;
-    let newCategory = themeCategory;
-    let newPrimary = primaryColor;
-    let newAccent = accentColor;
-    if (themeParam && (themeParam === "brand" || themeParam === "aboriginal")) {
-      newCategory = themeParam;
-      setThemeCategory(themeParam);
-    }
-    const availableColors = Object.keys(colorThemes[newCategory]);
-    if (primaryParam && availableColors.includes(primaryParam)) {
-      newPrimary = primaryParam;
-      setPrimaryColor(primaryParam);
-    } else if (!availableColors.includes(newPrimary)) {
-      newPrimary = availableColors[0];
-      setPrimaryColor(newPrimary);
-    }
-    if (accentParam && availableColors.includes(accentParam) && accentParam !== newPrimary) {
-      newAccent = accentParam;
-      setAccentColor(accentParam);
-    } else if (hasUrlParams) {
-      const newAccentColor = availableColors.find((color2) => color2 !== newPrimary);
-      if (newAccentColor) {
-        newAccent = newAccentColor;
-        setAccentColor(newAccent);
-      }
-    } else {
-      if (!availableColors.includes(newAccent) || newAccent === newPrimary) {
-        const newAccentColor = availableColors.find((color2) => color2 !== newPrimary);
-        if (newAccentColor) {
-          newAccent = newAccentColor;
-          setAccentColor(newAccent);
-        }
-      }
-    }
-    const neutralKey = Object.keys(colorThemes[newCategory]).find(
-      (k) => k.toLowerCase().includes("grey")
-    );
-    if (neutralKey) {
-      setGreyColor(neutralKey);
-    }
-    setIsInitialized(true);
-  }, [searchParams, themeCategory, primaryColor, accentColor]);
   const filteredColorThemes = useMemo(() => {
     const filtered = {};
     for (const category of Object.keys(colorThemes)) {
@@ -30416,27 +30415,41 @@ function ThemeColorPaletteContent() {
     const allColors = Object.keys(filteredColorThemes[themeCategory]);
     return allColors.filter((color2) => color2 !== primaryColor);
   }, [filteredColorThemes, themeCategory, primaryColor]);
-  useEffect(() => {
-    if (!isInitialized) return;
-    const neutralKey = Object.keys(colorThemes[themeCategory]).find((k) => k.toLowerCase().includes("grey")) ?? "";
-    if (neutralKey && neutralKey !== greyColor) {
-      setGreyColor(neutralKey);
+  const handleThemeCategoryChange = (nextCategory) => {
+    const availableColors = Object.keys(colorThemes[nextCategory]);
+    const neutralKey = Object.keys(colorThemes[nextCategory]).find((k) => k.toLowerCase().includes("grey")) ?? greyColor;
+    let nextPrimary = primaryColor;
+    if (!availableColors.includes(nextPrimary)) {
+      nextPrimary = availableColors[0];
+    }
+    let nextAccent = accentColor;
+    if (!availableColors.includes(nextAccent) || nextAccent === nextPrimary) {
+      const newAccent = availableColors.find((c) => c !== nextPrimary);
+      if (newAccent) nextAccent = newAccent;
+    }
+    setThemeCategory(nextCategory);
+    setPrimaryColor(nextPrimary);
+    setAccentColor(nextAccent);
+    setGreyColor(neutralKey);
+  };
+  const handlePrimaryColorChange = (nextPrimary) => {
+    if (nextPrimary === primaryColor) return;
+    setPrimaryColor(nextPrimary);
+    if (nextPrimary === accentColor) {
+      const availableColors = Object.keys(colorThemes[themeCategory]);
+      const newAccent = availableColors.find((c) => c !== nextPrimary);
+      if (newAccent) setAccentColor(newAccent);
     }
-    const availableColors = Object.keys(colorThemes[themeCategory]);
-    if (!availableColors.includes(primaryColor)) {
-      setPrimaryColor(availableColors[0]);
-      if (availableColors.length > 1) {
-        setAccentColor(availableColors[1]);
-      }
+  };
+  const handleAccentColorChange = (nextAccent) => {
+    if (nextAccent === primaryColor) {
       return;
     }
-    if (accentColor === primaryColor || !availableColors.includes(accentColor)) {
-      const newAccentColor = availableColors.find((color2) => color2 !== primaryColor);
-      if (newAccentColor) {
-        setAccentColor(newAccentColor);
-      }
-    }
-  }, [themeCategory, primaryColor, accentColor, greyColor, isInitialized]);
+    setAccentColor(nextAccent);
+  };
+  const handleGreyColorChange = (nextGrey) => {
+    setGreyColor(nextGrey);
+  };
   const currentColorPalette = useMemo(() => {
     if (!colorThemes[themeCategory] || !colorThemes[themeCategory][primaryColor] || !colorThemes[themeCategory][accentColor]) {
       return [
@@ -30504,13 +30517,13 @@ function ThemeColorPaletteContent() {
             ThemeSelector,
             {
               themeCategory,
-              setThemeCategory,
+              setThemeCategory: handleThemeCategoryChange,
               primaryColor,
-              setPrimaryColor,
+              setPrimaryColor: handlePrimaryColorChange,
               accentColor,
-              setAccentColor,
+              setAccentColor: handleAccentColorChange,
               greyColor,
-              setGreyColor,
+              setGreyColor: handleGreyColorChange,
               availableAccentColors,
               colorThemes: filteredColorThemes
             }
@@ -30540,25 +30553,17 @@ var TocContext = createContext({
   setToc: () => {
   }
 });
-function TocProvider({ children }) {
+function InnerTocProvider({ children }) {
   const [toc, setToc] = useState(true);
-  const pathname = usePathname();
-  const isInitialMount = useRef(true);
-  const tocExplicitlySet = useRef(false);
-  useEffect(() => {
-    if (isInitialMount.current) {
-      isInitialMount.current = false;
-      return;
-    }
-    tocExplicitlySet.current = false;
-    setToc(true);
-  }, [pathname]);
   const handleSetToc = (value) => {
-    tocExplicitlySet.current = true;
     setToc(value);
   };
   return /* @__PURE__ */ jsx(TocContext.Provider, { value: { toc, setToc: handleSetToc }, children });
 }
+function TocProvider({ children }) {
+  const pathname = usePathname();
+  return /* @__PURE__ */ jsx(InnerTocProvider, { children }, pathname);
+}
 function useToc() {
   return useContext(TocContext);
 }
@@ -31801,24 +31806,41 @@ var InlineCitationCarouselHeader = ({
     ...props
   }
 );
+var useCarouselIndex = () => {
+  const api = useCarouselApi();
+  const subscribe = useCallback(
+    (callback) => {
+      if (!api) {
+        return () => {
+        };
+      }
+      api.on("select", callback);
+      api.on("reInit", callback);
+      return () => {
+        api.off("select", callback);
+        api.off("reInit", callback);
+      };
+    },
+    [api]
+  );
+  const getSnapshot = useCallback(() => {
+    if (!api) {
+      return { current: 0, count: 0 };
+    }
+    return {
+      current: api.selectedScrollSnap() + 1,
+      count: api.scrollSnapList().length
+    };
+  }, [api]);
+  const { current, count } = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+  return { current, count };
+};
 var InlineCitationCarouselIndex = ({
   children,
   className,
   ...props
 }) => {
-  const api = useCarouselApi();
-  const [current, setCurrent] = useState(0);
-  const [count, setCount] = useState(0);
-  useEffect(() => {
-    if (!api) {
-      return;
-    }
-    setCount(api.scrollSnapList().length);
-    setCurrent(api.selectedScrollSnap() + 1);
-    api.on("select", () => {
-      setCurrent(api.selectedScrollSnap() + 1);
-    });
-  }, [api]);
+  const { current, count } = useCarouselIndex();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -32738,17 +32760,18 @@ var Reasoning = memo$1(
       defaultProp: 0
     });
     const [hasAutoClosed, setHasAutoClosed] = useState(false);
-    const [startTime, setStartTime] = useState(null);
+    const startTimeRef = useRef(null);
     useEffect(() => {
       if (isStreaming) {
-        if (startTime === null) {
-          setStartTime(Date.now());
+        if (startTimeRef.current === null) {
+          startTimeRef.current = Date.now();
         }
-      } else if (startTime !== null) {
-        setDuration(Math.ceil((Date.now() - startTime) / MS_IN_S));
-        setStartTime(null);
+      } else if (startTimeRef.current !== null) {
+        const elapsedSeconds = Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S);
+        setDuration(elapsedSeconds);
+        startTimeRef.current = null;
       }
-    }, [isStreaming, startTime, setDuration]);
+    }, [isStreaming, setDuration]);
     useEffect(() => {
       if (defaultOpen && !isStreaming && isOpen && !hasAutoClosed) {
         const timer = setTimeout(() => {