@olympusoss/canvas 2.6.19

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

@@ -0,0 +1,434 @@
+"use client";
+
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
+
+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}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md 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) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			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 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

@@ -0,0 +1,144 @@
+"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

@@ -0,0 +1,4 @@
+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";