@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/diagram/diagram.styles.ts

@@ -0,0 +1,130 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { fonts } from "../../styles/fonts.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import { fontWeight } from "../../styles/typography.stylex";
+
+// Nodes sit on the workarea gray with a quiet edge; lines stay muted so labels
+// lead. Pele's eight series take Mizen's chart palette, so pies and Gantt bars
+// match the charts; the last two fall back to the reference gray.
+const NODE_BORDER = `color-mix(in oklch, ${colors.content} 16%, transparent)`;
+// The canvas frame: room for zoom and pan, and the space a pending or failed
+// diagram holds, so rendering never jumps the page.
+const FRAME_HEIGHT = "20rem";
+
+export const diagramStyles = create({
+	canvas: {
+		"--pele-accent": {
+			[conditions.forcedColors]: "Highlight",
+			default: colors.brandForeground,
+		},
+		"--pele-bg": {
+			[conditions.forcedColors]: "Canvas",
+			default: colors.surface,
+		},
+		"--pele-bold-weight": `${fontWeight.semibold}`,
+		"--pele-border": {
+			[conditions.forcedColors]: "CanvasText",
+			default: NODE_BORDER,
+		},
+		"--pele-critical": colors.destructive,
+		"--pele-error": colors.destructiveText,
+		"--pele-fg": {
+			[conditions.forcedColors]: "CanvasText",
+			default: colors.content,
+		},
+		"--pele-font-mono": fonts.mono,
+		"--pele-heading-weight": `${fontWeight.semibold}`,
+		"--pele-line": {
+			[conditions.forcedColors]: "CanvasText",
+			default: colors.chartReference,
+		},
+		"--pele-muted": {
+			[conditions.forcedColors]: "CanvasText",
+			default: colors.mutedContent,
+		},
+		"--pele-radius": shape.inlineRadius,
+		"--pele-series-1": colors.chartSeries1,
+		"--pele-series-2": colors.chartSeries2,
+		"--pele-series-3": colors.chartSeries3,
+		"--pele-series-4": colors.chartSeries4,
+		"--pele-series-5": colors.chartSeries5,
+		"--pele-series-6": colors.chartSeries6,
+		"--pele-series-7": colors.chartReference,
+		"--pele-series-8": colors.mutedContent,
+		"--pele-surface": {
+			[conditions.forcedColors]: "Canvas",
+			default: colors.workarea,
+		},
+		"--pele-surface-alt": {
+			[conditions.forcedColors]: "Canvas",
+			default: colors.secondary,
+		},
+		"--pele-title-weight": `${fontWeight.semibold}`,
+		"--pele-zoom-right": space["2"],
+		"--pele-zoom-top": space["2"],
+		// Pele zooms and pans inside this box, so it keeps room around small
+		// diagrams instead of clipping them to their own height.
+		alignContent: "center",
+		display: "grid",
+		minBlockSize: FRAME_HEIGHT,
+		minInlineSize: 0,
+		position: "relative",
+	},
+	// A failed render leaves nothing to lay out, so the error panel takes its place.
+	canvasFailed: { display: "none" },
+	// Pele needs the container's width to lay out, so the canvas stays in
+	// flow while it renders and only hides.
+	canvasPending: { minBlockSize: FRAME_HEIGHT, visibility: "hidden" },
+	caption: { color: colors.mutedContent, margin: 0, overflowWrap: "anywhere" },
+	content: { minInlineSize: 0, position: "relative" },
+	error: { color: colors.destructiveText },
+	feedback: {
+		alignItems: "center",
+		backgroundColor: colors.workarea,
+		borderRadius: shape.controlRadiusLarge,
+		boxSizing: "border-box",
+		color: colors.mutedContent,
+		display: "flex",
+		flexDirection: "column",
+		gap: space["2"],
+		justifyContent: "center",
+		minBlockSize: FRAME_HEIGHT,
+		minInlineSize: 0,
+		overflowWrap: "anywhere",
+		padding: space["4"],
+		textAlign: "center",
+	},
+	feedbackDetail: { margin: 0, maxInlineSize: "40rem" },
+	feedbackTitle: {
+		color: colors.content,
+		fontWeight: fontWeight.medium,
+		margin: 0,
+	},
+	overlay: { inset: 0, position: "absolute" },
+	root: {
+		display: "grid",
+		gap: space["3"],
+		gridTemplateColumns: "minmax(0, 1fr)",
+		margin: 0,
+		minInlineSize: 0,
+		width: "100%",
+	},
+	// The parser's line with its caret, kept monospace so the caret lines up.
+	snippet: {
+		backgroundColor: colors.surface,
+		borderRadius: shape.controlRadius,
+		color: colors.content,
+		// Ligatures would merge "-->" into one glyph and shift the caret.
+		fontVariantLigatures: "none",
+		margin: 0,
+		maxInlineSize: "100%",
+		overflowX: "auto",
+		paddingBlock: space["2"],
+		paddingInline: space["3"],
+		textAlign: "start",
+		whiteSpace: "pre",
+	},
+});

package/src/components/diagram/diagram.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import type { Mounted } from "pele/core";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { useCallback, useId, useState } from "react";
+import type { Closed } from "../../closed";
+import { typeRoles } from "../../styles/typography.styles";
+import { Spinner } from "../spinner/spinner";
+import { diagramStyles } from "./diagram.styles";
+import { mountDiagram } from "./diagram-renderer";
+import "./diagram.css";
+
+export type DiagramState = "loading" | "ready" | "error";
+export type DiagramProps = Omit<
+	Closed<ComponentPropsWithRef<"figure">>,
+	"aria-label" | "children" | "dangerouslySetInnerHTML" | "data-slot" | "role"
+> & {
+	"aria-label": string;
+	caption?: ReactNode;
+	source: string;
+	status?: DiagramState;
+};
+
+interface DiagramError {
+	message: string;
+	/** The source line with a caret under the problem, when Pele knows it. */
+	snippet: string;
+}
+
+// Pele's PeleError carries the line, column, and a snippet with a caret.
+function toDiagramError(error: unknown): DiagramError {
+	if (!(error instanceof Error)) {
+		return { message: "The diagram could not be rendered.", snippet: "" };
+	}
+	const {
+		column = 0,
+		line = 0,
+		snippet = "",
+	} = error as Error & {
+		column?: number;
+		line?: number;
+		snippet?: string;
+	};
+	const message =
+		line > 0
+			? `Line ${line}, column ${column}`
+			: (error.message.split("\n")[0] ?? error.message);
+	return { message, snippet };
+}
+
+function Feedback({
+	error,
+	message,
+	status,
+}: {
+	error?: DiagramError;
+	message: string;
+	status: DiagramState | "empty";
+}) {
+	return (
+		<div
+			data-slot="diagram-feedback"
+			role={status === "error" ? "alert" : "status"}
+			{...props(typeRoles.ui, diagramStyles.feedback)}
+		>
+			{status === "loading" && <Spinner aria-hidden="true" />}
+			<p
+				{...props(
+					diagramStyles.feedbackTitle,
+					status === "error" && diagramStyles.error
+				)}
+			>
+				{message}
+			</p>
+			{error ? (
+				<p {...props(diagramStyles.feedbackDetail)}>{error.message}</p>
+			) : null}
+			{error?.snippet ? (
+				<pre {...props(typeRoles.mono, diagramStyles.snippet)}>
+					{error.snippet}
+				</pre>
+			) : null}
+		</div>
+	);
+}
+
+function DiagramCanvas({ source }: { source: string }) {
+	const prefix = useId().replace(/[^A-Za-z0-9_-]/gu, "");
+	const [state, setState] = useState<{
+		error?: DiagramError;
+		status: DiagramState;
+	}>({ status: "loading" });
+	const attach = useCallback(
+		(element: HTMLDivElement | null) => {
+			if (!element) {
+				return;
+			}
+			const controller = new AbortController();
+			let view: Mounted | undefined;
+			const onRender = () => {
+				if (!controller.signal.aborted) {
+					setState((current) =>
+						current.status === "ready" ? current : { status: "ready" }
+					);
+				}
+			};
+			const onError = (error: unknown) => {
+				if (!controller.signal.aborted) {
+					setState({ error: toDiagramError(error), status: "error" });
+				}
+			};
+			mountDiagram(
+				element,
+				source,
+				{ idPrefix: `mizen-diagram-${prefix}`, onError, onRender },
+				controller.signal
+			)
+				.then((mounted) => {
+					if (controller.signal.aborted) {
+						mounted?.destroy();
+					} else {
+						view = mounted;
+					}
+				})
+				.catch(onError);
+			return () => {
+				controller.abort();
+				view?.destroy();
+			};
+		},
+		[source, prefix]
+	);
+	return (
+		<div
+			aria-busy={state.status === "loading" || undefined}
+			data-slot="diagram-content"
+			data-status={state.status}
+			{...props(diagramStyles.content)}
+		>
+			{/* Not aria-hidden: Pele's zoom buttons live here and must stay reachable.
+			    The figure's label names the diagram; Pele titles the SVG itself. */}
+			<div
+				data-slot="diagram-canvas"
+				ref={attach}
+				// Body size: Pele draws secondary labels (Gantt tasks, keys,
+				// cardinalities) smaller than the base, and 16px keeps them at 12px.
+				{...props(
+					typeRoles.body,
+					diagramStyles.canvas,
+					state.status === "loading" && diagramStyles.canvasPending,
+					state.status === "error" && diagramStyles.canvasFailed
+				)}
+			/>
+			{state.status === "loading" ? (
+				<div {...props(diagramStyles.overlay)}>
+					<Feedback message="Rendering diagram" status="loading" />
+				</div>
+			) : null}
+			{state.status === "error" ? (
+				<Feedback
+					error={state.error}
+					message="Couldn't render this diagram"
+					status="error"
+				/>
+			) : null}
+		</div>
+	);
+}
+
+function DiagramContent({
+	source,
+	status,
+}: {
+	source: string;
+	status: DiagramState;
+}) {
+	if (status === "loading") {
+		return <Feedback message="Loading diagram" status="loading" />;
+	}
+	if (status === "error") {
+		return <Feedback message="Couldn't load this diagram" status="error" />;
+	}
+	if (!source.trim()) {
+		return <Feedback message="No diagram to show" status="empty" />;
+	}
+	return <DiagramCanvas key={source} source={source} />;
+}
+
+export function Diagram({
+	"aria-label": label,
+	caption,
+	source,
+	status = "ready",
+	ref,
+	...rest
+}: DiagramProps) {
+	if (!label?.trim()) {
+		throw new TypeError("Diagram requires a non-empty aria-label.");
+	}
+	if (typeof source !== "string") {
+		throw new TypeError("Diagram source must be a string.");
+	}
+	if (!["loading", "ready", "error"].includes(status)) {
+		throw new TypeError("Diagram status must be loading, ready, or error.");
+	}
+	for (const name of [
+		"className",
+		"style",
+		"role",
+		"data-slot",
+		"children",
+		"dangerouslySetInnerHTML",
+	]) {
+		Reflect.deleteProperty(rest, name);
+	}
+	return (
+		<figure
+			{...rest}
+			aria-busy={status === "loading" || undefined}
+			aria-label={label}
+			data-slot="diagram"
+			data-status={status}
+			ref={ref}
+			{...props(diagramStyles.root)}
+		>
+			<DiagramContent source={source} status={status} />
+			{caption !== undefined && caption !== null && (
+				<figcaption
+					data-slot="diagram-caption"
+					{...props(typeRoles.ui, diagramStyles.caption)}
+				>
+					{caption}
+				</figcaption>
+			)}
+		</figure>
+	);
+}

package/src/components/dialog/dialog.styles.ts

@@ -0,0 +1,226 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import {
+	borderWidth,
+	focus,
+	focusMotion,
+} from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shadows } from "../../styles/shadows.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	letterSpacing,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const dialogStyles = create({
+	backdrop: {
+		backgroundColor: colors.backdrop,
+		inset: 0,
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		position: "fixed",
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-ending-style]": duration.overlayExit,
+			default: duration.overlayEnter,
+		},
+		transitionProperty: "opacity",
+		transitionTimingFunction: easing.easeInOut,
+		zIndex: 50,
+	},
+	close: {
+		alignItems: "center",
+		animationDuration: {
+			":focus-visible": focusMotion.duration,
+		},
+		animationName: {
+			":focus-visible": focusMotion.ring,
+		},
+		backgroundColor: {
+			[conditions.canHover]: {
+				":hover:not(:disabled):not([data-disabled])":
+					colors.controlSurfaceHover,
+				default: "transparent",
+			},
+			default: "transparent",
+		},
+		borderEndEndRadius: shape.controlRadius,
+		borderEndStartRadius: shape.controlRadius,
+		borderStartEndRadius: shape.controlRadius,
+		borderStartStartRadius: shape.controlRadius,
+		borderStyle: "none",
+		borderWidth: 0,
+		color: colors.content,
+		cursor: {
+			":disabled": "not-allowed",
+			"[data-disabled]": "not-allowed",
+			default: "pointer",
+		},
+		display: "inline-flex",
+		height: "2rem",
+		// Centers the 32px button on the 28px heading line, and puts the 16px
+		// glyph's edge on the 24px content edge.
+		insetBlockStart: `calc(${space["6"]} + (${lineHeight["28"]} - 2rem) / 2)`,
+		insetInlineEnd: space["4"],
+		justifyContent: "center",
+		outline: "none",
+		outlineColor: {
+			":focus-visible": colors.focusRing,
+			default: "transparent",
+		},
+		outlineOffset: { ":focus-visible": focus.offset, default: 0 },
+		outlineStyle: { ":focus-visible": "solid", default: "none" },
+		outlineWidth: { ":focus-visible": borderWidth.focus, default: 0 },
+		padding: 0,
+		position: "absolute",
+		transform: {
+			[conditions.reducedMotion]: {
+				":active:not(:disabled):not([data-disabled])": "none",
+				default: "none",
+			},
+			":active:not(:disabled):not([data-disabled])": "scale(0.96)",
+			default: "none",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.fast,
+		},
+		transitionProperty: "background-color, transform",
+		transitionTimingFunction: easing.expoOut,
+		width: "2rem",
+	},
+	description: {
+		color: colors.mutedContent,
+		fontSize: fontSize["14"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["20"],
+		marginBlock: 0,
+		overflowWrap: "anywhere",
+		textWrap: "pretty",
+	},
+	footer: {
+		alignItems: "center",
+		backgroundColor: colors.workarea,
+		borderBlockStartColor: colors.border,
+		borderBlockStartStyle: "solid",
+		borderBlockStartWidth: borderWidth.thin,
+		display: "flex",
+		flexShrink: 0,
+		flexWrap: "wrap",
+		gap: space["2"],
+		justifyContent: "flex-end",
+		// One inset on every side: the last action lines up under the close
+		// button and sits as far from the side as from the bottom.
+		paddingBlock: space["4"],
+		paddingInline: space["4"],
+	},
+	header: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["1"],
+		minHeight: 0,
+		overflowY: "auto",
+		paddingBlockEnd: space["6"],
+		paddingBlockStart: space["6"],
+		paddingInline: space["6"],
+		paddingInlineEnd: "3.5rem",
+	},
+	panel: {
+		display: "flex",
+		flexDirection: "column",
+		gap: space["4"],
+		minHeight: 0,
+		overflowY: "auto",
+		overscrollBehavior: "contain",
+		paddingBlock: space["4"],
+		paddingBlockStart: {
+			":is([data-slot='dialog-header'] + *)": space["0"],
+			default: space["4"],
+		},
+		paddingInline: space["6"],
+	},
+	popup: {
+		backgroundColor: colors.floatingSurface,
+		borderColor: {
+			[conditions.moreContrast]: colors.controlBorderStrong,
+			default: colors.border,
+		},
+		borderEndEndRadius: shape.floatingRadius,
+		borderEndStartRadius: shape.floatingRadius,
+		borderStartEndRadius: shape.floatingRadius,
+		borderStartStartRadius: shape.floatingRadius,
+		borderStyle: "solid",
+		borderWidth: borderWidth.thin,
+		boxShadow: shadows.floating,
+		boxSizing: "border-box",
+		color: colors.content,
+		display: "flex",
+		flexDirection: "column",
+		maxHeight: "calc(100dvh - 2rem)",
+		opacity: {
+			"[data-ending-style]": 0,
+			"[data-nested-dialog-open]": 0,
+			"[data-starting-style]": 0,
+			default: 1,
+		},
+		overflow: "hidden",
+		position: "relative",
+		transform: {
+			"[data-ending-style]": "translateY(0.25rem) scale(0.98)",
+			"[data-starting-style]": "translateY(0.5rem) scale(0.96)",
+			default: "none",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			"[data-ending-style]": duration.overlayExit,
+			"[data-instant]": duration.instant,
+			default: duration.overlayEnter,
+		},
+		transitionProperty: "opacity, transform",
+		transitionTimingFunction: {
+			"[data-ending-style]": easing.easeInOut,
+			default: easing.expoOut,
+		},
+		width: "calc(100vw - 2rem)",
+	},
+	popupLg: { maxWidth: "42rem" },
+	popupMd: { maxWidth: "32rem" },
+	popupSm: { maxWidth: "24rem" },
+	popupXl: { maxWidth: "56rem" },
+	title: {
+		color: colors.content,
+		fontSize: fontSize["20"],
+		fontWeight: fontWeight.semibold,
+		letterSpacing: letterSpacing.heading,
+		lineHeight: lineHeight["28"],
+		marginBlock: 0,
+		overflowWrap: "anywhere",
+		textWrap: "balance",
+	},
+	viewport: {
+		alignItems: "center",
+		boxSizing: "border-box",
+		display: "flex",
+		height: "100%",
+		insetBlockStart: 0,
+		insetInlineStart: 0,
+		justifyContent: "center",
+		overflowY: "auto",
+		overscrollBehavior: "contain",
+		paddingBlockEnd: "max(1rem, env(safe-area-inset-bottom))",
+		paddingBlockStart: "max(1rem, env(safe-area-inset-top))",
+		paddingInlineEnd: "max(1rem, env(safe-area-inset-right))",
+		paddingInlineStart: "max(1rem, env(safe-area-inset-left))",
+		position: "fixed",
+		width: "100%",
+		zIndex: 51,
+	},
+});