@mizen-labs/ui 0.0.0-stage → 0.1.0

package/src/components/slider/slider.types.ts

@@ -0,0 +1,57 @@
+import type {
+	SliderControlProps as BaseSliderControlProps,
+	SliderIndicatorProps as BaseSliderIndicatorProps,
+	SliderLabelProps as BaseSliderLabelProps,
+	SliderRootProps as BaseSliderRootProps,
+	SliderThumbProps as BaseSliderThumbProps,
+	SliderTrackProps as BaseSliderTrackProps,
+	SliderValueProps as BaseSliderValueProps,
+} from "@base-ui/react/slider";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+type Closed<T> = Omit<T, "className" | "data-slot" | "readOnly" | "style">;
+
+export type SliderSize = "default" | "lg" | "sm";
+
+export type SliderProps<Value extends number | readonly number[] = number> =
+	Closed<
+		Omit<BaseSliderRootProps<Value>, "data-slot"> & {
+			getAriaLabel?: (index: number) => string;
+			invalid?: boolean;
+			ref?: ComponentPropsWithRef<"div">["ref"];
+			size?: SliderSize;
+			ticks?: boolean;
+			thumbValue?: boolean;
+		}
+	>;
+
+export type SliderControlProps = Closed<BaseSliderControlProps> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"div">["ref"];
+};
+
+export type SliderTrackProps = Closed<BaseSliderTrackProps> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"div">["ref"];
+};
+
+export type SliderIndicatorProps = Closed<BaseSliderIndicatorProps> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"div">["ref"];
+};
+
+export type SliderThumbProps = Closed<BaseSliderThumbProps> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"div">["ref"];
+};
+
+export type SliderLabelProps = Closed<BaseSliderLabelProps> & {
+	children?: ReactNode;
+	ref?: ComponentPropsWithRef<"div">["ref"];
+};
+
+export type SliderValueProps = Closed<
+	Omit<BaseSliderValueProps, "data-slot"> & {
+		ref?: ComponentPropsWithRef<"output">["ref"];
+	}
+>;

package/src/components/sources/sources.styles.ts

@@ -0,0 +1,105 @@
+import { create } from "@stylexjs/stylex";
+import { colors } from "../../styles/colors.stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { borderWidth } from "../../styles/interaction.stylex";
+import { duration, easing } from "../../styles/motion.stylex";
+import { shape } from "../../styles/shape.stylex";
+import { space } from "../../styles/spacing.stylex";
+
+// Lines bleed into the gutter by their padding, so favicons line up with the
+// text around them while the hover fill has room.
+const BLEED = space["2"];
+
+const line = {
+	alignItems: "center",
+	backgroundColor: {
+		[conditions.canHover]: {
+			":hover": colors.controlSurfaceHover,
+			default: "transparent",
+		},
+		default: "transparent",
+	},
+	borderRadius: shape.controlRadius,
+	color: colors.content,
+	display: "flex",
+	gap: space["2"],
+	minBlockSize: space["8"],
+	minInlineSize: 0,
+	outlineColor: {
+		":focus-visible": colors.focusRing,
+		default: "transparent",
+	},
+	outlineOffset: -2,
+	outlineStyle: { ":focus-visible": "solid", default: "none" },
+	outlineWidth: borderWidth.focus,
+	paddingBlock: space["1"],
+	paddingInline: BLEED,
+	textDecoration: "none",
+} as const;
+
+export const sourcesStyles = create({
+	chevron: {
+		color: colors.mutedContent,
+		flexShrink: 0,
+		transform: {
+			":is([data-panel-open] *)": "rotate(180deg)",
+			default: "none",
+		},
+		transitionDuration: {
+			[conditions.reducedMotion]: duration.instant,
+			default: duration.disclosure,
+		},
+		transitionProperty: "transform",
+		transitionTimingFunction: easing.expoOut,
+	},
+	// The count grows while a reply streams.
+	count: { fontVariantNumeric: "tabular-nums" },
+	domain: {
+		color: colors.mutedContent,
+		marginInlineStart: "auto",
+		whiteSpace: "nowrap",
+	},
+	list: {
+		display: "flex",
+		flexDirection: "column",
+		gap: 2,
+		listStyle: "none",
+		margin: 0,
+		padding: 0,
+	},
+	root: { marginInline: `calc(-1 * ${BLEED})`, minInlineSize: 0 },
+	row: line,
+	// Overlapping favicons; the first three show who answered.
+	stack: { display: "flex" },
+	// Each icon sits on a small disc, ringed in the surface color, so
+	// overlapping icons read as separate.
+	stackIcon: {
+		alignItems: "center",
+		backgroundColor: colors.controlSurface,
+		blockSize: 18,
+		borderRadius: "50%",
+		boxShadow: `0 0 0 1.5px ${colors.surface}`,
+		display: "inline-flex",
+		inlineSize: 18,
+		justifyContent: "center",
+		marginInlineStart: { ":not(:first-child)": -5, default: 0 },
+		overflow: "hidden",
+	},
+	title: {
+		minInlineSize: 0,
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap",
+	},
+	trigger: {
+		...line,
+		appearance: "none",
+		borderWidth: 0,
+		cursor: "pointer",
+		gap: space["2"],
+		inlineSize: "fit-content",
+		margin: 0,
+		maxInlineSize: "100%",
+		textAlign: "start",
+	},
+});

package/src/components/sources/sources.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import type { Closed } from "../../closed";
+import { IconChevronDown } from "../../icons";
+import { typeRoles } from "../../styles/typography.styles";
+import {
+	Collapsible,
+	CollapsiblePanel,
+	CollapsibleTrigger,
+} from "../collapsible/collapsible";
+import {
+	type CitationSource,
+	SourceIcon,
+	sourceLabel,
+	sourceName,
+} from "../inline-citation/citation-source";
+import { VisuallyHidden } from "../visually-hidden/visually-hidden";
+import { sourcesStyles as styles } from "./sources.styles";
+
+/** A page or document the agent used: a link with `href`, or text without. */
+export type SourcesItem = CitationSource;
+
+export type SourcesProps = Omit<
+	Closed<ComponentPropsWithRef<"div">>,
+	"children" | "data-slot" | "role"
+> & {
+	/** Opens the list from the start, such as in a research view. */
+	defaultOpen?: boolean;
+	/** Repeats of the same link or document show once. */
+	sources: readonly SourcesItem[];
+};
+
+/** The same page cited twice is one source. */
+export function uniqueSources(sources: readonly SourcesItem[]) {
+	const seen = new Set<string>();
+	return sources.filter((source) => {
+		const key = source.href ?? `document:${source.title}`;
+		if (seen.has(key)) {
+			return false;
+		}
+		seen.add(key);
+		return true;
+	});
+}
+
+/** "Used 3 sources" with the first three favicons; opens the list. */
+function SourcesTrigger({ sources }: { sources: readonly SourcesItem[] }) {
+	const noun = sources.length === 1 ? "source" : "sources";
+	return (
+		<CollapsibleTrigger
+			render={<button type="button" {...props(typeRoles.ui, styles.trigger)} />}
+		>
+			<span aria-hidden="true" {...props(styles.stack)}>
+				{sources.slice(0, 3).map((source, index) => (
+					// biome-ignore lint/suspicious/noArrayIndexKey: sources keep their order, and a document may share a title.
+					<span key={index} {...props(styles.stackIcon)}>
+						<SourceIcon source={source} />
+					</span>
+				))}
+			</span>
+			<span>
+				Used <span {...props(styles.count)}>{sources.length}</span> {noun}
+			</span>
+			<IconChevronDown
+				aria-hidden="true"
+				size={14}
+				{...props(styles.chevron)}
+			/>
+		</CollapsibleTrigger>
+	);
+}
+
+/** One source as a row: favicon, title, and domain; a link when it has one. */
+export function SourceRow({ source }: { source: SourcesItem }) {
+	const content = (
+		<>
+			<SourceIcon source={source} />
+			<span {...props(styles.title)}>{sourceName(source)}</span>
+			{source.href === undefined ? null : (
+				<span {...props(typeRoles.caption, styles.domain)}>
+					{sourceLabel(source)}
+				</span>
+			)}
+		</>
+	);
+	if (source.href === undefined) {
+		return <div {...props(typeRoles.ui, styles.row)}>{content}</div>;
+	}
+	return (
+		<a
+			href={source.href}
+			rel="noopener noreferrer"
+			target="_blank"
+			{...props(typeRoles.ui, styles.row)}
+		>
+			{content}
+			<VisuallyHidden>, opens in a new tab</VisuallyHidden>
+		</a>
+	);
+}
+
+/** One line per source: favicon, title, and domain. */
+function SourcesList({ sources }: { sources: readonly SourcesItem[] }) {
+	return (
+		<CollapsiblePanel>
+			<ul aria-label="Sources" data-slot="sources-list" {...props(styles.list)}>
+				{sources.map((source, index) => (
+					// biome-ignore lint/suspicious/noArrayIndexKey: sources keep their order, and a document may share a title.
+					<li key={index}>
+						<SourceRow source={source} />
+					</li>
+				))}
+			</ul>
+		</CollapsiblePanel>
+	);
+}
+
+/**
+ * The pages and documents an agent used for a reply, folded into one line:
+ * the first favicons and "Used 3 sources". It opens to a link for each.
+ */
+export function Sources({
+	defaultOpen = false,
+	ref: forwardedRef,
+	sources,
+	...rest
+}: SourcesProps) {
+	const unique = uniqueSources(sources);
+	for (const prop of ["className", "data-slot", "role", "style"]) {
+		Reflect.deleteProperty(rest, prop);
+	}
+	if (unique.length === 0) {
+		return null;
+	}
+	return (
+		<div
+			{...rest}
+			data-slot="sources"
+			ref={forwardedRef}
+			{...props(styles.root)}
+		>
+			<Collapsible defaultOpen={defaultOpen}>
+				<SourcesTrigger sources={unique} />
+				<SourcesList sources={unique} />
+			</Collapsible>
+		</div>
+	);
+}

package/src/components/spacer/spacer.styles.ts

@@ -0,0 +1,11 @@
+import { create } from "@stylexjs/stylex";
+
+export const spacerStyles = create({
+	base: {
+		flexBasis: "0%",
+		flexGrow: 1,
+		flexShrink: 1,
+		minHeight: 0,
+		minWidth: 0,
+	},
+});

package/src/components/spacer/spacer.tsx

@@ -0,0 +1,25 @@
+import { props } from "@stylexjs/stylex";
+import type { ComponentPropsWithRef } from "react";
+import { spacerStyles } from "./spacer.styles";
+
+type NativeDivProps = ComponentPropsWithRef<"div">;
+
+export type SpacerProps = Omit<
+	NativeDivProps,
+	"children" | "className" | "dangerouslySetInnerHTML" | "role" | "style"
+>;
+
+export function Spacer({ ref: forwardedRef, ...rest }: SpacerProps) {
+	Reflect.deleteProperty(rest, "role");
+	Reflect.deleteProperty(rest, "children");
+	Reflect.deleteProperty(rest, "dangerouslySetInnerHTML");
+
+	return (
+		<div
+			{...rest}
+			data-slot="spacer"
+			ref={forwardedRef}
+			{...props(spacerStyles.base)}
+		/>
+	);
+}

package/src/components/spinner/spinner.styles.ts

@@ -0,0 +1,231 @@
+import { create, keyframes } from "@stylexjs/stylex";
+import { conditions } from "../../styles/conditions.stylex";
+import { glyphSize } from "../../styles/dimensions.stylex";
+import { easing } from "../../styles/motion.stylex";
+
+// Loading: the eight dots hold their places and a bright head travels round
+// the ring once a second. Its trail fades over half a lap to the same 40%
+// rest the other variants use, so one head leads and the rest stay quiet.
+const loaderChase = keyframes({
+	"0%": { opacity: 1 },
+	"50%, 100%": { opacity: 0.4 },
+});
+
+// One dot's cycle: a 0.6s bounce, then rest while the others finish, 1.05s in
+// all. It rises on an ease-out and falls on an ease-in, like a dropped ball,
+// and is brightest at the top. Lengths are SVG user units.
+const typingBounce = keyframes({
+	"0%": {
+		animationTimingFunction: "cubic-bezier(0.33, 0.66, 0.66, 1)",
+		opacity: 0.4,
+		transform: "translateY(0)",
+	},
+	"28.57%": {
+		animationTimingFunction: "cubic-bezier(0.33, 0, 0.66, 0.33)",
+		opacity: 1,
+		transform: "translateY(-6px)",
+	},
+	"57.14%, 100%": { opacity: 0.4, transform: "translateY(0)" },
+});
+
+// Thinking: eight dots on a 3x3 grid with one empty cell, like a sliding
+// puzzle. Each 0.5s step, the dot beside the gap slides into it (0.3s, then a
+// hold) and brightens while it moves, so the gap travels round the ring. After
+// eight moves the same cells are filled, so the loop restarts invisibly.
+const thinkEase = "cubic-bezier(0.65, 0, 0.35, 1)";
+const think1 = keyframes({
+	"0%": {
+		animationTimingFunction: thinkEase,
+		opacity: 0.4,
+		transform: "translate(0px, 0px)",
+	},
+	"7.5%": { opacity: 1, transform: "translate(-8px, 0px)" },
+	"12.5%": { opacity: 0.4, transform: "translate(-8px, 0px)" },
+	"87.5%": {
+		animationTimingFunction: thinkEase,
+		opacity: 0.4,
+		transform: "translate(-8px, 0px)",
+	},
+	"95%": { opacity: 1, transform: "translate(-8px, 8px)" },
+	"100%": { opacity: 0.4, transform: "translate(-8px, 8px)" },
+});
+const think2 = keyframes({
+	"0%": { opacity: 0.4, transform: "translate(0px, 0px)" },
+	"12.5%": {
+		animationTimingFunction: thinkEase,
+		opacity: 0.4,
+		transform: "translate(0px, 0px)",
+	},
+	"20%": { opacity: 1, transform: "translate(-8px, 0px)" },
+	"25%": { opacity: 0.4, transform: "translate(-8px, 0px)" },
+	"100%": { opacity: 0.4, transform: "translate(-8px, 0px)" },
+});
+const think3 = keyframes({
+	"0%": { opacity: 0.4, transform: "translate(0px, 0px)" },
+	"25%": {
+		animationTimingFunction: thinkEase,
+		opacity: 0.4,
+		transform: "translate(0px, 0px)",
+	},
+	"32.5%": { opacity: 1, transform: "translate(0px, -8px)" },
+	"37.5%": { opacity: 0.4, transform: "translate(0px, -8px)" },
+	"100%": { opacity: 0.4, transform: "translate(0px, -8px)" },
+});
+const think4 = keyframes({
+	"0%": { opacity: 0.4, transform: "translate(0px, 0px)" },
+	"37.5%": {
+		animationTimingFunction: thinkEase,
+		opacity: 0.4,
+		transform: "translate(0px, 0px)",
+	},
+	"45%": { opacity: 1, transform: "translate(0px, -8px)" },
+	"50%": { opacity: 0.4, transform: "translate(0px, -8px)" },
+	"100%": { opacity: 0.4, transform: "translate(0px, -8px)" },
+});
+const think5 = keyframes({
+	"0%": { opacity: 0.4, transform: "translate(0px, 0px)" },
+	"50%": {
+		animationTimingFunction: thinkEase,
+		opacity: 0.4,
+		transform: "translate(0px, 0px)",
+	},
+	"57.5%": { opacity: 1, transform: "translate(8px, 0px)" },
+	"62.5%": { opacity: 0.4, transform: "translate(8px, 0px)" },
+	"100%": { opacity: 0.4, transform: "translate(8px, 0px)" },
+});
+const think6 = keyframes({
+	"0%": { opacity: 0.4, transform: "translate(0px, 0px)" },
+	"62.5%": {
+		animationTimingFunction: thinkEase,
+		opacity: 0.4,
+		transform: "translate(0px, 0px)",
+	},
+	"70%": { opacity: 1, transform: "translate(8px, 0px)" },
+	"75%": { opacity: 0.4, transform: "translate(8px, 0px)" },
+	"100%": { opacity: 0.4, transform: "translate(8px, 0px)" },
+});
+const think7 = keyframes({
+	"0%": { opacity: 0.4, transform: "translate(0px, 0px)" },
+	"75%": {
+		animationTimingFunction: thinkEase,
+		opacity: 0.4,
+		transform: "translate(0px, 0px)",
+	},
+	"82.5%": { opacity: 1, transform: "translate(0px, 8px)" },
+	"87.5%": { opacity: 0.4, transform: "translate(0px, 8px)" },
+	"100%": { opacity: 0.4, transform: "translate(0px, 8px)" },
+});
+
+export const spinnerStyles = create({
+	base: {
+		display: "inline-block",
+		flexShrink: 0,
+		height: glyphSize.sm,
+		width: glyphSize.sm,
+	},
+	loaderDot: {
+		animationDuration: "1s",
+		animationIterationCount: "infinite",
+		animationName: {
+			[conditions.reducedMotion]: "none",
+			default: loaderChase,
+		},
+		animationTimingFunction: easing.linear,
+	},
+	// Each dot runs a step behind the next, so the trail fades behind the head.
+	// Reduced motion freezes that trail as a still gradient.
+	loaderDot0: {
+		animationDelay: "-1s",
+		opacity: { [conditions.reducedMotion]: 1, default: 1 },
+	},
+	loaderDot1: {
+		animationDelay: "-0.875s",
+		opacity: { [conditions.reducedMotion]: 0.4, default: 1 },
+	},
+	loaderDot2: {
+		animationDelay: "-0.75s",
+		opacity: { [conditions.reducedMotion]: 0.4, default: 1 },
+	},
+	loaderDot3: {
+		animationDelay: "-0.625s",
+		opacity: { [conditions.reducedMotion]: 0.4, default: 1 },
+	},
+	loaderDot4: {
+		animationDelay: "-0.5s",
+		opacity: { [conditions.reducedMotion]: 0.4, default: 1 },
+	},
+	loaderDot5: {
+		animationDelay: "-0.375s",
+		opacity: { [conditions.reducedMotion]: 0.55, default: 1 },
+	},
+	loaderDot6: {
+		animationDelay: "-0.25s",
+		opacity: { [conditions.reducedMotion]: 0.7, default: 1 },
+	},
+	loaderDot7: {
+		animationDelay: "-0.125s",
+		opacity: { [conditions.reducedMotion]: 0.85, default: 1 },
+	},
+
+	// A standalone Spinner matches the text beside it.
+	textSize: { height: "1em", width: "1em" },
+	thinking: {
+		display: "inline-block",
+		flexShrink: 0,
+		height: "1em",
+		width: "1em",
+	},
+	thinkingDot: {
+		animationDuration: "4s",
+		animationIterationCount: "infinite",
+		opacity: { [conditions.reducedMotion]: 0.7, default: 0.4 },
+	},
+	thinkingDot1: {
+		animationName: { [conditions.reducedMotion]: "none", default: think1 },
+	},
+	thinkingDot2: {
+		animationName: { [conditions.reducedMotion]: "none", default: think2 },
+	},
+	thinkingDot3: {
+		animationName: { [conditions.reducedMotion]: "none", default: think3 },
+	},
+	thinkingDot4: {
+		animationName: { [conditions.reducedMotion]: "none", default: think4 },
+	},
+	thinkingDot5: {
+		animationName: { [conditions.reducedMotion]: "none", default: think5 },
+	},
+	thinkingDot6: {
+		animationName: { [conditions.reducedMotion]: "none", default: think6 },
+	},
+	thinkingDot7: {
+		animationName: { [conditions.reducedMotion]: "none", default: think7 },
+	},
+	typing: {
+		display: "inline-block",
+		flexShrink: 0,
+		height: "1em",
+		// The dots rise above the box; the frame must not clip them.
+		overflow: "visible",
+		width: "1em",
+	},
+	typingDot: {
+		animationDuration: "1.05s",
+		animationIterationCount: "infinite",
+		animationName: {
+			[conditions.reducedMotion]: "none",
+			default: typingBounce,
+		},
+		opacity: 0.4,
+	},
+	// Each dot starts 0.1s after the one before it.
+	typingFirst: { opacity: { [conditions.reducedMotion]: 0.4, default: 0.4 } },
+	typingSecond: {
+		animationDelay: "0.1s",
+		opacity: { [conditions.reducedMotion]: 0.7, default: 0.4 },
+	},
+	typingThird: {
+		animationDelay: "0.2s",
+		opacity: { [conditions.reducedMotion]: 1, default: 0.4 },
+	},
+});