@olympusoss/canvas 2.20.1 → 3.1.0

package/src/components/charts/world-heat-map.tsx

@@ -1,184 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-/**
- * `<WorldHeatMap>` — Leaflet-based geographic scatter / heat-map.
- *
- * Public surface lives here; the actual react-leaflet tree is in
- * `world-heat-map-inner.tsx` and is loaded via `React.lazy()` so neither
- * `leaflet` nor `react-leaflet` lands in canvas's main bundle. Both are
- * declared as **peer-optional** in `package.json` — consumers who use the map
- * install them explicitly; consumers who don't, don't pay.
- *
- * Consumers must also import the Leaflet base stylesheet at app entry:
- *
- *   import "@olympusoss/canvas/styles/leaflet.css";
- *
- * Visual identity matches the deployed admin dashboard reference (CartoDB
- * tiles, hidden controls, triple-layered CircleMarker per point).
- */
-
-// ── Public types ─────────────────────────────────────────────
-
-export interface WorldHeatMapPoint {
-	/** Latitude. */
-	lat: number;
-	/** Longitude. */
-	lng: number;
-	/** Tooltip label (e.g. "Munich, DE"). */
-	label: string;
-	/** Drives marker radius. */
-	count: number;
-}
-
-export interface WorldHeatMapProps {
-	/** Geo-located points to render. Empty array shows the empty-state overlay. */
-	points: WorldHeatMapPoint[];
-	/** Container height. Number → px, string passes through. Default `"100%"`. */
-	height?: number | string;
-	/** Initial map center `[lat, lng]`. Default `[20, 0]`. */
-	center?: [number, number];
-	/** Initial zoom. Default `3`. */
-	zoom?: number;
-	/** Tile basemap. `"auto"` follows canvas's `useTheme()`. Default `"auto"`. */
-	tileTheme?: "auto" | "dark" | "light";
-	/** Show Leaflet zoom + attribution controls. Default `false`. */
-	showControls?: boolean;
-	/** Marker fill (any CSS colour, including `hsl(var(--chart-1))`). Default `"hsl(var(--chart-1))"`. */
-	markerColor?: string;
-	/** `[min, max]` marker radius in pixels (log-scaled on `count`). Default `[4, 20]`. */
-	markerRadiusRange?: [number, number];
-	/** Per-marker click handler. */
-	onMarkerClick?: (point: WorldHeatMapPoint) => void;
-	/** Show "Fewer / More" legend overlay (bottom-left). Default `true`. */
-	showLegend?: boolean;
-	/** Optional title overlaid top-left. */
-	title?: string;
-	/** Override the empty-state node. Default: a small "No geographic data available" card. */
-	emptyState?: React.ReactNode;
-	/** Pass-through className on the outer `.world-heat-map` wrapper. */
-	className?: string;
-}
-
-// ── Lazy-loaded inner ───────────────────────────────────────
-
-const WorldHeatMapInner = React.lazy(() => import("./world-heat-map-inner"));
-
-// ── Error boundary (peer-missing or runtime-load failure) ───
-
-interface WorldHeatMapErrorBoundaryProps {
-	fallback: React.ReactNode;
-	children: React.ReactNode;
-}
-interface WorldHeatMapErrorBoundaryState {
-	hasError: boolean;
-}
-
-class WorldHeatMapErrorBoundary extends React.Component<
-	WorldHeatMapErrorBoundaryProps,
-	WorldHeatMapErrorBoundaryState
-> {
-	state: WorldHeatMapErrorBoundaryState = { hasError: false };
-
-	/* c8 ignore start -- only triggers when the lazy-loaded Leaflet inner throws (peer missing or runtime load failure); both are jsdom-incompatible to simulate */
-	static getDerivedStateFromError(): WorldHeatMapErrorBoundaryState {
-		return { hasError: true };
-	}
-
-	render(): React.ReactNode {
-		return this.state.hasError ? this.props.fallback : this.props.children;
-	}
-	/* c8 ignore stop */
-}
-
-// ── Shell (SSR / loading / error) ───────────────────────────
-
-type ShellState = "loading" | "error";
-
-interface ShellProps {
-	height?: number | string;
-	className?: string;
-	state: ShellState;
-}
-
-function resolveHeight(height: number | string | undefined): string {
-	if (height === undefined) return "100%";
-	return typeof height === "number" ? `${height}px` : height;
-}
-
-function Shell({ height, className, state }: ShellProps) {
-	const heightStr = resolveHeight(height);
-	return (
-		<div
-			className={cn(
-				"relative flex items-center justify-center overflow-hidden rounded-xl bg-muted/40 text-xs text-muted-foreground world-heat-map",
-				className,
-			)}
-			style={{ height: heightStr }}
-		>
-			{state === "loading" ? (
-				<>
-					<svg
-						width="20"
-						height="20"
-						viewBox="0 0 20 20"
-						aria-hidden="true"
-						className="mr-2 animate-spin opacity-50"
-					>
-						<title>Loading</title>
-						<circle
-							cx="10"
-							cy="10"
-							r="8"
-							fill="none"
-							stroke="currentColor"
-							strokeWidth="2"
-							strokeDasharray="40"
-							strokeLinecap="round"
-						/>
-					</svg>
-					Loading map…
-				</>
-			) : (
-				<div className="px-4 py-2 text-center">
-					Map dependencies missing — install <code>leaflet</code> and <code>react-leaflet</code>.
-				</div>
-			)}
-		</div>
-	);
-}
-
-// ── Public component ────────────────────────────────────────
-
-export function WorldHeatMap(props: WorldHeatMapProps) {
-	const [mounted, setMounted] = React.useState(false);
-
-	React.useEffect(() => {
-		setMounted(true);
-	}, []);
-
-	// SSR / hydration guard — prevents `window`/`document` access during the
-	// server pass and the first client render before hydration completes.
-	if (!mounted) {
-		return <Shell height={props.height} className={props.className} state="loading" />;
-	}
-
-	/* c8 ignore start -- post-mount tree mounts the lazy Leaflet inner; jsdom can't run Leaflet so the Suspense + ErrorBoundary tree is verified visually in the docs */
-	return (
-		<WorldHeatMapErrorBoundary
-			fallback={<Shell height={props.height} className={props.className} state="error" />}
-		>
-			<React.Suspense
-				fallback={<Shell height={props.height} className={props.className} state="loading" />}
-			>
-				<WorldHeatMapInner {...props} />
-			</React.Suspense>
-		</WorldHeatMapErrorBoundary>
-	);
-	/* c8 ignore stop */
-}
-
-WorldHeatMap.displayName = "WorldHeatMap";

package/src/components/molecules/README.md

@@ -1,12 +0,0 @@
-# Molecules
-
-Small compositions of atoms. Meaningful UI semantics. No app-state model.
-
-**Can import**: `tokens/`, `lib/utils`, `atoms/`, React.
-
-**Cannot import**: anything from `organisms/` or `templates/`.
-
-Molecules don't own interactive state more complex than a local toggle. If it
-has open/close state, selection, or form integration, it's an organism.
-
-See [CONTRIBUTING.md](../../../CONTRIBUTING.md) for the full atomic-design rules.

package/src/components/molecules/action-bar.tsx

@@ -1,73 +0,0 @@
-"use client";
-
-import type * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Button } from "../atoms/button";
-import { Icon } from "../atoms/icon";
-
-export interface ActionBarAction {
-	label: string;
-	onClick: () => void;
-	icon?: React.ReactNode;
-	loading?: boolean;
-	disabled?: boolean;
-}
-
-export interface ActionBarSecondary extends ActionBarAction {
-	variant?: "outline" | "ghost";
-}
-
-export interface ActionBarProps {
-	primaryAction?: ActionBarAction;
-	secondaryActions?: ActionBarSecondary[];
-	align?: "left" | "right" | "center" | "space-between";
-	className?: string;
-}
-
-const ALIGN: Record<NonNullable<ActionBarProps["align"]>, string> = {
-	left: "justify-start",
-	right: "justify-end",
-	center: "justify-center",
-	"space-between": "justify-between",
-};
-
-export function ActionBar({
-	primaryAction,
-	secondaryActions = [],
-	align = "right",
-	className,
-}: ActionBarProps) {
-	return (
-		<div className={cn("flex items-center gap-2", ALIGN[align], className)}>
-			{secondaryActions.map((a) => (
-				<Button
-					key={a.label}
-					onClick={a.onClick}
-					disabled={a.disabled || a.loading}
-					variant={a.variant ?? "outline"}
-					size="sm"
-				>
-					{a.icon && <span className="mr-1">{a.icon}</span>}
-					{a.label}
-				</Button>
-			))}
-			{primaryAction && (
-				<Button
-					onClick={primaryAction.onClick}
-					disabled={primaryAction.disabled || primaryAction.loading}
-					size="sm"
-				>
-					{primaryAction.loading ? (
-						<Icon name="LoaderCircle" className="mr-1 h-4 w-4 animate-spin" />
-					) : (
-						primaryAction.icon && <span className="mr-1">{primaryAction.icon}</span>
-					)}
-					{primaryAction.label}
-				</Button>
-			)}
-		</div>
-	);
-}
-
-ActionBar.displayName = "ActionBar";

package/src/components/molecules/activity-item.tsx

@@ -1,74 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface ActivityItemProps extends React.HTMLAttributes<HTMLLIElement> {
-	/** Bold subject (the actor). */
-	subject: React.ReactNode;
-	/** Muted action verb + object. */
-	action: React.ReactNode;
-	/** Right-aligned timestamp. */
-	timestamp?: React.ReactNode;
-	/** Leading icon or avatar slot. */
-	leading?: React.ReactNode;
-	/** When provided, the row becomes clickable. */
-	onClick?: () => void;
-	/**
-	 * Index in a list — when 0, the top border is suppressed so consecutive
-	 * items only render dividers between rows. Defaults to 1 (border on).
-	 */
-	index?: number;
-}
-
-export const ActivityItem = React.forwardRef<HTMLLIElement, ActivityItemProps>(
-	({ subject, action, timestamp, leading, onClick, index = 1, className, ...props }, ref) => {
-		const Row = onClick ? "button" : "div";
-		return (
-			<li
-				ref={ref}
-				className={cn(
-					"flex items-start gap-3 py-3",
-					index > 0 && "border-t border-border",
-					className,
-				)}
-				{...props}
-			>
-				{leading && <div className="shrink-0">{leading}</div>}
-				<Row
-					type={onClick ? "button" : undefined}
-					onClick={onClick}
-					className={cn(
-						"flex w-full items-start justify-between gap-4 text-left",
-						onClick && "transition-colors hover:text-foreground",
-					)}
-				>
-					<p className="m-0 min-w-0 text-[13.5px]">
-						<span className="font-medium text-foreground">{subject}</span>{" "}
-						<span className="text-muted-foreground">{action}</span>
-					</p>
-					{timestamp != null && (
-						<span className="shrink-0 font-mono text-[11px] text-muted-foreground">
-							{timestamp}
-						</span>
-					)}
-				</Row>
-			</li>
-		);
-	},
-);
-ActivityItem.displayName = "ActivityItem";
-
-export interface ActivityFeedProps extends React.HTMLAttributes<HTMLUListElement> {
-	children?: React.ReactNode;
-}
-
-export const ActivityFeed = React.forwardRef<HTMLUListElement, ActivityFeedProps>(
-	({ children, className, ...props }, ref) => {
-		return (
-			<ul ref={ref} className={cn("m-0 list-none p-0", className)} {...props}>
-				{children}
-			</ul>
-		);
-	},
-);
-ActivityFeed.displayName = "ActivityFeed";

package/src/components/molecules/alert.tsx

@@ -1,86 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-const alertVariants = cva(
-	"relative w-full rounded-lg border border-border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-	{
-		variants: {
-			variant: {
-				default: "bg-background text-foreground",
-				destructive:
-					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-			},
-		},
-		defaultVariants: {
-			variant: "default",
-		},
-	},
-);
-
-export interface AlertProps
-	extends React.HTMLAttributes<HTMLDivElement>,
-		VariantProps<typeof alertVariants> {
-	/**
-	 * Visual emphasis preset. `default` is informational, `destructive`
-	 * uses the danger palette for errors and warnings.
-	 * @default "default"
-	 */
-	variant?: "default" | "destructive";
-	/**
-	 * Optional leading icon (lucide-react), `<AlertTitle>`, and
-	 * `<AlertDescription>`. The icon — when present as a direct child —
-	 * is auto-positioned in the top-left.
-	 */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the alert via `cn()`. */
-	className?: string;
-}
-
-const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
-	({ className, variant, ...props }, ref) => (
-		<div
-			ref={ref}
-			role="alert"
-			data-slot="alert"
-			className={cn(alertVariants({ variant }), className)}
-			{...props}
-		/>
-	),
-);
-Alert.displayName = "Alert";
-
-export interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
-	/** The alert headline. Renders as an `<h5>`. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the title via `cn()`. */
-	className?: string;
-}
-
-const AlertTitle = React.forwardRef<HTMLParagraphElement, AlertTitleProps>(
-	({ className, ...props }, ref) => (
-		<h5
-			ref={ref}
-			className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-			{...props}
-		/>
-	),
-);
-AlertTitle.displayName = "AlertTitle";
-
-export interface AlertDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
-	/** Body copy of the alert. Renders as a `<div>` so it can hold paragraphs and lists. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged onto the description via `cn()`. */
-	className?: string;
-}
-
-const AlertDescription = React.forwardRef<HTMLParagraphElement, AlertDescriptionProps>(
-	({ className, ...props }, ref) => (
-		<div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
-	),
-);
-AlertDescription.displayName = "AlertDescription";
-
-export { Alert, AlertDescription, AlertTitle };

package/src/components/molecules/animated-background.tsx

@@ -1,92 +0,0 @@
-import { cn } from "../../lib/utils";
-
-export interface AnimatedBackgroundOrb {
-	/** CSS color for the radial gradient (hex / rgb / hsl / token). */
-	color: string;
-	/**
-	 * Diameter in pixels.
-	 * @default 500
-	 */
-	size?: number;
-	/**
-	 * Opacity 0–1. Lower values let more of the page bg bleed through.
-	 * @default 0.2
-	 */
-	opacity?: number;
-	/**
-	 * Gaussian blur radius in pixels. Larger values produce softer orbs.
-	 * @default 100
-	 */
-	blur?: number;
-	/** Tailwind position classes, e.g. `"-top-32 -right-32"` or `"left-1/2 top-1/3"`. */
-	position?: string;
-	/**
-	 * CSS `animation` shorthand. Pair with the `orb-float-1` / `orb-float-2`
-	 * keyframes shipped in canvas's tokens, or your own.
-	 */
-	animation?: string;
-}
-
-export interface AnimatedBackgroundProps {
-	/**
-	 * Orbs to render. Defaults to a 3-orb indigo/purple/cyan composition
-	 * that mirrors the auth-screen backdrop. Pass an empty array `[]` to
-	 * render no orbs (useful for testing).
-	 */
-	orbs?: AnimatedBackgroundOrb[];
-	/**
-	 * Tailwind / CSS classes merged onto the root container via `cn()`.
-	 * Defaults to `pointer-events-none fixed inset-0 overflow-hidden`.
-	 */
-	className?: string;
-}
-
-const DEFAULT_ORBS: AnimatedBackgroundOrb[] = [
-	{
-		color: "#6366f1",
-		size: 500,
-		opacity: 0.2,
-		blur: 120,
-		position: "-top-32 -right-32",
-		animation: "orb-float-1 8s ease-in-out infinite",
-	},
-	{
-		color: "#8b5cf6",
-		size: 400,
-		opacity: 0.15,
-		blur: 100,
-		position: "-bottom-32 -left-32",
-		animation: "orb-float-2 10s ease-in-out infinite",
-	},
-	{
-		color: "#06b6d4",
-		size: 300,
-		opacity: 0.1,
-		blur: 80,
-		position: "left-1/2 top-1/3 -translate-x-1/2",
-		animation: "orb-float-1 12s ease-in-out 2s infinite",
-	},
-];
-
-export function AnimatedBackground({ orbs = DEFAULT_ORBS, className }: AnimatedBackgroundProps) {
-	return (
-		<div className={cn("pointer-events-none fixed inset-0 overflow-hidden", className)}>
-			{orbs.map((orb, i) => (
-				<div
-					key={i}
-					className={cn("absolute rounded-full", orb.position)}
-					style={{
-						width: orb.size ?? 500,
-						height: orb.size ?? 500,
-						opacity: orb.opacity ?? 0.2,
-						filter: `blur(${orb.blur ?? 100}px)`,
-						background: `radial-gradient(circle, ${orb.color} 0%, transparent 70%)`,
-						animation: orb.animation,
-					}}
-				/>
-			))}
-		</div>
-	);
-}
-
-AnimatedBackground.displayName = "AnimatedBackground";

package/src/components/molecules/auth-shell.tsx

@@ -1,95 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-import { Card, CardContent, CardHeader } from "./card";
-
-export interface AuthShellProps {
-	/**
-	 * Brand lockup rendered above the card. Compose a `ClientBrand` (or
-	 * your own component) and pass it in. Slot is left empty to keep this
-	 * shell unaware of OAuth2 / Hydra specifics.
-	 */
-	brand?: React.ReactNode;
-	/** Card title. Pairs with `subtitle`. */
-	title?: React.ReactNode;
-	/** Optional one-line subtitle shown beneath `title`. */
-	subtitle?: React.ReactNode;
-	/** Card body content. */
-	children?: React.ReactNode;
-	/**
-	 * Optional footer line beneath the card (legal / privacy / support).
-	 */
-	footer?: React.ReactNode;
-	/**
-	 * Card width preset. `default` = 408px (single-column flows like login,
-	 * recovery), `wide` = 460px (multi-step or denser flows like consent).
-	 * @default "default"
-	 */
-	width?: "default" | "wide";
-	/**
-	 * Allow children to break the card frame (useful for full-bleed flow
-	 * pickers or media). When `false` the card content gets the standard
-	 * `p-6` padding.
-	 * @default false
-	 */
-	flush?: boolean;
-	/** Tailwind / CSS classes merged onto the outer wrapper via `cn()`. */
-	className?: string;
-}
-
-/**
- * Centered single-card layout for auth flows.
- *
- * Renders, top to bottom:
- *   1. Brand slot (`brand`) above the card
- *   2. Card with optional centred title + subtitle, then `children`
- *   3. Optional footer line beneath the card
- *
- * Layout is intentionally narrow and prescriptive: this is the
- * agreed-upon shape for every Olympus auth screen (login, register,
- * recovery, reset, verify, OTP, consent, logout, status). For app shells
- * with sidebars or multi-pane layouts, compose your own flex shell
- * directly (see `Sidebar` + `SidebarInset`).
- */
-const AuthShell = React.forwardRef<HTMLDivElement, AuthShellProps>(
-	(
-		{ brand, title, subtitle, children, footer, width = "default", flush = false, className },
-		ref,
-	) => (
-		<div
-			ref={ref}
-			className={cn(
-				"relative z-10 flex min-h-screen flex-col items-center justify-center px-6 py-12",
-				className,
-			)}
-		>
-			{brand && <div className="mb-7">{brand}</div>}
-
-			<Card
-				className={cn(
-					"w-full shadow-lg shadow-black/5 dark:shadow-black/30",
-					width === "wide" ? "max-w-[460px]" : "max-w-[408px]",
-				)}
-			>
-				{title && (
-					<CardHeader className={cn("text-center", subtitle ? "pb-3" : "pb-4")}>
-						<h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-						{subtitle && <p className="mt-1.5 text-sm text-muted-foreground">{subtitle}</p>}
-					</CardHeader>
-				)}
-				<CardContent className={cn(flush ? "p-0" : "pt-0", !title && !flush && "pt-6")}>
-					{children}
-				</CardContent>
-			</Card>
-
-			{footer && (
-				<div className="mt-6 max-w-[460px] text-center text-xs text-muted-foreground">{footer}</div>
-			)}
-		</div>
-	),
-);
-AuthShell.displayName = "AuthShell";
-
-export { AuthShell };

package/src/components/molecules/brand-lockup.tsx

@@ -1,48 +0,0 @@
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface BrandLockupProps extends React.HTMLAttributes<HTMLDivElement> {
-	/**
-	 * Logo node rendered to the left of the wordmark — typically `<Logo />`
-	 * for the canvas Olympus ring, or any other brand mark of the consumer's
-	 * choosing. Required so canvas stays brand-agnostic.
-	 */
-	logo: React.ReactNode;
-	/** Wordmark next to the logo (e.g. "Athena", "Hera"). */
-	productName: string;
-	/** Optional secondary line under the wordmark. */
-	subtitle?: string;
-	/** Visual size — sm = sidebar collapsed, md = sidebar expanded, lg = hero. */
-	size?: "sm" | "md" | "lg";
-	/** When true, renders only the logo without the wordmark or subtitle. */
-	collapsed?: boolean;
-}
-
-const SIZE: Record<NonNullable<BrandLockupProps["size"]>, { name: string; sub: string }> = {
-	sm: { name: "text-[13px]", sub: "text-[10px]" },
-	md: { name: "text-sm", sub: "text-[11px]" },
-	lg: { name: "text-2xl", sub: "text-xs" },
-};
-
-export const BrandLockup = React.forwardRef<HTMLDivElement, BrandLockupProps>(
-	({ logo, productName, subtitle, size = "md", collapsed = false, className, ...props }, ref) => {
-		const sz = SIZE[size];
-		return (
-			<div ref={ref} className={cn("flex items-center gap-2.5", className)} {...props}>
-				<span className="shrink-0">{logo}</span>
-				{!collapsed && (
-					<div className="flex flex-col leading-tight">
-						<span className={cn(sz.name, "font-semibold tracking-tight text-foreground")}>
-							{productName}
-						</span>
-						{subtitle && (
-							<span className={cn(sz.sub, "font-mono text-muted-foreground")}>{subtitle}</span>
-						)}
-					</div>
-				)}
-			</div>
-		);
-	},
-);
-BrandLockup.displayName = "BrandLockup";