@heliosgraphics/ui 2.0.0-alpha.77 → 2.0.0-alpha.78

package/components/Clock/Clock.tsx

@@ -6,7 +6,7 @@ import type { FC } from "react"
 import type { ClockProps } from "./Clock.types"
 
 export const Clock: FC<ClockProps> = () => {
-	const [time, setTime] = useState(new Date())
+	const [time, setTime] = useState(() => new Date())
 
 	useEffect(() => {
 		const timerId = globalThis.setInterval(() => {

package/components/Icon/Icon.tsx

@@ -1,10 +1,10 @@
 import { getClasses } from "@heliosgraphics/utils/classnames"
 import { icons } from "@heliosgraphics/icons"
 import styles from "./Icon.module.css"
-import type { FC } from "react"
+import { memo, type FC } from "react"
 import type { IconProps } from "./Icon.types"
 
-export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
+export const Icon: FC<IconProps> = memo(({ icon, className, emphasis, size }) => {
 	const iconSizeStyle = {
 		height: size + "px",
 		minHeight: size + "px",
@@ -26,4 +26,4 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
 		/>
 	)
-}
+})

package/components/Loading/Loading.tsx

@@ -1,9 +1,9 @@
 import { getClasses } from "@heliosgraphics/utils/classnames"
 import styles from "./Loading.module.css"
-import type { FC } from "react"
+import { memo, type FC } from "react"
 import type { LoadingProps } from "./Loading.types"
 
-export const Loading: FC<LoadingProps> = ({ className, size, emphasis }) => {
+export const Loading: FC<LoadingProps> = memo(({ className, size, emphasis }) => {
 	const rSize = size / 2
 	const cSize = rSize + 2
 	const dashSize = size + cSize
@@ -40,4 +40,4 @@ export const Loading: FC<LoadingProps> = ({ className, size, emphasis }) => {
 			/>
 		</svg>
 	)
-}
+})

package/components/Menu/components/MenuCategory/MenuCategory.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState, type FC } from "react"
+import { useState, type FC } from "react"
 import { Flex } from "../../../Flex"
 import { Icon } from "../../../Icon"
 import { Text } from "../../../Text"
@@ -8,9 +8,23 @@ import { getClasses } from "@heliosgraphics/utils"
 import styles from "./MenuCategory.module.css"
 import type { MenuCategoryProps } from "./MenuCategory.types"
 
-export const MenuCategory: FC<MenuCategoryProps> = ({ category, children, isFolder, isOpen: isIncomingOpen }) => {
-	const [isOpen, setOpen] = useState<boolean>(!!isIncomingOpen)
-	const onToggle = (): void => setOpen(!isOpen)
+export const MenuCategory: FC<MenuCategoryProps> = ({
+	category,
+	children,
+	isFolder,
+	isOpen: controlledIsOpen,
+	isInitiallyClosed,
+}) => {
+	const [localIsOpen, setLocalIsOpen] = useState<boolean>(!isInitiallyClosed)
+
+	const isControlled: boolean = controlledIsOpen !== undefined
+	const isOpen: boolean = isControlled ? !!controlledIsOpen : localIsOpen
+
+	const onToggle = (): void => {
+		if (!isControlled) {
+			setLocalIsOpen((prev) => !prev)
+		}
+	}
 
 	const menuCategoryClasses: string = getClasses(styles.menuCategory, {
 		[styles.menuCategoryFolder]: category,
@@ -28,10 +42,6 @@ export const MenuCategory: FC<MenuCategoryProps> = ({ category, children, isFold
 
 	const showHeader: boolean = Boolean(category || isFolder)
 
-	useEffect(() => {
-		setOpen(!!isIncomingOpen)
-	}, [isIncomingOpen])
-
 	return (
 		<Flex isColumn={true} isXCentered={true} data-ui-component="Menu.Category" className={menuCategoryClasses}>
 			{showHeader && (

package/components/Pill/Pill.tsx

@@ -4,7 +4,7 @@ import { Flex } from "../Flex"
 import { Text } from "../Text"
 import { Icon } from "../Icon"
 import styles from "./Pill.module.css"
-import type { FC } from "react"
+import { memo, type FC } from "react"
 import type { PillProps } from "./Pill.types"
 
 const PILL_ICON_SIZE: Record<string, number> = {
@@ -13,43 +13,45 @@ const PILL_ICON_SIZE: Record<string, number> = {
 	normal: 24,
 }
 
-export const Pill: FC<PillProps> = ({
-	appearance = "light",
-	color = "gray",
-	className,
-	icon,
-	isLabelHidden,
-	isMono,
-	isRounded,
-	label,
-	onClick,
-	size = "normal",
-}) => {
-	const pillColorClasses: Array<string> = getColorClasses(color, appearance)
-	const pillClasses = getClasses(styles.pill, "non-selectable break-word", ...pillColorClasses, className, {
-		[styles.pillRounded]: isRounded,
-		[`radius-md`]: !isRounded,
+export const Pill: FC<PillProps> = memo(
+	({
+		appearance = "light",
+		color = "gray",
+		className,
+		icon,
+		isLabelHidden,
+		isMono,
+		isRounded,
+		label,
+		onClick,
+		size = "normal",
+	}) => {
+		const pillColorClasses: Array<string> = getColorClasses(color, appearance)
+		const pillClasses = getClasses(styles.pill, "non-selectable break-word", ...pillColorClasses, className, {
+			[styles.pillRounded]: isRounded,
+			[`radius-md`]: !isRounded,
 
-		[styles.pillLight]: appearance === "light",
+			[styles.pillLight]: appearance === "light",
 
-		[styles.pillNormal]: !size || size === "normal",
-		[styles.pillSmall]: size === "small",
-		[styles.pillTiny]: size === "tiny",
+			[styles.pillNormal]: !size || size === "normal",
+			[styles.pillSmall]: size === "small",
+			[styles.pillTiny]: size === "tiny",
 
-		[styles.pillIconOnly]: !!icon && isLabelHidden,
-	})
+			[styles.pillIconOnly]: !!icon && isLabelHidden,
+		})
 
-	const isSmall: boolean = size !== "normal"
-	const pillTextSize = isSmall ? "tiny" : "small"
+		const isSmall: boolean = size !== "normal"
+		const pillTextSize = isSmall ? "tiny" : "small"
 
-	return (
-		<Flex {...(onClick && { onClick })} className={pillClasses} isCentered={true} gap={2} data-ui-component="Pill">
-			{icon && <Icon size={PILL_ICON_SIZE[size] || 16} icon={icon} />}
-			{!isLabelHidden && (
-				<Text type={pillTextSize} whiteSpace="nowrap" {...(isMono && { fontFamily: "mono" })} fontWeight="medium">
-					{label}
-				</Text>
-			)}
-		</Flex>
-	)
-}
+		return (
+			<Flex {...(onClick && { onClick })} className={pillClasses} isCentered={true} gap={2} data-ui-component="Pill">
+				{icon && <Icon size={PILL_ICON_SIZE[size] || 16} icon={icon} />}
+				{!isLabelHidden && (
+					<Text type={pillTextSize} whiteSpace="nowrap" {...(isMono && { fontFamily: "mono" })} fontWeight="medium">
+						{label}
+					</Text>
+				)}
+			</Flex>
+		)
+	},
+)

package/components/Separator/Separator.tsx

@@ -3,32 +3,27 @@ import { VerticalSeparator } from "./components/VerticalSeparator"
 import styles from "./Separator.module.css"
 import { getClasses } from "@heliosgraphics/utils"
 import type { SeparatorProps } from "./Separator.types"
-import type { FC } from "react"
+import { memo, type FC } from "react"
 
-export const Separator: FC<SeparatorProps> = ({
-	className,
-	emphasis = "primary",
-	isVertical,
-	height,
-	lineStyle = "solid",
-	width,
-}) => {
-	const separatorClasses: string = getClasses(className, {
-		[styles.separatorPrimary]: emphasis === "primary",
-		[styles.separatorSecondary]: emphasis === "secondary",
-		[styles.separatorTertiary]: emphasis === "tertiary",
-	})
+export const Separator: FC<SeparatorProps> = memo(
+	({ className, emphasis = "primary", isVertical, height, lineStyle = "solid", width }) => {
+		const separatorClasses: string = getClasses(className, {
+			[styles.separatorPrimary]: emphasis === "primary",
+			[styles.separatorSecondary]: emphasis === "secondary",
+			[styles.separatorTertiary]: emphasis === "tertiary",
+		})
 
-	const separatorProps: SeparatorProps = {
-		className: separatorClasses,
-		emphasis,
-		...(isVertical !== undefined && { isVertical }),
-		...(height !== undefined && { height }),
-		lineStyle,
-		...(width !== undefined && { width }),
-	}
+		const separatorProps: SeparatorProps = {
+			className: separatorClasses,
+			emphasis,
+			...(isVertical !== undefined && { isVertical }),
+			...(height !== undefined && { height }),
+			lineStyle,
+			...(width !== undefined && { width }),
+		}
 
-	if (isVertical) return <VerticalSeparator {...separatorProps} />
+		if (isVertical) return <VerticalSeparator {...separatorProps} />
 
-	return <HorizontalSeparator {...separatorProps} />
-}
+		return <HorizontalSeparator {...separatorProps} />
+	},
+)

package/components/Spacer/Spacer.tsx

@@ -1,6 +1,6 @@
-import type { FC } from "react"
+import { memo, type FC } from "react"
 import type { SpacerProps } from "./Spacer.types"
 
-export const Spacer: FC<SpacerProps> = ({ gap }) => {
+export const Spacer: FC<SpacerProps> = memo(({ gap }) => {
 	return <div style={{ height: `${gap ?? 0}px` }} />
-}
+})

package/components/Text/Text.tsx

@@ -4,12 +4,12 @@ import { getTypographyUtility } from "./Text.utils"
 import { P } from "./components/P"
 import { Small } from "./components/Small"
 import { Tiny } from "./components/Tiny"
-import { type FC } from "react"
+import { memo, type FC } from "react"
 import styles from "./Text.module.css"
 import type { TextProps } from "./Text.types"
 import { Micro } from "./components/Micro"
 
-export const Text: FC<TextProps> = (props) => {
+export const Text: FC<TextProps> = memo((props) => {
 	const textClasses: string = getClasses(props.className, styles.text, {
 		[styles.textPrimary]: props.emphasis === "primary",
 		[styles.textSecondary]: props.emphasis === "secondary",
@@ -51,4 +51,4 @@ export const Text: FC<TextProps> = (props) => {
 		default:
 			return <Div {...baseTextProps} />
 	}
-}
+})

package/contexts/LayoutContext/LayoutContext.tsx

@@ -19,6 +19,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 	const [hasMounted, setHasMounted] = useState<boolean>(false)
 	const asideRef = useRef<HTMLElement | null>(null)
 	const isMenuVisibleRef = useRef<boolean>(false)
+	const windowWidthRef = useRef<number>(0)
 
 	useEffect(() => {
 		isMenuVisibleRef.current = isMenuVisible
@@ -29,6 +30,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 
 		setHasMounted(true)
 		setWindowWidth(initialWidth)
+		windowWidthRef.current = initialWidth
 
 		const initialMenuVisible = initialWidth >= breakpoint
 
@@ -37,10 +39,11 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 
 		const handleResize = (): void => {
 			const newWidth: number = globalThis.innerWidth
-			const wasWideEnough: boolean = windowWidth >= breakpoint
+			const wasWideEnough: boolean = windowWidthRef.current >= breakpoint
 			const isNowWideEnough: boolean = newWidth >= breakpoint
 
 			setWindowWidth(newWidth)
+			windowWidthRef.current = newWidth
 
 			if (isNowWideEnough && !wasWideEnough) {
 				setIsMenuVisible(true)
@@ -71,7 +74,7 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			globalThis.removeEventListener("resize", handleResize)
 			globalThis.document.removeEventListener("mousedown", handleClickOutside)
 		}
-	}, [breakpoint, windowWidth])
+	}, [breakpoint])
 
 	const isWideEnough: boolean = hasMounted ? windowWidth >= breakpoint : false
 	const shouldShowNavigation: boolean = isWideEnough || isMenuVisible

package/hooks/useChatScroll.tsx

@@ -19,11 +19,11 @@ export const useChatScroll = (
 	onResetManual: () => void
 } => {
 	const [isManual, setManual] = useState<boolean>(false)
-	const [scrollPos, setScrollPos] = useState<ScrollPosition>({
+	const [scrollPos, setScrollPos] = useState<ScrollPosition>(() => ({
 		top: 0,
 		bottom: 0,
 		height: 0,
-	})
+	}))
 	const ref = useRef<HTMLDivElement>(null)
 	const wasAtBottom = useRef<boolean>(true)
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.0-alpha.77",
+	"version": "2.0.0-alpha.78",
 	"type": "module",
 	"sideEffects": false,
 	"author": "Chris Puska <chris@puska.org>",
@@ -37,23 +37,23 @@
 		"react-plock": "^3.6.1"
 	},
 	"devDependencies": {
-		"@testing-library/react": "^16.3.1",
+		"@testing-library/react": "^16.3.2",
 		"@types/node": "^25",
-		"@typescript-eslint/eslint-plugin": "^8.50.1",
+		"@typescript-eslint/eslint-plugin": "^8.53.1",
 		"@vitejs/plugin-react": "^5.1.2",
-		"@vitest/coverage-v8": "^4.0.16",
+		"@vitest/coverage-v8": "^4.0.18",
 		"esbuild": "latest",
 		"esbuild-css-modules-plugin": "latest",
 		"eslint": "^9.39.2",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-prettier": "^5.5.4",
+		"eslint-plugin-prettier": "^5.5.5",
 		"glob": "latest",
-		"jsdom": "^27.3.0",
-		"next": "^16.1.1",
-		"prettier": "^3.7.4",
+		"jsdom": "^27.4.0",
+		"next": "^16.1.4",
+		"prettier": "^3.8.1",
 		"typescript": "^5.9.3",
-		"vite": "^7.3.0",
-		"vitest": "^4.0.16"
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18"
 	},
 	"peerDependencies": {
 		"@types/react": "^19",