@maple-kit/ui 0.1.0

package/dist/composer/body.js

@@ -0,0 +1,119 @@
+import { Slot, composeRefs } from "../slot.js";
+import { searchEmoji, shortcodeAt, writeAt } from "./emoji.js";
+import { EmojiGrid, MapleEmoji } from "./picker-emoji.js";
+import { createElement, forwardRef, useEffect, useRef, useState } from "react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+//#region src/composer/body.ts
+const COMPOSER_PLACEHOLDER = "What is wrong with this?";
+const MapleBody = forwardRef(function MapleBody(props, ref) {
+	const { composer } = useMaple();
+	const client = useMapleClient();
+	const field = useRef(null);
+	const [open, setOpen] = useState(false);
+	const suggest = useSuggestions(composer.body);
+	const reading = composer.viewing !== void 0;
+	const Element = props.asChild ? Slot : "textarea";
+	useEffect(() => {
+		if (composer.open && !reading) field.current?.focus();
+	}, [composer.open, reading]);
+	if (reading) return createElement("p", { className: [
+		"mk-composer-row",
+		"mk-read",
+		"mk-body",
+		props.className
+	].filter(Boolean).join(" ") }, composer.body);
+	const write = (glyph, over) => {
+		const caret = field.current?.selectionStart ?? composer.body.length;
+		const from = over?.start ?? caret;
+		const next = writeAt(composer.body, from, caret, glyph);
+		client.setBody(next.body);
+		suggest.clear();
+		setOpen(false);
+		restore(field, next.caret);
+	};
+	const area = createElement(Element, {
+		ref: composeRefs(ref, field),
+		className: [
+			"mk-field",
+			"mk-body",
+			props.className
+		].filter(Boolean).join(" "),
+		value: composer.body,
+		placeholder: COMPOSER_PLACEHOLDER,
+		"aria-label": COMPOSER_PLACEHOLDER,
+		onChange: (event) => {
+			client.setBody(event.target.value);
+			suggest.read(event.target.value, event.target.selectionStart);
+		},
+		onKeyDown: (event) => suggest.onKeyDown(event, write),
+		onBlur: () => suggest.clear()
+	});
+	return createElement("div", { className: "mk-composer-row mk-field-wrap" }, area, props.emoji === false ? null : createElement(MapleEmoji, {
+		open,
+		onToggle: setOpen,
+		onPick: (glyph) => write(glyph)
+	}), menu(suggest, write));
+});
+function menu(suggest, write) {
+	if (!suggest.at || suggest.found.length === 0) return null;
+	return createElement(EmojiGrid, {
+		className: "mk-emoji-menu",
+		emoji: suggest.found,
+		active: suggest.active,
+		onPick: (glyph) => write(glyph, suggest.at)
+	});
+}
+function useSuggestions(body) {
+	const [caret, setCaret] = useState();
+	const [dismissed, setDismissed] = useState(false);
+	const [active, setActive] = useState(0);
+	const at = dismissed || caret === void 0 ? void 0 : shortcodeAt(body, caret);
+	const found = at ? searchEmoji(at.query) : [];
+	const clear = () => {
+		setDismissed(true);
+		setActive(0);
+	};
+	const read = (next, where) => {
+		setCaret(where ?? void 0);
+		setDismissed(false);
+		setActive(0);
+	};
+	const onKeyDown = (event, write) => {
+		if (!at || found.length === 0) return;
+		if (event.key === "Escape") {
+			event.stopPropagation();
+			return clear();
+		}
+		const step = stepFor(event.key);
+		if (step !== 0) {
+			event.preventDefault();
+			return setActive((was) => (was + step + found.length) % found.length);
+		}
+		if (event.key !== "Enter" && event.key !== "Tab") return;
+		event.preventDefault();
+		const glyph = found[active]?.glyph;
+		if (glyph) write(glyph, at);
+	};
+	return {
+		at,
+		found,
+		active,
+		read,
+		clear,
+		onKeyDown
+	};
+}
+function stepFor(key) {
+	if (key === "ArrowDown" || key === "ArrowRight") return 1;
+	return key === "ArrowUp" || key === "ArrowLeft" ? -1 : 0;
+}
+function restore(field, caret) {
+	requestAnimationFrame(() => {
+		const node = field.current;
+		if (!node) return;
+		node.focus();
+		node.setSelectionRange(caret, caret);
+	});
+}
+//#endregion
+export { COMPOSER_PLACEHOLDER, MapleBody };

package/dist/composer/composer.d.ts

@@ -0,0 +1,23 @@
+import { AsChildProps } from "../slot.js";
+import { LeaveAsk } from "./leave.js";
+import { SheetDetent } from "./scope.js";
+import { ReactNode } from "react";
+//#region src/composer/composer.d.ts
+/** How the composer is mounted. No prop here changes its look. */
+export interface MapleComposerProps extends AsChildProps {
+  readonly className?: string;
+  readonly children?: ReactNode;
+  /** The frame to inset while the panel is open, rather than cover. */
+  readonly inset?: ElementCSSInlineStyle | null;
+  /** Hold Space to see through the panel. On unless an application says otherwise. */
+  readonly peek?: boolean;
+  /** The same `LeaveAsk` the controller was given, so the confirm is drawn here. */
+  readonly leave?: LeaveAsk;
+}
+/** What a screen reader calls the panel. */
+export declare const COMPOSER_LABEL = "New comment";
+/** Expand and collapse, in the words the two detents actually do. */
+export declare const DETENT_LABELS: Readonly<Record<SheetDetent, string>>;
+/** The panel. Every part below it reads the controller, never a prop. */
+export declare const MapleComposer: import("react").ForwardRefExoticComponent<MapleComposerProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion

package/dist/composer/composer.js

@@ -0,0 +1,122 @@
+import { useMapleUi } from "../context.js";
+import { dataAttributes } from "../data.js";
+import { Slot } from "../slot.js";
+import { ComposerScope } from "./scope.js";
+import { useInset } from "./inset.js";
+import { useHoldToPeek } from "./peek.js";
+import { LeavePrompt } from "./prompt.js";
+import { Fragment, createElement, forwardRef, useEffect, useMemo, useState } from "react";
+import { useMaple, useMapleClient } from "@maple-kit/react";
+import { imageFrom, previewOf } from "@maple-kit/core/screenshot";
+//#region src/composer/composer.ts
+const COMPOSER_LABEL = "New comment";
+const DETENT_LABELS = {
+	full: "Show less of the comment",
+	half: "Show more of the comment"
+};
+const MapleComposer = forwardRef(function MapleComposer(props, ref) {
+	const { composer, user } = useMaple();
+	const client = useMapleClient();
+	const { container } = useMapleUi("Maple.Composer");
+	const view = container.ownerDocument.defaultView;
+	const [panel, setPanel] = useState(null);
+	const [motion, setMotion] = useState({
+		open: composer.open,
+		moving: false
+	});
+	const scope = useScopeValue(composer.open, view, props.peek !== false);
+	if (motion.open !== composer.open) setMotion({
+		open: composer.open,
+		moving: true
+	});
+	useInset(props.inset, composer.open ? panel : null, view);
+	const Element = props.asChild ? Slot : "section";
+	const grabber = createElement(Grabber, {
+		detent: scope.detent,
+		toggle: scope.toggleDetent
+	});
+	return createElement(Fragment, null, createElement(ComposerScope.Provider, { value: scope }, createElement(Element, {
+		...shellAttributes(composer.open, scope, motion),
+		...dataAttributes({ provenance: user ? "server" : "guest" }),
+		className: props.className ? `mk-composer ${props.className}` : "mk-composer",
+		role: "dialog",
+		"aria-label": COMPOSER_LABEL,
+		ref: composeInto(ref, setPanel),
+		onKeyDown: (event) => onEscape(event, client),
+		onPaste: (event) => onPaste(event, scope),
+		onDragOver: (event) => event.preventDefault(),
+		onDrop: (event) => onDrop(event, scope),
+		onTransitionEnd: (event) => {
+			if (event.target === event.currentTarget) setMotion({
+				open: composer.open,
+				moving: false
+			});
+		}
+	}, props.asChild ? props.children : createElement(Fragment, null, grabber, props.children))), props.leave ? createElement(LeavePrompt, { ask: props.leave }) : null);
+});
+function shellAttributes(open, scope, motion) {
+	return {
+		"data-mk-open": String(open),
+		"data-mk-peek": String(scope.peeking),
+		"data-mk-detent": scope.detent,
+		"data-mk-moving": String(motion.moving),
+		inert: !open
+	};
+}
+function Grabber(props) {
+	return createElement("button", {
+		type: "button",
+		className: "mk-grab mk-hit mk-press",
+		"aria-label": DETENT_LABELS[props.detent],
+		"aria-expanded": props.detent === "full",
+		onClick: props.toggle
+	});
+}
+function onEscape(event, client) {
+	if (event.key !== "Escape") return;
+	event.stopPropagation();
+	client.closeComposer();
+}
+function onPaste(event, scope) {
+	const image = imageFrom(event.clipboardData);
+	if (!image) return;
+	event.preventDefault();
+	scope.offer(image);
+}
+function onDrop(event, scope) {
+	const image = imageFrom(event.dataTransfer);
+	if (!image) return;
+	event.preventDefault();
+	scope.offer(image);
+}
+function composeInto(ref, set) {
+	return (node) => {
+		set(node);
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+}
+function useScopeValue(open, view, peekable) {
+	const [detent, setDetent] = useState("half");
+	const [pending, setPending] = useState();
+	const peeking = useHoldToPeek(view, open && peekable);
+	useEffect(() => pending ? () => pending.preview.revoke() : void 0, [pending]);
+	return useMemo(() => ({
+		peeking,
+		detent,
+		toggleDetent: () => setDetent((was) => was === "half" ? "full" : "half"),
+		pending,
+		offer: (image, source) => setPending({
+			image,
+			preview: previewOf(image),
+			source: source ?? "offered"
+		}),
+		clear: () => setPending(void 0)
+	}), [
+		peeking,
+		detent,
+		pending
+	]);
+}
+//#endregion
+export { COMPOSER_LABEL, DETENT_LABELS, MapleComposer };