@olympusoss/canvas 2.20.2 → 3.2.0

package/src/components/organisms/editors/toolbar/toolbar-shell.tsx

@@ -1,45 +0,0 @@
-"use client";
-
-/* c8 ignore file -- Editor toolbar shell is only used inside editor
- * components which are jsdom-incompatible. */
-
-import * as React from "react";
-
-import { cn } from "../../../../lib/utils";
-
-export interface ToolbarShellProps extends React.HTMLAttributes<HTMLDivElement> {
-	children: React.ReactNode;
-}
-
-/**
- * Layout chrome shared by every editor toolbar: a horizontal flex bar with
- * `--border` separator below, `--card` background tint, padding tuned for
- * canvas's button/icon size. Per-engine toolbars compose canvas atoms
- * (Button, Toggle, Icon, ToggleGroup) inside this shell.
- *
- * Children are arranged with `gap-1` between groups; use `<ToolbarDivider />`
- * to insert a thin vertical separator between conceptual groups.
- */
-export const ToolbarShell = React.forwardRef<HTMLDivElement, ToolbarShellProps>(
-	({ children, className, ...props }, ref) => {
-		return (
-			<div
-				ref={ref}
-				role="toolbar"
-				className={cn(
-					"flex flex-wrap items-center gap-1 border-b border-border bg-card/50 px-2 py-1.5",
-					className,
-				)}
-				{...props}
-			>
-				{children}
-			</div>
-		);
-	},
-);
-ToolbarShell.displayName = "ToolbarShell";
-
-/** Thin vertical separator between toolbar button groups. */
-export function ToolbarDivider() {
-	return <div role="separator" className="mx-1 h-5 w-px bg-border" aria-hidden />;
-}

package/src/components/organisms/editors/use-codemirror-theme.ts

@@ -1,61 +0,0 @@
-"use client";
-
-/* c8 ignore file -- CodeMirror EditorView requires real DOM; jsdom-incompatible. */
-
-import { EditorView } from "@codemirror/view";
-import { useMemo } from "react";
-
-import { useTheme } from "../theme-provider";
-
-/**
- * Build a CodeMirror 6 theme that resolves canvas's CSS-variable tokens to
- * literal `hsl(...)` strings. CodeMirror does not honour CSS variables inside
- * its `<canvas>`-style internals, so the bridge is read-once-per-theme.
- *
- * Re-runs whenever `useTheme().resolvedTheme` flips, which means
- * `<MarkdownEditor>` / `<CodeEditor>` automatically reskin on dark/light toggle.
- */
-export function useCodemirrorTheme() {
-	const { resolvedTheme } = useTheme();
-	return useMemo(() => {
-		// Defer DOM access to runtime — typeof window guard keeps SSR happy.
-		if (typeof window === "undefined") return EditorView.theme({});
-		const root = getComputedStyle(document.documentElement);
-		const v = (name: string) => `hsl(${root.getPropertyValue(name).trim()})`;
-		const hsla = (name: string, alpha: number) =>
-			`hsl(${root.getPropertyValue(name).trim()} / ${alpha})`;
-		return EditorView.theme(
-			{
-				"&": {
-					color: v("--foreground"),
-					backgroundColor: "transparent",
-					fontFamily:
-						"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
-					fontSize: "13px",
-				},
-				".cm-content": {
-					caretColor: v("--foreground"),
-					padding: "12px 0",
-				},
-				".cm-line": {
-					padding: "0 12px",
-				},
-				".cm-gutters": {
-					backgroundColor: "transparent",
-					color: v("--muted-foreground"),
-					borderRightColor: v("--border"),
-				},
-				".cm-activeLine": { backgroundColor: hsla("--muted", 0.4) },
-				".cm-activeLineGutter": { backgroundColor: "transparent" },
-				".cm-cursor": { borderLeftColor: v("--brand"), borderLeftWidth: "2px" },
-				"&.cm-focused .cm-selectionBackground, ::selection, .cm-selectionBackground": {
-					backgroundColor: hsla("--brand", 0.25),
-				},
-				"&.cm-focused": { outline: "none" },
-				".cm-scroller": { fontFamily: "inherit" },
-			},
-			{ dark: resolvedTheme === "dark" },
-		);
-		// `resolvedTheme` drives the memo; ESLint doesn't see that getComputedStyle reads from the DOM.
-	}, [resolvedTheme]);
-}

package/src/components/organisms/error-boundary.tsx

@@ -1,61 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-import { Button } from "../atoms/button";
-import { Icon } from "../atoms/icon";
-
-export interface ErrorBoundaryProps {
-	children: React.ReactNode;
-	/** Custom fallback — receives the error and a reset function. */
-	fallback?: (error: Error, reset: () => void) => React.ReactNode;
-	/** Called when an error is captured. Useful for error reporting. */
-	onError?: (error: Error, info: React.ErrorInfo) => void;
-	/** Label for the built-in reset button (ignored when `fallback` is provided). */
-	resetLabel?: string;
-}
-
-interface State {
-	error: Error | null;
-}
-
-export class ErrorBoundary extends React.Component<ErrorBoundaryProps, State> {
-	static displayName = "ErrorBoundary";
-
-	state: State = { error: null };
-
-	static getDerivedStateFromError(error: Error): State {
-		return { error };
-	}
-
-	componentDidCatch(error: Error, info: React.ErrorInfo) {
-		this.props.onError?.(error, info);
-	}
-
-	reset = () => this.setState({ error: null });
-
-	render() {
-		const { error } = this.state;
-		if (!error) return this.props.children;
-
-		if (this.props.fallback) return this.props.fallback(error, this.reset);
-
-		return (
-			<div className="flex flex-col items-center justify-center gap-4 p-8 text-center">
-				<Icon name="TriangleAlert" className="h-10 w-10 text-destructive" />
-				<h2 className="text-lg font-semibold text-foreground">Something went wrong</h2>
-				<p className="max-w-md text-sm text-muted-foreground">
-					{error.message || "An unexpected error occurred."}
-				</p>
-				{error.stack && (
-					<pre className="max-h-40 max-w-lg overflow-auto whitespace-pre-wrap text-left text-xs text-muted-foreground/60">
-						{error.stack}
-					</pre>
-				)}
-				<Button onClick={this.reset} size="sm">
-					{this.props.resetLabel ?? "Try again"}
-				</Button>
-			</div>
-		);
-	}
-}

package/src/components/organisms/form.tsx

@@ -1,174 +0,0 @@
-"use client";
-
-import type * as LabelPrimitive from "@radix-ui/react-label";
-import { Slot } from "@radix-ui/react-slot";
-import * as React from "react";
-import {
-	Controller,
-	type ControllerProps,
-	type FieldPath,
-	type FieldValues,
-	FormProvider,
-	useFormContext,
-} from "react-hook-form";
-
-import { cn } from "../../lib/utils";
-import { Label } from "../atoms/label";
-
-const Form = FormProvider;
-
-type FormFieldContextValue<
-	TFieldValues extends FieldValues = FieldValues,
-	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> = {
-	name: TName;
-};
-
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
-
-const FormField = <
-	TFieldValues extends FieldValues = FieldValues,
-	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-	...props
-}: ControllerProps<TFieldValues, TName>) => {
-	return (
-		<FormFieldContext.Provider value={{ name: props.name }}>
-			<Controller {...props} />
-		</FormFieldContext.Provider>
-	);
-};
-
-const useFormField = () => {
-	const fieldContext = React.useContext(FormFieldContext);
-	const itemContext = React.useContext(FormItemContext);
-	const { getFieldState, formState } = useFormContext();
-
-	if (!fieldContext) {
-		throw new Error("useFormField should be used within <FormField>");
-	}
-
-	if (!itemContext) {
-		throw new Error("useFormField should be used within <FormItem>");
-	}
-
-	const fieldState = getFieldState(fieldContext.name, formState);
-
-	const { id } = itemContext;
-
-	return {
-		id,
-		name: fieldContext.name,
-		formItemId: `${id}-form-item`,
-		formDescriptionId: `${id}-form-item-description`,
-		formMessageId: `${id}-form-item-message`,
-		...fieldState,
-	};
-};
-
-type FormItemContextValue = {
-	id: string;
-};
-
-const FormItemContext = React.createContext<FormItemContextValue | null>(null);
-
-const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-	({ className, ...props }, ref) => {
-		const id = React.useId();
-
-		return (
-			<FormItemContext.Provider value={{ id }}>
-				<div ref={ref} className={cn("space-y-2", className)} {...props} />
-			</FormItemContext.Provider>
-		);
-	},
-);
-FormItem.displayName = "FormItem";
-
-const FormLabel = React.forwardRef<
-	React.ElementRef<typeof LabelPrimitive.Root>,
-	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
->(({ className, ...props }, ref) => {
-	const { error, formItemId } = useFormField();
-
-	return (
-		<Label
-			ref={ref}
-			className={cn(error && "text-destructive", className)}
-			htmlFor={formItemId}
-			{...props}
-		/>
-	);
-});
-FormLabel.displayName = "FormLabel";
-
-const FormControl = React.forwardRef<
-	React.ElementRef<typeof Slot>,
-	React.ComponentPropsWithoutRef<typeof Slot>
->(({ ...props }, ref) => {
-	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
-
-	return (
-		<Slot
-			ref={ref}
-			id={formItemId}
-			aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
-			aria-invalid={!!error}
-			{...props}
-		/>
-	);
-});
-FormControl.displayName = "FormControl";
-
-const FormDescription = React.forwardRef<
-	HTMLParagraphElement,
-	React.HTMLAttributes<HTMLParagraphElement>
->(({ className, ...props }, ref) => {
-	const { formDescriptionId } = useFormField();
-
-	return (
-		<p
-			ref={ref}
-			id={formDescriptionId}
-			className={cn("text-[0.8rem] text-muted-foreground", className)}
-			{...props}
-		/>
-	);
-});
-FormDescription.displayName = "FormDescription";
-
-const FormMessage = React.forwardRef<
-	HTMLParagraphElement,
-	React.HTMLAttributes<HTMLParagraphElement>
->(({ className, children, ...props }, ref) => {
-	const { error, formMessageId } = useFormField();
-	/* c8 ignore next -- error.message is always a string for react-hook-form rules; the ?? "" fallback only triggers for exotic error shapes */
-	const body = error ? String(error?.message ?? "") : children;
-
-	if (!body) {
-		return null;
-	}
-
-	return (
-		<p
-			ref={ref}
-			id={formMessageId}
-			className={cn("text-[0.8rem] font-medium text-destructive", className)}
-			{...props}
-		>
-			{body}
-		</p>
-	);
-});
-FormMessage.displayName = "FormMessage";
-
-export {
-	Form,
-	FormControl,
-	FormDescription,
-	FormField,
-	FormItem,
-	FormLabel,
-	FormMessage,
-	useFormField,
-};

package/src/components/organisms/hover-card.tsx

@@ -1,115 +0,0 @@
-"use client";
-
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import * as React from "react";
-
-import { cn } from "../../lib/utils";
-
-export interface HoverCardProps extends React.ComponentProps<typeof HoverCardPrimitive.Root> {
-	/** Controlled open state. Pair with `onOpenChange`. */
-	open?: boolean;
-	/**
-	 * Initial open state for uncontrolled usage.
-	 * @default false
-	 */
-	defaultOpen?: boolean;
-	/** Fires whenever the hover card opens or closes. */
-	onOpenChange?: (open: boolean) => void;
-	/**
-	 * Delay in ms before the card opens after the user hovers the trigger.
-	 * @default 700
-	 */
-	openDelay?: number;
-	/**
-	 * Delay in ms before the card closes after the cursor leaves.
-	 * @default 300
-	 */
-	closeDelay?: number;
-	/** Trigger + Content. */
-	children?: React.ReactNode;
-}
-
-const HoverCard = HoverCardPrimitive.Root as React.FC<HoverCardProps>;
-
-export interface HoverCardTriggerProps
-	extends React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Trigger> {
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const HoverCardTrigger = HoverCardPrimitive.Trigger as React.ForwardRefExoticComponent<
-	HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>
->;
-
-export interface HoverCardContentProps
-	extends React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content> {
-	/**
-	 * Distance in pixels between the trigger and the card.
-	 * @default 4
-	 */
-	sideOffset?: number;
-	/**
-	 * Distance from the alignment edge.
-	 * @default 0
-	 */
-	alignOffset?: number;
-	/**
-	 * Preferred side of the trigger to render on.
-	 * @default "bottom"
-	 */
-	side?: "top" | "right" | "bottom" | "left";
-	/**
-	 * Alignment along the chosen side.
-	 * @default "center"
-	 */
-	align?: "start" | "center" | "end";
-	/**
-	 * Avoid colliding with the viewport edges.
-	 * @default true
-	 */
-	avoidCollisions?: boolean;
-	/**
-	 * Padding kept from collision boundaries.
-	 * @default 0
-	 */
-	collisionPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
-	/**
-	 * Force the content to mount even when closed.
-	 * @default false
-	 */
-	forceMount?: true;
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Card body. */
-	children?: React.ReactNode;
-	/** Tailwind / CSS classes merged via `cn()`. */
-	className?: string;
-}
-
-const HoverCardContent = React.forwardRef<
-	React.ElementRef<typeof HoverCardPrimitive.Content>,
-	HoverCardContentProps
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-	<HoverCardPrimitive.Content
-		ref={ref}
-		data-slot="hover-card-content"
-		align={align}
-		sideOffset={sideOffset}
-		className={cn(
-			"z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[var(--radix-hover-card-content-transform-origin)]",
-			className,
-		)}
-		{...props}
-	/>
-));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
-
-export { HoverCard, HoverCardContent, HoverCardTrigger };