@olympusoss/canvas 2.20.2 → 3.1.0

package/src/components/organisms/dropdown-menu.tsx

@@ -1,440 +0,0 @@
-"use client";
-
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react";
-import * as React from "react";
-
-import { usePortalContainer } from "../../lib/portal-container";
-import { cn } from "../../lib/utils";
-
-export interface DropdownMenuProps extends React.ComponentProps<typeof DropdownMenuPrimitive.Root> {
-	/** Controlled open state. Pair with `onOpenChange`. */
-	open?: boolean;
-	/**
-	 * Initial open state for uncontrolled usage.
-	 * @default false
-	 */
-	defaultOpen?: boolean;
-	/** Fires whenever the menu opens or closes. */
-	onOpenChange?: (open: boolean) => void;
-	/**
-	 * When true, blocks focus from leaving the menu.
-	 * @default true
-	 */
-	modal?: boolean;
-	/**
-	 * Reading direction. Affects keyboard arrow navigation.
-	 * @default "ltr"
-	 */
-	dir?: "ltr" | "rtl";
-	/** Trigger + Content. */
-	children?: React.ReactNode;
-}
-
-const DropdownMenu = DropdownMenuPrimitive.Root as React.FC<DropdownMenuProps>;
-
-export interface DropdownMenuTriggerProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> {
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger as React.ForwardRefExoticComponent<
-	DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>
->;
-
-export interface DropdownMenuGroupProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group> {
-	/** Items grouped together for screen-reader semantics. */
-	children?: React.ReactNode;
-}
-
-const DropdownMenuGroup = DropdownMenuPrimitive.Group as React.ForwardRefExoticComponent<
-	DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>
->;
-
-export interface DropdownMenuPortalProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal> {
-	/** DOM element to portal into. Defaults to `document.body`. */
-	container?: HTMLElement | null;
-	/**
-	 * Force the portal to mount even when the menu is closed.
-	 * @default false
-	 */
-	forceMount?: true;
-	children?: React.ReactNode;
-}
-
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal as React.FC<DropdownMenuPortalProps>;
-
-export interface DropdownMenuSubProps
-	extends React.ComponentProps<typeof DropdownMenuPrimitive.Sub> {
-	/** Controlled open state of the sub-menu. */
-	open?: boolean;
-	/** Initial open state for uncontrolled usage. */
-	defaultOpen?: boolean;
-	/** Fires whenever the sub-menu opens or closes. */
-	onOpenChange?: (open: boolean) => void;
-	/** SubTrigger + SubContent. */
-	children?: React.ReactNode;
-}
-
-const DropdownMenuSub = DropdownMenuPrimitive.Sub as React.FC<DropdownMenuSubProps>;
-
-export interface DropdownMenuRadioGroupProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup> {
-	/** Currently selected value (the value of the active RadioItem). */
-	value?: string;
-	/** Fires when the user picks a different RadioItem. */
-	onValueChange?: (value: string) => void;
-	/** A list of `<DropdownMenuRadioItem>`s. */
-	children?: React.ReactNode;
-}
-
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup as React.ForwardRefExoticComponent<
-	DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>
->;
-
-export interface DropdownMenuSubTriggerProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
-	/**
-	 * Add left padding so this row visually aligns with sibling
-	 * checkbox/radio items that have leading indicators.
-	 * @default false
-	 */
-	inset?: boolean;
-	/**
-	 * Disable the sub-trigger.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/**
-	 * Render as a Radix Slot.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Trigger label. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DropdownMenuSubTrigger = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-	DropdownMenuSubTriggerProps
->(({ className, inset, children, ...props }, ref) => (
-	<DropdownMenuPrimitive.SubTrigger
-		ref={ref}
-		className={cn(
-			"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-			inset && "pl-8",
-			className,
-		)}
-		{...props}
-	>
-		{children}
-		<ChevronRight className="ml-auto" />
-	</DropdownMenuPrimitive.SubTrigger>
-));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-
-export interface DropdownMenuSubContentProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent> {
-	/** Distance from the parent menu (px). */
-	sideOffset?: number;
-	/** Distance from the alignment edge (px). */
-	alignOffset?: number;
-	/** Avoid colliding with viewport edges. */
-	avoidCollisions?: boolean;
-	/** Force the sub-content to mount even when closed. */
-	forceMount?: true;
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DropdownMenuSubContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-	DropdownMenuSubContentProps
->(({ className, ...props }, ref) => (
-	<DropdownMenuPrimitive.SubContent
-		ref={ref}
-		data-slot="dropdown-menu-sub-content"
-		className={cn(
-			"z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg 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-dropdown-menu-content-transform-origin)]",
-			className,
-		)}
-		{...props}
-	/>
-));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-
-export interface DropdownMenuContentProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> {
-	/**
-	 * Distance from the trigger (px).
-	 * @default 4
-	 */
-	sideOffset?: number;
-	/**
-	 * Distance from the alignment edge (px).
-	 * @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. */
-	collisionPadding?: number | { top?: number; right?: number; bottom?: number; left?: number };
-	/** Force the content to mount even when closed. */
-	forceMount?: true;
-	/** Render as a Radix Slot. */
-	asChild?: boolean;
-	/** Loop arrow-key navigation through items. */
-	loop?: boolean;
-	/** Fires when the Escape key is pressed. */
-	onEscapeKeyDown?: (event: KeyboardEvent) => void;
-	/** Fires on pointer event outside the menu. */
-	onPointerDownOutside?: (event: CustomEvent<{ originalEvent: PointerEvent }>) => void;
-	/** Fires on any interaction outside (focus + pointer). */
-	onInteractOutside?: (event: Event) => void;
-	/** Items, separators, labels, sub-menus. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DropdownMenuContent = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-	DropdownMenuContentProps
->(({ className, sideOffset = 4, ...props }, ref) => {
-	const container = usePortalContainer();
-	return (
-		<DropdownMenuPrimitive.Portal container={container ?? undefined}>
-			<DropdownMenuPrimitive.Content
-				ref={ref}
-				data-slot="dropdown-menu-content"
-				sideOffset={sideOffset}
-				className={cn(
-					"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md",
-					"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-dropdown-menu-content-transform-origin)]",
-					className,
-				)}
-				{...props}
-			/>
-		</DropdownMenuPrimitive.Portal>
-	);
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-export interface DropdownMenuItemProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
-	/**
-	 * Add left padding so this row aligns with sibling checkbox/radio
-	 * items that have leading indicators.
-	 * @default false
-	 */
-	inset?: boolean;
-	/**
-	 * Disable the item.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/** Fires when the item is activated (click, Enter, Space). */
-	onSelect?: (event: Event) => void;
-	/**
-	 * Render as a Radix Slot — wrap a router `<Link>` to use the item as
-	 * navigation.
-	 * @default false
-	 */
-	asChild?: boolean;
-	/** Item label or any nested elements. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DropdownMenuItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-	DropdownMenuItemProps
->(({ className, inset, ...props }, ref) => (
-	<DropdownMenuPrimitive.Item
-		ref={ref}
-		className={cn(
-			"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-			inset && "pl-8",
-			className,
-		)}
-		{...props}
-	/>
-));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-
-export interface DropdownMenuCheckboxItemProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> {
-	/** Controlled checked state. */
-	checked?: boolean | "indeterminate";
-	/** Fires when the user toggles the item. */
-	onCheckedChange?: (checked: boolean) => void;
-	/**
-	 * Disable the item.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/** Fires when the item is activated. */
-	onSelect?: (event: Event) => void;
-	asChild?: boolean;
-	/** Item label. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DropdownMenuCheckboxItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-	DropdownMenuCheckboxItemProps
->(({ className, children, checked, ...props }, ref) => (
-	<DropdownMenuPrimitive.CheckboxItem
-		ref={ref}
-		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-			className,
-		)}
-		checked={checked}
-		{...props}
-	>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-			<DropdownMenuPrimitive.ItemIndicator>
-				<Check className="h-4 w-4" />
-			</DropdownMenuPrimitive.ItemIndicator>
-		</span>
-		{children}
-	</DropdownMenuPrimitive.CheckboxItem>
-));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-
-export interface DropdownMenuRadioItemProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
-	/** Required — value reported when this item is selected. Match parent `<RadioGroup>`'s value. */
-	value: string;
-	/**
-	 * Disable the item.
-	 * @default false
-	 */
-	disabled?: boolean;
-	/** Fires when the item is activated. */
-	onSelect?: (event: Event) => void;
-	asChild?: boolean;
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DropdownMenuRadioItem = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-	DropdownMenuRadioItemProps
->(({ className, children, ...props }, ref) => (
-	<DropdownMenuPrimitive.RadioItem
-		ref={ref}
-		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-			className,
-		)}
-		{...props}
-	>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-			<DropdownMenuPrimitive.ItemIndicator>
-				<Circle className="h-2 w-2 fill-current" />
-			</DropdownMenuPrimitive.ItemIndicator>
-		</span>
-		{children}
-	</DropdownMenuPrimitive.RadioItem>
-));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-
-export interface DropdownMenuLabelProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
-	/**
-	 * Add left padding so this row aligns with sibling checkbox/radio
-	 * items.
-	 * @default false
-	 */
-	inset?: boolean;
-	asChild?: boolean;
-	/** Section heading text. */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DropdownMenuLabel = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-	DropdownMenuLabelProps
->(({ className, inset, ...props }, ref) => (
-	<DropdownMenuPrimitive.Label
-		ref={ref}
-		className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
-		{...props}
-	/>
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-export interface DropdownMenuSeparatorProps
-	extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator> {
-	asChild?: boolean;
-	className?: string;
-}
-
-const DropdownMenuSeparator = React.forwardRef<
-	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-	DropdownMenuSeparatorProps
->(({ className, ...props }, ref) => (
-	<DropdownMenuPrimitive.Separator
-		ref={ref}
-		className={cn("-mx-1 my-1 h-px bg-muted", className)}
-		{...props}
-	/>
-));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
-
-export interface DropdownMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
-	/** Keyboard shortcut text (e.g. "⌘K", "⌃Z"). */
-	children?: React.ReactNode;
-	className?: string;
-}
-
-const DropdownMenuShortcut = ({ className, ...props }: DropdownMenuShortcutProps) => {
-	return (
-		<span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
-	);
-};
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-
-export {
-	DropdownMenu,
-	DropdownMenuCheckboxItem,
-	DropdownMenuContent,
-	DropdownMenuGroup,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuPortal,
-	DropdownMenuRadioGroup,
-	DropdownMenuRadioItem,
-	DropdownMenuSeparator,
-	DropdownMenuShortcut,
-	DropdownMenuSub,
-	DropdownMenuSubContent,
-	DropdownMenuSubTrigger,
-	DropdownMenuTrigger,
-};

package/src/components/organisms/editors/code-editor.tsx

@@ -1,144 +0,0 @@
-"use client";
-
-/* c8 ignore file -- CodeMirror requires real DOM measurements; jsdom-incompatible.
- * Verified visually in the docs site. */
-
-import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
-import { css } from "@codemirror/lang-css";
-import { html } from "@codemirror/lang-html";
-import { javascript } from "@codemirror/lang-javascript";
-import { json } from "@codemirror/lang-json";
-import { markdown as markdownLang } from "@codemirror/lang-markdown";
-import { EditorState, type Extension } from "@codemirror/state";
-import {
-	EditorView,
-	keymap,
-	lineNumbers as lineNumbersExt,
-	placeholder as placeholderExt,
-} from "@codemirror/view";
-import * as React from "react";
-
-import { cn } from "../../../lib/utils";
-import { useCodemirrorTheme } from "./use-codemirror-theme";
-
-export type CodeEditorLanguage = "javascript" | "typescript" | "json" | "markdown" | "html" | "css";
-
-export interface CodeEditorProps {
-	value: string;
-	onChange: (next: string) => void;
-	language: CodeEditorLanguage;
-	placeholder?: string;
-	disabled?: boolean;
-	readonly?: boolean;
-	ariaLabel: string;
-	className?: string;
-	/** Render the gutter with line numbers. Default true. */
-	lineNumbers?: boolean;
-	/** Pixel height (or any CSS length). Default `240`. */
-	height?: number | string;
-	/** Extra CodeMirror extensions appended after the canvas defaults. */
-	extensions?: Extension[];
-}
-
-const LANGUAGE_EXTENSIONS: Record<CodeEditorLanguage, () => Extension> = {
-	javascript: () => javascript(),
-	typescript: () => javascript({ jsx: true, typescript: true }),
-	json: () => json(),
-	markdown: () => markdownLang(),
-	html: () => html(),
-	css: () => css(),
-};
-
-/**
- * Source-code editor backed by CodeMirror 6. Pick a language with the
- * `language` prop; the wrapper loads the matching highlighter and applies
- * canvas-themed colours via `useCodemirrorTheme()`.
- */
-const CodeEditor = React.forwardRef<HTMLDivElement, CodeEditorProps>(
-	(
-		{
-			value,
-			onChange,
-			language,
-			placeholder,
-			disabled = false,
-			readonly = false,
-			ariaLabel,
-			className,
-			lineNumbers = true,
-			height = 240,
-			extensions: extraExtensions,
-		},
-		ref,
-	) => {
-		const editorParentRef = React.useRef<HTMLDivElement>(null);
-		const viewRef = React.useRef<EditorView | null>(null);
-		const onChangeRef = React.useRef(onChange);
-		onChangeRef.current = onChange;
-		const theme = useCodemirrorTheme();
-
-		React.useEffect(() => {
-			if (!editorParentRef.current) return;
-			const extensions: Extension[] = [
-				history(),
-				keymap.of([...defaultKeymap, ...historyKeymap, indentWithTab]),
-				LANGUAGE_EXTENSIONS[language](),
-				EditorView.lineWrapping,
-				theme,
-				EditorView.editable.of(!disabled),
-				EditorState.readOnly.of(disabled || readonly),
-			];
-			if (lineNumbers) extensions.push(lineNumbersExt());
-			if (placeholder) extensions.push(placeholderExt(placeholder));
-			extensions.push(
-				EditorView.updateListener.of((update) => {
-					if (update.docChanged) {
-						onChangeRef.current(update.state.doc.toString());
-					}
-				}),
-			);
-			if (extraExtensions) extensions.push(...extraExtensions);
-
-			const v = new EditorView({
-				state: EditorState.create({ doc: value, extensions }),
-				parent: editorParentRef.current,
-			});
-			viewRef.current = v;
-			return () => {
-				v.destroy();
-				viewRef.current = null;
-			};
-			// eslint-disable-next-line react-hooks/exhaustive-deps
-		}, [theme, language, lineNumbers, disabled, readonly, placeholder]);
-
-		React.useEffect(() => {
-			const v = viewRef.current;
-			if (!v) return;
-			const current = v.state.doc.toString();
-			if (current !== value) {
-				v.dispatch({ changes: { from: 0, to: current.length, insert: value } });
-			}
-		}, [value]);
-
-		const heightStyle = typeof height === "number" ? `${height}px` : height;
-
-		return (
-			<div
-				ref={ref}
-				role="group"
-				aria-label={ariaLabel}
-				className={cn(
-					"overflow-hidden rounded-md border border-input bg-background shadow-sm focus-within:ring-1 focus-within:ring-ring",
-					disabled && "pointer-events-none opacity-50",
-					className,
-				)}
-				style={{ height: heightStyle }}
-			>
-				<div ref={editorParentRef} className="h-full overflow-y-auto" />
-			</div>
-		);
-	},
-);
-CodeEditor.displayName = "CodeEditor";
-
-export { CodeEditor };

package/src/components/organisms/editors/index.ts

@@ -1,4 +0,0 @@
-export { CodeEditor, type CodeEditorLanguage, type CodeEditorProps } from "./code-editor";
-export { MarkdownEditor, type MarkdownEditorProps } from "./markdown-editor";
-export { RichTextEditor, type RichTextEditorProps } from "./rich-text-editor";
-export { TOOLBAR_ITEM_IDS, type ToolbarItemId } from "./toolbar/rte-toolbar";