@olympusoss/canvas 2.6.19

package/src/components/atoms/separator.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface SeparatorProps
+	extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+	/**
+	 * Layout direction. `horizontal` is a 1px row spanning width;
+	 * `vertical` is a 1px column spanning height.
+	 * @default "horizontal"
+	 */
+	orientation?: "horizontal" | "vertical";
+	/**
+	 * When true (default), the separator is hidden from screen readers. Set
+	 * to false for separators that have semantic meaning.
+	 * @default true
+	 */
+	decorative?: boolean;
+	asChild?: boolean;
+	className?: string;
+}
+
+/** Thin divider line — horizontal (default) or vertical. */
+const Separator = React.forwardRef<
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
+	SeparatorProps
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+	<SeparatorPrimitive.Root
+		ref={ref}
+		decorative={decorative}
+		orientation={orientation}
+		className={cn(
+			"shrink-0 bg-border",
+			orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+			className,
+		)}
+		{...props}
+	/>
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

package/src/components/atoms/skeleton.tsx

@@ -0,0 +1,17 @@
+import type * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+	className?: string;
+}
+
+/**
+ * Animated placeholder for content that's loading. Set width/height via
+ * className; Skeleton fills with a pulsing tinted block.
+ */
+function Skeleton({ className, ...props }: SkeletonProps) {
+	return <div className={cn("animate-pulse rounded-md bg-primary/10", className)} {...props} />;
+}
+
+export { Skeleton };

package/src/components/atoms/slider.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+	/**
+	 * Controlled value. Pass an array — single-thumb sliders use a length-1
+	 * tuple (`[40]`), range sliders use length-2 (`[20, 80]`). Pair with
+	 * `onValueChange`.
+	 */
+	value?: number[];
+	/**
+	 * Initial value for uncontrolled usage. Same array shape as `value`.
+	 * @default [0]
+	 */
+	defaultValue?: number[];
+	/** Fires on every move. Use this for live previews. */
+	onValueChange?: (value: number[]) => void;
+	/** Fires when the user releases the thumb (commit handler). */
+	onValueCommit?: (value: number[]) => void;
+	/**
+	 * Minimum value the slider can reach.
+	 * @default 0
+	 */
+	min?: number;
+	/**
+	 * Maximum value the slider can reach.
+	 * @default 100
+	 */
+	max?: number;
+	/**
+	 * Quantum the slider snaps to. Set to `1` for integer-only values.
+	 * @default 1
+	 */
+	step?: number;
+	/**
+	 * Minimum gap between two thumbs in a range slider. Ignored for
+	 * single-thumb sliders.
+	 * @default 0
+	 */
+	minStepsBetweenThumbs?: number;
+	/**
+	 * Layout direction.
+	 * @default "horizontal"
+	 */
+	orientation?: "horizontal" | "vertical";
+	/**
+	 * Reading direction. Affects which end is "min" on the visual axis.
+	 * @default "ltr"
+	 */
+	dir?: "ltr" | "rtl";
+	/**
+	 * Whether the slider is inverted — flips which end is "min".
+	 * @default false
+	 */
+	inverted?: boolean;
+	/**
+	 * Disable the slider.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/** Form field name. Required when relying on uncontrolled native form submission. */
+	name?: string;
+	/**
+	 * Render as a Radix Slot — forwards props onto the immediate child
+	 * element instead of rendering a wrapper `<span>`.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Tailwind / CSS classes merged onto the slider via `cn()`. */
+	className?: string;
+}
+
+const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+	({ className, ...props }, ref) => (
+		<SliderPrimitive.Root
+			ref={ref}
+			className={cn("relative flex w-full touch-none select-none items-center", className)}
+			{...props}
+		>
+			<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+				<SliderPrimitive.Range className="absolute h-full bg-primary" />
+			</SliderPrimitive.Track>
+			<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+		</SliderPrimitive.Root>
+	),
+);
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

package/src/components/atoms/switch.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> {
+	/** Controlled state. */
+	checked?: boolean;
+	/**
+	 * Initial state for uncontrolled usage.
+	 * @default false
+	 */
+	defaultChecked?: boolean;
+	/** Fires when the user flips the switch. */
+	onCheckedChange?: (checked: boolean) => void;
+	/**
+	 * Dims and blocks input.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Block native form submit unless the switch is on.
+	 * @default false
+	 */
+	required?: boolean;
+	/** Form field name for native form submission. */
+	name?: string;
+	/** Form field value when submitted. */
+	value?: string;
+	asChild?: boolean;
+	className?: string;
+}
+
+/**
+ * Wraps Radix's `Switch.Root` — a binary on/off toggle. Pair with `<Label>`
+ * for accessibility.
+ */
+const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
+	({ className, ...props }, ref) => (
+		<SwitchPrimitives.Root
+			className={cn(
+				"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+				className,
+			)}
+			{...props}
+			ref={ref}
+		>
+			<SwitchPrimitives.Thumb
+				className={cn(
+					"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+				)}
+			/>
+		</SwitchPrimitives.Root>
+	),
+);
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };

package/src/components/atoms/textarea.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface TextareaProps extends React.ComponentProps<"textarea"> {
+	/** Controlled value. Pair with `onChange`. */
+	value?: string | number | readonly string[];
+	/** Uncontrolled initial value. */
+	defaultValue?: string | number | readonly string[];
+	/** Hint text shown when empty. */
+	placeholder?: string;
+	/**
+	 * Visible row count. Canvas's default min-height is 60px regardless;
+	 * `rows` overrides.
+	 */
+	rows?: number;
+	/** Visible column count (width). Canvas overrides this with `w-full`. */
+	cols?: number;
+	/**
+	 * Dim and block input.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Selectable but not editable.
+	 * @default false
+	 */
+	readOnly?: boolean;
+	/**
+	 * Block native form submit unless the textarea has a value.
+	 * @default false
+	 */
+	required?: boolean;
+	/** Form field name for native form submission. */
+	name?: string;
+	/** DOM id for `<Label htmlFor>` association. */
+	id?: string;
+	/** Browser autofill hint. */
+	autoComplete?: string;
+	/**
+	 * Focus on mount.
+	 * @default false
+	 */
+	autoFocus?: boolean;
+	/** Character count upper limit. */
+	maxLength?: number;
+	/** Character count lower limit. */
+	minLength?: number;
+	/** Fires on every keystroke. */
+	onChange?: React.ChangeEventHandler<HTMLTextAreaElement>;
+	/** Fires on focus. */
+	onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
+	/** Fires on blur. */
+	onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
+	className?: string;
+}
+
+/**
+ * Styled wrapper around the native `<textarea>`. 60px min-height, rounded-md,
+ * 1px border, transparent background.
+ */
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<textarea
+				className={cn(
+					"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+					className,
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

package/src/components/atoms/toggle.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const toggleVariants = cva(
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-brand data-[state=on]:text-brand-foreground data-[state=on]:hover:bg-brand/90 data-[state=on]:hover:text-brand-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-9 px-2 min-w-9",
+				sm: "h-8 px-1.5 min-w-8",
+				lg: "h-10 px-2.5 min-w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export interface ToggleProps
+	extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>,
+		VariantProps<typeof toggleVariants> {
+	/**
+	 * `default` (filled when on) or `outline` (bordered).
+	 * @default "default"
+	 */
+	variant?: "default" | "outline";
+	/**
+	 * Square size — `sm` (32px), `default` (36px), or `lg` (40px).
+	 * @default "default"
+	 */
+	size?: "default" | "sm" | "lg";
+	/** Controlled pressed state. Pair with `onPressedChange`. */
+	pressed?: boolean;
+	/**
+	 * Initial pressed state for uncontrolled usage.
+	 * @default false
+	 */
+	defaultPressed?: boolean;
+	/** Fires when the user toggles the pressed state. */
+	onPressedChange?: (pressed: boolean) => void;
+	/**
+	 * Disable the toggle.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * Render as a Radix Slot.
+	 * @default false
+	 */
+	asChild?: boolean;
+	/** Toggle content (typically an icon or short label). */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
+	({ className, variant, size, ...props }, ref) => (
+		<TogglePrimitive.Root
+			ref={ref}
+			className={cn(toggleVariants({ variant, size, className }))}
+			{...props}
+		/>
+	),
+);
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/src/components/charts/activity-heatmap.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface ActivityHeatmapProps extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * Cell values in row-major order. Each entry is a number in `[0, 1]`
+	 * where `0` paints the lowest tint and `1` paints the highest. Values are
+	 * clamped on render. The grid dimensions come from `data.length` and
+	 * `data[0].length`; pass jagged arrays only if you accept short rows.
+	 */
+	data: number[][];
+	/**
+	 * CSS variable name (without leading `--`) used for the cell hue. Default
+	 * `chart-1`. Cells render as `hsl(var(--{colorVar}) / opacity)`.
+	 */
+	colorVar?: string;
+	/** Pixel height of each cell row. Default `14`. */
+	cellHeight?: number;
+	/** Pixel gap between cells. Default `2`. */
+	gap?: number;
+	/** Pixel border-radius on each cell. Default `3`. */
+	cellRadius?: number;
+	/**
+	 * Render the cell `title` attribute (browser tooltip on hover) for each
+	 * coordinate. Receives `(rowIndex, colIndex, value)` and should return a
+	 * string. Returns nothing → no title set.
+	 */
+	cellTitle?: (row: number, col: number, value: number) => string | undefined;
+}
+
+/**
+ * CSS-grid heatmap of opacity-tinted cells. Useful for time-of-day × day-of-week
+ * matrices (token issuance, sign-in concentration, queue depth) where a full
+ * chart would be overkill. Rendering is a flat `display: grid` — no canvas, no
+ * SVG, fully interactive via hover titles.
+ */
+export const ActivityHeatmap = React.forwardRef<HTMLDivElement, ActivityHeatmapProps>(
+	(
+		{
+			data,
+			colorVar = "chart-1",
+			cellHeight = 14,
+			gap = 2,
+			cellRadius = 3,
+			cellTitle,
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const cols = data[0]?.length ?? 0;
+		return (
+			<div
+				ref={ref}
+				className={cn("w-full", className)}
+				style={{
+					display: "grid",
+					gridTemplateRows: `repeat(${data.length}, ${cellHeight}px)`,
+					gap,
+				}}
+				{...props}
+			>
+				{data.map((row, r) => (
+					<div
+						key={`r-${r}`}
+						style={{
+							display: "grid",
+							gridTemplateColumns: `repeat(${cols}, 1fr)`,
+							gap,
+						}}
+					>
+						{row.map((raw, c) => {
+							const v = Math.max(0, Math.min(1, raw));
+							const opacity = 0.08 + v * 0.85;
+							const title = cellTitle?.(r, c, v);
+							return (
+								<div
+									key={`c-${r}-${c}`}
+									data-cell=""
+									title={title}
+									aria-hidden
+									style={{
+										borderRadius: cellRadius,
+										background: `hsl(var(--${colorVar}) / ${opacity})`,
+									}}
+								/>
+							);
+						})}
+					</div>
+				))}
+			</div>
+		);
+	},
+);
+ActivityHeatmap.displayName = "ActivityHeatmap";

package/src/components/charts/axes.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+/**
+ * Axis re-exports — pure pass-throughs of the Recharts primitives. Wrapping
+ * them in function components breaks Recharts' `findAllByType` introspection
+ * (chart types like LineChart look for `child.type === XAxis` to detect axes;
+ * our wrapper would have a different type, so the chart can't find them and
+ * crashes with "xAxisId requires a corresponding xAxisId on the targeted
+ * graphical component" errors).
+ *
+ * Theming is applied via CSS selectors on the `<ChartContainer>` wrapping div
+ * (`[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground`, etc.).
+ */
+export {
+	CartesianAxis,
+	PolarAngleAxis,
+	PolarRadiusAxis,
+	XAxis,
+	YAxis,
+	ZAxis,
+} from "recharts";

package/src/components/charts/chart-container.tsx

@@ -0,0 +1,195 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "../../lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+/**
+ * Recharts data primitives that should auto-cycle through `--chart-N`
+ * colours when the consumer didn't pass an explicit `fill` / `stroke`.
+ *
+ * We compare by reference (the actual class component from `recharts`) — the
+ * deep-clone walker uses `child.type === T` to detect them. This works because
+ * canvas re-exports these symbols from `recharts` directly (see `data.tsx`).
+ */
+const PALETTE_TARGETS = new Set<unknown>([
+	RechartsPrimitive.Line,
+	RechartsPrimitive.Bar,
+	RechartsPrimitive.Area,
+	RechartsPrimitive.Pie,
+	RechartsPrimitive.Scatter,
+	RechartsPrimitive.Radar,
+	RechartsPrimitive.RadialBar,
+	RechartsPrimitive.Funnel,
+]);
+
+const PALETTE_SIZE = 5;
+
+/**
+ * Recursively walk the children, cloning any data primitive that's missing
+ * `fill`/`stroke` and injecting an `hsl(var(--chart-N))` default. Counter is
+ * passed by reference so order is deterministic across the entire tree.
+ */
+function applyPalette(children: React.ReactNode, counter: { i: number }): React.ReactNode {
+	return React.Children.map(children, (child) => {
+		if (!React.isValidElement(child)) return child;
+		const props = child.props as { fill?: unknown; stroke?: unknown; children?: React.ReactNode };
+
+		if (PALETTE_TARGETS.has(child.type)) {
+			if (props.fill === undefined && props.stroke === undefined) {
+				const idx = counter.i++ % PALETTE_SIZE;
+				const colour = `hsl(var(--chart-${idx + 1}))`;
+				// Pie/Radar/Area also benefit from a matching stroke; the
+				// component decides which one applies (Bar reads fill, Line
+				// reads stroke, etc.).
+				return React.cloneElement(child, {
+					fill: colour,
+					stroke: colour,
+				} as Partial<typeof props>);
+			}
+			return child;
+		}
+
+		// Recurse into children of layout / chart-type / fragment elements so
+		// data primitives nested inside (e.g. <BarChart><Bar/></BarChart>)
+		// still get assigned a palette colour.
+		if (props.children !== undefined) {
+			return React.cloneElement(
+				child,
+				{} as Partial<typeof props>,
+				applyPalette(props.children, counter),
+			);
+		}
+		return child;
+	});
+}
+
+export type ChartConfig = {
+	[k in string]: {
+		label?: React.ReactNode;
+		icon?: React.ComponentType;
+	} & (
+		| { color?: string; theme?: never }
+		| { color?: never; theme: Record<keyof typeof THEMES, string> }
+	);
+};
+
+interface ChartContextProps {
+	config: ChartConfig;
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+export function useChart() {
+	const context = React.useContext(ChartContext);
+
+	if (!context) {
+		throw new Error("useChart must be used within a <ChartContainer />");
+	}
+
+	return context;
+}
+
+const ChartContainer = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		config: ChartConfig;
+		children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+	}
+>(({ id, className, children, config, ...props }, ref) => {
+	const uniqueId = React.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+	const themedChildren = React.useMemo(
+		() => applyPalette(children, { i: 0 }) as typeof children,
+		[children],
+	);
+
+	return (
+		<ChartContext.Provider value={{ config }}>
+			<div
+				data-chart={chartId}
+				ref={ref}
+				className={cn(
+					"flex aspect-video w-full justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+					className,
+				)}
+				{...props}
+			>
+				<ChartStyle id={chartId} config={config} />
+				<RechartsPrimitive.ResponsiveContainer>
+					{themedChildren}
+				</RechartsPrimitive.ResponsiveContainer>
+			</div>
+		</ChartContext.Provider>
+	);
+});
+ChartContainer.displayName = "Chart";
+
+export const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+
+	if (!colorConfig.length) {
+		return null;
+	}
+
+	return (
+		<style
+			dangerouslySetInnerHTML={{
+				__html: Object.entries(THEMES)
+					.map(
+						([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+	.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join("\n")}
+}
+`,
+					)
+					.join("\n"),
+			}}
+		/>
+	);
+};
+
+/**
+ * Look up the canvas config entry that matches a Recharts payload item.
+ * Used by tooltip and legend components to resolve labels / icons / colours
+ * from the ChartConfig prop.
+ */
+export function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+	/* c8 ignore next 3 -- defensive guard: payload is always a recharts item object at call sites */
+	if (typeof payload !== "object" || payload === null) {
+		return undefined;
+	}
+
+	const payloadPayload =
+		"payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+			? payload.payload
+			: undefined;
+
+	let configLabelKey: string = key;
+
+	/* c8 ignore next 3 -- defensive name-key lookup: real recharts payloads don't carry this shape */
+	if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (
+		/* c8 ignore next 3 -- defensive nested-name lookup: only reachable with custom dataset shape */
+		payloadPayload &&
+		key in payloadPayload &&
+		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+	) {
+		configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+	}
+
+	return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export { ChartContainer };