@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/views/ListView.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListView.es.js","names":[],"sources":["../../src/views/ListView.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n    CircularProgress,\n    Skeleton,\n    Typography\n} from \"../components\";\nimport { cls } from \"../util\";\nimport { useUiLabels } from \"../hooks/UiLabelsContext\";\nimport { getScrollParent, useScrollParentRestoration, type ViewScrollEvent } from \"./useScrollParentRestoration\";\n\nexport type CollectionSize = \"xs\" | \"s\" | \"m\" | \"l\" | \"xl\";\n\nexport type ListViewColumnDef<T> = {\n    key: string;\n    label: string;\n    align?: \"left\" | \"center\" | \"right\";\n    width?: string;\n    renderCell: (item: T) => React.ReactNode;\n    isTitle?: boolean;\n};\n\nexport type ListViewProps<T> = {\n    /**\n     * The rows, in order. A position holding `undefined` is a row that exists\n     * but has not been read yet: a placeholder is drawn in its place.\n     */\n    data: (T | undefined)[];\n    dataLoading?: boolean;\n    noMoreToLoad?: boolean;\n    dataLoadingError?: Error;\n    itemCount?: number;\n    setItemCount?: (itemCount: number) => void;\n    pageSize?: number;\n    paginationEnabled?: boolean;\n\n    onItemClick?: (item: T) => void;\n    selectedIds?: Set<string | number>;\n    highlightedIds?: Set<string | number>;\n    selectionEnabled?: boolean;\n    onSelectionChange?: (item: T, selected: boolean) => void;\n    emptyComponent?: React.ReactNode;\n\n    /**\n     * Called with the scroll parent's offset as it scrolls, and restored from\n     * `initialScroll` on mount — the list does not scroll itself, the page\n     * around it does.\n     */\n    onScroll?: (props: ViewScrollEvent) => void;\n    initialScroll?: number;\n\n    /**\n     * Called with the positions in `data` of the rows on screen — not the\n     * ones drawn ahead of them — end exclusive, each time they change. While\n     * the list is still scrolling to `initialScroll`, the rows there.\n     */\n    onRowsRendered?: (range: { start: number; end: number }) => void;\n\n    size?: CollectionSize;\n    selectedEntityId?: string | number;\n\n    /**\n     * Rendered above the rows, inside the list's own frame, and only when there\n     * are rows to head. A column header over an empty state or a spinner labels\n     * nothing.\n     */\n    header?: React.ReactNode;\n\n    renderRow: (params: {\n        item: T;\n        index: number;\n        style: React.CSSProperties;\n        className: string;\n        selected: boolean;\n        highlighted: boolean;\n        isLast: boolean;\n        onClick: (e: React.MouseEvent) => void;\n        onSelectionChange: (selected: boolean) => void;\n    }) => React.ReactNode;\n};\n\nfunction getEstimatedRowHeight(size: CollectionSize): number {\n    switch (size) {\n        case \"xs\": return 44;\n        case \"s\": return 52;\n        case \"m\": return 64;\n        case \"l\": return 76;\n        case \"xl\": return 88;\n        default: return 64;\n    }\n}\n\nconst OVERSCAN_COUNT = 8;\nconst LOAD_MORE_THRESHOLD = 400;\n\nexport function ListView<T>({\n    data,\n    dataLoading = false,\n    noMoreToLoad = false,\n    dataLoadingError,\n    itemCount,\n    setItemCount,\n    pageSize = 50,\n    paginationEnabled = true,\n\n    onItemClick,\n    selectedIds,\n    highlightedIds,\n    selectionEnabled = true,\n    onSelectionChange,\n    emptyComponent,\n\n    onScroll,\n    initialScroll,\n    onRowsRendered,\n    size = \"m\",\n    selectedEntityId,\n    header,\n    renderRow\n}: ListViewProps<T>) {\n    const labels = useUiLabels();\n    const containerRef = useRef<HTMLDivElement>(null);\n    // The rows' own box, which a header shifts down from the container's top.\n    // Virtualization measures against it rather than against the container, so\n    // the window of rendered rows stays the one the viewport is actually over.\n    const rowsRef = useRef<HTMLDivElement>(null);\n    const isLoadingMore = useRef(false);\n\n    // Reset loading gate when loading stops\n    useEffect(() => {\n        if (!dataLoading) isLoadingMore.current = false;\n    }, [dataLoading]);\n\n    // Virtualization scroll states\n    const estimatedRowHeight = getEstimatedRowHeight(size);\n    const [effectiveScrollTop, setEffectiveScrollTop] = useState(0);\n    const [viewportHeight, setViewportHeight] = useState(800);\n    // Where the rows on screen start, for `onRowsRendered`: the scroll\n    // position the list is being restored to, until it gets there.\n    const [reportedScrollTop, setReportedScrollTop] = useState(0);\n    const [reportedHeight, setReportedHeight] = useState(800);\n\n    const paginationStateRef = useRef({ paginationEnabled, noMoreToLoad, itemCount, pageSize });\n    useEffect(() => {\n        paginationStateRef.current = { paginationEnabled, noMoreToLoad, itemCount, pageSize };\n    }, [paginationEnabled, noMoreToLoad, itemCount, pageSize]);\n\n    useEffect(() => {\n        const el = containerRef.current;\n        if (!el) return;\n        const scrollEl = getScrollParent(el);\n        if (!scrollEl) return;\n\n        let rafId: number | null = null;\n\n        const update = () => {\n            rafId = null;\n            const scrollRect = scrollEl.getBoundingClientRect();\n            const listRect = (rowsRef.current ?? el).getBoundingClientRect();\n\n            const listTopRelative = listRect.top - scrollRect.top;\n            setEffectiveScrollTop(Math.max(0, -listTopRelative));\n            setViewportHeight(scrollRect.height);\n            const restoring = pendingScroll.current;\n            const top = restoring\n                ? restoring - (scrollEl.scrollTop + listTopRelative)\n                : -listTopRelative;\n            setReportedScrollTop(Math.max(0, top));\n            // Only the part of the screen the rows are in: not the header above.\n            setReportedHeight(Math.max(0, scrollRect.height + Math.min(0, top)));\n\n            const { paginationEnabled: pe, noMoreToLoad: nm, itemCount: ic, pageSize: ps } = paginationStateRef.current;\n            if (\n                pe &&\n                !nm &&\n                !isLoadingMore.current &&\n                scrollEl.scrollHeight - scrollEl.scrollTop - scrollEl.clientHeight < LOAD_MORE_THRESHOLD\n            ) {\n                isLoadingMore.current = true;\n                setItemCount?.((ic ?? ps) + ps);\n            }\n        };\n\n        const onScrollEvent = () => {\n            if (rafId === null) rafId = requestAnimationFrame(update);\n        };\n\n        scrollEl.addEventListener(\"scroll\", onScrollEvent, { passive: true });\n        const ro = new ResizeObserver(() => update());\n        ro.observe(scrollEl);\n        update();\n\n        return () => {\n            scrollEl.removeEventListener(\"scroll\", onScrollEvent);\n            ro.disconnect();\n            if (rafId !== null) cancelAnimationFrame(rafId);\n        };\n        // eslint-disable-next-line react-hooks/exhaustive-deps -- `pendingScroll` is the ref object `useScrollParentRestoration` returns, the same one for the component's life; `update` reads `.current` when it runs.\n    }, [setItemCount]);\n\n    const { pendingScroll } = useScrollParentRestoration({ containerRef, initialScroll, onScroll, dataLength: data.length });\n\n    const visibleStart = Math.min(data.length, Math.floor(reportedScrollTop / estimatedRowHeight));\n    const visibleEnd = Math.min(data.length, Math.ceil((reportedScrollTop + reportedHeight) / estimatedRowHeight));\n    useEffect(() => {\n        if (onRowsRendered && data.length > 0) onRowsRendered({ start: visibleStart, end: visibleEnd });\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [visibleStart, visibleEnd, onRowsRendered]);\n\n    const totalHeight = data.length * estimatedRowHeight;\n    const startIndex = Math.max(0, Math.floor(effectiveScrollTop / estimatedRowHeight) - OVERSCAN_COUNT);\n    const endIndex = Math.min(\n        data.length,\n        Math.ceil((effectiveScrollTop + viewportHeight) / estimatedRowHeight) + OVERSCAN_COUNT\n    );\n    const visibleData = data.slice(startIndex, endIndex);\n    const offsetY = startIndex * estimatedRowHeight;\n\n    const footerHeight = dataLoading ? 48 : (!dataLoading && noMoreToLoad && data.length > 0) ? 32 : 0;\n\n    const isInitialLoading = dataLoading && data.length === 0;\n    const isEmpty = !dataLoading && data.length === 0 && !dataLoadingError;\n\n    const getItemId = useCallback((item: T | undefined): string | number => {\n        if (item && typeof item === \"object\" && \"id\" in item) {\n            const id = (item as Record<\"id\", unknown>).id;\n            return typeof id === \"number\" ? id : String(id);\n        }\n        return String(item);\n    }, []);\n\n    const borderMixinClass = \"border-hairline\";\n\n    return (\n        <div\n            ref={containerRef}\n            className={cls(\n                \"w-full\",\n                selectedEntityId === undefined && `rounded-lg overflow-hidden border ${borderMixinClass}`\n            )}\n        >\n            {dataLoadingError && data.length === 0 ? (\n                <div className=\"flex items-center justify-center p-8\">\n                    <Typography className=\"text-red-500\">\n                        {labels.errorLoadingData(dataLoadingError.message)}\n                    </Typography>\n                </div>\n            ) : isInitialLoading ? (\n                <div className=\"flex items-center justify-center py-12 px-8\">\n                    <CircularProgress size=\"small\" />\n                </div>\n            ) : isEmpty ? (\n                <div className=\"w-full flex items-center justify-center py-12 px-8\">\n                    {emptyComponent ?? (\n                        <Typography variant=\"label\" color=\"secondary\">\n                            {labels.noEntriesFound}\n                        </Typography>\n                    )}\n                </div>\n            ) : (\n                <>\n                    {header}\n                    {/* `my-1.5`, not padding: the rows are absolutely positioned\n                        inside this box, and `top: 0` lands on the padding edge,\n                        so padding would not move them. A margin does, and it is\n                        what keeps the first row's rounded highlight from sitting\n                        on the header's rule (and the last from touching the\n                        bottom edge). */}\n                    <div ref={rowsRef} className=\"my-1.5\" style={{ height: totalHeight + footerHeight, position: \"relative\" }}>\n                        <div style={{ position: \"absolute\", top: offsetY, left: 0, right: 0 }}>\n                            {visibleData.map((item, i) => {\n                                const actualIndex = startIndex + i;\n                                if (item === undefined) {\n                                    return <UnreadRow key={`__unread_${actualIndex}`} height={estimatedRowHeight}/>;\n                                }\n                                const isLast = actualIndex === data.length - 1;\n                                const id = getItemId(item);\n                                const selected = selectedIds?.has(id) ?? false;\n                                const highlighted = highlightedIds?.has(id) ?? false;\n\n                                const handleClick = (e: React.MouseEvent) => {\n                                    if ((e.metaKey || e.ctrlKey) && selectionEnabled) {\n                                        e.preventDefault();\n                                        onSelectionChange?.(item, !selected);\n                                        return;\n                                    }\n                                    onItemClick?.(item);\n                                };\n\n                                const handleSelectionChange = (val: boolean) => {\n                                    onSelectionChange?.(item, val);\n                                };\n\n                                return (\n                                    <React.Fragment key={id || actualIndex}>\n                                        {renderRow({\n                                            item,\n                                            index: actualIndex,\n                                            style: { height: estimatedRowHeight, overflow: \"hidden\" },\n                                            // No divider between rows. Rows are inset, rounded\n                                            // highlights now (see the CMS list binding), and a\n                                            // hairline under each one turned every highlight into\n                                            // a pill floating on a ruled page. `py-0.5` inside the\n                                            // fixed-height slot gives two adjacent highlights 4px\n                                            // of air instead of a shared edge.\n                                            className: \"py-0.5\",\n                                            selected,\n                                            highlighted,\n                                            isLast,\n                                            onClick: handleClick,\n                                            onSelectionChange: handleSelectionChange\n                                        })}\n                                    </React.Fragment>\n                                );\n                            })}\n                        </div>\n\n                        {dataLoading && (\n                            <div\n                                className=\"flex items-center justify-center py-3\"\n                                style={{ position: \"absolute\", top: totalHeight, left: 0, right: 0 }}\n                            >\n                                <CircularProgress size=\"small\" />\n                            </div>\n                        )}\n                        {!dataLoading && noMoreToLoad && data.length > 0 && (\n                            <div\n                                className=\"flex items-center justify-center py-2\"\n                                style={{ position: \"absolute\", top: totalHeight, left: 0, right: 0 }}\n                            >\n                                <Typography variant=\"caption\" color=\"secondary\">\n                                    {labels.allEntriesLoaded(data.length)}\n                                </Typography>\n                            </div>\n                        )}\n                    </div>\n                </>\n            )}\n        </div>\n    );\n}\n\n/** A row that exists but has not been read yet. */\nfunction UnreadRow({ height }: { height: number }) {\n    return (\n        <div className=\"py-0.5 flex items-center gap-3 px-4\" style={{ height, overflow: \"hidden\" }} aria-busy={true}>\n            <Skeleton width={32} height={32}/>\n            <div className=\"flex flex-col gap-1.5 grow\">\n                <Skeleton width={160} height={12}/>\n                <Skeleton width={96} height={10}/>\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/views/useScrollParentRestoration.d.ts

@@ -23,4 +23,11 @@ export declare function useScrollParentRestoration({ containerRef, initialScroll
     initialScroll?: number;
     onScroll?: (props: ViewScrollEvent) => void;
     dataLength: number;
-}): void;
+}): {
+    /**
+     * The scroll parent's offset this view is on its way back to, until it has
+     * been put there. The rows at the top are drawn first, and are not the
+     * ones the view is about to show.
+     */
+    pendingScroll: React.RefObject<number | undefined>;
+};

package/dist/views/useScrollParentRestoration.es.js

@@ -0,0 +1,75 @@
+import { useEffect, useRef } from "react";
+//#region src/views/useScrollParentRestoration.ts
+/**
+* The nearest ancestor that scrolls vertically. The list and card views do not
+* scroll themselves: the page around them does, so that is the element whose
+* offset is worth keeping.
+*/
+function getScrollParent(element) {
+	if (!element) return null;
+	let parent = element.parentElement;
+	while (parent) {
+		const overflowY = window.getComputedStyle(parent).overflowY;
+		if (overflowY === "auto" || overflowY === "scroll") return parent;
+		parent = parent.parentElement;
+	}
+	return document.documentElement;
+}
+/**
+* Report the scroll parent's offset through `onScroll`, and put it back at
+* `initialScroll` once there are rows to scroll over.
+*
+* Opening a record full screen unmounts the collection view, so coming back
+* mounts a fresh one. The caller keeps the offset (and the rows it was over)
+* outside the component; this is what hands it over and applies it again.
+*/
+function useScrollParentRestoration({ containerRef, initialScroll, onScroll, dataLength }) {
+	const restoreTo = useRef(initialScroll);
+	useEffect(() => {
+		const target = restoreTo.current;
+		if (!containerRef.current || !target || dataLength === 0) return;
+		const scrollEl = getScrollParent(containerRef.current);
+		if (!scrollEl) return;
+		let attempts = 0;
+		const maxAttempts = 5;
+		let rafId = null;
+		const tryRestore = () => {
+			rafId = null;
+			if (scrollEl.scrollHeight >= target || attempts >= maxAttempts) {
+				scrollEl.scrollTop = target;
+				restoreTo.current = void 0;
+			} else {
+				attempts++;
+				rafId = requestAnimationFrame(tryRestore);
+			}
+		};
+		rafId = requestAnimationFrame(tryRestore);
+		return () => {
+			if (rafId !== null) cancelAnimationFrame(rafId);
+		};
+	}, [containerRef, dataLength]);
+	const lastScrollOffset = useRef(0);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el || !onScroll) return;
+		const scrollEl = getScrollParent(el);
+		if (!scrollEl) return;
+		const handleScroll = () => {
+			const currentOffset = scrollEl.scrollTop;
+			const direction = currentOffset > lastScrollOffset.current ? "forward" : "backward";
+			lastScrollOffset.current = currentOffset;
+			onScroll({
+				scrollDirection: direction,
+				scrollOffset: currentOffset,
+				scrollUpdateWasRequested: false
+			});
+		};
+		scrollEl.addEventListener("scroll", handleScroll, { passive: true });
+		return () => scrollEl.removeEventListener("scroll", handleScroll);
+	}, [containerRef, onScroll]);
+	return { pendingScroll: restoreTo };
+}
+//#endregion
+export { getScrollParent, useScrollParentRestoration };
+
+//# sourceMappingURL=useScrollParentRestoration.es.js.map

package/dist/views/useScrollParentRestoration.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollParentRestoration.es.js","names":[],"sources":["../../src/views/useScrollParentRestoration.ts"],"sourcesContent":["import React, { useEffect, useRef } from \"react\";\n\nexport type ViewScrollEvent = {\n    scrollDirection: \"forward\" | \"backward\";\n    scrollOffset: number;\n    scrollUpdateWasRequested: boolean;\n};\n\n/**\n * The nearest ancestor that scrolls vertically. The list and card views do not\n * scroll themselves: the page around them does, so that is the element whose\n * offset is worth keeping.\n */\nexport function getScrollParent(element: HTMLElement | null): HTMLElement | null {\n    if (!element) return null;\n    let parent = element.parentElement;\n    while (parent) {\n        const overflowY = window.getComputedStyle(parent).overflowY;\n        if (overflowY === \"auto\" || overflowY === \"scroll\") {\n            return parent;\n        }\n        parent = parent.parentElement;\n    }\n    return document.documentElement;\n}\n\n/**\n * Report the scroll parent's offset through `onScroll`, and put it back at\n * `initialScroll` once there are rows to scroll over.\n *\n * Opening a record full screen unmounts the collection view, so coming back\n * mounts a fresh one. The caller keeps the offset (and the rows it was over)\n * outside the component; this is what hands it over and applies it again.\n */\nexport function useScrollParentRestoration({\n    containerRef,\n    initialScroll,\n    onScroll,\n    dataLength\n}: {\n    containerRef: React.RefObject<HTMLElement | null>;\n    initialScroll?: number;\n    onScroll?: (props: ViewScrollEvent) => void;\n    dataLength: number;\n}): {\n    /**\n     * The scroll parent's offset this view is on its way back to, until it has\n     * been put there. The rows at the top are drawn first, and are not the\n     * ones the view is about to show.\n     */\n    pendingScroll: React.RefObject<number | undefined>;\n} {\n    // The offset this mount started with, and only that one. `initialScroll`\n    // goes on changing after mount — callers read it back from the store\n    // `onScroll` writes — so following the prop would scroll the view to where\n    // it was a moment ago, under a user who is scrolling it.\n    const restoreTo = useRef(initialScroll);\n\n    useEffect(() => {\n        const target = restoreTo.current;\n        if (!containerRef.current || !target || dataLength === 0) return;\n\n        const scrollEl = getScrollParent(containerRef.current);\n        if (!scrollEl) return;\n\n        let attempts = 0;\n        const maxAttempts = 5;\n        let rafId: number | null = null;\n\n        const tryRestore = () => {\n            rafId = null;\n            if (scrollEl.scrollHeight >= target || attempts >= maxAttempts) {\n                scrollEl.scrollTop = target;\n                restoreTo.current = undefined;\n            } else {\n                attempts++;\n                rafId = requestAnimationFrame(tryRestore);\n            }\n        };\n\n        rafId = requestAnimationFrame(tryRestore);\n        return () => {\n            if (rafId !== null) cancelAnimationFrame(rafId);\n        };\n    }, [containerRef, dataLength]);\n\n    const lastScrollOffset = useRef(0);\n    useEffect(() => {\n        const el = containerRef.current;\n        if (!el || !onScroll) return;\n        const scrollEl = getScrollParent(el);\n        if (!scrollEl) return;\n\n        const handleScroll = () => {\n            const currentOffset = scrollEl.scrollTop;\n            const direction = currentOffset > lastScrollOffset.current ? \"forward\" : \"backward\";\n            lastScrollOffset.current = currentOffset;\n            onScroll({\n                scrollDirection: direction,\n                scrollOffset: currentOffset,\n                scrollUpdateWasRequested: false\n            });\n        };\n\n        scrollEl.addEventListener(\"scroll\", handleScroll, { passive: true });\n        return () => scrollEl.removeEventListener(\"scroll\", handleScroll);\n    }, [containerRef, onScroll]);\n\n    return { pendingScroll: restoreTo };\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,gBAAgB,SAAiD;CAC7E,IAAI,CAAC,SAAS,OAAO;CACrB,IAAI,SAAS,QAAQ;CACrB,OAAO,QAAQ;EACX,MAAM,YAAY,OAAO,iBAAiB,MAAM,CAAC,CAAC;EAClD,IAAI,cAAc,UAAU,cAAc,UACtC,OAAO;EAEX,SAAS,OAAO;CACpB;CACA,OAAO,SAAS;AACpB;;;;;;;;;AAUA,SAAgB,2BAA2B,EACvC,cACA,eACA,UACA,cAaF;CAKE,MAAM,YAAY,OAAO,aAAa;CAEtC,gBAAgB;EACZ,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,aAAa,WAAW,CAAC,UAAU,eAAe,GAAG;EAE1D,MAAM,WAAW,gBAAgB,aAAa,OAAO;EACrD,IAAI,CAAC,UAAU;EAEf,IAAI,WAAW;EACf,MAAM,cAAc;EACpB,IAAI,QAAuB;EAE3B,MAAM,mBAAmB;GACrB,QAAQ;GACR,IAAI,SAAS,gBAAgB,UAAU,YAAY,aAAa;IAC5D,SAAS,YAAY;IACrB,UAAU,UAAU,KAAA;GACxB,OAAO;IACH;IACA,QAAQ,sBAAsB,UAAU;GAC5C;EACJ;EAEA,QAAQ,sBAAsB,UAAU;EACxC,aAAa;GACT,IAAI,UAAU,MAAM,qBAAqB,KAAK;EAClD;CACJ,GAAG,CAAC,cAAc,UAAU,CAAC;CAE7B,MAAM,mBAAmB,OAAO,CAAC;CACjC,gBAAgB;EACZ,MAAM,KAAK,aAAa;EACxB,IAAI,CAAC,MAAM,CAAC,UAAU;EACtB,MAAM,WAAW,gBAAgB,EAAE;EACnC,IAAI,CAAC,UAAU;EAEf,MAAM,qBAAqB;GACvB,MAAM,gBAAgB,SAAS;GAC/B,MAAM,YAAY,gBAAgB,iBAAiB,UAAU,YAAY;GACzE,iBAAiB,UAAU;GAC3B,SAAS;IACL,iBAAiB;IACjB,cAAc;IACd,0BAA0B;GAC9B,CAAC;EACL;EAEA,SAAS,iBAAiB,UAAU,cAAc,EAAE,SAAS,KAAK,CAAC;EACnE,aAAa,SAAS,oBAAoB,UAAU,YAAY;CACpE,GAAG,CAAC,cAAc,QAAQ,CAAC;CAE3B,OAAO,EAAE,eAAe,UAAU;AACtC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebasepro/ui",
-  "version": "0.24.0",
+  "version": "0.24.1-canary.gcb918fc",
   "description": "Rebase design system — React components and design tokens built on Radix UI, Tailwind CSS and lucide-react",
   "keywords": [
     "rebase",
@@ -119,7 +119,7 @@
   },
   "scripts": {
     "watch": "vite build --watch",
-    "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/src/theme.css dist/ && tsc --emitDeclarationOnly -p tsconfig.prod.json && node ../../tooling/scripts/add-dts-extensions.mjs dist && node ../../tooling/scripts/assert-build-output.mjs",
+    "build": "rm -rf dist || true && vite build && cp dist/src/index.css dist/src/theme.css dist/ && tsc --emitDeclarationOnly -p tsconfig.prod.json && node ../../tooling/scripts/add-dts-extensions.mjs dist && node ../../tooling/scripts/assert-build-output.mjs && node ../../tooling/scripts/check-ui-dist-tree-shakes.mjs",
     "test:lint": "eslint \"src/**\" --quiet",
     "test": "jest --passWithNoTests",
     "test:watch": "jest --watch",