@21stware/rpui-react 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,15 +1,29 @@
+import type { RpuiMode, RpuiTheme, PickInfo } from '@21stware/rpui';
+export type { RpuiMode, RpuiTheme, PickInfo };
 export interface RpmlRendererProps {
     /** RPML source text. Updates trigger incremental re-render with scroll preserved. */
     rpml: string;
     /** Debounce delay in ms before re-rendering (recommended for live editors). Default: 0. */
     debounce?: number;
+    /**
+     * Rendering mode (default: "view"):
+     * - "view"  — scrollable panes, pins and navigation active.
+     * - "edit"  — full-height flat layout, no scroll, no interactions.
+     * - "pick"  — flat layout, mouse hover/click highlights elements for selection.
+     */
+    mode?: RpuiMode;
+    /** Override CSS color tokens for theming. */
+    theme?: RpuiTheme;
+    /**
+     * CSS selectors of elements to mark as programmatically selected in pick mode.
+     * Re-applied after every render.
+     */
+    selected?: string[];
+    /** Called when user clicks an element in pick mode. */
+    onPick?: (info: PickInfo) => void;
     className?: string;
     style?: React.CSSProperties;
-    /** Called with an error message on parse failure, null when the error clears. */
+    /** Called with an error message on parse failure, null on recovery. */
     onError?: (msg: string | null) => void;
 }
-/**
- * Renders RPML markup as a live Web Components prototype.
- * Scroll position is preserved across incremental updates.
- */
-export declare function RpmlRenderer({ rpml, debounce, className, style, onError }: RpmlRendererProps): import("react").JSX.Element;
+export declare function RpmlRenderer({ rpml, debounce, mode, theme, selected, onPick, className, style, onError, }: RpmlRendererProps): import("react").JSX.Element;

package/dist/index.js

@@ -1,42 +1,70 @@
 import { useEffect, useRef } from "react";
-import { createDocRenderer, registerAll } from "@21stware/rpui";
+import { ModeManager, createDocRenderer, registerAll } from "@21stware/rpui";
 import { jsx } from "react/jsx-runtime";
 //#region src/index.tsx
 let _registered = false;
-/**
-* Renders RPML markup as a live Web Components prototype.
-* Scroll position is preserved across incremental updates.
-*/
-function RpmlRenderer({ rpml, debounce = 0, className, style, onError }) {
+function RpmlRenderer({ rpml, debounce = 0, mode = "view", theme, selected, onPick, className, style, onError }) {
 	const hostRef = useRef(null);
 	const rendererRef = useRef(null);
-	const onErrorRef = useRef(onError);
+	const managerRef = useRef(null);
 	const timerRef = useRef(void 0);
+	const onErrorRef = useRef(onError);
+	const onPickRef = useRef(onPick);
 	useEffect(() => {
 		onErrorRef.current = onError;
 	}, [onError]);
+	useEffect(() => {
+		onPickRef.current = onPick;
+	}, [onPick]);
 	useEffect(() => {
 		if (!_registered) {
 			registerAll();
 			_registered = true;
 		}
-		const renderer = createDocRenderer(hostRef.current, { onError: (msg) => onErrorRef.current?.(msg) });
+		const renderer = createDocRenderer(hostRef.current, {
+			onError: (msg) => onErrorRef.current?.(msg),
+			annotateLines: true
+		});
+		const opts = {
+			mode,
+			theme,
+			selected,
+			onPick: (info) => onPickRef.current?.(info)
+		};
+		const manager = new ModeManager(hostRef.current, opts);
 		rendererRef.current = renderer;
+		managerRef.current = manager;
 		return () => {
 			renderer.destroy();
+			manager.destroy();
 			rendererRef.current = null;
+			managerRef.current = null;
 		};
 	}, []);
+	useEffect(() => {
+		managerRef.current?.setMode(mode);
+	}, [mode]);
+	useEffect(() => {
+		if (theme) managerRef.current?.setTheme(theme);
+	}, [theme]);
 	useEffect(() => {
 		const renderer = rendererRef.current;
+		const manager = managerRef.current;
 		if (!renderer) return;
+		const run = () => {
+			renderer.render(rpml);
+			if (selected?.length) manager?.setSelected(selected);
+		};
 		if (debounce > 0) {
 			clearTimeout(timerRef.current);
-			timerRef.current = setTimeout(() => renderer.render(rpml), debounce);
+			timerRef.current = setTimeout(run, debounce);
 			return () => clearTimeout(timerRef.current);
 		}
-		renderer.render(rpml);
+		run();
 	}, [rpml, debounce]);
+	useEffect(() => {
+		managerRef.current?.setSelected(selected ?? []);
+	}, [selected]);
 	return /* @__PURE__ */ jsx("div", {
 		ref: hostRef,
 		className,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@21stware/rpui-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React binding for the RPUI/RPML Web Components runtime — incremental, scroll-preserving RPML rendering",
   "type": "module",
   "main": "dist/index.js",