@nswds/app 1.74.0 → 1.75.0

package/dist/index.d.cts

@@ -1192,19 +1192,20 @@ declare function Header({ children, sitename, navigation, version, hide, }: {
     };
 }): react_jsx_runtime.JSX.Element;
 
-type BaseProps$1 = React.ComponentPropsWithoutRef<'h1'>;
+type BaseProps$1 = React__default.ComponentPropsWithoutRef<'h1'>;
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 type HeadingProps = ({
     display?: false;
     size?: 1 | 2 | 3 | 4 | 5 | 6;
     trim?: 'normal' | 'start' | 'end' | 'both';
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    level?: HeadingLevel;
 } & BaseProps$1) | ({
     display: true;
     size?: 1 | 2 | 3 | 4;
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    level?: HeadingLevel;
     trim?: 'normal' | 'start' | 'end' | 'both';
 } & BaseProps$1);
-declare function Heading({ className, trim, size, level, display, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare function Heading({ className, trim, size, level, display, id: idProp, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
 
 declare const heroBannerVariants: (props?: ({
     variant?: "white" | "primary-800" | "grey-150" | "accent-800" | "primary-200" | null | undefined;

package/dist/index.d.ts

@@ -1192,19 +1192,20 @@ declare function Header({ children, sitename, navigation, version, hide, }: {
     };
 }): react_jsx_runtime.JSX.Element;
 
-type BaseProps$1 = React.ComponentPropsWithoutRef<'h1'>;
+type BaseProps$1 = React__default.ComponentPropsWithoutRef<'h1'>;
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 type HeadingProps = ({
     display?: false;
     size?: 1 | 2 | 3 | 4 | 5 | 6;
     trim?: 'normal' | 'start' | 'end' | 'both';
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    level?: HeadingLevel;
 } & BaseProps$1) | ({
     display: true;
     size?: 1 | 2 | 3 | 4;
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    level?: HeadingLevel;
     trim?: 'normal' | 'start' | 'end' | 'both';
 } & BaseProps$1);
-declare function Heading({ className, trim, size, level, display, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+declare function Heading({ className, trim, size, level, display, id: idProp, children, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
 
 declare const heroBannerVariants: (props?: ({
     variant?: "white" | "primary-800" | "grey-150" | "accent-800" | "primary-200" | null | undefined;

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, useMemo, useRef, useInsertionEffect, useLayoutEffect, Fragment as Fragment$1, createElement, useCallback, Suspense, useId, Component } from 'react';
+import React5__default, { forwardRef, useEffect, createContext, useState, useContext, useMemo, useRef, useInsertionEffect, useLayoutEffect, Fragment as Fragment$1, createElement, useCallback, Suspense, useId, isValidElement, 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';
@@ -17412,16 +17412,31 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.73.0"};
+  version: "1.74.0"};
+function flattenText(nodes) {
+  if (nodes == null || typeof nodes === "boolean") return "";
+  if (typeof nodes === "string" || typeof nodes === "number") return String(nodes);
+  if (Array.isArray(nodes)) return nodes.map(flattenText).join("");
+  if (isValidElement(nodes)) {
+    const { children } = nodes.props;
+    return flattenText(children);
+  }
+  return "";
+}
+function slugify(input) {
+  return input.toLowerCase().trim().replace(/[\s\W]+/g, "-").replace(/^-+|-+$/g, "");
+}
 function Heading({
   className,
   trim = "normal",
   size = 1,
   level = 1,
   display = false,
+  id: idProp,
+  children,
   ...props
 }) {
-  const Element2 = `h${level}`;
+  const Tag = `h${level}`;
   const headingSizeClasses = {
     1: "text-[calc(var(--heading-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
     2: "text-[calc(var(--heading-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
@@ -17453,10 +17468,17 @@ function Heading({
       "after:mt-[calc(var(--leading-trim-end,var(--default-leading-trim-end))-var(--line-height,calc(1em*var(--default-line-height)))/2)]"
     ]
   };
+  const computedId = useMemo(() => {
+    if (idProp) return idProp;
+    const text = flattenText(children);
+    return text ? slugify(text) : void 0;
+  }, [idProp, children]);
   return /* @__PURE__ */ jsx(
-    Element2,
+    Tag,
     {
       ...props,
+      id: computedId,
+      "data-anchor": true,
       className: clsx12(
         className,
         trimClasses[trim],
@@ -17465,7 +17487,8 @@ function Heading({
         "[--leading-trim-end:var(--heading-leading-trim-end)] [--leading-trim-start:var(--heading-leading-trim-start)]",
         "text-primary-800 dark:text-white",
         sizeClass
-      )
+      ),
+      children
     }
   );
 }
@@ -29856,9 +29879,12 @@ function useActiveSectionObserver(tableOfContents) {
   return currentSection;
 }
 function TableOfContents({ tableOfContents }) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  const currentSection = useActiveSectionObserver(mounted ? tableOfContents : []);
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const raf = requestAnimationFrame(() => setReady(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  const currentSection = useActiveSectionObserver(ready ? tableOfContents : []);
   const isActive = useMemo(() => {
     const check = (section) => {
       if (section.id === currentSection) return true;
@@ -29866,8 +29892,8 @@ function TableOfContents({ tableOfContents }) {
     };
     return check;
   }, [currentSection]);
-  return /* @__PURE__ */ jsx("nav", { "aria-labelledby": "on-this-page-title", className: "w-56", suppressHydrationWarning: true, children: !mounted ? (
-    // lightweight placeholder to avoid layout shift (optional)
+  return /* @__PURE__ */ jsx("nav", { "aria-labelledby": "on-this-page-title", className: "w-56", suppressHydrationWarning: true, children: !ready ? (
+    // SSR + initial client paint: deterministic skeleton
     /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "mt-3 space-y-2", children: [
       /* @__PURE__ */ jsx("div", { className: "h-4 w-40 animate-pulse rounded bg-black/10 dark:bg-white/10" }),
       /* @__PURE__ */ jsx("div", { className: "h-3 w-32 animate-pulse rounded bg-black/10 dark:bg-white/10" }),
@@ -30557,7 +30583,7 @@ function domToSimple(node) {
   }
   throw new Error("Unsupported node type");
 }
-function getHeadings(slugify = slugifyWithCounter()) {
+function getHeadings(slugify2 = slugifyWithCounter()) {
   const content = document.querySelector("article");
   if (!content) {
     return [];
@@ -30568,7 +30594,7 @@ function getHeadings(slugify = slugifyWithCounter()) {
   headings.forEach((el) => {
     const simplifiedNode = domToSimple(el);
     const title = getNodeText(simplifiedNode).trim();
-    const slugifiedTitle = slugify(title);
+    const slugifiedTitle = slugify2(title);
     const id3 = el.id || slugifiedTitle;
     const level = parseInt(el.tagName[1]);
     const node = { level, id: id3, title, children: [] };
@@ -30591,14 +30617,27 @@ function getHeadings(slugify = slugifyWithCounter()) {
 }
 function usePageHeadings() {
   const [headings, setHeadings] = useState([]);
-  const pathname = usePathname();
   useEffect(() => {
-    const timer = setTimeout(() => {
-      const result = getHeadings();
-      setHeadings(result);
-    }, 0);
-    return () => clearTimeout(timer);
-  }, [pathname]);
+    const raf = requestAnimationFrame(() => {
+      setHeadings(getHeadings());
+    });
+    const observer = new MutationObserver(() => {
+      setHeadings(getHeadings());
+    });
+    const article = document.querySelector("article");
+    if (article) {
+      observer.observe(article, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["id"]
+      });
+    }
+    return () => {
+      cancelAnimationFrame(raf);
+      observer.disconnect();
+    };
+  }, []);
   return headings;
 }
 function createFormStore(opts) {