@hoardodile/ui 0.0.0

package/src/icons/icon-style.test.tsx

@@ -0,0 +1,69 @@
+import { BoltIcon as BoltBoldWeight } from "@solar-icons/react/bold/bolt"
+import { BoltIcon as BoltBoldDuotone } from "@solar-icons/react/bold-duotone/bolt"
+import { BoltIcon as BoltLinear } from "@solar-icons/react/linear/bolt"
+import { act, render, waitFor } from "@testing-library/react"
+import { beforeEach, describe, expect, it } from "vitest"
+import { createIcon } from "./icon-style"
+
+const Bolt = createIcon({
+	bold: BoltBoldWeight,
+	boldDuotone: BoltBoldDuotone,
+	linear: BoltLinear,
+})
+
+function svgClass(container: HTMLElement): string | null {
+	return container.querySelector("svg")?.getAttribute("class") ?? null
+}
+
+function setIconStyle(style: "duotone" | "grayscale" | "linear" | undefined) {
+	act(() => {
+		if (style === undefined) {
+			delete document.documentElement.dataset.iconStyle
+		} else {
+			document.documentElement.dataset.iconStyle = style
+		}
+	})
+}
+
+beforeEach(() => {
+	delete document.documentElement.dataset.iconStyle
+})
+
+describe("createIcon", () => {
+	it("renders the boldDuotone glyph by default with the hd-icon hook", () => {
+		const { container } = render(<Bolt className="size-4" />)
+		expect(svgClass(container)).toContain("solar-bolt-bold-duotone")
+		expect(svgClass(container)).toContain("hd-icon")
+		expect(svgClass(container)).toContain("size-4")
+	})
+
+	it("swaps to the linear glyph in linear style", async () => {
+		const { container } = render(<Bolt />)
+		setIconStyle("linear")
+		await waitFor(() => {
+			expect(svgClass(container)).toContain("solar-bolt-linear")
+		})
+	})
+
+	it("restores the boldDuotone glyph when the style leaves linear", async () => {
+		const { container } = render(<Bolt />)
+		setIconStyle("linear")
+		await waitFor(() => {
+			expect(svgClass(container)).toContain("solar-bolt-linear")
+		})
+		setIconStyle("grayscale")
+		await waitFor(() => {
+			expect(svgClass(container)).toContain("solar-bolt-bold-duotone")
+		})
+	})
+
+	it("renders the bold glyph when the mode prop is set", () => {
+		const { container } = render(<Bolt mode="bold" />)
+		expect(svgClass(container)).toContain("solar-bolt-bold")
+	})
+
+	it("renders each mode explicitly", () => {
+		const { container } = render(<Bolt mode="linear" />)
+		expect(svgClass(container)).toContain("solar-bolt-linear")
+	})
+})

package/src/icons/icon-style.ts

@@ -0,0 +1,104 @@
+import { type ComponentType, createElement, useSyncExternalStore } from "react"
+import type { IconType } from "../components/icon.tsx"
+
+/**
+ * Icon-mode-aware glyph wrapper (Settings → Icons in the host app).
+ *
+ * The active icon style lives as `data-icon-style` on `document.documentElement`
+ * — the host app writes it from its preference store, plugin iframes receive
+ * it through the `themeChanged` push — so this module needs no context or
+ * injected state: a single shared `MutationObserver` watches the attribute
+ * and every wrapped component re-renders through `useSyncExternalStore`
+ * when it flips.
+ *
+ * Only `linear` needs a component swap: the boldDuotone glyphs change to
+ * their thin-line linear counterparts. `grayscale` is pure CSS (theme.css
+ * recolors the `.hd-icon` hook), so the store only tracks the mode.
+ */
+export type IconStyleValue = "duotone" | "grayscale" | "linear"
+
+/**
+ * The parallel Solar weights an icon registers — named after Solar's own
+ * weights (DESIGN.md — Iconography). Every icon carries all of them;
+ * adding a mode here forces every registry entry to fill it in.
+ */
+export type IconMode = "bold" | "boldDuotone" | "linear"
+
+/** All three mode glyphs of one icon. Mandatory and complete by type. */
+export type IconVariants = Record<IconMode, IconType>
+
+function readIconMode(): IconMode {
+	return document.documentElement.dataset.iconStyle === "linear"
+		? "linear"
+		: "boldDuotone"
+}
+
+// Never read `document` at module load — pure-logic consumers (node test
+// environments) import this module without a DOM. The first subscribe
+// (component mount) snapshots the current value.
+let currentMode: IconMode = "boldDuotone"
+let observer: MutationObserver | undefined
+const listeners = new Set<() => void>()
+
+function ensureObserver(): void {
+	if (observer !== undefined || typeof document === "undefined") return
+	observer = new MutationObserver(() => {
+		const next = readIconMode()
+		if (next === currentMode) return
+		currentMode = next
+		for (const cb of listeners) cb()
+	})
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["data-icon-style"],
+	})
+}
+
+function subscribeIconStyle(callback: () => void): () => void {
+	ensureObserver()
+	currentMode = readIconMode()
+	listeners.add(callback)
+	return () => {
+		listeners.delete(callback)
+	}
+}
+
+function getIconStyleSnapshot(): IconMode {
+	return currentMode
+}
+
+/**
+ * Wraps a Solar glyph family so its render follows the host's icon style.
+ *
+ * `createIcon({ bold, boldDuotone, linear })` — the three parallel weights
+ * of one icon. Without a `mode` prop the wrapper renders the glyph for the
+ * active icon style; an explicit `mode` overrides it (selected states pass
+ * `"bold"` through `Icon`).
+ *
+ * Every wrapped render merges the `hd-icon` hook class, so the duotone /
+ * grayscale CSS in theme.css applies to direct renders too. Returns
+ * `undefined`-free components callable through the `Icon` wrapper or bare
+ * JSX alike.
+ */
+export function createIcon(
+	variants: IconVariants,
+): ComponentType<Record<string, unknown>> {
+	function Icon(props: Record<string, unknown>) {
+		const current = useSyncExternalStore(
+			subscribeIconStyle,
+			getIconStyleSnapshot,
+			() => "boldDuotone",
+		)
+		const { mode, ...rest } = props as { readonly mode?: IconMode } & Record<
+			string,
+			unknown
+		>
+		const Component = variants[(mode ?? current) as IconMode]
+		const className =
+			typeof rest.className === "string"
+				? `hd-icon ${rest.className}`
+				: "hd-icon"
+		return createElement(Component, { ...rest, className })
+	}
+	return Icon
+}

package/src/icons/marks.tsx

@@ -0,0 +1,72 @@
+/**
+ * Local utility marks — the three plain glyphs Solar's vocabulary lacks
+ * (its ✓/×/+ only exist inside Circle/Square containers, whose marks occupy
+ * barely a third of the box and go muddy below 16px). These are drawn
+ * in-house for the spots where a bare mark is the whole meaning: checkbox
+ * ticks, selected badges, pill clears, add affordances.
+ *
+ * Check and Cross are strokes in Solar's language (24 viewBox, round caps)
+ * at 2 units — diagonals anti-alias gracefully at any tier. Plus is a
+ * filled cross instead: its pure orthogonal edges land on integer pixels
+ * at the md tier (3-unit arms render as a crisp 2px bar at 16px), where a
+ * 1.33px stroke would straddle pixel boundaries and blur. Weight-insensitive:
+ * no tone layer, no weight variants. Original geometry — not derived
+ * from Solar assets.
+ *
+ * Marks ride the same `mode` channel as registry icons (declared, ignored):
+ * a check is a check in every weight.
+ */
+import type { IconMode } from "./icon-style.ts"
+
+type MarkProps = {
+	className?: string
+	mode?: IconMode
+}
+
+function Mark({
+	d,
+	filled,
+	className,
+}: MarkProps & { d: string; filled?: boolean }) {
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			className={className}
+		>
+			{filled ? (
+				<path d={d} fill="currentColor" />
+			) : (
+				<path
+					d={d}
+					stroke="currentColor"
+					strokeWidth="2"
+					strokeLinecap="round"
+					strokeLinejoin="round"
+				/>
+			)}
+		</svg>
+	)
+}
+
+/** Plain ✓ — checkbox ticks, selected badges. */
+export function Check(props: MarkProps) {
+	return <Mark {...props} d="M5 12.8l4.7 4.7L19 7.2" />
+}
+
+/** Plain × — pill and chip clears. */
+export function Cross(props: MarkProps) {
+	return <Mark {...props} d="M6 6l12 12M18 6L6 18" />
+}
+
+/** Plain + — add affordances. Filled cross, 3-unit arms spanning 5–19. */
+export function Plus(props: MarkProps) {
+	return (
+		<Mark
+			{...props}
+			filled
+			d="M10.5 5h3v5.5H19v3h-5.5V19h-3v-5.5H5v-3h5.5V5Z"
+		/>
+	)
+}

package/src/icons/registry.test.ts

@@ -0,0 +1,65 @@
+// @vitest-environment node
+import { readFileSync } from "node:fs"
+import { describe, expect, it } from "vitest"
+import * as icons from "./registry"
+
+/**
+ * Source-structure guard for the icon registry. The file is excluded from
+ * biome (packages/ui/src/icons), so this test is the only thing that
+ * keeps the single export section ordered and every icon's three parallel
+ * Solar weights registered — see the header comment in registry.ts for the
+ * conventions.
+ */
+const src = readFileSync(new URL("./registry.ts", import.meta.url), "utf8")
+const lines = src.split(/\r?\n/)
+
+/** One parsed registry entry: the export name. */
+function parseIcons(): string[] {
+	const names: string[] = []
+	for (let i = 0; i < lines.length; ) {
+		const m = /^export const (\w+) = createIcon\(\{$/.exec(lines[i]!)
+		if (m === null) {
+			i++
+			continue
+		}
+		const name = m[1]!
+		expect(lines[i + 1]).toBe(`\tbold: ${name}BoldWeight,`)
+		expect(lines[i + 2]).toBe(`\tboldDuotone: ${name}BoldDuotone,`)
+		// MenuDots is the one documented exception: its thin-line dots read
+		// as noise at small sizes, so the filled weight stays in every mode.
+		expect(lines[i + 3]).toBe(
+			name === "MenuDots"
+				? "\tlinear: MenuDotsBoldWeight,"
+				: `\tlinear: ${name}Linear,`,
+		)
+		expect(lines[i + 4]).toBe("})")
+		names.push(name)
+		i += 5
+	}
+	return names
+}
+
+const iconNames = parseIcons()
+
+const ordinal = (a: string, b: string): number => (a < b ? -1 : a > b ? 1 : 0)
+
+describe("icons registry structure", () => {
+	it("keeps the export section alphabetically ordered (ordinal)", () => {
+		expect([...iconNames].sort(ordinal)).toEqual(iconNames)
+	})
+
+	it("registers every icon with all three Solar weights", () => {
+		for (const name of iconNames) {
+			// biome-ignore lint/performance/noDynamicNamespaceImportAccess: the registry is a data module — accessing entries by parsed name is the point of the guard.
+			const icon = icons[name as keyof typeof icons] as (
+				props: Record<string, unknown>,
+			) => unknown
+			expect(typeof icon).toBe("function")
+		}
+	})
+
+	it("exports exactly the names declared in the file", () => {
+		expect(new Set(iconNames)).toEqual(new Set(Object.keys(icons)))
+		expect(iconNames).toHaveLength(Object.keys(icons).length)
+	})
+})