@olympusoss/canvas 2.8.6 → 2.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olympusoss/canvas",
-	"version": "2.8.6",
+	"version": "2.9.0",
 	"type": "module",
 	"main": "./src/index.ts",
 	"types": "./src/index.ts",

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

@@ -2,6 +2,8 @@ import * as React from "react";
 
 import { cn } from "../../lib/utils";
 
+const DEFAULT_WEEKDAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] as const;
+
 export interface ActivityHeatmapProps extends React.HTMLAttributes<HTMLDivElement> {
 	/**
 	 * Cell values in row-major order. Each entry is a number in `[0, 1]`
@@ -81,11 +83,16 @@ export const ActivityHeatmap = React.forwardRef<HTMLDivElement, ActivityHeatmapP
 		const fromLabel = legendObj?.fromLabel ?? "Fewer";
 		const toLabel = legendObj?.toLabel ?? "More";
 		const showLegend = legend !== false;
+		// 7-row grids default to weekday labels (Mon–Sun) — covers the common
+		// GitHub-style yearly contribution pattern without each consumer
+		// re-declaring the array.
+		const resolvedRowLabels =
+			rowLabels ?? (data.length === 7 ? DEFAULT_WEEKDAY_LABELS.slice() : undefined);
 
 		return (
 			<div ref={ref} className={cn("w-full", className)} {...props}>
 				<div className="flex gap-2">
-					{rowLabels && rowLabels.length > 0 && (
+					{resolvedRowLabels && resolvedRowLabels.length > 0 && (
 						<div
 							className="grid text-[10px] tabular-nums text-muted-foreground"
 							style={{
@@ -96,7 +103,7 @@ export const ActivityHeatmap = React.forwardRef<HTMLDivElement, ActivityHeatmapP
 						>
 							{Array.from({ length: data.length }, (_, i) => (
 								<span key={`row-label-${i}`} className="flex items-center leading-none">
-									{rowLabels[i] ?? ""}
+									{resolvedRowLabels[i] ?? ""}
 								</span>
 							))}
 						</div>

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

@@ -29,6 +29,36 @@ const PALETTE_TARGETS = new Set<unknown>([
 
 const PALETTE_SIZE = 5;
 
+function nextColour(counter: { i: number }) {
+	const idx = counter.i++ % PALETTE_SIZE;
+	return `hsl(var(--chart-${idx + 1}))`;
+}
+
+/**
+ * Walk a Pie's `<Cell>` children and inject per-cell palette fills when none
+ * is set, so each slice gets a distinct hue without requiring the consumer to
+ * write `<Cell fill={...} />` for every entry.
+ */
+function paintPieCells(children: React.ReactNode, counter: { i: number }): React.ReactNode {
+	return React.Children.map(children, (child) => {
+		if (!React.isValidElement(child)) return child;
+		const cellProps = child.props as { fill?: unknown };
+		if (child.type === RechartsPrimitive.Cell && cellProps.fill === undefined) {
+			return React.cloneElement(child, { fill: nextColour(counter) } as Partial<typeof cellProps>);
+		}
+		return child;
+	});
+}
+
+/**
+ * Inject per-row `fill` on Funnel data when the consumer didn't supply one.
+ * Recharts Funnel reads each datum's `fill` to colour the stage, so we map
+ * the array and assign palette colours in order.
+ */
+function paintFunnelData<T extends { fill?: unknown }>(data: T[], counter: { i: number }): T[] {
+	return data.map((row) => (row.fill === undefined ? { ...row, fill: nextColour(counter) } : row));
+}
+
 /**
  * Recursively walk the children, cloning any data primitive that's missing
  * `fill`/`stroke` and injecting an `hsl(var(--chart-N))` default. Counter is
@@ -37,12 +67,41 @@ const PALETTE_SIZE = 5;
 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 };
+		const props = child.props as {
+			fill?: unknown;
+			stroke?: unknown;
+			children?: React.ReactNode;
+			data?: unknown;
+			label?: unknown;
+		};
+
+		// Pie: walk Cell children and assign per-slice palette colours so each
+		// slice is distinct. Also default `label={true}` so slices render their
+		// data-key value at the perimeter without needing a `<LabelList>`.
+		if (child.type === RechartsPrimitive.Pie) {
+			const next: Record<string, unknown> = {};
+			if (props.children !== undefined) {
+				next.children = paintPieCells(props.children, counter);
+			} else if (props.fill === undefined && props.stroke === undefined) {
+				const colour = nextColour(counter);
+				next.fill = colour;
+				next.stroke = colour;
+			}
+			if (props.label === undefined) next.label = true;
+			return React.cloneElement(child, next as Partial<typeof props>);
+		}
+
+		// Funnel: distribute palette colours across the data array (Recharts
+		// reads `fill` from each datum, not from the <Funnel> element).
+		if (child.type === RechartsPrimitive.Funnel && Array.isArray(props.data)) {
+			return React.cloneElement(child, {
+				data: paintFunnelData(props.data as { fill?: unknown }[], counter),
+			} as Partial<typeof props>);
+		}
 
 		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}))`;
+				const colour = nextColour(counter);
 				// Pie/Radar/Area also benefit from a matching stroke; the
 				// component decides which one applies (Bar reads fill, Line
 				// reads stroke, etc.).
@@ -115,7 +174,7 @@ const ChartContainer = React.forwardRef<
 				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",
+					"flex aspect-video w-full justify-center text-xs [&_.recharts-cartesian-axis-line]:stroke-border [&_.recharts-cartesian-axis-tick-line]:stroke-transparent [&_.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}

package/src/components/molecules/code-block.tsx

@@ -10,11 +10,18 @@ export interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
 	code: string;
 	language?: string;
 	showCopy?: boolean;
+	/**
+	 * `"light"` (default) renders against `bg-muted`; `"dark"` switches to a
+	 * near-black terminal palette (`#0a0a0b` background, `#e4e4e7` text) for
+	 * use on marketing surfaces.
+	 */
+	theme?: "light" | "dark";
 }
 
 const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
-	({ code, language, showCopy = true, className, ...props }, ref) => {
+	({ code, language, showCopy = true, theme = "light", className, ...props }, ref) => {
 		const [copied, setCopied] = React.useState(false);
+		const isDark = theme === "dark";
 
 		const handleCopy = React.useCallback(async () => {
 			await navigator.clipboard.writeText(code);
@@ -23,20 +30,50 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
 		}, [code]);
 
 		return (
-			<div ref={ref} className={cn("relative rounded-md bg-muted", className)} {...props}>
+			<div
+				ref={ref}
+				className={cn(
+					"relative overflow-hidden rounded-md",
+					isDark ? "border border-border" : "bg-muted",
+					className,
+				)}
+				style={isDark ? { background: "#0a0a0b" } : undefined}
+				{...props}
+			>
 				{(language || showCopy) && (
-					<div className="flex items-center justify-between border-b px-4 py-2">
-						{language && (
-							<span className="text-xs font-medium text-muted-foreground">{language}</span>
+					<div
+						className={cn(
+							"flex items-center justify-between px-4 py-2",
+							isDark ? undefined : "border-b",
+						)}
+						style={isDark ? { borderBottom: "1px solid #222" } : undefined}
+					>
+						{language ? (
+							<span
+								className={cn("text-xs font-medium", !isDark && "text-muted-foreground")}
+								style={isDark ? { color: "#6b7280" } : undefined}
+							>
+								{language}
+							</span>
+						) : (
+							<span />
 						)}
 						{showCopy && (
-							<Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleCopy}>
+							<Button
+								variant="ghost"
+								size="icon"
+								className={cn(
+									"h-6 w-6",
+									isDark && "text-zinc-400 hover:bg-white/5 hover:text-zinc-100",
+								)}
+								onClick={handleCopy}
+							>
 								{copied ? <Check className="h-3 w-3" /> : <Copy className="h-3 w-3" />}
 							</Button>
 						)}
 					</div>
 				)}
-				<pre className="overflow-x-auto p-4">
+				<pre className="overflow-x-auto p-4" style={isDark ? { color: "#e4e4e7" } : undefined}>
 					<code className="text-sm">{code}</code>
 				</pre>
 			</div>

package/src/components/molecules/launcher-card.tsx

@@ -0,0 +1,152 @@
+// molecules: can import tokens/, lib/utils, atoms/.
+"use client";
+
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const TONE_STYLES = {
+	default: {
+		bg: "hsl(var(--primary) / 0.1)",
+		fg: "hsl(var(--primary))",
+		ring: "hsl(var(--primary) / 0.2)",
+	},
+	indigo: {
+		bg: "hsl(231 92% 96%)",
+		fg: "hsl(231 60% 38%)",
+		ring: "hsl(231 80% 60% / 0.25)",
+	},
+	violet: {
+		bg: "hsl(262 90% 96%)",
+		fg: "hsl(262 55% 42%)",
+		ring: "hsl(262 80% 60% / 0.25)",
+	},
+	slate: {
+		bg: "hsl(230 25% 95%)",
+		fg: "hsl(230 30% 30%)",
+		ring: "hsl(230 20% 60% / 0.25)",
+	},
+} as const;
+
+export type LauncherCardTone = keyof typeof TONE_STYLES;
+
+export interface LauncherCardProps {
+	/**
+	 * Top-left identifier — typically a letter (`"C"`) or a small icon.
+	 */
+	badge: React.ReactNode;
+	/** Card heading. */
+	title: string;
+	/** One-or-two sentence body copy below the title. */
+	description: string;
+	/**
+	 * Colour key for the badge background, foreground, and hover ring.
+	 * Defaults to `"default"`, which uses the `--primary` token.
+	 */
+	tone?: LauncherCardTone;
+	/**
+	 * If set, the entire card becomes a link with a hover-lift effect.
+	 * Pair with `linkComponent` to route through a framework-specific Link
+	 * component (e.g. Next.js).
+	 */
+	href?: string;
+	/**
+	 * `target` attribute applied when `href` is set. Defaults to `"_self"`.
+	 */
+	target?: React.HTMLAttributeAnchorTarget;
+	/**
+	 * `rel` attribute applied when `href` is set. Defaults to `"noopener"`
+	 * when `target === "_blank"`.
+	 */
+	rel?: string;
+	/**
+	 * Override the rendered link element when `href` is set
+	 * (e.g. `Link` from `next/link`). Falls back to `<a>`.
+	 */
+	linkComponent?: React.ElementType;
+	/**
+	 * Footer slot. Typically a small CTA row (e.g. arrow link) or, when the
+	 * card is non-interactive, an inline status / detail block.
+	 */
+	children?: React.ReactNode;
+	className?: string;
+}
+
+const SHARED_CLASSES =
+	"group flex flex-col gap-4 rounded-[14px] border border-border bg-card p-6 text-card-foreground";
+
+const INTERACTIVE_CLASSES =
+	"no-underline transition-[transform,box-shadow,border-color] duration-200 hover:-translate-y-0.5 hover:shadow-[0_20px_40px_-20px_var(--launcher-tone-ring),0_8px_16px_-8px_rgb(0_0_0/0.08)] hover:[border-color:var(--launcher-tone-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+
+const LauncherCard = React.forwardRef<HTMLElement, LauncherCardProps>(
+	(
+		{
+			badge,
+			title,
+			description,
+			tone = "default",
+			href,
+			target,
+			rel,
+			linkComponent,
+			children,
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const t = TONE_STYLES[tone];
+		const interactive = Boolean(href);
+		const toneVars = {
+			"--launcher-tone-fg": t.fg,
+			"--launcher-tone-ring": t.ring,
+		} as React.CSSProperties;
+
+		const inner = (
+			<>
+				<div className="flex items-center gap-3.5">
+					<div
+						className="flex h-11 w-11 items-center justify-center rounded-[10px] text-lg font-semibold tracking-tight"
+						style={{ background: t.bg, color: t.fg }}
+					>
+						{badge}
+					</div>
+					<div className="text-[17px] font-semibold tracking-tight">{title}</div>
+				</div>
+				<p className="m-0 flex-1 text-sm leading-relaxed text-muted-foreground">{description}</p>
+				{children != null && <div className="mt-1">{children}</div>}
+			</>
+		);
+
+		if (interactive) {
+			const LinkEl = linkComponent || "a";
+			const resolvedRel = rel ?? (target === "_blank" ? "noopener" : undefined);
+			return (
+				<LinkEl
+					ref={ref as React.Ref<HTMLAnchorElement>}
+					href={href}
+					target={target}
+					rel={resolvedRel}
+					className={cn(SHARED_CLASSES, INTERACTIVE_CLASSES, className)}
+					style={toneVars}
+					{...props}
+				>
+					{inner}
+				</LinkEl>
+			);
+		}
+
+		return (
+			<div
+				ref={ref as React.Ref<HTMLDivElement>}
+				className={cn(SHARED_CLASSES, className)}
+				{...props}
+			>
+				{inner}
+			</div>
+		);
+	},
+);
+LauncherCard.displayName = "LauncherCard";
+
+export { LauncherCard };

package/src/components/molecules/terminal.tsx

@@ -0,0 +1,73 @@
+// molecules: can import tokens/, lib/utils, atoms/.
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+export interface TerminalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+	/**
+	 * Optional label rendered in the macOS-style chrome strip, next to the
+	 * traffic-light dots. Typical use: a working directory + command
+	 * (e.g. `~/Olympus · octl`).
+	 */
+	title?: React.ReactNode;
+	/**
+	 * Terminal body. Renders inside a `<pre>` with mono font and 1.7 line
+	 * height. Free-form — drop plain text, ANSI-coloured `<span>`s, or any
+	 * inline highlights you want.
+	 */
+	children: React.ReactNode;
+	className?: string;
+}
+
+const Terminal = React.forwardRef<HTMLDivElement, TerminalProps>(
+	({ title, children, className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn(
+				"overflow-hidden rounded-xl border border-border shadow-[0_30px_60px_-20px_rgb(0_0_0/0.35)]",
+				className,
+			)}
+			style={{ background: "#0a0a0b" }}
+			{...props}
+		>
+			<div
+				className="flex items-center gap-1.5 px-3"
+				style={{
+					height: 32,
+					background: "#141417",
+					borderBottom: "1px solid #222",
+				}}
+			>
+				<span
+					aria-hidden="true"
+					className="inline-block h-2.5 w-2.5 rounded-full"
+					style={{ background: "#ff5f57" }}
+				/>
+				<span
+					aria-hidden="true"
+					className="inline-block h-2.5 w-2.5 rounded-full"
+					style={{ background: "#febc2e" }}
+				/>
+				<span
+					aria-hidden="true"
+					className="inline-block h-2.5 w-2.5 rounded-full"
+					style={{ background: "#28c840" }}
+				/>
+				{title != null && (
+					<span className="ml-2.5 font-mono text-[11px]" style={{ color: "#6b7280" }}>
+						{title}
+					</span>
+				)}
+			</div>
+			<pre
+				className="m-0 overflow-x-auto p-5 font-mono text-[12.5px] leading-[1.7]"
+				style={{ color: "#e4e4e7" }}
+			>
+				{children}
+			</pre>
+		</div>
+	),
+);
+Terminal.displayName = "Terminal";
+
+export { Terminal };

package/src/index.ts

@@ -189,6 +189,11 @@ export {
 	InputOTPSeparator,
 	InputOTPSlot,
 } from "./components/molecules/input-otp";
+export {
+	LauncherCard,
+	type LauncherCardProps,
+	type LauncherCardTone,
+} from "./components/molecules/launcher-card";
 export {
 	LoadingState,
 	type LoadingStateProps,
@@ -260,6 +265,7 @@ export {
 	TableHeader,
 	TableRow,
 } from "./components/molecules/table";
+export { Terminal, type TerminalProps } from "./components/molecules/terminal";
 export { ToggleGroup, ToggleGroupItem } from "./components/molecules/toggle-group";
 export {
 	Tooltip,