@heliosgraphics/ui 2.0.1-alpha.8 → 2.0.1-beta.0

package/components/Button/Button.module.css

@@ -49,7 +49,6 @@
 	box-shadow: inset 0 0 0 1px var(--border-active);
 }
 
-/* Reset */
 .button .button__baseElement {
 	display: inline-flex;
 
@@ -68,7 +67,6 @@
 	pointer-events: none;
 }
 
-/* Sizes */
 .buttonSizeNormal {
 	--button-badge-size: 24px;
 	--button-badge-margin: 8px;
@@ -136,7 +134,6 @@
 	padding-inline: 7px;
 }
 
-/* Loading */
 .buttonLoading,
 .buttonDisabled {
 	pointer-events: none;
@@ -174,7 +171,6 @@
 	right: 6px;
 }
 
-/* Badge */
 .button__badge {
 	z-index: 2;
 
@@ -187,7 +183,6 @@
 	border-radius: var(--button-badge-radius);
 }
 
-/* Flair */
 .button__flair {
 	position: absolute;
 	top: var(--button-flair-offset);
@@ -203,7 +198,6 @@
 	color: var(--text);
 }
 
-/* Icon */
 .buttonSizeNormal .button__iconLeft,
 .buttonSizeNormal .button__iconRight {
 	padding-left: 8px;
@@ -235,7 +229,6 @@
 	padding-right: 5px;
 }
 
-/* IconRight */
 .buttonSizeNormal:not(.buttonIconOnly) .button__iconRight {
 	margin-left: -12px;
 }
@@ -253,7 +246,6 @@
 	opacity: 0;
 }
 
-/* Icon:focus */
 .buttonSizeNormal.buttonIconOnly:not(.buttonIconOnlyLoading) .button__baseElement {
 	margin-left: -40px;
 	width: 40px;

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

@@ -32,9 +32,7 @@ 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)
 

package/components/Icon/Icon.module.css

@@ -1,26 +1,25 @@
 .icon {
+	color: currentColor;
 	transition: all var(--speed-sm) var(--ease-in-out-sine);
 }
 
 .icon svg {
 	height: 100%;
 	width: 100%;
+}
 
-	fill: currentcolor;
-	stroke: currentcolor;
+.iconPrimary {
+	color: var(--ui-text-primary);
 }
 
-.iconPrimary svg {
-	fill: var(--ui-text-primary);
-	stroke: var(--ui-text-primary);
+.iconSecondary {
+	color: var(--ui-text-secondary);
 }
 
-.iconSecondary svg {
-	fill: var(--ui-text-secondary);
-	stroke: var(--ui-text-secondary);
+.iconTertiary {
+	color: var(--ui-text-tertiary);
 }
 
-.iconTertiary svg {
-	fill: var(--ui-text-tertiary);
-	stroke: var(--ui-text-tertiary);
+.iconInherit {
+	color: inherit;
 }

package/components/Icon/Icon.spec.tsx

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "bun:test"
+import { icons } from "@heliosgraphics/icons"
+import { readFileSync } from "fs"
+import { dirname, join } from "path"
+import { fileURLToPath } from "url"
+import { getIconIdScope, getScopedIconSvg } from "./Icon.utils"
+
+const __filename: string = fileURLToPath(import.meta.url)
+const __dirname: string = dirname(__filename)
+
+describe("Icon", () => {
+	it("should preserve fill-only, stroke-only, and mixed icon paint modes", () => {
+		expect(icons["triangle"]).toContain('fill="currentColor"')
+		expect(icons["triangle"]).not.toContain('stroke="currentColor"')
+
+		expect(icons["arrow-right"]).toContain('stroke="currentColor"')
+		expect(icons["arrow-right"]).not.toContain('fill="currentColor"')
+
+		expect(icons["tag"]).toContain('fill="currentColor"')
+		expect(icons["tag"]).toContain('stroke="currentColor"')
+	})
+
+	it("should not force fill or stroke on every svg", () => {
+		const iconStyles: string = readFileSync(join(__dirname, "Icon.module.css"), "utf8")
+
+		expect(iconStyles).toContain(".icon svg")
+		expect(iconStyles).not.toContain(".icon svg {\n\theight: 100%;\n\twidth: 100%;\n\n\tfill: currentcolor;")
+		expect(iconStyles).not.toContain("stroke: currentcolor;")
+	})
+
+	it("should scope svg definitions per icon instance", () => {
+		const scope: string = getIconIdScope(":r1:")
+		const actual: string = getScopedIconSvg(icons["layout-aside-right"], scope)
+
+		expect(actual).toContain(`id="${scope}-a"`)
+		expect(actual).toContain(`mask="url(#${scope}-a)"`)
+		expect(actual).not.toContain('id="a"')
+		expect(actual).not.toContain("url(#a)")
+	})
+})

package/components/Icon/Icon.tsx

@@ -1,10 +1,15 @@
+"use client"
+
 import { getClasses } from "@heliosgraphics/utils"
 import { icons } from "@heliosgraphics/icons"
 import styles from "./Icon.module.css"
-import type { FC } from "react"
+import { useId, type FC } from "react"
+import { getIconIdScope, getScopedIconSvg } from "./Icon.utils"
 import type { IconProps } from "./Icon.types"
 
 export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
+	const iconId: string = getIconIdScope(useId())
+	const iconSvg: string = getScopedIconSvg(icons[icon] || "", iconId)
 	const iconSizeStyle = {
 		height: size + "px",
 		minHeight: size + "px",
@@ -16,6 +21,7 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 		[styles.iconPrimary]: emphasis === "primary",
 		[styles.iconSecondary]: emphasis === "secondary",
 		[styles.iconTertiary]: emphasis === "tertiary",
+		[styles.iconInherit]: emphasis === "inherit",
 	})
 
 	return (
@@ -25,7 +31,7 @@ export const Icon: FC<IconProps> = ({ icon, className, emphasis, size }) => {
 			aria-hidden={true}
 			data-ui-component="Icon"
 			data-ui-icon={icon}
-			dangerouslySetInnerHTML={{ __html: icons[icon] || "" }}
+			dangerouslySetInnerHTML={{ __html: iconSvg }}
 		/>
 	)
 }

package/components/Icon/Icon.utils.ts

@@ -0,0 +1,11 @@
+const HREF_REFERENCE_REGEX = /\b(href|xlink:href)="#([^"]+)"/g
+const ID_ATTRIBUTE_REGEX = /\bid="([^"]+)"/g
+const URL_REFERENCE_REGEX = /url\(#([^\)]+)\)/g
+
+export const getIconIdScope = (id: string): string => `icon-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`
+
+export const getScopedIconSvg = (svg: string, scope: string): string =>
+	svg
+		.replace(ID_ATTRIBUTE_REGEX, `id="${scope}-$1"`)
+		.replace(URL_REFERENCE_REGEX, `url(#${scope}-$1)`)
+		.replace(HREF_REFERENCE_REGEX, `$1="#${scope}-$2"`)

package/components/Layout/components/LayoutAside/components/LayoutAsideToggle/LayoutAsideToggle.tsx

@@ -1,8 +1,8 @@
 "use client"
 
 import type { FC } from "react"
-import { Button } from "../../../../../Button/Button"
-import { ButtonGroup } from "../../../../../ButtonGroup/ButtonGroup"
+import { Button } from "../../../../../Button"
+import { ButtonGroup } from "../../../../../ButtonGroup"
 import { useLayoutContext } from "../../../../../../hooks/useLayoutContext"
 import type { LayoutAsideToggleProps } from "./LayoutAsideToggle.types"
 

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

package/components/Markdown/Markdown.module.css

@@ -67,7 +67,6 @@
 	line-height: normal;
 }
 
-/* Element: Blockquote */
 .markdown blockquote {
 	position: relative;
 
@@ -110,7 +109,6 @@
 	line-height: inherit;
 }
 
-/* Element: Link */
 .markdown a {
 	color: oklch(var(--ui-text-soft-l) var(--ui-chroma) var(--ui-blue));
 
@@ -118,7 +116,6 @@
 	text-decoration: underline;
 }
 
-/* Element: List */
 .markdown ul li {
 	list-style-type: disc;
 }
@@ -140,13 +137,11 @@
 	list-style-type: circle;
 }
 
-/* Element: Separator */
 .markdown hr {
 	border: 0;
 	border-top: 1px solid var(--ui-border-secondary);
 }
 
-/* Element: Table */
 .markdown table {
 	max-width: 100%;
 
@@ -181,7 +176,6 @@
 	border-radius: var(--radius-md);
 }
 
-/* Element: Headings */
 .markdown h1 {
 	font-size: var(--font-size-h1);
 	line-height: var(--line-height-h1);
@@ -222,24 +216,20 @@
 	line-height: var(--line-height-p);
 }
 
-/* Element: strong, bold: 700 */
 .markdown b,
 .markdown strong {
 	font-weight: var(--font-weight-bold);
 }
 
-/* Element: Delete */
 .markdown del {
 	text-decoration: line-through;
 }
 
-/* Element: Italic */
 .markdown i,
 .markdown em {
 	font-style: italic;
 }
 
-/* Modifier: Code */
 .markdown *:not(pre) code {
 	display: inline-block;
 	padding: 0 4px;

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, allowLinks }) => {
+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, a
 	})
 
 	if (text) {
-		const innerHTML = { __html: renderMarkdown(text, { allowLinks }) }
+		const innerHTML = { __html: renderMarkdown(text, { allowLinks: !!isLinksAllowed }) }
 
 		return <div className={markdownClasses} dangerouslySetInnerHTML={innerHTML} data-ui-component="Markdown"></div>
 	}

package/components/Markdown/Markdown.types.ts

@@ -1,8 +1,8 @@
 import type { ReactNode } from "react"
 
 export interface MarkdownProps {
-	allowLinks?: boolean
 	children?: ReactNode
+	isLinksAllowed?: boolean
 	isNonSelectable?: boolean
 	text?: string
 }

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/Setup/css/feat.atomics.css

@@ -1,7 +1,4 @@
 @layer helios {
-	/* TODO sync with css */
-
-	/* background */
 	.ui-bg,
 	.ui-bg-primary {
 		background-color: var(--ui-bg-primary);
@@ -20,7 +17,6 @@
 		backdrop-filter: blur(3px);
 	}
 
-	/* radius utilities */
 	.radius-none {
 		border-radius: 0;
 	}
@@ -53,7 +49,6 @@
 		border-radius: 9999px;
 	}
 
-	/* scrollbar */
 	.ui-scrollbar::-webkit-scrollbar {
 		height: 8px;
 		width: 8px;
@@ -84,7 +79,6 @@
 		background-color: var(--ui-bg-soft-disabled-gray);
 	}
 
-	/* elevation */
 	.elevation-sm {
 		box-shadow: var(--ui-elevation-sm);
 	}
@@ -97,7 +91,6 @@
 		box-shadow: var(--ui-elevation-lg);
 	}
 
-	/* debug */
 	.debug * {
 		box-shadow: inset 0 0 0 1px var(--ui-bg-red);
 	}

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

@@ -28,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/Tile/Tile.module.css

@@ -3,7 +3,6 @@
 
 	background-color: var(--bg);
 	border: 1px solid var(--border);
-	border-radius: var(--radius-md);
 	color: var(--text);
 	overflow: hidden;
 	transition: all var(--speed-sm) var(--ease-in-out-sine);

package/components/Tile/Tile.tsx

@@ -34,8 +34,8 @@ export const Tile: FC<TileProps> = ({
 	const tileColorClasses: Array<string> = getColorClasses(resolvedColor, appearance)
 	const tileClasses = getClasses(styles.tile, ...tileColorClasses, {
 		[styles.tileLarge]: isLarge,
-		["radius-normal"]: isRounded,
-		["radius-max"]: isRound,
+		["radius-md"]: isRounded,
+		["radius-100"]: isRound,
 	})
 
 	return (

package/constants/scope.ts

@@ -32,9 +32,9 @@ const RESULT_ITEMS: Array<ResultItem> = [
 		onClick: () => null,
 		description: "Nulla ultricies ultrices mauris, sed posuere justo ultrices in.",
 	},
-	{ name: "Random Item", icon: "person" },
+	{ name: "Random Item", icon: "user" },
 	{ name: "Active Item", icon: "bell", isActive: true },
-	{ name: "Lorem Ipsum Dolor Sit Ameta", icon: "x-x" },
+	{ name: "Lorem Ipsum Dolor Sit Ameta", icon: "brand-x" },
 ]
 
 const MARKDOWN: string = `# Donec vestibulum

package/contexts/LayoutContext/LayoutContext.tsx

@@ -41,7 +41,6 @@ const LayoutProvider: FC<LayoutProviderProps> = ({ children, breakpoint = 960 })
 			}
 		}
 
-		// Set initial state
 		handleChange(mql)
 
 		mql.addEventListener("change", handleChange)

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.8",
+	"version": "2.0.1-beta.0",
 	"type": "module",
 	"sideEffects": [
 		"*.css",
@@ -40,12 +40,12 @@
 		"ts:watch": "tsc --noEmit --incremental --watch"
 	},
 	"dependencies": {
-		"@heliosgraphics/css": "^1.0.0-alpha.9",
-		"@heliosgraphics/icons": "^1.0.0-alpha.14",
-		"@heliosgraphics/utils": "^6.0.0-alpha.15",
-		"marked": "^17.0.5",
-		"marked-linkify-it": "^3.1.14",
-		"marked-xhtml": "^1.0.14",
+		"@heliosgraphics/css": "^1.0.0-alpha.10",
+		"@heliosgraphics/icons": "^1.0.0-beta.0",
+		"@heliosgraphics/utils": "^6.0.0-alpha.17",
+		"marked": "^18.0.3",
+		"marked-linkify-it": "^3.1.15",
+		"marked-xhtml": "^1.0.15",
 		"react-plock": "^3.6.1"
 	},
 	"devDependencies": {
@@ -54,10 +54,10 @@
 		"esbuild": "^0.28.0",
 		"esbuild-css-modules-plugin": "^3.1.5",
 		"glob": "^13.0.6",
-		"jsdom": "^29.0.1",
-		"next": "^16.2.2",
-		"prettier": "^3.8.1",
-		"typescript": "^6.0.2"
+		"jsdom": "^29.1.1",
+		"next": "^16.2.6",
+		"prettier": "^3.8.3",
+		"typescript": "^6.0.3"
 	},
 	"peerDependencies": {
 		"@types/react": "^19",