@fuma-content/studio 0.1.0

package/dist/src/components/editor/ui/ghost-text.mjs

@@ -0,0 +1,22 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { useElement, usePluginOption } from "platejs/react";
+import { CopilotPlugin } from "@platejs/ai/react";
+
+//#region src/components/editor/ui/ghost-text.tsx
+function GhostText() {
+	if (!usePluginOption(CopilotPlugin, "isSuggested", useElement().id)) return null;
+	return /* @__PURE__ */ jsx(GhostTextContent, {});
+}
+function GhostTextContent() {
+	const suggestionText = usePluginOption(CopilotPlugin, "suggestionText");
+	return /* @__PURE__ */ jsx("span", {
+		className: "pointer-events-none text-muted-foreground/70 max-sm:hidden",
+		contentEditable: false,
+		children: suggestionText && suggestionText
+	});
+}
+
+//#endregion
+export { GhostText };

package/dist/src/components/editor/ui/heading-node-static.mjs

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { SlateElement } from "platejs/static";
+
+//#region src/components/editor/ui/heading-node-static.tsx
+const headingVariants = cva("relative mb-1", { variants: { variant: {
+	h1: "mt-[1.6em] pb-1 font-bold font-heading text-4xl",
+	h2: "mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight",
+	h3: "mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight",
+	h4: "mt-[0.75em] font-heading font-semibold text-lg tracking-tight",
+	h5: "mt-[0.75em] font-semibold text-lg tracking-tight",
+	h6: "mt-[0.75em] font-semibold text-base tracking-tight"
+} } });
+function HeadingElementStatic({ variant = "h1", ...props }) {
+	return /* @__PURE__ */ jsx(SlateElement, {
+		as: variant,
+		className: headingVariants({ variant }),
+		...props,
+		children: props.children
+	});
+}
+function H1ElementStatic(props) {
+	return /* @__PURE__ */ jsx(HeadingElementStatic, {
+		variant: "h1",
+		...props
+	});
+}
+function H2ElementStatic(props) {
+	return /* @__PURE__ */ jsx(HeadingElementStatic, {
+		variant: "h2",
+		...props
+	});
+}
+function H3ElementStatic(props) {
+	return /* @__PURE__ */ jsx(HeadingElementStatic, {
+		variant: "h3",
+		...props
+	});
+}
+function H4ElementStatic(props) {
+	return /* @__PURE__ */ jsx(HeadingElementStatic, {
+		variant: "h4",
+		...props
+	});
+}
+function H5ElementStatic(props) {
+	return /* @__PURE__ */ jsx(HeadingElementStatic, {
+		variant: "h5",
+		...props
+	});
+}
+function H6ElementStatic(props) {
+	return /* @__PURE__ */ jsx(HeadingElementStatic, {
+		variant: "h6",
+		...props
+	});
+}
+
+//#endregion
+export { H1ElementStatic, H2ElementStatic, H3ElementStatic, H4ElementStatic, H5ElementStatic, H6ElementStatic };

package/dist/src/components/editor/ui/heading-node.mjs

@@ -0,0 +1,62 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { PlateElement } from "platejs/react";
+import { cva } from "class-variance-authority";
+
+//#region src/components/editor/ui/heading-node.tsx
+const headingVariants = cva("relative mb-1", { variants: { variant: {
+	h1: "mt-[1.6em] pb-1 font-bold font-heading text-4xl",
+	h2: "mt-[1.4em] pb-px font-heading font-semibold text-2xl tracking-tight",
+	h3: "mt-[1em] pb-px font-heading font-semibold text-xl tracking-tight",
+	h4: "mt-[0.75em] font-heading font-semibold text-lg tracking-tight",
+	h5: "mt-[0.75em] font-semibold text-lg tracking-tight",
+	h6: "mt-[0.75em] font-semibold text-base tracking-tight"
+} } });
+function HeadingElement({ variant = "h1", ...props }) {
+	return /* @__PURE__ */ jsx(PlateElement, {
+		as: variant,
+		className: headingVariants({ variant }),
+		...props,
+		children: props.children
+	});
+}
+function H1Element(props) {
+	return /* @__PURE__ */ jsx(HeadingElement, {
+		variant: "h1",
+		...props
+	});
+}
+function H2Element(props) {
+	return /* @__PURE__ */ jsx(HeadingElement, {
+		variant: "h2",
+		...props
+	});
+}
+function H3Element(props) {
+	return /* @__PURE__ */ jsx(HeadingElement, {
+		variant: "h3",
+		...props
+	});
+}
+function H4Element(props) {
+	return /* @__PURE__ */ jsx(HeadingElement, {
+		variant: "h4",
+		...props
+	});
+}
+function H5Element(props) {
+	return /* @__PURE__ */ jsx(HeadingElement, {
+		variant: "h5",
+		...props
+	});
+}
+function H6Element(props) {
+	return /* @__PURE__ */ jsx(HeadingElement, {
+		variant: "h6",
+		...props
+	});
+}
+
+//#endregion
+export { H1Element, H2Element, H3Element, H4Element, H5Element, H6Element };

package/dist/src/components/editor/ui/highlight-node-static.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { SlateLeaf } from "platejs/static";
+
+//#region src/components/editor/ui/highlight-node-static.tsx
+function HighlightLeafStatic(props) {
+	return /* @__PURE__ */ jsx(SlateLeaf, {
+		...props,
+		as: "mark",
+		className: "bg-highlight/30 text-inherit",
+		children: props.children
+	});
+}
+
+//#endregion
+export { HighlightLeafStatic };

package/dist/src/components/editor/ui/highlight-node.mjs

@@ -0,0 +1,17 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { PlateLeaf } from "platejs/react";
+
+//#region src/components/editor/ui/highlight-node.tsx
+function HighlightLeaf(props) {
+	return /* @__PURE__ */ jsx(PlateLeaf, {
+		...props,
+		as: "mark",
+		className: "bg-highlight/30 text-inherit",
+		children: props.children
+	});
+}
+
+//#endregion
+export { HighlightLeaf };

package/dist/src/components/editor/ui/history-toolbar-button.mjs

@@ -0,0 +1,35 @@
+"use client";
+
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useEditorRef, useEditorSelector } from "platejs/react";
+import { Redo2Icon, Undo2Icon } from "lucide-react";
+
+//#region src/components/editor/ui/history-toolbar-button.tsx
+function RedoToolbarButton(props) {
+	const editor = useEditorRef();
+	const disabled = useEditorSelector((editor$1) => editor$1.history.redos.length === 0, []);
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		...props,
+		disabled,
+		onClick: () => editor.redo(),
+		onMouseDown: (e) => e.preventDefault(),
+		tooltip: "Redo",
+		children: /* @__PURE__ */ jsx(Redo2Icon, {})
+	});
+}
+function UndoToolbarButton(props) {
+	const editor = useEditorRef();
+	const disabled = useEditorSelector((editor$1) => editor$1.history.undos.length === 0, []);
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		...props,
+		disabled,
+		onClick: () => editor.undo(),
+		onMouseDown: (e) => e.preventDefault(),
+		tooltip: "Undo",
+		children: /* @__PURE__ */ jsx(Undo2Icon, {})
+	});
+}
+
+//#endregion
+export { RedoToolbarButton, UndoToolbarButton };

package/dist/src/components/editor/ui/hr-node-static.mjs

@@ -0,0 +1,18 @@
+import { cn } from "../../../lib/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SlateElement } from "platejs/static";
+
+//#region src/components/editor/ui/hr-node-static.tsx
+function HrElementStatic(props) {
+	return /* @__PURE__ */ jsxs(SlateElement, {
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "cursor-text py-6",
+			contentEditable: false,
+			children: /* @__PURE__ */ jsx("hr", { className: cn("h-0.5 rounded-sm border-none bg-muted bg-clip-content") })
+		}), props.children]
+	});
+}
+
+//#endregion
+export { HrElementStatic };

package/dist/src/components/editor/ui/hr-node.mjs

@@ -0,0 +1,23 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PlateElement, useFocused, useReadOnly, useSelected } from "platejs/react";
+
+//#region src/components/editor/ui/hr-node.tsx
+function HrElement(props) {
+	const readOnly = useReadOnly();
+	const selected = useSelected();
+	const focused = useFocused();
+	return /* @__PURE__ */ jsxs(PlateElement, {
+		...props,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "py-6",
+			contentEditable: false,
+			children: /* @__PURE__ */ jsx("hr", { className: cn("h-0.5 rounded-sm border-none bg-muted bg-clip-content", selected && focused && "ring-2 ring-ring ring-offset-2", !readOnly && "cursor-pointer") })
+		}), props.children]
+	});
+}
+
+//#endregion
+export { HrElement };

package/dist/src/components/editor/ui/indent-toolbar-button.mjs

@@ -0,0 +1,29 @@
+"use client";
+
+import { ToolbarButton } from "../../ui/toolbar.mjs";
+import { jsx } from "react/jsx-runtime";
+import { IndentIcon, OutdentIcon } from "lucide-react";
+import { useIndentButton, useOutdentButton } from "@platejs/indent/react";
+
+//#region src/components/editor/ui/indent-toolbar-button.tsx
+function IndentToolbarButton(props) {
+	const { props: buttonProps } = useIndentButton();
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		...props,
+		...buttonProps,
+		tooltip: "Indent",
+		children: /* @__PURE__ */ jsx(IndentIcon, {})
+	});
+}
+function OutdentToolbarButton(props) {
+	const { props: buttonProps } = useOutdentButton();
+	return /* @__PURE__ */ jsx(ToolbarButton, {
+		...props,
+		...buttonProps,
+		tooltip: "Outdent",
+		children: /* @__PURE__ */ jsx(OutdentIcon, {})
+	});
+}
+
+//#endregion
+export { IndentToolbarButton, OutdentToolbarButton };

package/dist/src/components/editor/ui/inline-combobox.mjs

@@ -0,0 +1,148 @@
+"use client";
+
+import { cn } from "../../../lib/utils.mjs";
+import { useIsCreator } from "../../../hooks/editor/use-is-creator.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRef, useEditorRef } from "platejs/react";
+import * as React$1 from "react";
+import { cva } from "class-variance-authority";
+import { Combobox } from "@base-ui/react";
+import { useControlled } from "@base-ui/utils/useControlled";
+import { useStableCallback } from "@base-ui/utils/useStableCallback";
+import { useComboboxInput, useHTMLInputCursorState } from "@platejs/combobox/react";
+
+//#region src/components/editor/ui/inline-combobox.tsx
+const InlineComboboxContext = React$1.createContext(null);
+function InlineCombobox({ children, element, hideWhenNoValue = false, showTrigger = true, trigger, inputValue: inputValueProp, onInputValueChange: onInputValueChangeProp, defaultInputValue = "", ...rest }) {
+	const editor = useEditorRef();
+	const inputRef = React$1.useRef(null);
+	const cursorState = useHTMLInputCursorState(inputRef);
+	const isCreator = useIsCreator(element);
+	const [inputValue, setInputValueUnwrapped] = useControlled({
+		name: "InlineCombobox",
+		controlled: inputValueProp,
+		default: defaultInputValue
+	});
+	/**
+	* Track the point just before the input element so we know where to
+	* insertText if the combobox closes due to a selection change.
+	*/
+	const insertPoint = React$1.useRef(null);
+	React$1.useEffect(() => {
+		const path = editor.api.findPath(element);
+		if (!path) return;
+		const point = editor.api.before(path);
+		if (!point) return;
+		const pointRef = editor.api.pointRef(point);
+		insertPoint.current = pointRef.current;
+		return () => {
+			pointRef.unref();
+		};
+	}, [editor, element]);
+	const { props: inputProps, removeInput } = useComboboxInput({
+		cancelInputOnBlur: true,
+		cursorState,
+		autoFocus: isCreator,
+		ref: inputRef,
+		onCancelInput: (cause) => {
+			if (cause !== "backspace") editor.tf.insertText(trigger + inputValue, { at: insertPoint?.current ?? void 0 });
+			if (cause === "arrowLeft" || cause === "arrowRight") editor.tf.move({
+				distance: 1,
+				reverse: cause === "arrowLeft"
+			});
+		}
+	});
+	const onKeyDown = useStableCallback(inputProps.onKeyDown);
+	const onBlur = useStableCallback(inputProps.onBlur);
+	const contextValue = React$1.useMemo(() => ({
+		showTrigger,
+		trigger,
+		inputProps,
+		inputRef,
+		removeInput,
+		inputOnBlur: onBlur,
+		inputOnKeyDown: onKeyDown
+	}), [
+		trigger,
+		showTrigger,
+		onBlur,
+		onKeyDown
+	]);
+	return /* @__PURE__ */ jsx("span", {
+		contentEditable: false,
+		children: /* @__PURE__ */ jsx(InlineComboboxContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsx(Combobox.Root, {
+				open: true,
+				inputValue,
+				onInputValueChange: (v, e) => {
+					setInputValueUnwrapped(v);
+					return onInputValueChangeProp?.(v, e);
+				},
+				...rest,
+				children
+			})
+		})
+	});
+}
+function InlineComboboxInput({ ref, className, ...props }) {
+	const { showTrigger, trigger, inputOnBlur, inputOnKeyDown, inputRef } = React$1.useContext(InlineComboboxContext);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [showTrigger && trigger, /* @__PURE__ */ jsx(Combobox.Input, {
+		ref: useComposedRef(inputRef, ref),
+		className: cn("bg-transparent outline-none", className),
+		onBlur: inputOnBlur,
+		onKeyDown: inputOnKeyDown,
+		...props
+	})] });
+}
+function InlineComboboxContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Portal, { children: /* @__PURE__ */ jsx(Combobox.Positioner, {
+		className: "z-50",
+		children: /* @__PURE__ */ jsx(Combobox.Popup, {
+			className: cn("max-h-[288px] w-[300px] overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-lg border", className),
+			...props
+		})
+	}) });
+}
+const comboboxItemVariants = cva("relative mx-1 flex h-[28px] select-none items-center rounded-sm px-2 text-foreground text-sm outline-none [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", {
+	variants: { interactive: {
+		false: "",
+		true: "cursor-pointer transition-colors hover:bg-accent hover:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground"
+	} },
+	defaultVariants: { interactive: true }
+});
+function InlineComboboxItem({ className, focusEditor = true, onClick, ...props }) {
+	const { removeInput } = React$1.useContext(InlineComboboxContext);
+	return /* @__PURE__ */ jsx(Combobox.Item, {
+		className: cn(comboboxItemVariants(), className),
+		onClick: (event) => {
+			removeInput(focusEditor);
+			onClick?.(event);
+		},
+		...props
+	});
+}
+function InlineComboboxEmpty({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Empty, {
+		className: cn("p-4 text-muted-foreground text-sm empty:hidden", className),
+		...props,
+		children
+	});
+}
+const InlineComboboxList = Combobox.List;
+const InlineComboboxCollection = Combobox.Collection;
+function InlineComboboxGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.Group, {
+		...props,
+		className: cn("hidden not-last:border-b py-1.5 [&:has([role=option])]:block", className)
+	});
+}
+function InlineComboboxGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Combobox.GroupLabel, {
+		...props,
+		className: cn("mt-1.5 mb-2 px-3 font-medium text-muted-foreground text-xs", className)
+	});
+}
+
+//#endregion
+export { InlineCombobox, InlineComboboxCollection, InlineComboboxContent, InlineComboboxEmpty, InlineComboboxGroup, InlineComboboxGroupLabel, InlineComboboxInput, InlineComboboxItem, InlineComboboxList };

package/dist/src/components/editor/ui/insert-toolbar-button.mjs

@@ -0,0 +1,199 @@
+"use client";
+
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../ui/dropdown-menu.mjs";
+import { ToolbarButton, ToolbarMenuGroup } from "../../ui/toolbar.mjs";
+import { insertBlock, insertInlineElement } from "../transforms.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEditorRef } from "platejs/react";
+import * as React$1 from "react";
+import { KEYS } from "platejs";
+import { CalendarIcon, ChevronRightIcon, Columns3Icon, FileCodeIcon, FilmIcon, Heading1Icon, Heading2Icon, Heading3Icon, ImageIcon, Link2Icon, ListIcon, ListOrderedIcon, MinusIcon, PilcrowIcon, PlusIcon, QuoteIcon, RadicalIcon, SquareIcon, TableIcon, TableOfContentsIcon } from "lucide-react";
+
+//#region src/components/editor/ui/insert-toolbar-button.tsx
+const groups = [
+	{
+		group: "Basic blocks",
+		items: [
+			{
+				icon: /* @__PURE__ */ jsx(PilcrowIcon, {}),
+				label: "Paragraph",
+				value: KEYS.p
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Heading1Icon, {}),
+				label: "Heading 1",
+				value: "h1"
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Heading2Icon, {}),
+				label: "Heading 2",
+				value: "h2"
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Heading3Icon, {}),
+				label: "Heading 3",
+				value: "h3"
+			},
+			{
+				icon: /* @__PURE__ */ jsx(TableIcon, {}),
+				label: "Table",
+				value: KEYS.table
+			},
+			{
+				icon: /* @__PURE__ */ jsx(FileCodeIcon, {}),
+				label: "Code",
+				value: KEYS.codeBlock
+			},
+			{
+				icon: /* @__PURE__ */ jsx(QuoteIcon, {}),
+				label: "Quote",
+				value: KEYS.blockquote
+			},
+			{
+				icon: /* @__PURE__ */ jsx(MinusIcon, {}),
+				label: "Divider",
+				value: KEYS.hr
+			}
+		].map((item) => ({
+			...item,
+			onSelect: (editor, value) => {
+				insertBlock(editor, value);
+			}
+		}))
+	},
+	{
+		group: "Lists",
+		items: [
+			{
+				icon: /* @__PURE__ */ jsx(ListIcon, {}),
+				label: "Bulleted list",
+				value: KEYS.ul
+			},
+			{
+				icon: /* @__PURE__ */ jsx(ListOrderedIcon, {}),
+				label: "Numbered list",
+				value: KEYS.ol
+			},
+			{
+				icon: /* @__PURE__ */ jsx(SquareIcon, {}),
+				label: "To-do list",
+				value: KEYS.listTodo
+			},
+			{
+				icon: /* @__PURE__ */ jsx(ChevronRightIcon, {}),
+				label: "Toggle list",
+				value: KEYS.toggle
+			}
+		].map((item) => ({
+			...item,
+			onSelect: (editor, value) => {
+				insertBlock(editor, value);
+			}
+		}))
+	},
+	{
+		group: "Media",
+		items: [{
+			icon: /* @__PURE__ */ jsx(ImageIcon, {}),
+			label: "Image",
+			value: KEYS.img
+		}, {
+			icon: /* @__PURE__ */ jsx(FilmIcon, {}),
+			label: "Embed",
+			value: KEYS.mediaEmbed
+		}].map((item) => ({
+			...item,
+			onSelect: (editor, value) => {
+				insertBlock(editor, value);
+			}
+		}))
+	},
+	{
+		group: "Advanced blocks",
+		items: [
+			{
+				icon: /* @__PURE__ */ jsx(TableOfContentsIcon, {}),
+				label: "Table of contents",
+				value: KEYS.toc
+			},
+			{
+				icon: /* @__PURE__ */ jsx(Columns3Icon, {}),
+				label: "3 columns",
+				value: "action_three_columns"
+			},
+			{
+				focusEditor: false,
+				icon: /* @__PURE__ */ jsx(RadicalIcon, {}),
+				label: "Equation",
+				value: KEYS.equation
+			}
+		].map((item) => ({
+			...item,
+			onSelect: (editor, value) => {
+				insertBlock(editor, value);
+			}
+		}))
+	},
+	{
+		group: "Inline",
+		items: [
+			{
+				icon: /* @__PURE__ */ jsx(Link2Icon, {}),
+				label: "Link",
+				value: KEYS.link
+			},
+			{
+				focusEditor: true,
+				icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
+				label: "Date",
+				value: KEYS.date
+			},
+			{
+				focusEditor: false,
+				icon: /* @__PURE__ */ jsx(RadicalIcon, {}),
+				label: "Inline Equation",
+				value: KEYS.inlineEquation
+			}
+		].map((item) => ({
+			...item,
+			onSelect: (editor, value) => {
+				insertInlineElement(editor, value);
+			}
+		}))
+	}
+];
+function InsertToolbarButton(props) {
+	const editor = useEditorRef();
+	const [open, setOpen] = React$1.useState(false);
+	return /* @__PURE__ */ jsxs(DropdownMenu, {
+		open,
+		onOpenChange: setOpen,
+		modal: false,
+		...props,
+		children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(ToolbarButton, {
+				pressed: open,
+				tooltip: "Insert",
+				isDropdown: true,
+				children: /* @__PURE__ */ jsx(PlusIcon, {})
+			})
+		}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+			className: "flex min-w-[180px] max-h-[500px] flex-col overflow-y-auto",
+			align: "start",
+			children: groups.map(({ group, items: nestedItems }) => /* @__PURE__ */ jsx(ToolbarMenuGroup, {
+				label: group,
+				children: nestedItems.map(({ icon, label, value, onSelect }) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+					onSelect: () => {
+						onSelect(editor, value);
+						editor.tf.focus();
+					},
+					children: [icon, label]
+				}, value))
+			}, group))
+		})]
+	});
+}
+
+//#endregion
+export { InsertToolbarButton };

package/dist/src/components/editor/ui/kbd-node-static.mjs

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { SlateLeaf } from "platejs/static";
+
+//#region src/components/editor/ui/kbd-node-static.tsx
+function KbdLeafStatic(props) {
+	return /* @__PURE__ */ jsx(SlateLeaf, {
+		...props,
+		as: "kbd",
+		className: "rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]",
+		children: props.children
+	});
+}
+
+//#endregion
+export { KbdLeafStatic };

package/dist/src/components/editor/ui/kbd-node.mjs

@@ -0,0 +1,17 @@
+"use client";
+
+import { jsx } from "react/jsx-runtime";
+import { PlateLeaf } from "platejs/react";
+
+//#region src/components/editor/ui/kbd-node.tsx
+function KbdLeaf(props) {
+	return /* @__PURE__ */ jsx(PlateLeaf, {
+		...props,
+		as: "kbd",
+		className: "rounded border border-border bg-muted px-1.5 py-0.5 font-mono text-sm shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(248,_249,_250)_0px_1px_5px_0px_inset,_rgb(193,_200,_205)_0px_0px_0px_0.5px,_rgb(193,_200,_205)_0px_2px_1px_-1px,_rgb(193,_200,_205)_0px_1px_0px_0px] dark:shadow-[rgba(255,_255,_255,_0.1)_0px_0.5px_0px_0px_inset,_rgb(26,_29,_30)_0px_1px_5px_0px_inset,_rgb(76,_81,_85)_0px_0px_0px_0.5px,_rgb(76,_81,_85)_0px_2px_1px_-1px,_rgb(76,_81,_85)_0px_1px_0px_0px]",
+		children: props.children
+	});
+}
+
+//#endregion
+export { KbdLeaf };