inspector works. i can edit a value wow

src/cg/03-ui-components.cg

@@ -26,34 +26,40 @@ button = config \
 
 # scrollable
 scrollable = config \
-  showVBar = config.totalHeight > config.h;
-  vBarHeight = max 20 (config.h * config.h / config.totalHeight);
-  vBarY = config.scrollY * config.h / config.totalHeight;
+  defaults = {
+    scrollX = 0,
+    scrollY = 0
+  };
+  c = { ...defaults, ...config };
 
-  showHBar = config.totalWidth > config.w;
-  vBarWidth = max 20 (config.w * config.w / config.totalWidth);
-  vBarX = config.scrollX * config.w / config.totalWidth;
+  showVBar = c.totalHeight > c.h;
+  vBarHeight = max 20 (c.h * c.h / c.totalHeight);
+  vBarY = c.scrollY * c.h / c.totalHeight;
+
+  showHBar = c.totalWidth > c.w;
+  vBarWidth = max 20 (c.w * c.w / c.totalWidth);
+  vBarX = c.scrollX * c.w / c.totalWidth;
 
   ui.stack {
     children = [
       ui.scrollable {
-        w = config.w,
-        h = config.h,
-        scrollX = config.scrollX,
-        scrollY = config.scrollY,
-        onScroll = config.onScroll,
-        child = config.child
+        w = c.w,
+        h = c.h,
+        scrollX = c.scrollX,
+        scrollY = c.scrollY,
+        onScroll = c.onScroll,
+        child = c.child
       },
       ...(showVBar
         | True \ [ui.positioned {
-            x = config.w - 4,
+            x = c.w - 4,
             y = vBarY,
             child = ui.rect { w = 4, h = vBarHeight, color = "rgba(255,255,255,0.3)", radius = 2 }
           }]
         | False \ []),
       ...(showHBar
         | True \ [ui.positioned {
-            x = config.h - 4,
+            x = c.h - 4,
             y = hBarX,
             child = ui.rect { h = 4, w = hBarWidth, color = "rgba(255,255,255,0.3)", radius = 2 }
           }]
@@ -99,9 +105,14 @@ box = config \
   };
 
 textInput = config \
-  defaults = { onSubmit = _ \ noOp };
+  defaults = {
+    onSubmit = _ \ noOp,
+    onChange = _ \ noOp,
+    initialValue = "",
+    initialFocus = False,
+  };
+
   c = { ...defaults, ...config };
-  _ = debug "c" c;
 
   insertChar = text pos char \
     before = slice text 0 pos;

src/cg/06-inspector.cg

@@ -3,8 +3,8 @@ inspector = config \
   windowWidth = 600;
 
   source = getSource config.name;
-  _ = debug "inspector source" source;
   sourceLines = split "\n" source;
+  lineHeight = 20;
 
   dialogPadding = 0;
 
@@ -14,17 +14,34 @@ inspector = config \
 
   ui.column {
     gap = 0,
-    children = mapWithIndex (line i \
+    children = [
+      # display source
+      scrollable {
+        w = config.w,
+        h = config.h - textInputHeight,
+        totalWidth = config.w,
+        totalHeight = (len sourceLines) * lineHeight,
+        onScroll = _ \ noOp,
+        child = ui.column {
+          gap = 0,
+          children = map (line \
+            ui.positioned {
+              x = 8,
+              y = 2,
+              child = ui.text { content = line, color = "#ccc" }
+            }
+          ) sourceLines
+        }
+      },
+
+      # definition bar
       textInput {
-        key = "palette-query" & (show i),
-        initialValue = line,
-        initialFocus = i == 0,
+        key = "inspector-redefine-" & config.name,
         color = "white",
-        backgroundColor = "rgba(0,0,0,0.0)",
-        w = contentWidth,
+        backgroundColor = "rgba(0,0,0,1)",
+        w = config.w,
         h = textInputHeight,
-        # onChange = text \ batch [config.state.query := text, config.state.focusedIndex := 0],
-        onChange = text \ batch []
+        onSubmit = text \ redefine config.name text
       }
-    ) sourceLines
+    ]
   };

src/cg/10-os.cg

@@ -123,7 +123,7 @@ os =
           child = ui.clip {
             w = (windowWidth window),
             h = viewport.height - titleBarHeight,
-            child = window.content 0
+            child = window.content { w = (windowWidth window), h = viewport.height - titleBarHeight }
           }
         }
       ]
@@ -170,9 +170,10 @@ os =
 
   onSelect = input \
     result = eval input;
+    _ = debug "onSelect eval result" result;
     result
     | Value v \ openWindow input (_ \ ui.text { content = show v, color = "white" })
-    | Defined name \ openWindow name (_ \ inspector { name = name })
+    | Defined name \ openWindow name (size \ inspector { name = name, w = size.w, h = size.h })
     | Err msg \ openWindow "Error" (_ \ ui.text { content = msg, color = "red" });
 
   handleFocusLeftEvent = state \