@heliosgraphics/ui 2.0.1-alpha.1 → 2.0.1-alpha.11

package/LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Helios Graphics
+Copyright (c) 2016 Helios Graphics
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/components/Dropdown/Dropdown.module.css

@@ -5,7 +5,9 @@
 	user-select: none;
 }
 
-.dropdownOpen [data-ui-component="Icon"] {
+.dropdownOpen .dropdown__activator [data-ui-icon="caret-down"],
+.dropdownOpen .dropdown__activator [data-ui-icon="arrow-down"],
+.dropdownOpen .dropdown__activator [data-ui-icon="chevron-down"] {
 	transition: transform 96ms ease-in-out;
 	transform: rotate(180deg);
 }
@@ -53,40 +55,19 @@
 	position: absolute;
 	z-index: var(--z-index-8);
 
-	display: none;
 	min-width: 240px;
 	opacity: 0;
 
 	transition:
-		display 96ms ease-in-out allow-discrete,
 		transform 96ms ease-in-out,
 		opacity 96ms ease-in-out;
 	pointer-events: none;
 }
 
-.dropdown__navActive {
-	display: block;
-	opacity: 1;
+.dropdown__nav.dropdown__navActive {
+	opacity: 1 !important;
 
-	transform: translateY(0);
+	transform: translateY(0) !important;
 
 	pointer-events: all;
-
-	@starting-style {
-		opacity: 0;
-	}
-}
-
-.dropdownBottomLeft .dropdown__navActive,
-.dropdownBottomRight .dropdown__navActive {
-	@starting-style {
-		transform: translateY(-6px);
-	}
-}
-
-.dropdownTopLeft .dropdown__navActive,
-.dropdownTopRight .dropdown__navActive {
-	@starting-style {
-		transform: translateY(6px);
-	}
 }

package/components/Dropdown/Dropdown.tsx

@@ -95,6 +95,7 @@ export const Dropdown: FC<DropdownProps> = ({ children, items, isDisabled, posit
 			<div
 				role="button"
 				tabIndex={0}
+				className={styles.dropdown__activator}
 				onClick={onSetVisible}
 				onKeyDown={onKeyDown}
 				aria-expanded={isVisible}

package/components/Flex/Flex.utils.ts

@@ -73,7 +73,7 @@ export const getFlexUtility = (props?: FlexProps): string => {
 export const getResponsiveScale = (value?: ResponsiveScaleType, prefix: string = "p"): string => {
 	if (!value) return ""
 
-	const isArray: boolean = Boolean(value && value instanceof Array)
+	const isArray: boolean = Array.isArray(value)
 	const classes = new Set<string>()
 
 	if (!isArray) return `${prefix}-${value}`
@@ -92,7 +92,7 @@ export const getResponsiveScale = (value?: ResponsiveScaleType, prefix: string =
 export const getPadding = (paddingValue?: ResponsiveScaleType): string => {
 	if (!paddingValue) return ""
 
-	const isArray: boolean = Boolean(paddingValue && paddingValue instanceof Array)
+	const isArray: boolean = Array.isArray(paddingValue)
 	const paddingClasses = new Set<string>()
 
 	if (!isArray) return `p-${paddingValue}`
@@ -111,7 +111,7 @@ export const getPadding = (paddingValue?: ResponsiveScaleType): string => {
 export const getRadius = (radiusValue?: ResponsiveRadiusType): string => {
 	if (!radiusValue) return ""
 
-	const isArray: boolean = Boolean(radiusValue && radiusValue instanceof Array)
+	const isArray: boolean = Array.isArray(radiusValue)
 	const radiusClasses = new Set<string>()
 
 	if (!isArray) return `radius-${radiusValue}`

package/components/Heading/Heading.tsx

@@ -1,4 +1,4 @@
-import { getTypographyUtility } from "../Text/Text.utils"
+import { getTypographyUtility, stripTypographyProps } from "../Text/Text.utils"
 import { getClasses } from "@heliosgraphics/utils"
 import { H0 } from "./components/H0"
 import { H1 } from "./components/H1"
@@ -9,7 +9,7 @@ import { H5 } from "./components/H5"
 import { H6 } from "./components/H6"
 import styles from "./Heading.module.css"
 import type { HeadingProps } from "./Heading.types"
-import type { FC, CSSProperties } from "react"
+import type { FC, CSSProperties, HTMLAttributes } from "react"
 
 export const Heading: FC<HeadingProps> = (props) => {
 	const { level, lineClamp, lineHeight, style, className, ...rest } = props
@@ -19,10 +19,7 @@ export const Heading: FC<HeadingProps> = (props) => {
 		[styles.headingSecondary]: props.emphasis === "secondary",
 		[styles.headingTertiary]: props.emphasis === "tertiary",
 	})
-	const utility: string = getTypographyUtility({
-		...props,
-		className: headingClasses,
-	})
+	const utility: string = getTypographyUtility(props, headingClasses)
 	const lineClampStyle: CSSProperties | undefined = lineClamp
 		? {
 				display: "-webkit-box",
@@ -35,12 +32,12 @@ export const Heading: FC<HeadingProps> = (props) => {
 	const lineHeightStyle: CSSProperties | undefined = lineHeight !== undefined ? { lineHeight } : undefined
 
 	const mergedStyle: CSSProperties | undefined =
-		style || lineClampStyle || lineHeightStyle
-			? { ...(style || {}), ...(lineClampStyle || {}), ...(lineHeightStyle || {}) }
-			: undefined
+		style || lineClampStyle || lineHeightStyle ? { ...style, ...lineClampStyle, ...lineHeightStyle } : undefined
+	const safeHeadingProps: Omit<HeadingProps, "level" | "lineClamp" | "lineHeight" | "className" | "style"> =
+		stripTypographyProps(rest)
 
-	const allProps: Omit<HeadingProps, "level"> = {
-		...rest,
+	const allProps: HTMLAttributes<HTMLHeadingElement> = {
+		...safeHeadingProps,
 		children: props.children,
 		style: mergedStyle,
 		className: utility,

package/components/Icon/Icon.module.css

@@ -7,16 +7,20 @@
 	width: 100%;
 
 	fill: currentcolor;
+	stroke: currentcolor;
 }
 
 .iconPrimary svg {
 	fill: var(--ui-text-primary);
+	stroke: var(--ui-text-primary);
 }
 
 .iconSecondary svg {
 	fill: var(--ui-text-secondary);
+	stroke: var(--ui-text-secondary);
 }
 
 .iconTertiary svg {
 	fill: var(--ui-text-tertiary);
+	stroke: var(--ui-text-tertiary);
 }

package/components/Icon/Icon.tsx

@@ -24,6 +24,7 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 			style={iconSizeStyle}
 			aria-hidden={true}
 			data-ui-component="Icon"
+			data-ui-icon={icon}
 			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
 		/>
 	)

package/components/Layout/components/LayoutMain/components/LayoutMainContent/LayoutMainContent.utils.ts

@@ -3,6 +3,10 @@
 let lastLocation: string | null = null
 let isHistoryPatched: boolean = false
 
+const dispatchLocationChange = (): void => {
+	globalThis.dispatchEvent(new Event("locationchange"))
+}
+
 const getLocationKey = (): string | null => {
 	if (!globalThis?.location) return null
 
@@ -15,9 +19,6 @@ const patchHistory = (): void => {
 	isHistoryPatched = true
 
 	const { pushState, replaceState } = globalThis.history
-	const dispatchLocationChange = (): void => {
-		globalThis.dispatchEvent(new Event("locationchange"))
-	}
 
 	const pushStateWrapper = (...args: Parameters<History["pushState"]>): ReturnType<History["pushState"]> => {
 		const result = pushState.apply(globalThis.history, args as Parameters<History["pushState"]>)

package/components/Markdown/Markdown.meta.ts

@@ -16,6 +16,11 @@ export const meta: HeliosAttributeMeta<MarkdownProps> = {
 		isOptional: true,
 		description: "Children to render inside the markdown wrapper",
 	},
+	isLinksAllowed: {
+		type: "boolean",
+		isOptional: true,
+		description: "Preserves markdown links and auto-linked URLs in sanitized output",
+	},
 	isNonSelectable: {
 		type: "boolean",
 		isOptional: true,

package/components/Markdown/Markdown.tsx

@@ -4,7 +4,7 @@ import styles from "./Markdown.module.css"
 import type { FC } from "react"
 import type { MarkdownProps } from "./Markdown.types"
 
-export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable }) => {
+export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable, isLinksAllowed }) => {
 	if (!text && !children) return null
 
 	const markdownClasses: string = getClasses(styles.markdown, {
@@ -12,7 +12,7 @@ export const Markdown: FC<MarkdownProps> = ({ text, children, isNonSelectable })
 	})
 
 	if (text) {
-		const innerHTML = { __html: renderMarkdown(text) }
+		const innerHTML = { __html: renderMarkdown(text, { allowLinks: !!isLinksAllowed }) }
 
 		return <div className={markdownClasses} dangerouslySetInnerHTML={innerHTML} data-ui-component="Markdown"></div>
 	}

package/components/Markdown/Markdown.types.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from "react"
 
 export interface MarkdownProps {
 	children?: ReactNode
+	isLinksAllowed?: boolean
 	isNonSelectable?: boolean
 	text?: string
 }

package/components/Masonry/Masonry.tsx

@@ -1,6 +1,5 @@
-"use client"
-
-import { type FC, useId, useInsertionEffect } from "react"
+import { Children, type FC } from "react"
+import { Masonry as Plock } from "react-plock"
 import type { MasonryProps } from "./Masonry.types"
 
 export const Masonry: FC<MasonryProps> = ({
@@ -9,40 +8,21 @@ export const Masonry: FC<MasonryProps> = ({
 	gap = [2, 4, 6],
 	breakpoints = [0, 640, 960],
 }) => {
-	const reactId = useId()
-	const id = `masonry${reactId.replace(/:/g, "")}`
-
-	useInsertionEffect(() => {
-		const style = document.createElement("style")
-
-		style.dataset["masonryId"] = id
-		style.textContent = `
-			.${id} { column-count: ${columns[0]}; column-gap: ${gap[0]}px; }
-			.${id} > * { break-inside: avoid; margin-bottom: ${gap[0]}px; }
-
-			@media (min-width: ${breakpoints[1]}px) {
-				.${id} { column-count: ${columns[1]}; column-gap: ${gap[1]}px; }
-				.${id} > * { margin-bottom: ${gap[1]}px; }
-			}
-
-			@media (min-width: ${breakpoints[2]}px) {
-				.${id} { column-count: ${columns[2]}; column-gap: ${gap[2]}px; }
-				.${id} > * { margin-bottom: ${gap[2]}px; }
-			}
-		`
-		document.head.appendChild(style)
-
-		return (): void => {
-			style.remove()
-		}
-	}, [id, columns, gap, breakpoints])
-
 	if (!children) return null
 
+	const items = Children.toArray(children)
+	const numericGap = gap.map((g) => (g === "px" ? 1 : g)) as Array<number>
+
 	return (
-		<div className={id} data-ui-component="Masonry">
-			{children}
-		</div>
+		<Plock
+			items={items}
+			config={{
+				columns,
+				gap: numericGap,
+				media: breakpoints,
+			}}
+			render={(item, index) => <div key={index}>{item}</div>}
+		/>
 	)
 }
 

package/components/Setup/Setup.spec.tsx

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "bun:test"
+import type { HeliosFixedThemeType } from "../../types/themes"
+import { code } from "./Setup.utils"
+
+describe("Setup", () => {
+	it("should execute when serialized into an inline script", () => {
+		const rootDataset: Record<string, string> = {}
+		const localStorageValues = new Map<string, string>()
+		const listeners: Record<string, (event: { matches: boolean }) => void> = {}
+
+		globalThis.__theme = "light" as HeliosFixedThemeType
+		globalThis.__onThemeChange = undefined
+		globalThis.__setPreferredTheme = (): void => {}
+		globalThis.document = {
+			documentElement: {
+				dataset: rootDataset,
+			},
+		} as Document
+		globalThis.localStorage = {
+			getItem: (key: string): string | null => localStorageValues.get(key) ?? null,
+			setItem: (key: string, value: string): void => {
+				localStorageValues.set(key, value)
+			},
+		} as Storage
+		globalThis.matchMedia = ((query: string): MediaQueryList => {
+			expect(query).toBe("(prefers-color-scheme: dark)")
+			return {
+				matches: true,
+				addEventListener: (type: string, listener: (event: { matches: boolean }) => void): void => {
+					listeners[type] = listener
+				},
+			} as MediaQueryList
+		}) as typeof globalThis.matchMedia
+
+		new Function(`return (${code.toString()})("system", undefined)`)()
+
+		expect(globalThis.__theme).toBe("dark")
+		expect(rootDataset["theme"]).toBe("dark")
+		expect(typeof listeners["change"]).toBe("function")
+
+		const changeListener = listeners["change"]
+		expect(changeListener).toBeDefined()
+		if (!changeListener) {
+			throw new Error("expected change listener to be registered")
+		}
+
+		changeListener({ matches: false })
+
+		expect(globalThis.__theme).toBe("light")
+		expect(rootDataset["theme"]).toBe("light")
+		expect(localStorageValues.get("theme")).toBe("light")
+	})
+})

package/components/Setup/Setup.utils.ts

@@ -3,20 +3,18 @@ import type { HeliosFixedThemeType, HeliosThemeType } from "../../types/themes"
 export const code = (theme: HeliosThemeType = "system", fixedTheme?: HeliosFixedThemeType): void => {
 	globalThis.__onThemeChange = function (_theme: HeliosFixedThemeType): void {}
 
+	/* eslint-disable-next-line unicorn/consistent-function-scoping */
 	const setTheme = (newTheme: HeliosFixedThemeType): void => {
 		globalThis.__theme = newTheme
 		document.documentElement.dataset["theme"] = newTheme
 		globalThis.__onThemeChange?.(newTheme)
 	}
 
-	const handleDocumentClick = (event: MouseEvent): void => {
-		if (event.x > 256 && globalThis.location.hash === "#ui-menu") {
-			globalThis.location.hash = "#ui"
-		}
+	/* eslint-disable-next-line unicorn/consistent-function-scoping */
+	const handleDarkModeChange = (event: MediaQueryListEvent): void => {
+		globalThis.__setPreferredTheme(event.matches ? "dark" : "light")
 	}
 
-	document.addEventListener("click", handleDocumentClick)
-
 	const isLocked: boolean = fixedTheme !== undefined || theme !== "system"
 
 	if (fixedTheme !== undefined && theme !== "system") {
@@ -51,10 +49,6 @@ export const code = (theme: HeliosThemeType = "system", fixedTheme?: HeliosFixed
 		}
 	}
 
-	const handleDarkModeChange = (event: MediaQueryListEvent): void => {
-		globalThis.__setPreferredTheme(event.matches ? "dark" : "light")
-	}
-
 	darkQuery.addEventListener("change", handleDarkModeChange)
 
 	setTheme(preferredTheme ?? (darkQuery.matches ? "dark" : "light"))

package/components/Tabs/Tabs.tsx

@@ -1,19 +1,13 @@
 import { getClasses } from "@heliosgraphics/utils"
 import { Text } from "../Text"
+import { onTabKeyDown } from "./Tabs.utils"
 import styles from "./Tabs.module.css"
-import type { FC, KeyboardEvent } from "react"
+import type { FC } from "react"
 import type { TabItem, TabsProps } from "./Tabs.types"
 
 export const Tabs: FC<TabsProps> = ({ items, children }) => {
 	if (!items?.length) return null
 
-	const onKeyDown = (event: KeyboardEvent<HTMLElement>, item: TabItem): void => {
-		if (event.key === " " || event.key === "Enter") {
-			event.preventDefault()
-			item.onClick?.()
-		}
-	}
-
 	return (
 		<div data-ui-component="Tabs">
 			<div role="tablist" className={styles.tabs__list}>
@@ -46,7 +40,7 @@ export const Tabs: FC<TabsProps> = ({ items, children }) => {
 						<div
 							{...commonProps}
 							onClick={item.isDisabled ? undefined : item.onClick}
-							onKeyDown={(e) => onKeyDown(e, item)}
+							onKeyDown={(event) => onTabKeyDown(event, item)}
 						>
 							<Text type="small" fontWeight="medium">
 								{item.name}

package/components/Tabs/Tabs.utils.ts

@@ -0,0 +1,9 @@
+import type { KeyboardEvent } from "react"
+import type { TabItem } from "./Tabs.types"
+
+export const onTabKeyDown = (event: KeyboardEvent<HTMLElement>, item: TabItem): void => {
+	if (event.key === " " || event.key === "Enter") {
+		event.preventDefault()
+		item.onClick?.()
+	}
+}

package/components/Text/Text.tsx

@@ -17,10 +17,7 @@ export const Text: FC<TextProps> = (props) => {
 		[styles.textInherit]: props.emphasis === "inherit",
 	})
 
-	const utility: string = getTypographyUtility({
-		...props,
-		className: textClasses,
-	})
+	const utility: string = getTypographyUtility(props, textClasses)
 	const lineClampStyle: object | undefined = props.lineClamp
 		? {
 				display: "-webkit-box",
@@ -31,7 +28,7 @@ export const Text: FC<TextProps> = (props) => {
 		: undefined
 
 	const mergedStyle: object | undefined =
-		props.style || lineClampStyle ? { ...(props.style || {}), ...(lineClampStyle || {}) } : undefined
+		props.style || lineClampStyle ? { ...props.style, ...lineClampStyle } : undefined
 
 	const baseTextProps: Omit<TextProps, "type"> = {
 		onClick: props.onClick,

package/components/Text/Text.utils.ts

@@ -1,7 +1,54 @@
-import type { TextProps } from "./Text.types"
+import type { TextBaseProps, TextProps } from "./Text.types"
 import type { HeadingProps } from "../Heading/Heading.types"
 
-export const _getFontWeight = (fw: TextProps["fontWeight"]): string => {
+export interface TypographyUtilityInput {
+	emphasis?: TextBaseProps["emphasis"] | undefined
+	fontFamily?: TextBaseProps["fontFamily"] | undefined
+	fontStyle?: TextBaseProps["fontStyle"] | undefined
+	fontWeight?: TextBaseProps["fontWeight"] | undefined
+	isBalanced?: TextBaseProps["isBalanced"] | undefined
+	isEllipsis?: TextBaseProps["isEllipsis"] | undefined
+	isNonSelectable?: TextBaseProps["isNonSelectable"] | undefined
+	textAlign?: TextBaseProps["textAlign"] | undefined
+	textDecoration?: TextBaseProps["textDecoration"] | undefined
+	whiteSpace?: TextBaseProps["whiteSpace"] | undefined
+	wordWrap?: TextBaseProps["wordWrap"] | undefined
+}
+
+export const stripTypographyProps = <T extends TypographyUtilityInput>(
+	props: T,
+): Omit<T, keyof TypographyUtilityInput> => {
+	const {
+		emphasis,
+		fontFamily,
+		fontStyle,
+		fontWeight,
+		isBalanced,
+		isEllipsis,
+		isNonSelectable,
+		textAlign,
+		textDecoration,
+		whiteSpace,
+		wordWrap,
+		...rest
+	} = props
+
+	void emphasis
+	void fontFamily
+	void fontStyle
+	void fontWeight
+	void isBalanced
+	void isEllipsis
+	void isNonSelectable
+	void textAlign
+	void textDecoration
+	void whiteSpace
+	void wordWrap
+
+	return rest
+}
+
+export const _getFontWeight = (fw: TextBaseProps["fontWeight"]): string => {
 	switch (fw) {
 		case "thin":
 			return "fw-thin"
@@ -27,7 +74,10 @@ export const _getFontWeight = (fw: TextProps["fontWeight"]): string => {
 	}
 }
 
-export const getTypographyUtility = (props: TextProps | HeadingProps): string => {
+export const getTypographyUtility = (
+	props: TextProps | HeadingProps | TypographyUtilityInput,
+	className?: string,
+): string => {
 	const typoClasses: Array<string> = []
 
 	const fontFamily = props.fontFamily ? props.fontFamily : "sans"
@@ -36,7 +86,7 @@ export const getTypographyUtility = (props: TextProps | HeadingProps): string =>
 	typoClasses.push(fontFamily)
 	typoClasses.push(fontWeight)
 
-	if (props.className) typoClasses.push(props.className)
+	if (className) typoClasses.push(className)
 	if (props.fontStyle) typoClasses.push(props.fontStyle)
 	if (props.isBalanced) typoClasses.push("text-balanced")
 	if (props.isEllipsis) typoClasses.push("ellipsis")

package/hooks/useIntersection.tsx

@@ -6,9 +6,17 @@ export const useIntersection = (ref: RefObject<HTMLElement>): boolean => {
 	const [isIntersecting, setIntersecting] = useState<boolean>(false)
 
 	useEffect(() => {
-		if (!ref?.current) return
+		if (!ref?.current) {
+			setIntersecting(false)
+			return
+		}
 
-		const observer = new IntersectionObserver(([entry]) => setIntersecting(!!entry?.isIntersecting))
+		if (typeof globalThis.IntersectionObserver !== "function") {
+			setIntersecting(false)
+			return
+		}
+
+		const observer = new globalThis.IntersectionObserver(([entry]) => setIntersecting(!!entry?.isIntersecting))
 
 		observer.observe(ref.current)
 

package/hooks/useResizeObserver.tsx

@@ -18,7 +18,14 @@ export const useResizeObserver = (): readonly [(element: HTMLDivElement | null)
 		}
 
 		if (element) {
-			resizeObserverRef.current = new ResizeObserver((entries) => {
+			const rect = element.getBoundingClientRect()
+			setWidth(rect.width)
+
+			if (typeof globalThis.ResizeObserver !== "function") {
+				return
+			}
+
+			resizeObserverRef.current = new globalThis.ResizeObserver((entries) => {
 				if (entries[0]) {
 					const entryWidth = entries[0].contentRect.width
 					setWidth(entryWidth)
@@ -26,9 +33,6 @@ export const useResizeObserver = (): readonly [(element: HTMLDivElement | null)
 			})
 
 			resizeObserverRef.current.observe(element)
-
-			const rect = element.getBoundingClientRect()
-			setWidth(rect.width)
 		} else {
 			setWidth(0)
 		}

package/hooks/useTheme.tsx

@@ -3,6 +3,8 @@
 import { useCallback, useEffect, useState } from "react"
 import type { HeliosFixedThemeType } from "../types/themes"
 
+const getTheme = (): HeliosFixedThemeType => (typeof globalThis !== "undefined" ? globalThis.__theme : "light")
+
 export const useTheme = (): { theme: HeliosFixedThemeType; isDark: boolean; toggleTheme: () => void } => {
 	const [theme, setTheme] = useState<HeliosFixedThemeType | null>(null)
 
@@ -10,8 +12,6 @@ export const useTheme = (): { theme: HeliosFixedThemeType; isDark: boolean; togg
 		setTheme(getTheme())
 	}, [])
 
-	const getTheme = (): HeliosFixedThemeType => (typeof globalThis !== "undefined" ? globalThis.__theme : "light")
-
 	const toggleTheme = useCallback(() => {
 		const currentIsDark: boolean = getTheme() === "dark"
 		globalThis.__setPreferredTheme?.(currentIsDark ? "light" : "dark")

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@heliosgraphics/ui",
-	"version": "2.0.1-alpha.1",
+	"version": "2.0.1-alpha.11",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -40,23 +40,24 @@
 		"ts:watch": "tsc --noEmit --incremental --watch"
 	},
 	"dependencies": {
-		"@heliosgraphics/css": "^1.0.0-alpha.5",
-		"@heliosgraphics/icons": "^1.0.0-alpha.11",
-		"@heliosgraphics/utils": "^6.0.0-alpha.9",
-		"marked": "^17.0.3",
+		"@heliosgraphics/css": "^1.0.0-alpha.10",
+		"@heliosgraphics/icons": "^1.0.0-alpha.14",
+		"@heliosgraphics/utils": "^6.0.0-alpha.16",
+		"marked": "^17.0.5",
 		"marked-linkify-it": "^3.1.14",
-		"marked-xhtml": "^1.0.14"
+		"marked-xhtml": "^1.0.14",
+		"react-plock": "^3.6.1"
 	},
 	"devDependencies": {
 		"@testing-library/react": "^16.3.2",
 		"@types/node": "^25",
-		"esbuild": "^0.27.3",
+		"esbuild": "^0.28.0",
 		"esbuild-css-modules-plugin": "^3.1.5",
 		"glob": "^13.0.6",
-		"jsdom": "^28.1.0",
-		"next": "^16.1.6",
+		"jsdom": "^29.0.1",
+		"next": "^16.2.2",
 		"prettier": "^3.8.1",
-		"typescript": "^5.9.3"
+		"typescript": "^6.0.2"
 	},
 	"peerDependencies": {
 		"@types/react": "^19",

package/utils/markdown.spec.ts

@@ -0,0 +1,64 @@
+import { it, describe, expect } from "bun:test"
+import { renderMarkdown } from "./markdown"
+
+describe("markdown", () => {
+	describe("renderMarkdown", () => {
+		const SAMPLE = `Hello\n\nHey`
+		const SAMPLE_OUTPUT = `<p>Hello</p>\n<p>Hey</p>\n`
+		const LINK_SAMPLE = `[x](https://example.com)`
+		const LINK_SAMPLE_OUTPUT = `<p><a href="https://example.com">x</a></p>\n`
+		const BARE_URL_SAMPLE = `Visit https://example.com/path for details.`
+		const BARE_URL_SAMPLE_OUTPUT = `<p>Visit <a href="https://example.com/path">https://example.com/path</a> for details.</p>\n`
+		const MALICIOUS_SAMPLE = `Hello <script>alert(1)</script> **world**`
+		const MALICIOUS_SAMPLE_OUTPUT = `<p>Hello  <strong>world</strong></p>`
+		const MALICIOUS_LINK_SAMPLE = `[x](data:text/html,<script>alert(1)</script>)`
+		const MALICIOUS_LINK_SAMPLE_OUTPUT = `<p>x</p>\n`
+		const MALICIOUS_EVENT_HANDLER_SAMPLE = `<div onclick="alert(1)">hi</div>`
+		const MALICIOUS_EVENT_HANDLER_SAMPLE_OUTPUT = `<div>hi</div>`
+
+		it("Returns", () => expect(renderMarkdown(SAMPLE)).toEqual(SAMPLE_OUTPUT))
+
+		it("keeps explicit markdown links when links are allowed", () => {
+			expect(renderMarkdown(LINK_SAMPLE, { allowLinks: true })).toEqual(LINK_SAMPLE_OUTPUT)
+		})
+
+		it("autolinks bare urls when links are allowed", () => {
+			expect(renderMarkdown(BARE_URL_SAMPLE, { allowLinks: true })).toEqual(BARE_URL_SAMPLE_OUTPUT)
+		})
+
+		it("keeps links disabled by default", () => {
+			expect(renderMarkdown(LINK_SAMPLE)).toEqual(`<p>x</p>\n`)
+			expect(renderMarkdown(BARE_URL_SAMPLE)).toEqual(`<p>Visit https://example.com/path for details.</p>\n`)
+		})
+
+		it("strips unsafe html from markdown output", () => {
+			const result = renderMarkdown(MALICIOUS_SAMPLE)
+
+			expect(result).toContain(MALICIOUS_SAMPLE_OUTPUT)
+			expect(result).not.toContain("<script")
+			expect(result).not.toContain("alert(1)")
+		})
+
+		it("strips unsafe link protocols without leaving broken markup", () => {
+			const result = renderMarkdown(MALICIOUS_LINK_SAMPLE, { allowLinks: true })
+
+			expect(result).toEqual(MALICIOUS_LINK_SAMPLE_OUTPUT)
+			expect(result).not.toContain("data:")
+			expect(result).not.toContain("<script")
+		})
+
+		it("does not autolink urls inside inline code", () => {
+			const result = renderMarkdown("`https://example.com`", { allowLinks: true })
+
+			expect(result).toEqual(`<p><code>https://example.com</code></p>\n`)
+		})
+
+		it("removes inline event handler attributes from raw html", () => {
+			const result = renderMarkdown(MALICIOUS_EVENT_HANDLER_SAMPLE)
+
+			expect(result).toEqual(MALICIOUS_EVENT_HANDLER_SAMPLE_OUTPUT)
+			expect(result).not.toContain("onclick")
+			expect(result).not.toContain("alert(1)")
+		})
+	})
+})

package/utils/markdown.ts

@@ -1,10 +1,27 @@
 import { Marked } from "marked"
 import { markedXhtml } from "marked-xhtml"
 import markedLinkifyIt from "marked-linkify-it"
+import { sanitizeText } from "@heliosgraphics/utils"
 
 const marked = new Marked({ breaks: true, gfm: true })
+const SAFE_MARKDOWN_LINK_PATTERN: RegExp = /^(?:https?:|mailto:|tel:|\/|#)/i
+
+export interface RenderMarkdownOptions {
+	allowLinks?: boolean
+}
 
 marked.use(markedXhtml())
 marked.use(markedLinkifyIt())
 
-export const renderMarkdown = (text: string): string => marked.parse(text) as string
+const stripUnsafeMarkdownLinks = (html: string): string => {
+	return html.replace(/<a\b[^>]*href="([^"]*)"[^>]*>(.*?)<\/a>/gi, (match: string, href: string, text: string) => {
+		return SAFE_MARKDOWN_LINK_PATTERN.test(href) ? match : text
+	})
+}
+
+export const renderMarkdown = (text: string, options: RenderMarkdownOptions = {}): string => {
+	const renderedMarkdown: string = marked.parse(text) as string
+	const sanitizedMarkdown: string = sanitizeText(stripUnsafeMarkdownLinks(renderedMarkdown), options)
+
+	return renderedMarkdown.endsWith("\n") ? `${sanitizedMarkdown}\n` : sanitizedMarkdown
+}

package/components/Markdown/Markdown.utils.spec.ts

@@ -1,11 +0,0 @@
-import { it, describe, expect } from "bun:test"
-import { renderMarkdown } from "./Markdown.utils"
-
-describe("markdown", () => {
-	describe("renderMarkdown", () => {
-		const SAMPLE = `Hello\n\nHey`
-		const SAMPLE_OUTPUT = `<p>Hello</p>\n<p>Hey</p>\n`
-
-		it("Returns", () => expect(renderMarkdown(SAMPLE)).toEqual(SAMPLE_OUTPUT))
-	})
-})