made tiny updates

packages/app/src/components/canvas/Artboard.tsx

@@ -358,6 +358,9 @@ export function Artboard({ id, label, x, y, width, height, renderUrl, route, onR
               {...(localFiberRoot !== undefined ? { fiberRoot: localFiberRoot } : {})}
               width={width}
               height={height}
+              onSelectionChange={(sel) => {
+                handleComponentSelected(sel?.nodeId ?? '');
+              }}
             />
           </>
         ) : (

packages/app/src/components/canvas/LiveArtboard.tsx

@@ -157,6 +157,7 @@ export function LiveArtboard({
     if (!isReadyRef.current) return;
     if (selectedComponentId) {
       sendMessage('SELECT_COMPONENT', { nodeId: selectedComponentId });
+      sendMessage('REQUEST_ELEMENT_STYLES', { nodeId: selectedComponentId });
     } else {
       sendMessage('DESELECT');
     }

packages/cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@originmain/cli",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "private": false,
   "description": "Originmain CLI — reverse proxy for live React component inspection.",
   "type": "module",

packages/renderer/src/fiber-hook.ts

@@ -215,6 +215,16 @@ export function buildProxyFiberHookScript(): string {
     return node;
   }
 
+  // Walk a fiber subtree to find the nearest host DOM node (div, span, etc.).
+  // Composite components have stateNode = null or class instance; host elements
+  // have stateNode = actual DOM element with a .style property.
+  function findDomElement(fiber) {
+    if (!fiber) return null;
+    var sn = fiber.stateNode;
+    if (sn && typeof sn.style !== 'undefined') return sn;
+    return findDomElement(fiber.child);
+  }
+
   // Collect all NAMED descendants of fiber.child into out[], transparently
   // flattening unnamed intermediates (Fragments, Providers, wrappers).
   function collectChildren(fiber, parentId, out) {
@@ -392,6 +402,47 @@ export function buildProxyFiberHookScript(): string {
         selectedNodeId = null;
         removeHighlight();
         break;
+      case 'REQUEST_ELEMENT_STYLES':
+        if (typeof msg.nodeId === 'string') {
+          var rInfo = nodeMap[msg.nodeId];
+          if (rInfo) {
+            var rEl = findDomElement(rInfo.fiber);
+            if (rEl) {
+              var cs = window.getComputedStyle(rEl);
+              var styleProps = [
+                'width','height','background-color','color','font-size',
+                'font-family','font-weight','line-height','letter-spacing','text-align',
+                'display','flex-direction','gap','align-items','justify-content',
+                'padding-top','padding-right','padding-bottom','padding-left',
+                'margin-top','margin-right','margin-bottom','margin-left',
+                'border-radius','border-width','border-color','border-style',
+                'opacity','box-shadow','overflow','position',
+              ];
+              var styles = {};
+              styleProps.forEach(function(p) { styles[p] = cs.getPropertyValue(p); });
+              post({ type: 'ELEMENT_STYLES', nodeId: msg.nodeId, styles: styles });
+            }
+          }
+        }
+        break;
+      case 'PATCH_ELEMENT_STYLE':
+        if (typeof msg.nodeId === 'string' && typeof msg.property === 'string') {
+          var pInfo = nodeMap[msg.nodeId];
+          if (pInfo) {
+            var pEl = findDomElement(pInfo.fiber);
+            if (pEl) pEl.style.setProperty(msg.property, String(msg.value || ''));
+          }
+        }
+        break;
+      case 'REMOVE_ELEMENT':
+        if (typeof msg.nodeId === 'string') {
+          var dInfo = nodeMap[msg.nodeId];
+          if (dInfo) {
+            var dEl = findDomElement(dInfo.fiber);
+            if (dEl) dEl.style.setProperty('display', 'none');
+          }
+        }
+        break;
     }
   });