@3driseai/3drise-viewer 0.1.41 → 0.1.42

package/dist/ui/UiLayers.d.ts

@@ -10,11 +10,27 @@ export interface UiLayerRuntime {
 }
 /** A rendered layer by key, id, or name-less id. Undefined while it is hidden or not mounted. */
 export declare function getUiLayerRuntime(ref: string): UiLayerRuntime | undefined;
+/** An element of a layer, by child-index path from the layer's root (the sanitized HTML's top level). */
+export interface UiElementRef {
+    layerId: string;
+    path: number[];
+}
+export interface UiEditMode {
+    selected?: UiElementRef | null;
+    /** Called with the clicked element (null path: empty space in the layer). */
+    onSelect(ref: UiElementRef): void;
+}
+/** Child-index path of `el` under `body`. */
+export declare function uiElementPath(body: Element, el: Element): number[];
+/** The element at `path` under `body`, or null. */
+export declare function uiElementAt(body: Element, path: number[]): Element | null;
 export interface UiLayersProps {
     layers: UiLayer[] | undefined;
     scene: UiSceneApi;
     /** Extra CSS appended to every layer after its own (ProjectLoader's `uiStyles`). */
     extraCss?: string;
+    /** Studio only: clicks select elements instead of running them. */
+    edit?: UiEditMode;
 }
-export default function UiLayers({ layers, scene, extraCss }: UiLayersProps): import("react").JSX.Element;
+export default function UiLayers({ layers, scene, extraCss, edit }: UiLayersProps): import("react").JSX.Element;
 //# sourceMappingURL=UiLayers.d.ts.map

package/dist/ui/UiLayers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UiLayers.d.ts","sourceRoot":"","sources":["../../src/ui/UiLayers.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAgD,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAOlG,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,IAAI,YAAY,EAAE,CAAC;IAC1B,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,OAAO,IAAI,IAAI,CAAC;CACnB;AAGD,iGAAiG;AACjG,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAGzE;AA+BD,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,UAAU,CAAC;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,aAAa,+BAY1E"}
+{"version":3,"file":"UiLayers.d.ts","sourceRoot":"","sources":["../../src/ui/UiLayers.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAgD,KAAK,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACnG,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAOlG,MAAM,WAAW,cAAc;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,IAAI,YAAY,EAAE,CAAC;IAC1B,KAAK,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAC/B,OAAO,IAAI,IAAI,CAAC;CACnB;AAGD,iGAAiG;AACjG,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,MAAM,GAAG,cAAc,GAAG,SAAS,CAGzE;AAMD,yGAAyG;AACzG,MAAM,WAAW,YAAY;IAAG,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,EAAE,CAAA;CAAE;AAEjE,MAAM,WAAW,UAAU;IACvB,QAAQ,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,6EAA6E;IAC7E,QAAQ,CAAC,GAAG,EAAE,YAAY,GAAG,IAAI,CAAC;CACrC;AAUD,6CAA6C;AAC7C,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,CAUlE;AAED,mDAAmD;AACnD,wBAAgB,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,GAAG,IAAI,CAIzE;AAqED,MAAM,WAAW,aAAa;IAC1B,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,CAAC;IAC9B,KAAK,EAAE,UAAU,CAAC;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,IAAI,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,aAAa,+BAYhF"}

package/dist/ui/UiLayers.js

@@ -23,9 +23,42 @@ export function getUiLayerRuntime(ref) {
             return r;
     return undefined;
 }
+const EDIT_CSS = `
+.rise-layer * { pointer-events: auto !important; cursor: default !important; }
+.rise-layer *:hover { outline: 1px dashed rgba(255,255,255,.55); outline-offset: 1px; }
+[data-rise-selected] { outline: 2px solid #ffffff !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0,0,0,.45) !important; }
+`;
+/** Events a layer must not see while editing — its binder would run commands or write values. */
+const SWALLOW = ['click', 'dblclick', 'pointerdown', 'pointerup', 'mousedown', 'pointerenter', 'pointerleave', 'keydown', 'input', 'change'];
+/** Child-index path of `el` under `body`. */
+export function uiElementPath(body, el) {
+    const path = [];
+    let cur = el;
+    while (cur && cur !== body) {
+        const parent = cur.parentElement;
+        if (!parent)
+            return [];
+        path.unshift(Array.prototype.indexOf.call(parent.children, cur));
+        cur = parent;
+    }
+    return cur === body ? path : [];
+}
+/** The element at `path` under `body`, or null. */
+export function uiElementAt(body, path) {
+    let cur = body;
+    for (const i of path) {
+        cur = cur?.children[i] ?? null;
+        if (!cur)
+            return null;
+    }
+    return cur;
+}
 // ---------------------------------------------------------------------------
-function UiLayerHost({ layer, scene, extraCss }) {
+function UiLayerHost({ layer, scene, extraCss, edit }) {
     const ref = useRef(null);
+    const onSelect = useRef(edit?.onSelect);
+    onSelect.current = edit?.onSelect;
+    const editing = !!edit;
     useEffect(() => {
         const host = ref.current;
         if (!host)
@@ -45,13 +78,53 @@ function UiLayerHost({ layer, scene, extraCss }) {
             root.replaceChildren();
         };
     }, [layer.id, layer.key, layer.html, layer.css, extraCss, scene]);
+    // Edit mode: swallow every event on the way down (capture on the shadow root runs
+    // before any element's listener) and report clicks as a selection.
+    useEffect(() => {
+        const root = ref.current?.shadowRoot;
+        if (!root || !editing)
+            return;
+        const style = document.createElement('style');
+        style.textContent = EDIT_CSS;
+        root.append(style);
+        const body = root.querySelector('.rise-layer');
+        const swallow = (e) => {
+            // Script presses (scene.ui.press, the panel's Test) are untrusted: they run as normal.
+            if (!e.isTrusted)
+                return;
+            e.stopPropagation();
+            if (e.type !== 'keydown' && e.cancelable)
+                e.preventDefault();
+            if (e.type !== 'click' || !body)
+                return;
+            const target = e.composedPath().find((n) => n instanceof Element && body.contains(n) && n !== body);
+            onSelect.current?.({ layerId: layer.id, path: target ? uiElementPath(body, target) : [] });
+        };
+        for (const t of SWALLOW)
+            root.addEventListener(t, swallow, true);
+        return () => {
+            for (const t of SWALLOW)
+                root.removeEventListener(t, swallow, true);
+            style.remove();
+        };
+    }, [editing, layer.id, layer.html, layer.css, extraCss, scene]);
+    // The selected element's outline lives on the live DOM only — never in the saved HTML.
+    const selPath = edit?.selected?.layerId === layer.id ? edit.selected.path.join('/') : null;
+    useEffect(() => {
+        const body = ref.current?.shadowRoot?.querySelector('.rise-layer');
+        if (!body || selPath === null || !selPath)
+            return;
+        const el = uiElementAt(body, selPath.split('/').map(Number));
+        el?.setAttribute('data-rise-selected', '');
+        return () => el?.removeAttribute('data-rise-selected');
+    }, [selPath, layer.html, layer.css, extraCss, scene]);
     return _jsx("div", { ref: ref, className: UI_HOST_CLASS, "data-ui-layer": layer.key, style: { position: 'absolute', inset: 0, pointerEvents: 'none' } });
 }
-export default function UiLayers({ layers, scene, extraCss }) {
+export default function UiLayers({ layers, scene, extraCss, edit }) {
     const visible = (layers ?? []).filter(l => l.visible !== false);
     if (!visible.length)
         return null;
     return (_jsx("div", { className: "rise-ui-overlay", 
         // translateZ(0): a `position: fixed` inside a layer is then relative to this overlay, not the page.
-        style: { position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', transform: 'translateZ(0)', zIndex: 10 }, children: visible.map(l => _jsx(UiLayerHost, { layer: l, scene: scene, extraCss: extraCss }, l.id)) }));
+        style: { position: 'absolute', inset: 0, pointerEvents: 'none', overflow: 'hidden', transform: 'translateZ(0)', zIndex: 10 }, children: visible.map(l => _jsx(UiLayerHost, { layer: l, scene: scene, extraCss: extraCss, edit: edit }, l.id)) }));
 }

package/dist/ui/index.d.ts

@@ -1,5 +1,5 @@
-export { default as UiLayers, getUiLayerRuntime } from './UiLayers';
-export type { UiLayersProps, UiLayerRuntime } from './UiLayers';
+export { default as UiLayers, getUiLayerRuntime, uiElementPath, uiElementAt } from './UiLayers';
+export type { UiLayersProps, UiLayerRuntime, UiEditMode, UiElementRef } from './UiLayers';
 export { default as UiAnchorUpdater } from './UiAnchorUpdater';
 export { bindUiLayer } from './uiBinder';
 export type { BindOptions, BoundControl, UiBinderHandle, UiSceneApi } from './uiBinder';

package/dist/ui/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpE,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,iBAAiB,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAChG,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxF,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/ui/index.js

@@ -1,5 +1,5 @@
 // UI layers: agent-written HTML/CSS that controls the scene (see claude/ui-module.md)
-export { default as UiLayers, getUiLayerRuntime } from './UiLayers.js';
+export { default as UiLayers, getUiLayerRuntime, uiElementPath, uiElementAt } from './UiLayers.js';
 export { default as UiAnchorUpdater } from './UiAnchorUpdater.js';
 export { bindUiLayer } from './uiBinder.js';
 export { uiAnchors } from './uiAnchors.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3driseai/3drise-viewer",
-  "version": "0.1.41",
+  "version": "0.1.42",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",