@spfx-fast/sharepoint-ui 0.4.2 → 0.5.0

package/dist/elements.js

@@ -1,207 +0,0 @@
-import { defineButton } from "./elements/button.js";
-import { defineButtonGroup } from "./elements/button-group.js";
-import { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
-import { defineInput } from "./elements/input.js";
-import { defineFileUpload } from "./elements/file-upload.js";
-import { defineField } from "./elements/field.js";
-import { defineCard } from "./elements/card.js";
-import { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
-import { defineBadge, defineCounterBadge, definePresenceBadge } from "./elements/badge.js";
-import { defineCheckbox, defineSwitch } from "./elements/toggle.js";
-import { defineTextArea } from "./elements/textarea.js";
-import { defineSpinner } from "./elements/spinner.js";
-import { defineMessageBar } from "./elements/message-bar.js";
-import { defineViewCard } from "./elements/view-card.js";
-import { defineDialog } from "./elements/dialog.js";
-import { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
-import { defineProgressBar } from "./elements/progress-bar.js";
-import { defineSelect } from "./elements/select.js";
-import { defineRadioGroup } from "./elements/radio-group.js";
-import { defineSpinButton } from "./elements/spin-button.js";
-import { defineSlider } from "./elements/slider.js";
-import { defineDatePicker } from "./elements/date-picker.js";
-import { defineCombobox } from "./elements/combobox.js";
-import { defineRichTextEditor } from "./elements/rich-text-editor.js";
-import { defineAlert } from "./elements/alert.js";
-import { defineSkeleton } from "./elements/skeleton.js";
-import { defineLink } from "./elements/link.js";
-import { defineDivider } from "./elements/divider.js";
-import { defineAccordion } from "./elements/accordion.js";
-import { defineAvatar } from "./elements/avatar.js";
-import { defineAvatarGroup } from "./elements/avatar-group.js";
-import { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
-import { definePersona } from "./elements/persona.js";
-import { defineVirtualList } from "./elements/virtual-list.js";
-import { defineDataGrid } from "./elements/data-grid.js";
-import { defineTree } from "./elements/tree.js";
-import { defineInteractionTag, defineTag, defineTagGroup } from "./elements/tags.js";
-import { defineTagPicker } from "./elements/tag-picker.js";
-import { defineRating } from "./elements/rating.js";
-import { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
-import { defineList, defineListItem } from "./elements/list.js";
-import { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
-import { defineTabs } from "./elements/tabs.js";
-import { defineTooltip } from "./elements/tooltip.js";
-import { definePopover } from "./elements/popover.js";
-import { defineTeachingPopover } from "./elements/teaching-popover.js";
-import { defineMenu, defineMenuItem, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuBar, defineMenuBarItem } from "./elements/menu.js";
-import { defineText } from "./elements/text.js";
-import { defineToast } from "./elements/toast.js";
-import { defineToaster } from "./elements/toaster.js";
-import { defineSearchBox } from "./elements/search.js";
-import { defineColorPicker } from "./elements/color-picker.js";
-import { defineToolbar } from "./elements/toolbar.js";
-import { defineNav } from "./elements/nav.js";
-import { defineInfoButton } from "./elements/info.js";
-import { defineCarousel } from "./elements/carousel.js";
-import { defineOverflow } from "./elements/overflow.js";
-import { defineSwatchPicker } from "./elements/swatch-picker.js";
-import { defineTable } from "./elements/table.js";
-export { createLabel, getLabelStyle } from "./elements/label.js";
-export { defineInfoButton, createInfoLabel } from "./elements/info.js";
-export { defineCarousel, defineCarouselCard, defineCarouselNav, defineCarouselNavButton, defineCarouselNavImageButton, defineCarouselButton, defineCarouselAutoplayButton, defineCarouselNavContainer, defineCarouselSlider, defineCarouselViewport } from "./elements/carousel.js";
-export { defineOverflow, defineOverflowItem, defineOverflowDivider } from "./elements/overflow.js";
-export { defineSwatchPicker, defineColorSwatch, defineImageSwatch, defineEmptySwatch, defineSwatchPickerRow } from "./elements/swatch-picker.js";
-export { createTableColumn, defineTable, defineTableHeader, defineTableBody, defineTableRow, defineTableHeaderCell, defineTableCell, defineTableCellLayout, defineTableCellActions, defineTableResizeHandle, defineTableSelectionCell } from "./elements/table.js";
-export { defineButton } from "./elements/button.js";
-export { defineButtonGroup } from "./elements/button-group.js";
-export { defineCompoundButton, defineMenuButton, defineSplitButton, defineToggleButton } from "./elements/button-variants.js";
-export { defineInput } from "./elements/input.js";
-export { defineFileUpload } from "./elements/file-upload.js";
-export { createImage, getImageStyle } from "./elements/image.js";
-export { defineField } from "./elements/field.js";
-export { createFormField } from "./elements/field-composition.js";
-export { defineCard } from "./elements/card.js";
-export { defineCardFooter, defineCardHeader, defineCardPreview } from "./elements/card-primitives.js";
-export { defineBadge, defineCounterBadge, definePresenceBadge } from "./elements/badge.js";
-export { defineCheckbox, defineSwitch } from "./elements/toggle.js";
-export { defineTextArea } from "./elements/textarea.js";
-export { defineSpinner } from "./elements/spinner.js";
-export { defineMessageBar, defineMessageBarActions, defineMessageBarBody, defineMessageBarGroup, defineMessageBarTitle } from "./elements/message-bar.js";
-export { defineViewCard } from "./elements/view-card.js";
-export { defineDialog, defineDialogActions, defineDialogBody, defineDialogContent, defineDialogSurface, defineDialogTitle, defineDialogTrigger } from "./elements/dialog.js";
-export { defineDrawer, defineInlineDrawer } from "./elements/drawer.js";
-export { defineProgressBar } from "./elements/progress-bar.js";
-export { defineSelect } from "./elements/select.js";
-export { defineRadioGroup } from "./elements/radio-group.js";
-export { defineSpinButton } from "./elements/spin-button.js";
-export { defineSlider } from "./elements/slider.js";
-export { defineDatePicker } from "./elements/date-picker.js";
-export { defineCombobox } from "./elements/combobox.js";
-export { defineRichTextEditor } from "./elements/rich-text-editor.js";
-export { defineAlert } from "./elements/alert.js";
-export { defineSkeleton, defineSkeletonItem } from "./elements/skeleton.js";
-export { defineLink } from "./elements/link.js";
-export { defineDivider } from "./elements/divider.js";
-export { defineAccordion, defineAccordionHeader, defineAccordionPanel } from "./elements/accordion.js";
-export { defineAvatar } from "./elements/avatar.js";
-export { defineAvatarGroup } from "./elements/avatar-group.js";
-export { defineAvatarGroupItem, defineAvatarGroupPopover } from "./elements/avatar-group-primitives.js";
-export { definePersona } from "./elements/persona.js";
-export { defineVirtualList } from "./elements/virtual-list.js";
-export { defineDataGrid } from "./elements/data-grid.js";
-export { clampDataGridRowHeight, fitDataGridColumnWidths, formatDataGridClipboard, getDataGridColumnSizing, isDataGridRowSelected, parseDataGridClipboard, parseDataGridClipboardValue, setDataGridRowSelected, writeDataGridClipboardText } from "./elements/data-grid-model.js";
-export { defineTree } from "./elements/tree.js";
-export { defineInteractionTag, defineInteractionTagPrimary, defineInteractionTagSecondary, defineTag, defineTagGroup } from "./elements/tags.js";
-export { defineTagPicker } from "./elements/tag-picker.js";
-export { defineRating } from "./elements/rating.js";
-export { defineRatingDisplay, defineRatingItem } from "./elements/rating-display.js";
-export { defineList, defineListItem } from "./elements/list.js";
-export { defineBreadcrumb, defineBreadcrumbButton, defineBreadcrumbDivider, defineBreadcrumbItem } from "./elements/breadcrumb.js";
-export { defineTabs } from "./elements/tabs.js";
-export { defineTooltip } from "./elements/tooltip.js";
-export { definePopover, definePopoverSurface, definePopoverTrigger } from "./elements/popover.js";
-export { defineTeachingPopover } from "./elements/teaching-popover.js";
-export { defineMenu, defineMenuItem, defineMenuItemLink, defineMenuDivider, defineMenuGroup, defineMenuGroupHeader, defineMenuList, defineMenuPopover, defineMenuSplitGroup, defineMenuTrigger, defineMenuBar, defineMenuBarItem } from "./elements/menu.js";
-export { defineText } from "./elements/text.js";
-export { defineToast, defineToastBody, defineToastFooter, defineToastTitle } from "./elements/toast.js";
-export { defineToaster } from "./elements/toaster.js";
-export { defineSearchBox } from "./elements/search.js";
-export { defineColorPicker, defineColorArea, defineColorSlider, defineAlphaSlider } from "./elements/color-picker.js";
-export { defineToolbar, defineToolbarGroup, defineToolbarSeparator, defineToolbarRadioGroup, defineToolbarRadioButton } from "./elements/toolbar.js";
-export { defineNav, defineNavItem, defineAppItem, defineAppItemStatic, defineHamburger, defineNavDrawer, defineNavDrawerBody, defineNavDrawerFooter, defineNavDrawerHeader, defineSplitNavItem, defineNavCategory, defineNavCategoryItem, defineNavSubItemGroup, defineNavSubItem, defineNavDivider, defineNavSectionHeader } from "./elements/nav.js";
-/** Register every current custom element. Import an element-specific entrypoint to keep a package slice small. */
-export function defineSharePointUIElements() {
-    defineButton();
-    defineButtonGroup();
-    defineCompoundButton();
-    defineMenuButton();
-    defineToggleButton();
-    defineSplitButton();
-    defineInput();
-    defineFileUpload();
-    defineField();
-    defineCard();
-    defineCardHeader();
-    defineCardFooter();
-    defineCardPreview();
-    defineBadge();
-    defineCounterBadge();
-    definePresenceBadge();
-    defineCheckbox();
-    defineSwitch();
-    defineTextArea();
-    defineSpinner();
-    defineMessageBar();
-    defineViewCard();
-    defineDialog();
-    defineDrawer();
-    defineInlineDrawer();
-    defineProgressBar();
-    defineSelect();
-    defineRadioGroup();
-    defineSpinButton();
-    defineSlider();
-    defineDatePicker();
-    defineCombobox();
-    defineRichTextEditor();
-    defineAlert();
-    defineSkeleton();
-    defineLink();
-    defineDivider();
-    defineAccordion();
-    defineAvatar();
-    defineAvatarGroup();
-    defineAvatarGroupItem();
-    defineAvatarGroupPopover();
-    definePersona();
-    defineVirtualList();
-    defineDataGrid();
-    defineTree();
-    defineTag();
-    defineTagGroup();
-    defineInteractionTag();
-    defineTagPicker();
-    defineRating();
-    defineRatingDisplay();
-    defineRatingItem();
-    defineList();
-    defineListItem();
-    defineBreadcrumb();
-    defineBreadcrumbItem();
-    defineBreadcrumbButton();
-    defineBreadcrumbDivider();
-    defineTabs();
-    defineTooltip();
-    definePopover();
-    defineTeachingPopover();
-    defineMenu();
-    defineMenuItem();
-    defineMenuDivider();
-    defineMenuGroup();
-    defineMenuGroupHeader();
-    defineMenuBar();
-    defineMenuBarItem();
-    defineText();
-    defineToast();
-    defineToaster();
-    defineSearchBox();
-    defineColorPicker();
-    defineToolbar();
-    defineNav();
-    defineInfoButton();
-    defineCarousel();
-    defineOverflow();
-    defineSwatchPicker();
-    defineTable();
-}

package/dist/virtualizer-hooks.d.ts

@@ -1,80 +0,0 @@
-import * as React from "react";
-export type VirtualizerMeasureProps = {
-    defaultItemSize: number;
-    direction?: "vertical" | "horizontal";
-    bufferItems?: number;
-    bufferSize?: number;
-};
-export type VirtualizerContextMeasureProps = {
-    contextIndex: number;
-    setContextIndex: (index: number) => void;
-    childProgressiveSizes: React.MutableRefObject<number[]>;
-};
-export type VirtualizerMeasureDynamicProps = VirtualizerMeasureProps & {
-    virtualizerContext: VirtualizerContextMeasureProps;
-    numItems: number;
-    getItemSize: (index: number) => number;
-};
-export interface IndexedResizeCallbackElement {
-    handleResize: () => void;
-}
-/** Measure a fixed-size viewport and calculate a bounded item window. */
-export declare function useStaticVirtualizerMeasure<TElement extends HTMLElement = HTMLElement>(props: VirtualizerMeasureProps): {
-    virtualizerLength: number;
-    bufferItems: number;
-    bufferSize: number;
-    scrollRef: (element: TElement | null) => void;
-    containerSizeRef: React.MutableRefObject<number>;
-};
-/** Measure only enough variable-size rows to cover the current scroll viewport. */
-export declare function useDynamicVirtualizerMeasure<TElement extends HTMLElement = HTMLElement>(props: VirtualizerMeasureDynamicProps): {
-    virtualizerLength: number;
-    bufferItems: number;
-    bufferSize: number;
-    scrollRef: (element: TElement | null) => void;
-    containerSizeRef: React.RefObject<number>;
-    updateScrollPosition: (position: number) => void;
-};
-/** Track measured widths/heights by item index for legacy dynamic virtualizer composition. */
-export declare function useMeasureList<TElement extends HTMLElement & IndexedResizeCallbackElement = HTMLElement & IndexedResizeCallbackElement>(currentIndex: number, _refLength: number, totalLength: number, defaultItemSize: number): {
-    widthArray: React.MutableRefObject<number[]>;
-    heightArray: React.MutableRefObject<number[]>;
-    createIndexedRef: (index: number) => (element: TElement | null) => void;
-    refArray: React.MutableRefObject<Array<TElement | undefined | null>>;
-    sizeUpdateCount: number;
-};
-export type ResizeCallbackWithRef = (entries: ResizeObserverEntry[], observer: ResizeObserver, scrollRef?: React.MutableRefObject<HTMLElement | null>) => void;
-export type ScrollToItemStaticParams = {
-    index: number;
-    itemSize: number;
-    totalItems: number;
-    scrollViewRef: React.RefObject<HTMLElement | null>;
-    axis?: "horizontal" | "vertical";
-    reversed?: boolean;
-    behavior?: ScrollBehavior;
-};
-export type ScrollToItemDynamicParams = {
-    index: number;
-    itemSizes: React.RefObject<number[] | null>;
-    totalSize: number;
-    scrollViewRef: React.RefObject<HTMLElement | null>;
-    axis?: "horizontal" | "vertical";
-    reversed?: boolean;
-    behavior?: ScrollBehavior;
-};
-/** Create an observer from the document's own window, including when an SPFx part is rendered in an iframe. */
-export declare function createResizeObserverFromDocument(targetDocument: Document | null | undefined, callback: ResizeObserverCallback): ResizeObserver | null;
-/** Mirror a four-sided LTR observer margin for an RTL root. */
-export declare function getRTLRootMargin(ltrRootMargin: string, target?: Element | Document | null, win?: Window | null): string;
-/** Observe a changing element list with native IntersectionObserver and direction-aware margins. */
-export declare function useIntersectionObserver(callback: IntersectionObserverCallback, options?: IntersectionObserverInit): {
-    setObserverList: React.Dispatch<React.SetStateAction<Element[] | undefined>>;
-    setObserverInit: (next: IntersectionObserverInit | undefined) => void;
-    observer: React.MutableRefObject<IntersectionObserver | undefined>;
-};
-/** Attach a resize observer callback ref; it is safe when ResizeObserver is unavailable. */
-export declare function useResizeObserverRef_unstable(resizeCallback: ResizeCallbackWithRef): (instance: HTMLElement | null) => void;
-/** Scroll an element to a fixed-size virtual item. */
-export declare function scrollToItemStatic({ index, itemSize, totalItems, scrollViewRef, axis, reversed, behavior }: ScrollToItemStaticParams): void;
-/** Scroll an element to a measured item; summing the prefix is O(index), so keep the measured list modest. */
-export declare function scrollToItemDynamic({ index, itemSizes, totalSize, scrollViewRef, axis, reversed, behavior }: ScrollToItemDynamicParams): void;

package/dist/virtualizer-hooks.js

@@ -1,253 +0,0 @@
-import * as React from "react";
-function viewportLength(element, direction) {
-    if (element === element.ownerDocument.body)
-        return direction === "vertical" ? element.ownerDocument.defaultView?.innerHeight ?? 0 : element.ownerDocument.defaultView?.innerWidth ?? 0;
-    const rect = element.getBoundingClientRect();
-    return direction === "vertical" ? rect.height : rect.width;
-}
-/** Measure a fixed-size viewport and calculate a bounded item window. */
-export function useStaticVirtualizerMeasure(props) {
-    const { defaultItemSize, direction = "vertical", bufferItems: configuredBufferItems, bufferSize: configuredBufferSize } = props;
-    const [measurement, setMeasurement] = React.useState({ virtualizerLength: 0, bufferItems: 0, bufferSize: 0 });
-    const containerSizeRef = React.useRef(0);
-    const elementRef = React.useRef(null);
-    const update = React.useCallback((element = elementRef.current) => {
-        if (!element)
-            return;
-        const size = Math.max(0, viewportLength(element, direction));
-        containerSizeRef.current = size;
-        const visible = Math.ceil(size / Math.max(1, defaultItemSize) + 1);
-        const next = { virtualizerLength: visible + (configuredBufferItems ?? Math.max(Math.ceil(visible / 4), 1)) * 2, bufferItems: configuredBufferItems ?? Math.max(Math.ceil(visible / 4), 1), bufferSize: configuredBufferSize ?? Math.max(defaultItemSize / 2, 1) };
-        setMeasurement(previous => previous.virtualizerLength === next.virtualizerLength && previous.bufferItems === next.bufferItems && previous.bufferSize === next.bufferSize ? previous : next);
-    }, [direction, defaultItemSize, configuredBufferItems, configuredBufferSize]);
-    const observerRef = useResizeObserverRef_unstable(() => update());
-    const scrollRef = React.useCallback((element) => {
-        elementRef.current = element;
-        observerRef(element);
-        if (element)
-            update(element);
-    }, [observerRef, update]);
-    React.useEffect(() => {
-        const element = elementRef.current;
-        const win = element?.ownerDocument.defaultView;
-        if (!element || element !== element.ownerDocument.body || !win)
-            return;
-        const onResize = () => update();
-        win.addEventListener("resize", onResize, { passive: true });
-        return () => win.removeEventListener("resize", onResize);
-    }, [update]);
-    return { ...measurement, scrollRef, containerSizeRef };
-}
-/** Measure only enough variable-size rows to cover the current scroll viewport. */
-export function useDynamicVirtualizerMeasure(props) {
-    const { defaultItemSize, direction = "vertical", numItems, getItemSize, bufferItems: configuredBufferItems, bufferSize: configuredBufferSize, virtualizerContext } = props;
-    const [measurement, setMeasurement] = React.useState({ virtualizerLength: 0, bufferItems: 0, bufferSize: 0 });
-    const containerSizeRef = React.useRef(0);
-    const elementRef = React.useRef(null);
-    const positionRef = React.useRef(0);
-    const update = React.useCallback((element = elementRef.current) => {
-        if (!element)
-            return;
-        containerSizeRef.current = Math.max(0, viewportLength(element, direction));
-        const bufferSize = configuredBufferSize ?? Math.max(defaultItemSize / 2, 1);
-        const progressiveSizes = virtualizerContext.childProgressiveSizes.current;
-        let visible = 0;
-        let covered = 0;
-        let start = Math.max(0, Math.min(Math.floor(virtualizerContext.contextIndex), Math.max(0, numItems - 1)));
-        if (progressiveSizes.length >= numItems) {
-            let low = 0;
-            let high = numItems;
-            while (low < high) {
-                const middle = (low + high) >>> 1;
-                if (progressiveSizes[middle] <= positionRef.current)
-                    low = middle + 1;
-                else
-                    high = middle;
-            }
-            start = Math.min(Math.max(0, numItems - 1), low);
-        }
-        while (start + visible < numItems && covered < containerSizeRef.current + bufferSize * 2) {
-            const estimated = getItemSize(start + visible);
-            const size = Number.isFinite(estimated) && estimated > 0 ? estimated : defaultItemSize;
-            const end = progressiveSizes[start + visible];
-            const beginning = start + visible === 0 ? 0 : progressiveSizes[start + visible - 1];
-            const rowStart = Number.isFinite(end) ? beginning : (start + visible) * defaultItemSize;
-            const rowEnd = Number.isFinite(end) ? end : rowStart + size;
-            if (rowEnd > positionRef.current) {
-                covered += Math.max(0, Math.min(rowEnd, positionRef.current + containerSizeRef.current + bufferSize * 2) - Math.max(rowStart, positionRef.current));
-                visible++;
-            }
-            else
-                visible++;
-        }
-        const nextBufferItems = configuredBufferItems ?? Math.max(Math.ceil(visible / 3), 1);
-        const next = { virtualizerLength: Math.min(numItems, visible + nextBufferItems * 2), bufferItems: nextBufferItems, bufferSize };
-        if (virtualizerContext.contextIndex !== start)
-            virtualizerContext.setContextIndex(start);
-        setMeasurement(previous => previous.virtualizerLength === next.virtualizerLength && previous.bufferItems === next.bufferItems && previous.bufferSize === next.bufferSize ? previous : next);
-    }, [direction, defaultItemSize, numItems, getItemSize, configuredBufferItems, configuredBufferSize, virtualizerContext.contextIndex, virtualizerContext.childProgressiveSizes]);
-    const observerRef = useResizeObserverRef_unstable(() => update());
-    const scrollRef = React.useCallback((element) => { elementRef.current = element; observerRef(element); if (element)
-        update(element); }, [observerRef, update]);
-    const updateScrollPosition = React.useCallback((position) => { positionRef.current = Number.isFinite(position) ? Math.max(0, position) : 0; update(); }, [update]);
-    React.useLayoutEffect(() => { update(); }, [update]);
-    return { ...measurement, scrollRef, containerSizeRef, updateScrollPosition };
-}
-/** Track measured widths/heights by item index for legacy dynamic virtualizer composition. */
-export function useMeasureList(currentIndex, _refLength, totalLength, defaultItemSize) {
-    const widthArray = React.useRef(Array(Math.max(0, totalLength)).fill(defaultItemSize));
-    const heightArray = React.useRef(Array(Math.max(0, totalLength)).fill(defaultItemSize));
-    const refArray = React.useRef([]);
-    const [sizeUpdateCount, setSizeUpdateCount] = React.useState(0);
-    const observer = React.useRef(null);
-    const observerDocument = React.useRef(null);
-    const indexByElement = React.useRef(new WeakMap());
-    React.useEffect(() => {
-        const previousLength = widthArray.current.length;
-        widthArray.current.length = Math.max(0, totalLength);
-        heightArray.current.length = Math.max(0, totalLength);
-        for (let index = previousLength; index < widthArray.current.length; index++)
-            widthArray.current[index] = heightArray.current[index] = defaultItemSize;
-        refArray.current.length = Math.max(0, totalLength);
-    }, [defaultItemSize, totalLength]);
-    React.useEffect(() => () => observer.current?.disconnect(), []);
-    const measure = React.useCallback((element, index) => {
-        const rect = element.getBoundingClientRect();
-        const width = rect.width || defaultItemSize;
-        const height = rect.height || defaultItemSize;
-        if (widthArray.current[index] !== width || heightArray.current[index] !== height) {
-            widthArray.current[index] = width;
-            heightArray.current[index] = height;
-            setSizeUpdateCount(count => count + 1);
-        }
-    }, [defaultItemSize]);
-    const createIndexedRef = React.useCallback((index) => (element) => {
-        const absoluteIndex = Math.max(0, Math.floor(currentIndex + index));
-        const prior = refArray.current[absoluteIndex];
-        if (prior && prior !== element)
-            observer.current?.unobserve(prior);
-        refArray.current[absoluteIndex] = element;
-        if (!element)
-            return;
-        indexByElement.current.set(element, absoluteIndex);
-        element.handleResize = () => measure(element, absoluteIndex);
-        const ResizeObserverCtor = element.ownerDocument.defaultView?.ResizeObserver;
-        if (ResizeObserverCtor && (!observer.current || observerDocument.current !== element.ownerDocument)) {
-            observer.current?.disconnect();
-            const nextObserver = createResizeObserverFromDocument(element.ownerDocument, entries => entries.forEach(entry => {
-                const row = entry.target;
-                const rowIndex = indexByElement.current.get(row);
-                if (rowIndex !== undefined)
-                    measure(row, rowIndex);
-            }));
-            observer.current = nextObserver;
-            observerDocument.current = element.ownerDocument;
-        }
-        observer.current?.observe(element);
-        measure(element, absoluteIndex);
-    }, [currentIndex, measure]);
-    return { widthArray, heightArray, createIndexedRef, refArray, sizeUpdateCount };
-}
-/** Create an observer from the document's own window, including when an SPFx part is rendered in an iframe. */
-export function createResizeObserverFromDocument(targetDocument, callback) {
-    const Observer = targetDocument?.defaultView?.ResizeObserver;
-    return Observer ? new Observer(callback) : null;
-}
-/** Mirror a four-sided LTR observer margin for an RTL root. */
-export function getRTLRootMargin(ltrRootMargin, target, win) {
-    const element = target?.nodeType === 9 ? target.documentElement : target;
-    if (!element || !win || win.getComputedStyle(element).direction !== "rtl")
-        return ltrRootMargin;
-    const margins = ltrRootMargin.trim().split(/\s+/);
-    return margins.length === 4 ? `${margins[0]} ${margins[3]} ${margins[2]} ${margins[1]}` : ltrRootMargin;
-}
-/** Observe a changing element list with native IntersectionObserver and direction-aware margins. */
-export function useIntersectionObserver(callback, options) {
-    const [elements, setElements] = React.useState();
-    const [init, setInit] = React.useState(options);
-    const observer = React.useRef(undefined);
-    const callbackRef = React.useRef(callback);
-    const [directionRevision, setDirectionRevision] = React.useState(0);
-    callbackRef.current = callback;
-    const setObserverInit = React.useCallback((next) => setInit(next), []);
-    React.useEffect(() => {
-        const root = init?.root;
-        const doc = root?.ownerDocument ?? (typeof document === "undefined" ? undefined : document);
-        const MutationObserverCtor = doc?.defaultView?.MutationObserver;
-        if (!MutationObserverCtor || !root)
-            return;
-        const mutationObserver = new MutationObserverCtor(records => {
-            if (records.some(record => record.attributeName === "dir"))
-                setDirectionRevision(revision => revision + 1);
-        });
-        mutationObserver.observe(doc.documentElement, { attributes: true, subtree: true, attributeFilter: ["dir"] });
-        return () => mutationObserver.disconnect();
-    }, [init?.root]);
-    React.useEffect(() => {
-        const root = init?.root;
-        const doc = (root?.nodeType === 1 ? root.ownerDocument : typeof document === "undefined" ? undefined : document);
-        const win = doc?.defaultView;
-        if (!win?.IntersectionObserver)
-            return;
-        const rootMargin = getRTLRootMargin(init?.rootMargin ?? "0px", init?.root, win);
-        const instance = new win.IntersectionObserver((entries, current) => callbackRef.current(entries, current), { ...init, rootMargin });
-        observer.current = instance;
-        elements?.forEach(element => instance.observe(element));
-        return () => {
-            instance.disconnect();
-            if (observer.current === instance)
-                observer.current = undefined;
-        };
-    }, [elements, init, directionRevision]);
-    return { setObserverList: setElements, setObserverInit, observer };
-}
-/** Attach a resize observer callback ref; it is safe when ResizeObserver is unavailable. */
-export function useResizeObserverRef_unstable(resizeCallback) {
-    const callbackRef = React.useRef(resizeCallback);
-    callbackRef.current = resizeCallback;
-    const observed = React.useRef(null);
-    React.useEffect(() => () => { observed.current?.observer.disconnect(); observed.current = null; }, []);
-    return React.useCallback(instance => {
-        const current = observed.current;
-        if (current?.element === instance)
-            return;
-        current?.observer.disconnect();
-        observed.current = null;
-        const Observer = instance?.ownerDocument.defaultView?.ResizeObserver;
-        if (!instance || !Observer)
-            return;
-        const target = { current: instance };
-        const observer = new Observer((entries, currentObserver) => callbackRef.current(entries, currentObserver, target));
-        observed.current = { element: instance, observer };
-        observer.observe(instance);
-    }, []);
-}
-/** Scroll an element to a fixed-size virtual item. */
-export function scrollToItemStatic({ index, itemSize, totalItems, scrollViewRef, axis = "vertical", reversed = false, behavior = "auto" }) {
-    const view = scrollViewRef.current;
-    if (!view || !Number.isFinite(index) || !Number.isFinite(itemSize) || itemSize <= 0 || totalItems <= 0)
-        return;
-    const safeIndex = Math.max(0, Math.min(totalItems - 1, Math.floor(index)));
-    const offset = reversed ? Math.max(0, totalItems * itemSize - itemSize * (safeIndex + 1)) : safeIndex * itemSize;
-    if (axis === "horizontal")
-        view.scrollTo({ left: offset, behavior });
-    else
-        view.scrollTo({ top: offset, behavior });
-}
-/** Scroll an element to a measured item; summing the prefix is O(index), so keep the measured list modest. */
-export function scrollToItemDynamic({ index, itemSizes, totalSize, scrollViewRef, axis = "vertical", reversed = false, behavior = "auto" }) {
-    const view = scrollViewRef.current;
-    const sizes = itemSizes.current;
-    if (!view || !sizes || !Number.isFinite(index) || !sizes.length)
-        return;
-    const safeIndex = Math.max(0, Math.min(sizes.length - 1, Math.floor(index)));
-    let offset = 0;
-    for (let item = 0; item < safeIndex; item++)
-        offset += Number.isFinite(sizes[item]) ? Math.max(0, sizes[item]) : 0;
-    if (reversed)
-        offset = Math.max(0, totalSize - offset - (Number.isFinite(sizes[safeIndex]) ? Math.max(0, sizes[safeIndex]) : 0));
-    if (axis === "horizontal")
-        view.scrollTo({ left: offset, behavior });
-    else
-        view.scrollTo({ top: offset, behavior });
-}

package/scripts/generate-token-index.mjs

@@ -1,43 +0,0 @@
-import { readdir, readFile, writeFile } from "node:fs/promises";
-import { fileURLToPath } from "node:url";
-import { dirname, resolve } from "node:path";
-
-const packageDir = resolve(dirname(fileURLToPath(import.meta.url)), "..");
-const sourceDir = resolve(packageDir, "src");
-const outputPath = resolve(packageDir, "tokens.json");
-const checkOnly = process.argv.includes("--check");
-const components = new Map();
-const declarations = new Map();
-const addTokens = (map, source, text) => {
-  for (const token of text.match(/--spui-[\w-]+/g) ?? []) {
-    if (token === "--spui-palette-") continue;
-    const sources = map.get(token) ?? new Set();
-    sources.add(source);
-    map.set(token, sources);
-  }
-};
-
-for (const file of (await readdir(resolve(sourceDir, "elements"))).filter(name => name.endsWith(".ts")).sort()) {
-  addTokens(components, file.slice(0, -3), await readFile(resolve(sourceDir, "elements", file), "utf8"));
-}
-for (const file of ["appearance.ts", "theme.ts"]) {
-  addTokens(declarations, file.slice(0, -3), await readFile(resolve(sourceDir, file), "utf8"));
-}
-
-const tokens = [...new Set([...components.keys(), ...declarations.keys()])].sort().map(name => ({
-  name,
-  components: [...(components.get(name) ?? [])].sort(),
-  declaredBy: [...(declarations.get(name) ?? [])].sort()
-}));
-const dynamicPrefixes = [{ prefix: "--spui-palette-", declaredBy: ["theme"] }];
-const content = `${JSON.stringify({ generatedFrom: "src/elements/*.ts, src/appearance.ts, src/theme.ts", dynamicPrefixes, tokens }, null, 2)}\n`;
-if (checkOnly) {
-  const current = await readFile(outputPath, "utf8").catch(() => "");
-  if (current !== content) {
-    console.error("Token index is stale. Run npm run tokens:generate --workspace @spfx-fast/sharepoint-ui.");
-    process.exitCode = 1;
-  } else console.log(`Token index is current (${tokens.length} tokens).`);
-} else {
-  await writeFile(outputPath, content);
-  console.log(`Wrote ${tokens.length} component token entries to ${outputPath}.`);
-}

package/scripts/sync-component-catalog-signatures.mjs

@@ -1,55 +0,0 @@
-import { readFile, writeFile } from "node:fs/promises";
-import { dirname, resolve } from "node:path";
-import { fileURLToPath } from "node:url";
-import ts from "typescript";
-
-const pkgDir = resolve(dirname(fileURLToPath(import.meta.url)), "..");
-const catalogPath = resolve(pkgDir, "components.json");
-const adapterPath = resolve(pkgDir, "src/react.tsx");
-const catalog = JSON.parse(await readFile(catalogPath, "utf8"));
-const adapterText = await readFile(adapterPath, "utf8");
-const source = ts.createSourceFile(adapterPath, adapterText, ts.ScriptTarget.Latest, true, ts.ScriptKind.TSX);
-const components = new Map();
-
-function collect(node) {
-  if (ts.isFunctionDeclaration(node) && node.name && node.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.ExportKeyword)) {
-    components.set(node.name.text, node);
-  }
-  if (ts.isVariableStatement(node) && node.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.ExportKeyword)) {
-    for (const declaration of node.declarationList.declarations) {
-      if (!ts.isIdentifier(declaration.name) || !declaration.initializer) continue;
-      function findNamedFunction(candidate) {
-        if (ts.isFunctionExpression(candidate) && candidate.name?.text === declaration.name.text) return candidate;
-        let found;
-        ts.forEachChild(candidate, child => { found ??= findNamedFunction(child); });
-        return found;
-      }
-      const component = findNamedFunction(declaration.initializer);
-      if (component) components.set(declaration.name.text, component);
-    }
-  }
-  ts.forEachChild(node, collect);
-}
-
-collect(source);
-const changed = [];
-for (const entry of catalog.components) {
-  const component = components.get(entry.react);
-  const parameter = component?.parameters[0];
-  if (!parameter) throw new Error(`Cannot find first React parameter for ${entry.react}`);
-  const signature = parameter.getText(source);
-  if (entry.api.reactSignature !== signature) {
-    changed.push(entry.react);
-    entry.api.reactSignature = signature;
-  }
-}
-
-if (process.argv.includes("--check")) {
-  if (changed.length) {
-    console.error(`Catalog React signatures are stale: ${changed.join(", ")}`);
-    process.exitCode = 1;
-  } else console.log(`React signatures match all ${catalog.components.length} adapters.`);
-} else if (changed.length) {
-  await writeFile(catalogPath, `${JSON.stringify(catalog, null, 2)}\n`);
-  console.log(`Updated ${changed.length} React signatures: ${changed.join(", ")}`);
-} else console.log(`React signatures already match all ${catalog.components.length} adapters.`);