@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/terminal/terminal.tsx

@@ -0,0 +1,339 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import { type ComponentPropsWithRef, type RefCallback, useState } from "react";
+import type { Closed } from "../../closed";
+import {
+	IconAlertCircle,
+	IconChevronDown,
+	IconCircleCheck,
+	IconRefresh,
+	IconTerminal2,
+} from "../../icons";
+import { MotionScope, Pop } from "../../motion";
+import { typeRoles } from "../../styles/typography.styles";
+import { formatShortSeconds, useElapsed } from "../../use-elapsed";
+import { agentThinkingStyles } from "../agent-thinking/agent-thinking.styles";
+import { Button } from "../button/button";
+import {
+	CodeBlock,
+	CodeBlockCopy,
+	CodeBlockHeader,
+	CodeBlockTitle,
+} from "../code-block/code-block";
+import { codeBlockStyles } from "../code-block/code-block.styles";
+import {
+	Collapsible,
+	CollapsiblePanel,
+	CollapsibleTrigger,
+} from "../collapsible/collapsible";
+import { Spinner } from "../spinner/spinner";
+import { toolCallStyles } from "../tool-call/tool-call.styles";
+import { VisuallyHidden } from "../visually-hidden/visually-hidden";
+import { parseAnsi, plainOutput } from "./ansi";
+import { terminalStyles as styles } from "./terminal.styles";
+
+/** `running` while the command runs; then `complete` (exit 0) or `error`. */
+export type TerminalStatus = "complete" | "error" | "running";
+
+export type TerminalProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"children" | "data-slot" | "role"
+> & {
+	/** The command as typed, such as `pnpm build`. */
+	command: string;
+	/** Seconds it ran, for a command loaded from history. */
+	duration?: number;
+	/** The code it exited with; any code but 0 is a failure. */
+	exitCode?: number;
+	/** Shows Retry under a failed command. */
+	onRetry?: () => void;
+	/** Everything it printed so far. Terminal colors and redraws are kept. */
+	output?: string;
+	status: TerminalStatus;
+};
+
+// The newest line stays in view while output arrives, unless the reader
+// scrolls up to read; scrolling back to the end follows it again.
+function followTail(pre: HTMLPreElement | null) {
+	if (!pre || typeof MutationObserver === "undefined") {
+		return;
+	}
+	let pinned = true;
+	const onScroll = () => {
+		pinned = pre.scrollHeight - pre.scrollTop - pre.clientHeight < 8;
+	};
+	const observer = new MutationObserver(() => {
+		if (pinned) {
+			pre.scrollTop = pre.scrollHeight;
+		}
+	});
+	pre.addEventListener("scroll", onScroll, { passive: true });
+	observer.observe(pre, {
+		characterData: true,
+		childList: true,
+		subtree: true,
+	});
+	// A finished run opens at its end, where errors usually are.
+	pre.scrollTop = pre.scrollHeight;
+	return () => {
+		observer.disconnect();
+		pre.removeEventListener("scroll", onScroll);
+	};
+}
+
+function Output({ output }: { output: string }) {
+	return (
+		// biome-ignore lint/a11y/useSemanticElements: pre keeps the output's spacing while naming the scroll region.
+		<pre
+			aria-label="Output"
+			data-slot="terminal-output"
+			ref={followTail}
+			role="region"
+			// biome-ignore lint/a11y/noNoninteractiveTabindex: keyboard focus lets people scroll long output.
+			tabIndex={0}
+			{...props(typeRoles.mono, codeBlockStyles.content, styles.output)}
+		>
+			<code {...props(codeBlockStyles.code)}>
+				{parseAnsi(output).map((span, index) => (
+					<span
+						// biome-ignore lint/suspicious/noArrayIndexKey: output only grows at the end, so a position is stable.
+						key={index}
+						{...props(
+							span.bold && styles.bold,
+							span.muted && styles.muted,
+							span.red && styles.red
+						)}
+					>
+						{span.text}
+					</span>
+				))}
+			</code>
+		</pre>
+	);
+}
+
+function Title({
+	command,
+	exitCode,
+	status,
+}: Pick<TerminalProps, "command" | "exitCode" | "status">) {
+	const code = (
+		<code {...props(typeRoles.mono, styles.command)}>{command}</code>
+	);
+	if (status === "running") {
+		return (
+			<span {...props(toolCallStyles.title)}>
+				<span {...props(agentThinkingStyles.stage)}>Running</span> {code}
+			</span>
+		);
+	}
+	if (status === "error" && exitCode !== undefined) {
+		return (
+			<span {...props(toolCallStyles.title)}>
+				{code} <span {...props(styles.verb)}>exited with code {exitCode}</span>
+			</span>
+		);
+	}
+	return (
+		<span {...props(toolCallStyles.title)}>
+			<span {...props(styles.verb)}>
+				{status === "error" ? "Failed" : "Ran"}
+			</span>{" "}
+			{code}
+		</span>
+	);
+}
+
+function Status({
+	markEnd,
+	markStart,
+	seconds,
+	status,
+}: {
+	markEnd: RefCallback<HTMLElement>;
+	markStart: RefCallback<HTMLElement>;
+	seconds: number | undefined;
+	status: TerminalStatus;
+}) {
+	if (status === "running") {
+		return (
+			<span ref={markStart} {...props(toolCallStyles.status)}>
+				<Spinner aria-hidden="true" />
+				<VisuallyHidden>Running</VisuallyHidden>
+			</span>
+		);
+	}
+	const failed = status === "error";
+	const Icon = failed ? IconAlertCircle : IconCircleCheck;
+	return (
+		<span ref={markEnd} {...props(typeRoles.ui, toolCallStyles.status)}>
+			<Icon
+				aria-hidden="true"
+				size={16}
+				{...props(
+					failed ? toolCallStyles.statusError : toolCallStyles.statusComplete
+				)}
+			/>
+			{seconds === undefined ? null : formatShortSeconds(seconds)}
+			<VisuallyHidden>{failed ? "Failed" : "Done"}</VisuallyHidden>
+		</span>
+	);
+}
+
+// Outside the fold, so Retry stays in view when the output is folded.
+function Failure({ onRetry }: { onRetry: (() => void) | undefined }) {
+	if (!onRetry) {
+		return null;
+	}
+	return (
+		<div
+			data-slot="terminal-retry"
+			{...props(
+				toolCallStyles.notice,
+				toolCallStyles.noticeError,
+				toolCallStyles.noticeSlot
+			)}
+		>
+			<p
+				{...props(
+					typeRoles.ui,
+					toolCallStyles.noticeText,
+					toolCallStyles.errorText
+				)}
+			>
+				<IconAlertCircle aria-hidden="true" size={16} />
+				The command failed.
+			</p>
+			<Button onClick={onRetry} size="sm" variant="outline">
+				<IconRefresh aria-hidden="true" size="1em" />
+				Retry
+			</Button>
+		</div>
+	);
+}
+
+// The line: what ran, its time, and how it ended. With no output yet there
+// is nothing to open, so it is a plain row without a chevron.
+function Line({
+	command,
+	elapsed,
+	exitCode,
+	seconds,
+	status,
+	withOutput,
+}: Pick<TerminalProps, "command" | "exitCode" | "status"> & {
+	elapsed: ReturnType<typeof useElapsed>;
+	seconds: number | undefined;
+	withOutput: boolean;
+}) {
+	const content = (
+		<>
+			<span aria-hidden="true" {...props(toolCallStyles.icon)}>
+				<IconTerminal2 size={16} />
+			</span>
+			<Title command={command} exitCode={exitCode} status={status} />
+			<Pop change={status} look={toolCallStyles.statusSlot}>
+				<Status
+					markEnd={elapsed.markEnd}
+					markStart={elapsed.markStart}
+					seconds={seconds}
+					status={status}
+				/>
+			</Pop>
+		</>
+	);
+	if (!withOutput) {
+		return (
+			<div
+				data-slot="terminal-line"
+				{...props(typeRoles.ui, toolCallStyles.row, styles.plainRow)}
+			>
+				{content}
+			</div>
+		);
+	}
+	return (
+		<CollapsibleTrigger
+			render={
+				<button type="button" {...props(typeRoles.ui, toolCallStyles.row)} />
+			}
+		>
+			{content}
+			<IconChevronDown
+				aria-hidden="true"
+				size={14}
+				{...props(toolCallStyles.chevron)}
+			/>
+		</CollapsibleTrigger>
+	);
+}
+
+/**
+ * A shell command the agent runs, as one line: what it ran, how long it
+ * took, and how it ended. It opens to the output, which streams in with
+ * the newest line in view; a failure opens on its own.
+ */
+export function Terminal({
+	command,
+	duration,
+	exitCode,
+	onRetry,
+	output = "",
+	ref: forwardedRef,
+	status,
+	...rest
+}: TerminalProps) {
+	const elapsed = useElapsed();
+	// null until the reader opens or closes it themselves.
+	const [open, setOpen] = useState<boolean | null>(null);
+	// The output opens once it starts, and a failure stays open.
+	const attention =
+		status === "error" || (status === "running" && output !== "");
+	for (const prop of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, prop);
+	}
+	return (
+		<div
+			{...rest}
+			data-slot="terminal"
+			data-status={status}
+			ref={forwardedRef}
+			{...props(toolCallStyles.root)}
+		>
+			<MotionScope>
+				<Collapsible
+					onOpenChange={setOpen}
+					open={open === null ? attention : open}
+					render={<div {...props(toolCallStyles.clip)} />}
+				>
+					<Line
+						command={command}
+						elapsed={elapsed}
+						exitCode={exitCode}
+						seconds={duration ?? elapsed.seconds}
+						status={status}
+						withOutput={output !== ""}
+					/>
+					{output === "" ? null : (
+						<CollapsiblePanel>
+							<div
+								data-slot="terminal-details"
+								{...props(toolCallStyles.panel, toolCallStyles.details)}
+							>
+								<CodeBlock>
+									<CodeBlockHeader>
+										<CodeBlockTitle>Output</CodeBlockTitle>
+										<CodeBlockCopy code={plainOutput(output)} />
+									</CodeBlockHeader>
+									<Output output={output} />
+								</CodeBlock>
+							</div>
+						</CollapsiblePanel>
+					)}
+					{status === "error" ? <Failure onRetry={onRetry} /> : null}
+				</Collapsible>
+			</MotionScope>
+		</div>
+	);
+}

package/src/components/text/text.styles.ts

@@ -0,0 +1,8 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+
+export const textStyles = create({
+	base: { marginBlock: 0 },
+	default: { color: colors.content },
+	muted: { color: colors.mutedContent },
+});

package/src/components/text/text.tsx

@@ -0,0 +1,47 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { typeRoles } from "../../styles/typography.styles";
+import { textStyles } from "./text.styles";
+
+type NativeParagraphProps = ComponentPropsWithRef<"p">;
+
+export type TextSize = "body" | "caption" | "ui";
+export type TextTone = "default" | "muted";
+
+export type TextProps = Omit<
+	NativeParagraphProps,
+	"className" | "role" | "style"
+> & {
+	size?: TextSize;
+	/** Ink. Defaults to muted for `caption` and to content otherwise. */
+	tone?: TextTone;
+};
+
+const sizeStyles = {
+	body: typeRoles.body,
+	caption: typeRoles.caption,
+	ui: typeRoles.ui,
+};
+
+export function Text({
+	children,
+	ref: forwardedRef,
+	size = "body",
+	tone = size === "caption" ? "muted" : "default",
+	...rest
+}: TextProps) {
+	Reflect.deleteProperty(rest, "role");
+
+	return (
+		<p
+			{...rest}
+			data-size={size}
+			data-slot="text"
+			data-tone={tone}
+			ref={forwardedRef}
+			{...props(textStyles.base, sizeStyles[size], textStyles[tone])}
+		>
+			{children}
+		</p>
+	);
+}

package/src/components/textarea/textarea.styles.ts

@@ -0,0 +1,85 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+import {
+	fontSize,
+	fontWeight,
+	lineHeight,
+} from "../../styles/typography.stylex";
+
+export const textareaStyles = create({
+	base: {
+		minHeight: "8rem",
+		resize: "vertical",
+		verticalAlign: "top",
+	},
+	default: {
+		borderEndEndRadius: shape.controlRadiusLarge,
+		borderEndStartRadius: shape.controlRadiusLarge,
+		borderStartEndRadius: shape.controlRadiusLarge,
+		borderStartStartRadius: shape.controlRadiusLarge,
+	},
+	lg: {
+		borderEndEndRadius: shape.controlRadiusLarge,
+		borderEndStartRadius: shape.controlRadiusLarge,
+		borderStartEndRadius: shape.controlRadiusLarge,
+		borderStartStartRadius: shape.controlRadiusLarge,
+		fontSize: fontSize["16"],
+		minHeight: "10rem",
+	},
+	sm: {
+		borderEndEndRadius: shape.controlRadius,
+		borderEndStartRadius: shape.controlRadius,
+		borderStartEndRadius: shape.controlRadius,
+		borderStartStartRadius: shape.controlRadius,
+		fontSize: { [conditions.sm]: fontSize["14"], default: fontSize["16"] },
+		lineHeight: {
+			[conditions.sm]: lineHeight["20"],
+			default: lineHeight["24"],
+		},
+		minHeight: "6rem",
+	},
+	unstyled: {
+		"::placeholder": { color: colors.mutedContent, opacity: 1 },
+		appearance: "none",
+		backgroundColor: "transparent",
+		borderColor: "transparent",
+		borderStyle: "none",
+		borderWidth: 0,
+		boxShadow: "none",
+		boxSizing: "border-box",
+		color: { ":disabled": colors.mutedContent, default: colors.content },
+		cursor: { ":disabled": "not-allowed", default: "text" },
+		display: "block",
+		flexBasis: "0%",
+		flexGrow: 1,
+		flexShrink: 1,
+		fontFamily: "inherit",
+		fontSize: fontSize["16"],
+		fontWeight: fontWeight.regular,
+		lineHeight: lineHeight["24"],
+		minWidth: 0,
+		opacity: 1,
+		outlineColor: "transparent",
+		outlineStyle: "none",
+		outlineWidth: 0,
+		paddingBlock: space["2"],
+		paddingInline: space["3"],
+		resize: "vertical",
+		verticalAlign: "top",
+		width: "auto",
+	},
+	unstyledDefault: {
+		minHeight: "6rem",
+	},
+	unstyledLg: {
+		fontSize: fontSize["16"],
+		minHeight: "8rem",
+	},
+	unstyledSm: {
+		fontSize: { [conditions.sm]: fontSize["14"], default: fontSize["16"] },
+		minHeight: "4rem",
+	},
+});

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { Field as BaseField } from "@base-ui/react/field";
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { useCallback, useState } from "react";
+import { assignRef } from "../../ref-utils";
+import { fieldStyles } from "../field/field.styles";
+import {
+	isBoundStringField,
+	useBoundFieldContext,
+} from "../field/field-context";
+import { textareaStyles } from "./textarea.styles";
+
+type NativeTextareaProps = ComponentPropsWithRef<"textarea">;
+
+export type TextareaSize = "default" | "lg" | "sm";
+
+export type TextareaProps = Omit<
+	NativeTextareaProps,
+	"className" | "onPointerEnter" | "onPointerLeave" | "size" | "style"
+> & {
+	invalid?: boolean;
+	onPointerEnter?: NativeTextareaProps["onPointerEnter"];
+	onPointerLeave?: NativeTextareaProps["onPointerLeave"];
+	ref?: NativeTextareaProps["ref"];
+	size?: TextareaSize;
+	unstyled?: boolean;
+};
+
+const sizeStyles = {
+	default: textareaStyles.default,
+	lg: textareaStyles.lg,
+	sm: textareaStyles.sm,
+};
+
+const unstyledSizeStyles = {
+	default: textareaStyles.unstyledDefault,
+	lg: textareaStyles.unstyledLg,
+	sm: textareaStyles.unstyledSm,
+};
+
+function useTextareaBinding(control: TextareaProps) {
+	const boundContext = useBoundFieldContext();
+	const boundField = isBoundStringField(boundContext) ? boundContext : null;
+	const userOnBlur = control.onBlur;
+	const userOnChange = control.onChange;
+
+	const handleBoundBlur = useCallback<NonNullable<TextareaProps["onBlur"]>>(
+		(event) => {
+			boundField?.handleBlur();
+			userOnBlur?.(event);
+		},
+		[boundField, userOnBlur]
+	);
+
+	const handleBoundChange = useCallback<NonNullable<TextareaProps["onChange"]>>(
+		(event) => {
+			boundField?.handleChange(event.currentTarget.value);
+			userOnChange?.(event);
+		},
+		[boundField, userOnChange]
+	);
+
+	const isInvalid = boundField
+		? boundField.state.meta.isTouched && !boundField.state.meta.isValid
+		: control.invalid;
+
+	return {
+		"aria-invalid": isInvalid || undefined,
+		name: boundField ? boundField.name : control.name,
+		onBlur: boundField ? handleBoundBlur : userOnBlur,
+		onChange: boundField ? handleBoundChange : userOnChange,
+		value: boundField ? boundField.state.value : control.value,
+	};
+}
+
+function textareaAppearance(size: TextareaSize, unstyled: boolean) {
+	return unstyled
+		? props(textareaStyles.unstyled, unstyledSizeStyles[size])
+		: props(fieldStyles.input, textareaStyles.base, sizeStyles[size]);
+}
+
+export function Textarea({
+	disabled = false,
+	invalid = false,
+	readOnly = false,
+	ref: forwardedRef = undefined,
+	size = "default",
+	unstyled = false,
+	// biome-ignore lint/complexity/noUselessUndefined: Keep this optional in Babel's generated JS surface.
+	onPointerEnter = undefined,
+	// biome-ignore lint/complexity/noUselessUndefined: Keep this optional in Babel's generated JS surface.
+	onPointerLeave = undefined,
+	...rest
+}: TextareaProps) {
+	const binding = useTextareaBinding({ ...rest, invalid });
+
+	const [isHovered, setIsHovered] = useState(false);
+	const handlePointerEnter = useCallback<
+		NonNullable<NativeTextareaProps["onPointerEnter"]>
+	>(
+		(event) => {
+			if (!(readOnly || disabled)) {
+				setIsHovered(true);
+			}
+			onPointerEnter?.(event);
+		},
+		[disabled, onPointerEnter, readOnly]
+	);
+	const handlePointerLeave = useCallback<
+		NonNullable<NativeTextareaProps["onPointerLeave"]>
+	>(
+		(event) => {
+			setIsHovered(false);
+			onPointerLeave?.(event);
+		},
+		[onPointerLeave]
+	);
+
+	const setControlRef = useCallback(
+		(element: HTMLElement | null) =>
+			element instanceof HTMLTextAreaElement || element === null
+				? assignRef(forwardedRef, element)
+				: undefined,
+		[forwardedRef]
+	);
+
+	const {
+		autoFocus,
+		defaultValue,
+		id,
+		name: _name,
+		value: _value,
+		...nativeProps
+	} = rest;
+
+	return (
+		<BaseField.Control
+			aria-invalid={binding["aria-invalid"]}
+			autoFocus={autoFocus}
+			data-hovered={isHovered ? "true" : undefined}
+			data-size={size}
+			defaultValue={defaultValue}
+			disabled={disabled}
+			id={id}
+			name={binding.name}
+			readOnly={readOnly}
+			ref={setControlRef}
+			render={
+				<textarea
+					{...nativeProps}
+					onBlur={binding.onBlur}
+					onChange={binding.onChange}
+					onPointerEnter={handlePointerEnter}
+					onPointerLeave={handlePointerLeave}
+				/>
+			}
+			value={binding.value}
+			{...textareaAppearance(size, unstyled)}
+		/>
+	);
+}

package/src/components/thumbnail/thumbnail.styles.ts

@@ -0,0 +1,33 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { shape } from "../../styles/shape.stylex";
+
+export const thumbnailStyles = create({
+	defaultSize: {
+		height: "3rem",
+		width: "3rem",
+	},
+	image: {
+		aspectRatio: 1,
+		backgroundColor: colors.secondary,
+		// Filling an attachment tile, it follows the tile's nested corner.
+		borderRadius: {
+			":is([data-slot='attachment-media'] > *)": "inherit",
+			default: shape.controlRadiusLarge,
+		},
+		display: "block",
+		objectFit: "cover",
+	},
+	lg: {
+		height: "4rem",
+		width: "4rem",
+	},
+	sm: {
+		borderRadius: {
+			":is([data-slot='attachment-media'] > *)": "inherit",
+			default: shape.controlRadius,
+		},
+		height: "2rem",
+		width: "2rem",
+	},
+});