@elicdavis/node-flow 0.1.20 → 0.2.0

package/dist/index.mjs

@@ -1,8 +1,46 @@
+// src/render_scheduler.ts
+var subscribers = /* @__PURE__ */ new Set();
+var frameQueued = false;
+var continuous = 0;
+var canSchedule = () => typeof requestAnimationFrame === "function";
+function onRenderRequested(redraw) {
+  subscribers.add(redraw);
+  return () => {
+    subscribers.delete(redraw);
+  };
+}
+function requestRender() {
+  if (frameQueued || !canSchedule()) {
+    return;
+  }
+  frameQueued = true;
+  requestAnimationFrame(() => {
+    frameQueued = false;
+    subscribers.forEach((redraw) => redraw());
+    if (continuous > 0) {
+      requestRender();
+    }
+  });
+}
+function renderContinuously() {
+  continuous++;
+  requestRender();
+  let released = false;
+  return () => {
+    if (released) {
+      return;
+    }
+    released = true;
+    continuous--;
+  };
+}
+
 // src/theme.ts
-var Theme = {
+var defaults = {
   FontFamily: "Courier New",
   Graph: {
-    BackgroundColor: "#07212a"
+    BackgroundColor: "#07212a",
+    DotColor: "rgb(41, 54, 57)"
   },
   Node: {
     FontColor: "#afb9bb",
@@ -19,6 +57,7 @@ var Theme = {
       Grabbed: "white",
       Selected: "#6e6e6e"
     },
+    Bevel: null,
     Port: {
       FontColor: "#afb9bb"
     },
@@ -36,15 +75,25 @@ var Theme = {
   },
   Widget: {
     FontColor: "#afb9bb",
+    LabelColor: "#7f9497",
+    FontSize: 14,
+    Padding: 6,
+    Gap: 4,
     BackgroundColor: "#0f313c",
     Border: {
       Color: "#154050",
       Size: 2,
       Radius: 2
     },
+    Bevel: null,
     Hover: {
       BackgroundColor: "#195366"
     },
+    Input: {
+      BackgroundColor: "#0f313c",
+      HoverBackgroundColor: "#195366",
+      FontColor: "#afb9bb"
+    },
     Slider: {
       FillColor: "#07212A"
     },
@@ -57,8 +106,10 @@ var Theme = {
   ContextMenu: {
     BackgroundColor: "#07212A",
     HighlightColor: "#205A6D",
+    HighlightFontColor: "#afb9bb",
     FontColor: "#afb9bb",
-    DisabledFontColor: "#4a585c"
+    DisabledFontColor: "#4a585c",
+    BorderRadius: 5
   },
   Minimap: {
     BackgroundColor: "rgba(10, 16, 18, 0.85)",
@@ -68,6 +119,13 @@ var Theme = {
     NodeColor: "#6b7f85",
     ViewportColor: "rgba(175, 185, 187, 0.25)"
   },
+  Popup: {
+    BackgroundColor: "#000000",
+    FontColor: "#ffffff",
+    FontFamily: "Verdana",
+    BorderRadius: 8,
+    Backdrop: "#00000070"
+  },
   Note: {
     FontColor: "#afb9bb",
     FontSize: 16,
@@ -86,11 +144,47 @@ var Theme = {
     },
     CodeBlock: {
       BackgroundColor: "#0c2b35",
+      FontColor: "#afb9bb",
       Padding: 16,
       BorderRadius: 4
     }
   }
 };
+function clone(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+function merge(target, source) {
+  if (source === void 0) {
+    return target;
+  }
+  if (source === null || typeof source !== "object" || target === null || typeof target !== "object") {
+    return source;
+  }
+  for (const key of Object.keys(source)) {
+    target[key] = merge(target[key], source[key]);
+  }
+  return target;
+}
+var DefaultTheme = Object.freeze(clone(defaults));
+var Theme = clone(defaults);
+var version = 0;
+var listeners = /* @__PURE__ */ new Set();
+function setTheme(config) {
+  const next = merge(clone(defaults), config);
+  for (const key of Object.keys(next)) {
+    Theme[key] = next[key];
+  }
+  version++;
+  listeners.forEach((listener) => listener());
+  requestRender();
+}
+function themeVersion() {
+  return version;
+}
+function onThemeChange(listener) {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+}
 
 // src/styles/text.ts
 var DefaultSize = 16;
@@ -113,19 +207,19 @@ var TextStyle = class {
   constructor(config) {
     this.#size = config?.size === void 0 ? DefaultSize : config.size;
     this.#color = config?.color === void 0 ? DefaultColor : config.color;
-    this.#font = config?.font === void 0 ? Theme.FontFamily : config.font;
+    this.#font = config?.font;
     this.#weight = config?.weight === void 0 ? "" /* Normal */ : config.weight;
     this.#fontStyle = config?.style === void 0 ? "" /* Normal */ : config.style;
   }
   setupStyle(ctx, scale) {
     ctx.fillStyle = this.#color;
-    ctx.font = this.#fontStyle + " " + this.#weight + " " + this.#size * scale + "px " + this.#font;
+    ctx.font = this.#fontStyle + " " + this.#weight + " " + this.#size * scale + "px " + this.getFont();
   }
   getSize() {
     return this.#size;
   }
   getFont() {
-    return this.#font;
+    return this.#font ?? Theme.FontFamily;
   }
   getWeight() {
     return this.#weight;
@@ -496,7 +590,18 @@ var ContextMenu = class _ContextMenu {
   }
   #tempBox = { Position: Zero(), Size: Zero() };
   #openSubMenu;
-  render(ctx, pppp, graphScale, mousePosition, openRight) {
+  #bounds = null;
+  #contains(point) {
+    if (this.#bounds !== null && InBox(this.#bounds, point)) {
+      return true;
+    }
+    return this.#openSubMenu !== void 0 && this.#openSubMenu.#contains(point);
+  }
+  /**
+   * A submenu is anchored to its parent's left edge and told the parent's
+   * width, so it can open on whichever side has room.
+   */
+  render(ctx, anchor, graphScale, mousePosition, openRight, parentWidth = 0) {
     const menuScale = 1.25;
     const scaledEntryHeight = menuScale * contextEntryHeight;
     const scaledEntryWidth = menuScale * 40 + this.#getMaxWidthForText(ctx, menuScale);
@@ -505,19 +610,35 @@ var ContextMenu = class _ContextMenu {
       totalScaledHeight += this.#groups.At(i).height();
     }
     totalScaledHeight *= menuScale;
-    const position = { x: 0, y: 0 };
-    CopyVector2(position, pppp);
-    if (!openRight) {
-      position.x -= scaledEntryWidth;
+    const canvasWidth = ctx.canvas.clientWidth;
+    const position = { x: anchor.x, y: anchor.y };
+    let opensRight = openRight;
+    if (parentWidth === 0) {
+      if (!openRight) {
+        position.x -= scaledEntryWidth;
+      }
+      if (openRight && position.x + scaledEntryWidth > canvasWidth) {
+        position.x = canvasWidth - scaledEntryWidth;
+        opensRight = false;
+      }
+    } else {
+      const rightOfParent = anchor.x + parentWidth;
+      const leftOfParent = anchor.x - scaledEntryWidth;
+      const fitsRight = rightOfParent + scaledEntryWidth <= canvasWidth;
+      const fitsLeft = leftOfParent >= 0;
+      opensRight = openRight ? fitsRight || !fitsLeft : !fitsLeft && fitsRight;
+      position.x = opensRight ? rightOfParent : leftOfParent;
+      position.x = Math.max(0, Math.min(position.x, canvasWidth - scaledEntryWidth));
     }
     if (position.y + totalScaledHeight > ctx.canvas.clientHeight) {
       position.y = ctx.canvas.clientHeight - totalScaledHeight;
     }
-    let submenuOpenRight = openRight;
-    if (openRight && position.x + scaledEntryWidth > ctx.canvas.clientWidth) {
-      position.x = ctx.canvas.clientWidth - scaledEntryWidth;
-      submenuOpenRight = !submenuOpenRight;
-    }
+    position.y = Math.max(0, position.y);
+    this.#bounds = {
+      Position: { x: position.x, y: position.y },
+      Size: { x: scaledEntryWidth, y: totalScaledHeight }
+    };
+    const pointer = mousePosition !== void 0 && this.#openSubMenu !== void 0 && this.#openSubMenu.#contains(mousePosition) ? void 0 : mousePosition;
     this.#tempBox.Size.x = scaledEntryWidth;
     this.#tempBox.Size.y = scaledEntryHeight;
     CopyVector2(this.#tempBox.Position, position);
@@ -531,36 +652,36 @@ var ContextMenu = class _ContextMenu {
       this.#tempBox.Position.y,
       scaledEntryWidth,
       totalScaledHeight,
-      5 * menuScale
+      Theme.ContextMenu.BorderRadius * menuScale
     );
     ctx.fill();
     ctx.shadowBlur = 0;
     let mouseIsOver = null;
-    let subOpenedThisFrame = false;
+    if (pointer !== void 0) {
+      let row = 0;
+      for (let groupIndex = 0; groupIndex < this.#groups.Count(); groupIndex++) {
+        for (const entry of this.#groups.At(groupIndex).entries) {
+          this.#tempBox.Position.y = position.y + scaledEntryHeight * row;
+          if (InBox(this.#tempBox, pointer)) {
+            mouseIsOver = entry;
+            this.#openSubMenu = entry.subMenu;
+            this.#submenuPosition.x = position.x;
+            this.#submenuPosition.y = this.#tempBox.Position.y;
+          }
+          row++;
+        }
+      }
+    }
     let optionsRendered = 0;
     for (let groupIndex = 0; groupIndex < this.#groups.Count(); groupIndex++) {
       const group = this.#groups.At(groupIndex);
       for (let entryIndex = 0; entryIndex < group.entries.length; entryIndex++) {
         const entry = group.entries[entryIndex];
         this.#tempBox.Position.y = position.y + scaledEntryHeight * optionsRendered;
-        let entryMousedOver = false;
-        if (mousePosition !== void 0 && InBox(this.#tempBox, mousePosition)) {
-          mouseIsOver = entry;
-          entryMousedOver = true;
-          if (entry.subMenu !== void 0) {
-            this.#openSubMenu = entry.subMenu;
-            this.#submenuPosition.x = position.x;
-            this.#submenuPosition.y = this.#tempBox.Position.y;
-            if (submenuOpenRight) {
-              this.#submenuPosition.x += scaledEntryWidth;
-            }
-            subOpenedThisFrame = true;
-          } else {
-            this.#openSubMenu = void 0;
-          }
-        }
+        const entryMousedOver = entry === mouseIsOver;
         const itemDisabled = entry.item !== void 0 && entry.item.state() === 1 /* Disabled */;
-        if (!itemDisabled && (entryMousedOver || this.#openSubMenu !== void 0 && entry.subMenu === this.#openSubMenu)) {
+        const highlighted = !itemDisabled && (entryMousedOver || this.#openSubMenu !== void 0 && entry.subMenu === this.#openSubMenu);
+        if (highlighted) {
           ctx.fillStyle = Theme.ContextMenu.HighlightColor;
           ctx.beginPath();
           ctx.roundRect(
@@ -568,18 +689,20 @@ var ContextMenu = class _ContextMenu {
             this.#tempBox.Position.y + scaledEntryHeight / 10,
             scaledEntryWidth - scaledEntryHeight / 5,
             scaledEntryHeight - scaledEntryHeight / 5,
-            5 * menuScale
+            Theme.ContextMenu.BorderRadius * menuScale
           );
           ctx.fill();
         }
         this.#textStyle.setupStyle(ctx, menuScale);
         if (itemDisabled) {
           ctx.fillStyle = Theme.ContextMenu.DisabledFontColor;
+        } else if (highlighted) {
+          ctx.fillStyle = Theme.ContextMenu.HighlightFontColor;
         }
         ctx.fillText(entry.text, position.x + scaledEntryHeight / 5, this.#tempBox.Position.y + scaledEntryHeight / 2);
         if (entry.subMenu !== void 0) {
           ctx.beginPath();
-          ctx.strokeStyle = Theme.ContextMenu.FontColor;
+          ctx.strokeStyle = highlighted ? Theme.ContextMenu.HighlightFontColor : Theme.ContextMenu.FontColor;
           ctx.lineWidth = 1 * menuScale;
           ctx.lineTo(position.x + scaledEntryWidth - scaledEntryHeight / 2.5, this.#tempBox.Position.y + scaledEntryHeight / 3);
           ctx.lineTo(position.x + scaledEntryWidth - scaledEntryHeight / 4, this.#tempBox.Position.y + scaledEntryHeight / 2);
@@ -600,7 +723,7 @@ var ContextMenu = class _ContextMenu {
       }
     }
     if (this.#openSubMenu !== void 0) {
-      const mouseOverSub = this.#openSubMenu.render(ctx, this.#submenuPosition, menuScale, mousePosition, submenuOpenRight);
+      const mouseOverSub = this.#openSubMenu.render(ctx, this.#submenuPosition, menuScale, mousePosition, opensRight, scaledEntryWidth);
       if (mouseOverSub !== null) {
         mouseIsOver = mouseOverSub;
       }
@@ -609,43 +732,6 @@ var ContextMenu = class _ContextMenu {
   }
 };
 
-// src/render_scheduler.ts
-var subscribers = /* @__PURE__ */ new Set();
-var frameQueued = false;
-var continuous = 0;
-var canSchedule = () => typeof requestAnimationFrame === "function";
-function onRenderRequested(redraw) {
-  subscribers.add(redraw);
-  return () => {
-    subscribers.delete(redraw);
-  };
-}
-function requestRender() {
-  if (frameQueued || !canSchedule()) {
-    return;
-  }
-  frameQueued = true;
-  requestAnimationFrame(() => {
-    frameQueued = false;
-    subscribers.forEach((redraw) => redraw());
-    if (continuous > 0) {
-      requestRender();
-    }
-  });
-}
-function renderContinuously() {
-  continuous++;
-  requestRender();
-  let released = false;
-  return () => {
-    if (released) {
-      return;
-    }
-    released = true;
-    continuous--;
-  };
-}
-
 // src/input.ts
 var LONG_PRESS_MS = 500;
 var LONG_PRESS_SLOP = 12;
@@ -1230,6 +1316,7 @@ function splitStringIntoLines(ctx, str, maxWidth) {
 // src/types/text.ts
 var Text = class _Text {
   #measured;
+  #measuredForTheme = -1;
   #size;
   #style;
   #value;
@@ -1309,9 +1396,10 @@ var Text = class _Text {
     return results;
   }
   #measure(ctx) {
-    if (this.#measured) {
+    if (this.#measured && this.#measuredForTheme === themeVersion()) {
       return;
     }
+    this.#measuredForTheme = themeVersion();
     this.#style.setupStyle(ctx, 1);
     if (this.#maxWidth == -1) {
       const measurements = ctx.measureText(this.#value);
@@ -1387,7 +1475,7 @@ function RgbToHex(c) {
   return "#" + componentToHex(Math.round(c.r * 255)) + componentToHex(Math.round(c.g * 255)) + componentToHex(Math.round(c.b * 255));
 }
 function HexToColor(hex) {
-  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})(?:[a-f\d]{2})?$/i.exec(hex);
   return result ? {
     r: parseInt(result[1], 16) / 255,
     g: parseInt(result[2], 16) / 255,
@@ -1477,6 +1565,21 @@ function portConfigTypes(config) {
   }
   return [config.type === void 0 ? "" : config.type];
 }
+var ARRAY_SLOT_PITCH = 12;
+function arrayInsertIndex(box, count, y) {
+  if (count === 0) {
+    return 0;
+  }
+  const index = Math.round((y - box.Position.y) / (box.Size.y / count));
+  return Math.min(count, Math.max(0, index));
+}
+function arraySlotCenter(box, count, index) {
+  const slots = Math.max(1, count);
+  return {
+    x: box.Position.x + box.Size.x / 2,
+    y: box.Position.y + (index + 0.5) * box.Size.y / slots
+  };
+}
 function fallbackColor(type, s) {
   let value = 0;
   for (var i = 0; i < type.length; i++) {
@@ -1501,6 +1604,7 @@ var Port = class {
   #acceptedTypes;
   #description;
   #array;
+  #hidden;
   #configuredEmptyFill;
   #configuredFilledFill;
   #dataTypePopupElement;
@@ -1516,6 +1620,7 @@ var Port = class {
     this.#acceptedTypes = config?.acceptedTypes === void 0 ? [] : config.acceptedTypes;
     this.#description = config?.description === void 0 ? "" : config.description;
     this.#array = config?.array === true;
+    this.#hidden = config?.hidden === true;
     this.#configuredEmptyFill = config?.emptyStyle?.fillColor;
     this.#configuredFilledFill = config?.filledStyle?.fillColor;
     this.#emptyStyle = {
@@ -1614,9 +1719,11 @@ var Port = class {
     this.setDataType(type);
     this.#refreshDataType();
   }
-  addConnection(connection) {
-    const c = this.#connections.length;
-    this.#connections.push(connection);
+  addConnection(connection, index) {
+    const c = index === void 0 ? this.#connections.length : Math.min(Math.max(index, 0), this.#connections.length);
+    const was = this.hidden();
+    this.#connections.splice(c, 0, connection);
+    this.#visibilityMayHaveChanged(was);
     for (let i = 0; i < this.#onConnectionAdded.length; i++) {
       this.#onConnectionAdded[i](connection, c, this, this.#portType, this.#node);
     }
@@ -1637,6 +1744,32 @@ var Port = class {
   connections() {
     return this.#connections;
   }
+  /**
+   * How many wires the port has room for: one per connection on an array
+   * input, so each can be told apart and picked up on its own.
+   */
+  slots() {
+    if (this.#portType !== "INPUTARRAY" /* InputArray */) {
+      return 1;
+    }
+    return Math.max(1, this.#connections.length);
+  }
+  setHidden(hidden) {
+    const was = this.hidden();
+    this.#hidden = hidden;
+    this.#visibilityMayHaveChanged(was);
+  }
+  #visibilityMayHaveChanged(was) {
+    if (was !== this.hidden() || this.#portType === "INPUTARRAY" /* InputArray */) {
+      this.#node?.invalidateLayout();
+    }
+  }
+  /**
+   * A port asked to hide still shows while anything is connected to it.
+   */
+  hidden() {
+    return this.#hidden && this.#connections.length === 0;
+  }
   addConnectionRemovedListener(callback) {
     if (callback === void 0) {
       return;
@@ -1646,7 +1779,9 @@ var Port = class {
   clearConnection(connection) {
     const index = this.#connections.indexOf(connection);
     if (index > -1) {
+      const was = this.hidden();
       this.#connections.splice(index, 1);
+      this.#visibilityMayHaveChanged(was);
       for (let i = 0; i < this.#onConnectionRemoved.length; i++) {
         this.#onConnectionRemoved[i](connection, index, this, this.#portType, this.#node);
       }
@@ -1705,20 +1840,31 @@ var Port = class {
         this.#dataTypePopupElement.render(ctx, { x: xPos - size.x / 2, y: yPos }, 1, size);
       });
     }
+    const slots = this.slots();
+    const height2 = slots === 1 ? scaledRadius * 2 : slots * ARRAY_SLOT_PITCH * camera.zoom;
     this.#box.Position.x = position.x - scaledRadius;
-    this.#box.Position.y = position.y - scaledRadius;
+    this.#box.Position.y = position.y - height2 / 2;
     this.#box.Size.x = scaledRadius * 2;
-    this.#box.Size.y = scaledRadius * 2;
+    this.#box.Size.y = height2;
     ctx.strokeStyle = style.borderColor;
     ctx.fillStyle = style.fillColor;
     ctx.beginPath();
     if (this.#portType === "INPUTARRAY" /* InputArray */) {
-      ctx.rect(position.x - scaledRadius, position.y - scaledRadius, scaledRadius * 2, scaledRadius * 2);
+      ctx.roundRect(this.#box.Position.x, this.#box.Position.y, this.#box.Size.x, this.#box.Size.y, slots === 1 ? 0 : scaledRadius);
     } else {
       ctx.arc(position.x, position.y, scaledRadius, 0, 2 * Math.PI);
     }
     ctx.fill();
     ctx.stroke();
+    if (slots > 1) {
+      ctx.fillStyle = style.borderColor;
+      for (let i = 0; i < slots; i++) {
+        const slot = arraySlotCenter(this.#box, slots, i);
+        ctx.beginPath();
+        ctx.arc(slot.x, slot.y, scaledRadius * 0.4, 0, 2 * Math.PI);
+        ctx.fill();
+      }
+    }
     return this.#box;
   }
 };
@@ -1834,331 +1980,480 @@ var BoxStyle = class {
   }
 };
 
-// src/popup.ts
-var Popup = class {
-  #title;
-  #options;
-  #content;
-  #onClose;
-  // Styling ================================================================
-  #buttonCSS;
-  // Runtime ================================================================
-  #popup;
-  #keyHandler;
-  constructor(config) {
-    this.#title = config.title;
-    this.#options = config.options;
-    this.#content = config.content;
-    this.#onClose = config.onClose;
-    this.#buttonCSS = config.buttonCSS === void 0 ? "flex-grow: 1; margin-right: 8px;" : config.buttonCSS;
-    this.#popup = null;
-    this.#keyHandler = null;
-  }
-  Hide() {
-    if (this.#popup === null) {
-      return;
-    }
-    if (this.#keyHandler !== null) {
-      document.removeEventListener("keydown", this.#keyHandler, true);
-      this.#keyHandler = null;
-    }
-    document.body.removeChild(this.#popup);
-    this.#popup = null;
+// src/styles/cursor.ts
+var CursorStyle = /* @__PURE__ */ ((CursorStyle2) => {
+  CursorStyle2["Default"] = "default";
+  CursorStyle2["Pointer"] = "pointer";
+  CursorStyle2["Grab"] = "grab";
+  CursorStyle2["Grabbing"] = "grabbing";
+  CursorStyle2["Wait"] = "wait";
+  CursorStyle2["Help"] = "help";
+  CursorStyle2["Crosshair"] = "crosshair";
+  CursorStyle2["Cell"] = "cell";
+  CursorStyle2["Text"] = "text";
+  CursorStyle2["Move"] = "move";
+  CursorStyle2["NotAllowed"] = "not-allowed";
+  CursorStyle2["ZoomIn"] = "zoom-in";
+  CursorStyle2["ZoomOut"] = "zoom-out";
+  CursorStyle2["None"] = "none";
+  CursorStyle2["ContextMenu"] = "context-menu";
+  CursorStyle2["EWResize"] = "ew-resize";
+  return CursorStyle2;
+})(CursorStyle || {});
+
+// src/styles/bevel.ts
+function drawBevel(ctx, box, scale, colors, sunken) {
+  const width2 = Math.max(1, 2 * scale);
+  const half = width2 / 2;
+  const left = box.Position.x + half;
+  const top = box.Position.y + half;
+  const right = box.Position.x + box.Size.x - half;
+  const bottom = box.Position.y + box.Size.y - half;
+  ctx.save();
+  ctx.lineWidth = width2;
+  ctx.lineCap = "square";
+  ctx.strokeStyle = sunken ? colors.Dark : colors.Light;
+  ctx.beginPath();
+  ctx.moveTo(left, bottom);
+  ctx.lineTo(left, top);
+  ctx.lineTo(right, top);
+  ctx.stroke();
+  ctx.strokeStyle = sunken ? colors.Light : colors.Dark;
+  ctx.beginPath();
+  ctx.moveTo(right, top);
+  ctx.lineTo(right, bottom);
+  ctx.lineTo(left, bottom);
+  ctx.stroke();
+  ctx.restore();
+}
+
+// src/widgets/field.ts
+function widgetFont(scale) {
+  return `${Theme.Widget.FontSize * scale}px ${Theme.FontFamily}`;
+}
+function fieldBackground(look) {
+  if (look.background !== void 0) {
+    return look.background;
   }
-  #close(option) {
-    this.Hide();
-    if (this.#onClose !== void 0) {
-      this.#onClose(option);
-    }
+  if (look.input) {
+    return look.hovered ? Theme.Widget.Input.HoverBackgroundColor : Theme.Widget.Input.BackgroundColor;
   }
-  Show() {
-    this.#popup = document.createElement("div");
-    this.#popup.style.cssText = "position:absolute;top:0;width:100%;display:flex;height:100%;justify-content:center;align-items:center;background-color:#00000070;";
-    document.body.appendChild(this.#popup);
-    const container = document.createElement("div");
-    container.style.cssText = "background-color:#000;color:white;font-family:Verdana;border-radius:8px;padding:16px;";
-    this.#popup.appendChild(container);
-    const title = document.createElement("h2");
-    title.textContent = this.#title;
-    title.style.cssText = "margin-top:0;margin-bottom:16px;";
-    container.appendChild(title);
-    if (this.#content !== void 0) {
-      container.appendChild(this.#content());
-    }
-    const buttonContainer = document.createElement("div");
-    buttonContainer.style.cssText = "margin-top:16px;justify-content:space-around;align-items:center;flex-direction:row;display:flex;";
-    container.appendChild(buttonContainer);
-    for (let i = 0; i < this.#options.length; i++) {
-      const button = document.createElement("button");
-      button.style.cssText = this.#buttonCSS;
-      button.textContent = this.#options[i];
-      button.onclick = () => this.#close(this.#options[i]);
-      buttonContainer.appendChild(button);
-    }
-    this.#keyHandler = (e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        this.#close(this.#options.length > 0 ? this.#options[0] : null);
-      } else if (e.key === "Escape") {
-        e.preventDefault();
-        this.#close(null);
-      }
-      e.stopPropagation();
-    };
-    document.addEventListener("keydown", this.#keyHandler, true);
+  if (look.pressed) {
+    return Theme.Widget.Button.Click.BackgroundColor;
   }
-};
-
-// src/styles/textBox.ts
-function TextBoxStyleWithFallback(input, fallback) {
-  return {
-    box: BoxStyleWithFallback(input?.box, fallback?.box),
-    text: TextStyleFallback(input?.text, fallback?.text),
-    textAlign: input?.textAlign === void 0 ? fallback?.textAlign : input?.textAlign,
-    textBaseline: input?.textBaseline === void 0 ? fallback?.textBaseline : input?.textBaseline
-  };
+  return look.hovered ? Theme.Widget.Hover.BackgroundColor : Theme.Widget.BackgroundColor;
 }
-var TextBoxStyle = class {
-  #box;
-  #text;
-  #textAlign;
-  #textBaseline;
-  constructor(config) {
-    this.#box = new BoxStyle(config?.box);
-    this.#text = new TextStyle(config?.text);
-    this.#textAlign = config?.textAlign === void 0 ? "center" /* Center */ : config.textAlign;
-    this.#textBaseline = config?.textBaseline === void 0 ? "middle" /* Middle */ : config.textBaseline;
-  }
-  Draw(ctx, box, scale, text) {
-    this.#box.Draw(ctx, box, scale);
-    ctx.textAlign = this.#textAlign;
-    ctx.textBaseline = this.#textBaseline;
-    this.#text.setupStyle(ctx, scale);
-    ctx.fillText(
-      text,
-      box.Position.x + box.Size.x / 2,
-      box.Position.y + box.Size.y / 2
-    );
+function drawFieldBox(ctx, box, scale, look) {
+  ctx.fillStyle = fieldBackground(look);
+  ctx.beginPath();
+  ctx.roundRect(box.Position.x, box.Position.y, box.Size.x, box.Size.y, Theme.Widget.Border.Radius * scale);
+  ctx.fill();
+  if (Theme.Widget.Border.Size > 0) {
+    ctx.strokeStyle = look.border ?? Theme.Widget.Border.Color;
+    ctx.lineWidth = Theme.Widget.Border.Size * scale;
+    ctx.stroke();
   }
-  DrawUnderline(ctx, box, scale, text) {
-    this.#box.DrawUnderline(ctx, box, scale);
-    ctx.textAlign = this.#textAlign;
-    ctx.textBaseline = this.#textBaseline;
-    this.#text.setupStyle(ctx, scale);
+  if (Theme.Widget.Bevel !== null) {
+    drawBevel(ctx, box, scale, Theme.Widget.Bevel, look.input === true || look.pressed === true);
+  }
+}
+function drawField(ctx, box, scale, look) {
+  drawFieldBox(ctx, box, scale, look);
+  drawFieldText(ctx, box, scale, look);
+}
+function drawFieldText(ctx, box, scale, look) {
+  const padding = Theme.Widget.Padding * scale;
+  const middle = box.Position.y + box.Size.y / 2;
+  const textColor = look.textColor ?? (look.input ? Theme.Widget.Input.FontColor : Theme.Widget.FontColor);
+  ctx.font = widgetFont(scale);
+  ctx.textBaseline = "middle";
+  if (look.label === void 0 || look.label === "") {
+    ctx.textAlign = "center";
+    ctx.fillStyle = textColor;
     ctx.fillText(
-      text,
+      fitString(ctx, look.value, box.Size.x - padding * 2),
       box.Position.x + box.Size.x / 2,
-      box.Position.y + box.Size.y / 2
+      middle
     );
+    return;
   }
-  setTextColor(color) {
-    this.#text.setColor(color);
-  }
-  setBoxColor(color) {
-    this.#box.setColor(color);
-  }
-  setBorderColor(color) {
-    this.#box.setBorderColor(color);
+  const room = box.Size.x - padding * 2;
+  const label = fitString(ctx, look.label, room / 2);
+  const labelWidth = ctx.measureText(label).width;
+  ctx.textAlign = "left";
+  ctx.fillStyle = look.textColor ?? Theme.Widget.LabelColor;
+  ctx.fillText(label, box.Position.x + padding, middle);
+  ctx.textAlign = "right";
+  ctx.fillStyle = textColor;
+  ctx.fillText(
+    fitString(ctx, look.value, room - labelWidth - padding),
+    box.Position.x + box.Size.x - padding,
+    middle
+  );
+}
+
+// src/widgets/inplace.ts
+function editInPlace(config) {
+  const canvas = config.canvas;
+  if (canvas === null) {
+    return null;
   }
-};
+  const rect = canvas.getBoundingClientRect();
+  const sx = canvas.width > 0 ? rect.width / canvas.width : 1;
+  const sy = canvas.height > 0 ? rect.height / canvas.height : 1;
+  const input = document.createElement("input");
+  input.type = "text";
+  input.value = config.value;
+  input.style.cssText = [
+    "position: fixed",
+    `left: ${rect.left + config.box.Position.x * sx}px`,
+    `top: ${rect.top + config.box.Position.y * sy}px`,
+    `width: ${config.box.Size.x * sx}px`,
+    `height: ${config.box.Size.y * sy}px`,
+    "box-sizing: border-box",
+    "margin: 0",
+    `padding: 0 ${Theme.Widget.Padding * config.scale}px`,
+    `font: ${Theme.Widget.FontSize * config.scale * sy}px ${Theme.FontFamily}`,
+    `color: ${Theme.Widget.FontColor}`,
+    `background: ${Theme.Widget.Hover.BackgroundColor}`,
+    `border: ${Theme.Widget.Border.Size * config.scale}px solid ${Theme.Widget.Border.Color}`,
+    `border-radius: ${Theme.Widget.Border.Radius * config.scale}px`,
+    "outline: none",
+    "z-index: 1000"
+  ].join(";");
+  let done = false;
+  const finish = (keep) => {
+    if (done) {
+      return;
+    }
+    done = true;
+    input.remove();
+    if (keep) {
+      config.onCommit(input.value);
+    }
+    requestRender();
+  };
+  input.addEventListener("keydown", (event) => {
+    event.stopPropagation();
+    if (event.key === "Enter") {
+      event.preventDefault();
+      finish(true);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      finish(false);
+    }
+  });
+  input.addEventListener("blur", () => finish(true));
+  document.body.appendChild(input);
+  input.focus();
+  input.select();
+  return input;
+}
 
 // src/widgets/widget.ts
 var width = 150;
 var height = 25;
-function startingWidgetValue(node, property, configured, fallback) {
-  if (configured !== void 0) {
-    return configured;
+var WidgetBase = class {
+  #hidden = false;
+  #disabled = false;
+  #hovered = false;
+  #pressed = false;
+  #box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
+  #canvas = null;
+  #scale = 1;
+  Draw(ctx, box, scale, mousePosition) {
+    this.#box = { Position: { x: box.Position.x, y: box.Position.y }, Size: { x: box.Size.x, y: box.Size.y } };
+    this.#canvas = ctx.canvas ?? null;
+    this.#scale = scale;
+    this.#hovered = !this.#disabled && mousePosition !== void 0 && InBox(box, mousePosition);
+    ctx.save();
+    if (this.#disabled) {
+      ctx.globalAlpha *= 0.4;
+    }
+    this.render(ctx, box, scale);
+    ctx.restore();
+  }
+  PointerDown(pointer) {
+    if (this.#disabled) {
+      return;
+    }
+    this.#pressed = true;
+    this.onPointerDown(pointer);
+    requestRender();
   }
-  if (property !== void 0 && property !== null) {
-    const existing = node.getProperty(property);
-    if (existing !== void 0 && existing !== null) {
-      return existing;
+  PointerMove(pointer) {
+    if (!this.#pressed) {
+      return;
     }
+    this.onPointerMove(pointer);
+    requestRender();
   }
-  return fallback;
-}
-
-// src/widgets/number.ts
-var NumberWidget = class {
+  PointerUp(pointer) {
+    if (!this.#pressed) {
+      return;
+    }
+    this.#pressed = false;
+    this.onPointerUp(pointer);
+    if (pointer.inside) {
+      this.onClick(pointer);
+    }
+    requestRender();
+  }
+  Cursor() {
+    return "pointer" /* Pointer */;
+  }
+  Hidden() {
+    return this.#hidden;
+  }
+  setHidden(hidden) {
+    this.#hidden = hidden;
+    requestRender();
+  }
+  Disabled() {
+    return this.#disabled;
+  }
+  setDisabled(disabled) {
+    this.#disabled = disabled;
+    if (disabled) {
+      this.#pressed = false;
+    }
+    requestRender();
+  }
+  hovered() {
+    return this.#hovered;
+  }
+  pressed() {
+    return this.#pressed;
+  }
+  /**
+   * Where the widget was last drawn, in canvas pixels.
+   */
+  box() {
+    return this.#box;
+  }
+  canvas() {
+    return this.#canvas;
+  }
+  scale() {
+    return this.#scale;
+  }
+  onPointerDown(pointer) {
+  }
+  onPointerMove(pointer) {
+  }
+  onPointerUp(pointer) {
+  }
+  /**
+   * A press and release that both landed on the widget.
+   */
+  onClick(pointer) {
+  }
+};
+function startingWidgetValue(node, property, configured, fallback) {
+  if (configured !== void 0) {
+    return configured;
+  }
+  if (property !== void 0 && property !== null) {
+    const existing = node.getProperty(property);
+    if (existing !== void 0 && existing !== null) {
+      return existing;
+    }
+  }
+  return fallback;
+}
+
+// src/widgets/value.ts
+var ValueWidget = class extends WidgetBase {
   #node;
-  #nodeProperty;
+  #property;
   #value;
-  #idleBoxStyle;
-  #highlightBoxStyle;
-  #text;
+  #label;
+  #width;
   #callback;
-  constructor(node, config) {
-    this.#value = 0;
-    this.#text = "0";
+  #onInput;
+  constructor(node, config, fallback) {
+    super();
     this.#node = node;
-    this.#nodeProperty = config?.property;
-    this.#idleBoxStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.idleBoxStyle, {
-      box: {
-        color: Theme.Widget.BackgroundColor,
-        border: {
-          size: Theme.Widget.Border.Size,
-          color: Theme.Widget.Border.Color
-        },
-        radius: Theme.Widget.Border.Radius
-      },
-      text: { color: Theme.Widget.FontColor }
-    }));
-    this.#highlightBoxStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.highlightBoxStyle, {
-      box: {
-        color: Theme.Widget.Hover.BackgroundColor,
-        border: {
-          size: Theme.Widget.Border.Size,
-          color: Theme.Widget.Border.Color
-        },
-        radius: Theme.Widget.Border.Radius
-      },
-      text: { color: Theme.Widget.FontColor }
-    }));
-    this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, 0));
+    this.#property = config?.property;
+    this.#label = config?.label ?? "";
+    this.#width = config?.width ?? width;
+    this.#value = startingWidgetValue(node, this.#property, config?.value, fallback);
     this.#callback = config?.callback;
-    if (this.#nodeProperty !== void 0) {
-      this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
-        this.Set(newVal);
-      });
+    this.#onInput = config?.onInput;
+    if (this.#property !== void 0) {
+      node.setProperty(this.#property, this.#value);
+      node.addPropertyChangeListener(this.#property, (_, next) => this.setValue(next));
     }
   }
   Size() {
-    return { "x": width, "y": height };
+    return { x: this.#width, y: height };
   }
-  Set(newNumber) {
-    if (Object.is(this.#value, newNumber)) {
+  value() {
+    return this.#value;
+  }
+  /**
+   * Shows a new value without treating it as a person's edit: no callback
+   * and no edit event.
+   */
+  setValue(value) {
+    if (this.equal(value, this.#value)) {
       return;
     }
-    this.#value = newNumber;
-    if (this.#nodeProperty !== void 0) {
-      this.#node.setProperty(this.#nodeProperty, this.#value);
+    this.#value = value;
+    this.valueChanged();
+    if (this.#property !== void 0) {
+      this.#node.setProperty(this.#property, value);
     }
-    if (this.#callback !== void 0) {
-      this.#callback(this.#value);
+    requestRender();
+  }
+  label() {
+    return this.#label;
+  }
+  setLabel(label) {
+    this.#label = label;
+    requestRender();
+  }
+  node() {
+    return this.#node;
+  }
+  input(value) {
+    this.setValue(value);
+    this.#onInput?.(value);
+  }
+  /**
+   * Ends a person's edit. Nothing is reported when they ended where they
+   * started.
+   */
+  commit(value, startedAt) {
+    this.setValue(value);
+    if (this.equal(value, startedAt)) {
+      return;
+    }
+    if (this.#property !== void 0) {
+      this.#node.editProperty(this.#property, value);
     }
-    this.#text = "" + parseFloat(this.#value.toPrecision(6));
+    this.#callback?.(value);
   }
-  ClickStart() {
+  valueChanged() {
   }
-  ClickEnd() {
-    let input = null;
-    const setOption = "Set";
-    const cancelOption = "Cancel";
-    const popup = new Popup({
-      title: "Set Number",
-      options: [setOption, cancelOption],
-      content: () => {
-        const container = document.createElement("div");
-        input = document.createElement("input");
-        input.type = "number";
-        input.valueAsNumber = this.#value;
-        container.append(input);
-        return container;
-      },
-      onClose: (button) => {
-        if (button !== setOption || input === null) {
-          return;
+  equal(a, b) {
+    return Object.is(a, b);
+  }
+};
+
+// src/widgets/number.ts
+var DRAG_THRESHOLD = 3;
+var NumberWidget = class extends ValueWidget {
+  #step;
+  #integer;
+  #min;
+  #max;
+  #startX = 0;
+  #startValue = 0;
+  #dragging = false;
+  #dragged = false;
+  constructor(node, config) {
+    super(node, config, 0);
+    this.#step = config?.step;
+    this.#integer = config?.integer === true;
+    this.#min = config?.min ?? -Infinity;
+    this.#max = config?.max ?? Infinity;
+  }
+  Cursor() {
+    return "ew-resize" /* EWResize */;
+  }
+  render(ctx, box, scale) {
+    drawField(ctx, box, scale, {
+      input: true,
+      hovered: this.hovered() || this.pressed(),
+      label: this.label(),
+      value: formatNumber(this.value())
+    });
+  }
+  onPointerDown(pointer) {
+    this.#startX = pointer.position.x;
+    this.#startValue = this.value();
+    this.#dragging = false;
+    this.#dragged = false;
+  }
+  onPointerMove(pointer) {
+    const dx = pointer.position.x - this.#startX;
+    if (!this.#dragging && Math.abs(dx) < DRAG_THRESHOLD) {
+      return;
+    }
+    this.#dragging = true;
+    this.input(this.#clean(this.#startValue + dx * this.#stepFor(this.#startValue)));
+  }
+  onPointerUp() {
+    this.#dragged = this.#dragging;
+    if (this.#dragging) {
+      this.#dragging = false;
+      this.commit(this.value(), this.#startValue);
+    }
+  }
+  onClick() {
+    if (this.#dragged) {
+      return;
+    }
+    const before = this.value();
+    editInPlace({
+      canvas: this.canvas(),
+      box: this.box(),
+      scale: this.scale(),
+      value: String(before),
+      onCommit: (text) => {
+        const parsed = Number.parseFloat(text);
+        if (Number.isFinite(parsed)) {
+          this.commit(this.#clean(parsed), before);
         }
-        this.Set(input.valueAsNumber);
       }
     });
-    popup.Show();
   }
-  Draw(ctx, position, scale, mousePosition) {
-    const box = {
-      Position: { x: 0, y: 0 },
-      Size: {
-        x: width * scale,
-        y: height * scale
-      }
-    };
-    CopyVector2(box.Position, position);
-    let style = this.#idleBoxStyle;
-    if (mousePosition !== void 0) {
-      if (InBox(box, mousePosition)) {
-        style = this.#highlightBoxStyle;
-      }
+  #stepFor(value) {
+    if (this.#step !== void 0) {
+      return this.#step;
     }
-    style.DrawUnderline(ctx, box, scale, this.#text);
-    return box;
+    return Math.max(Math.abs(value) * 0.01, this.#integer ? 0.1 : 0.01);
+  }
+  #clean(value) {
+    const rounded = this.#integer ? Math.round(value) : value;
+    return Math.min(this.#max, Math.max(this.#min, rounded));
   }
 };
+function formatNumber(value) {
+  return "" + parseFloat(value.toPrecision(6));
+}
 
 // src/widgets/button.ts
-var ButtonWidget = class {
+var ButtonWidget = class extends WidgetBase {
   #text;
-  #idleStyle;
-  #hoverStyle;
-  #clickStyle;
   #callback;
-  #gettingClicked;
+  #width;
   constructor(config) {
-    this.#text = config?.text === void 0 ? "Button" : config?.text;
+    super();
+    this.#text = config?.text ?? "Button";
     this.#callback = config?.callback;
-    this.#gettingClicked = false;
-    this.#idleStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.idleStyle, {
-      box: {
-        color: Theme.Widget.BackgroundColor,
-        border: {
-          size: Theme.Widget.Border.Size,
-          color: Theme.Widget.Border.Color
-        }
-      },
-      text: { color: Theme.Widget.FontColor }
-    }));
-    this.#hoverStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.hoverStyle, {
-      box: {
-        color: Theme.Widget.Hover.BackgroundColor,
-        border: {
-          size: Theme.Widget.Border.Size,
-          color: Theme.Widget.Border.Color
-        }
-      },
-      text: { color: Theme.Widget.FontColor }
-    }));
-    this.#clickStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.clickStyle, {
-      box: {
-        color: Theme.Widget.Button.Click.BackgroundColor,
-        border: {
-          size: Theme.Widget.Border.Size,
-          color: Theme.Widget.Border.Color
-        }
-      },
-      text: { color: Theme.Widget.FontColor }
-    }));
+    this.#width = config?.width ?? width;
   }
   Size() {
-    return { "x": width, "y": height };
+    return { x: this.#width, y: height };
   }
-  Draw(ctx, position, scale, mousePosition) {
-    const box = {
-      Position: { x: 0, y: 0 },
-      Size: {
-        x: width * scale,
-        y: height * scale
-      }
-    };
-    CopyVector2(box.Position, position);
-    let style = this.#idleStyle;
-    if (mousePosition !== void 0 && !this.#gettingClicked) {
-      if (InBox(box, mousePosition)) {
-        style = this.#hoverStyle;
-      }
-    }
-    if (this.#gettingClicked) {
-      style = this.#clickStyle;
-    }
-    style.Draw(ctx, box, scale, this.#text);
-    return box;
+  text() {
+    return this.#text;
+  }
+  setText(text) {
+    this.#text = text;
+    requestRender();
   }
-  ClickStart() {
-    this.#gettingClicked = true;
+  render(ctx, box, scale) {
+    drawField(ctx, box, scale, {
+      hovered: this.hovered(),
+      pressed: this.pressed(),
+      value: this.#text
+    });
   }
-  ClickEnd() {
-    this.#gettingClicked = false;
-    if (this.#callback !== void 0) {
-      this.#callback();
-    }
+  onClick() {
+    this.#callback?.();
   }
 };
 
@@ -2173,500 +2468,214 @@ function contrastColor(color) {
   }
   return "white";
 }
-var ColorWidget = class {
-  #node;
-  #nodeProperty;
-  #value;
+var picker = null;
+function sharedPicker() {
+  if (picker === null || !picker.isConnected) {
+    picker = document.createElement("input");
+    picker.type = "color";
+    document.body.appendChild(picker);
+  }
+  return picker;
+}
+var ColorWidget = class extends ValueWidget {
   #contrast;
-  #textBoxStyle;
-  #callback;
   constructor(node, config) {
-    this.#node = node;
-    this.#nodeProperty = config?.property;
-    this.#callback = config?.callback;
-    this.#value = startingWidgetValue(node, this.#nodeProperty, config?.value, "#000000");
-    this.#contrast = contrastColor(this.#value);
-    this.#textBoxStyle = new TextBoxStyle({
-      box: {
-        color: this.#value,
-        border: {
-          color: this.#contrast,
-          size: Theme.Widget.Border.Size
-        }
-      },
-      text: config?.textStyle
+    super(node, config, "#000000");
+    this.#contrast = contrastColor(this.value());
+  }
+  valueChanged() {
+    this.#contrast = contrastColor(this.value());
+  }
+  render(ctx, box, scale) {
+    drawField(ctx, box, scale, {
+      input: true,
+      hovered: this.hovered(),
+      label: this.label(),
+      value: this.value(),
+      background: this.value(),
+      border: this.#contrast,
+      textColor: this.#contrast
     });
-    if (this.#nodeProperty !== void 0) {
-      this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
-        this.Set(newVal);
-      });
-    }
-  }
-  Size() {
-    return { "x": width, "y": height };
   }
-  Set(value) {
-    if (this.#value === value) {
+  onClick() {
+    const canvas = this.canvas();
+    if (canvas === null) {
       return;
     }
-    this.#value = value;
-    if (this.#callback !== void 0) {
-      this.#callback(this.#value);
-    }
-    if (this.#nodeProperty !== void 0) {
-      this.#node.setProperty(this.#nodeProperty, this.#value);
-    }
-    this.#contrast = contrastColor(this.#value);
-    this.#textBoxStyle.setBoxColor(this.#value);
-    this.#textBoxStyle.setBorderColor(this.#contrast);
-    this.#textBoxStyle.setTextColor(this.#contrast);
-  }
-  ClickStart() {
-  }
-  ClickEnd() {
-    let input = null;
-    const popup = new Popup({
-      title: "Set Color",
-      options: ["Set", "Cancel"],
-      content: () => {
-        const container = document.createElement("div");
-        input = document.createElement("input");
-        input.type = "color";
-        input.value = this.#value;
-        input.name = "color";
-        container.append(input);
-        const label = document.createElement("label");
-        label.htmlFor = "color";
-        label.textContent = "Color";
-        container.append(label);
-        return container;
-      },
-      onClose: (button) => {
-        if (button !== "Set" || input === null) {
-          return;
-        }
-        this.Set(input.value);
-      }
-    });
-    popup.Show();
-  }
-  Draw(ctx, position, scale, mousePosition) {
-    const box = {
-      Position: { x: 0, y: 0 },
-      Size: {
-        x: width * scale,
-        y: height * scale
-      }
-    };
-    CopyVector2(box.Position, position);
-    this.#textBoxStyle.Draw(ctx, box, scale, this.#value);
-    return box;
+    const before = this.value();
+    const alpha = before.slice(7);
+    const box = this.box();
+    const rect = canvas.getBoundingClientRect();
+    const sx = canvas.width > 0 ? rect.width / canvas.width : 1;
+    const sy = canvas.height > 0 ? rect.height / canvas.height : 1;
+    const input = sharedPicker();
+    input.style.cssText = [
+      "position: fixed",
+      `left: ${rect.left + box.Position.x * sx}px`,
+      `top: ${rect.top + box.Position.y * sy}px`,
+      `width: ${box.Size.x * sx}px`,
+      `height: ${box.Size.y * sy}px`,
+      "opacity: 0",
+      "pointer-events: none",
+      "border: 0",
+      "padding: 0"
+    ].join(";");
+    input.value = before.slice(0, 7);
+    input.oninput = () => this.input(input.value + alpha);
+    input.onchange = () => this.commit(input.value + alpha, before);
+    input.getBoundingClientRect();
+    input.click();
   }
 };
 
 // src/widgets/slider.ts
-var SliderWidget = class {
-  // Data Variables =========================================================
+var SliderWidget = class extends ValueWidget {
   #min;
   #max;
-  #value;
-  #text;
   #snapIncrement;
-  #node;
-  #nodeProperty;
-  // Callbacks ==============================================================
-  #change;
-  #release;
-  // Styling Variables ======================================================
-  #textStyle;
-  #backgroundColor;
-  #borderColor;
   #fillColor;
-  // Runtime Variables ======================================================
-  #lastMousePosition;
-  #clickStartMousePosition;
-  #clicking;
+  #startValue = 0;
   constructor(node, config) {
-    this.#node = node;
-    this.#value = 0;
-    this.#min = config?.min === void 0 ? 0 : config?.min;
-    this.#max = config?.max === void 0 ? 1 : config?.max;
+    const min = config?.min ?? 0;
+    const max = config?.max ?? 1;
+    super(node, { ...config, value: config?.value === void 0 ? void 0 : Clamp(config.value, min, max) }, min);
+    this.#min = min;
+    this.#max = max;
     this.#snapIncrement = config?.snapIncrement;
-    this.#nodeProperty = config?.property;
-    this.#text = "";
-    this.#release = config?.release;
-    this.#backgroundColor = config?.backgroundColor === void 0 ? Theme.Widget.BackgroundColor : config?.backgroundColor;
-    this.#fillColor = config?.fillColor === void 0 ? Theme.Widget.Slider.FillColor : config?.fillColor;
-    this.#borderColor = config?.borderColor === void 0 ? Theme.Widget.Border.Color : config?.borderColor;
-    this.#textStyle = new TextStyle(TextStyleFallback(config?.textStyle, {
-      color: Theme.Widget.FontColor
-    }));
-    this.#lastMousePosition = Zero();
-    this.#clickStartMousePosition = Zero();
-    this.#clicking = false;
-    if (config?.property !== void 0 && config?.property !== null) {
-      node.addPropertyChangeListener(config.property, (oldVal, newVal) => {
-        this.SetValue(newVal);
-      });
-    }
-    this.SetValue(startingWidgetValue(node, this.#nodeProperty, config?.value, 0));
-    this.#change = config?.change;
+    this.#fillColor = config?.fillColor;
   }
-  SetValue(newValue) {
-    const cleanedValue = Clamp(newValue, this.#min, this.#max);
-    if (Object.is(this.#value, cleanedValue)) {
-      return;
-    }
-    this.#value = cleanedValue;
-    if (this.#nodeProperty) {
-      this.#node.setProperty(this.#nodeProperty, this.#value);
-    }
-    this.#text = this.#value.toFixed(3);
-    if (this.#change !== void 0) {
-      this.#change(this.#value);
-    }
-  }
-  Size() {
-    return { "x": width, "y": height };
-  }
-  ClickStart() {
-    this.#clicking = true;
-    CopyVector2(this.#clickStartMousePosition, this.#lastMousePosition);
+  Cursor() {
+    return "ew-resize" /* EWResize */;
   }
-  ClickEnd() {
-    this.#clicking = false;
-    if (this.#release !== void 0) {
-      this.#release(this.#value);
-    }
+  setValue(value) {
+    super.setValue(Clamp(value, this.#min, this.#max));
   }
-  Draw(ctx, position, scale, mousePosition) {
-    const scaledWidth = width * scale;
-    const scaledHeight = height * scale;
-    const scaledBorderThickness = Theme.Widget.Border.Size * scale;
-    ctx.fillStyle = this.#backgroundColor;
-    ctx.strokeStyle = this.#borderColor;
-    ctx.lineWidth = scaledBorderThickness;
+  render(ctx, box, scale) {
+    drawFieldBox(ctx, box, scale, { input: true, hovered: this.hovered() || this.pressed(), value: "" });
+    const border = Theme.Widget.Border.Size * scale;
+    const fill = Clamp01((this.value() - this.#min) / (this.#max - this.#min));
+    ctx.fillStyle = this.#fillColor ?? Theme.Widget.Slider.FillColor;
     ctx.beginPath();
     ctx.roundRect(
-      position.x,
-      position.y,
-      scaledWidth,
-      scaledHeight,
+      box.Position.x + border / 2,
+      box.Position.y + border / 2,
+      Math.max(0, box.Size.x * fill - border),
+      box.Size.y - border,
       Theme.Widget.Border.Radius * scale
     );
     ctx.fill();
-    ctx.stroke();
-    const fill = Clamp01((this.#value - this.#min) / (this.#max - this.#min));
-    ctx.fillStyle = this.#fillColor;
-    ctx.beginPath();
-    ctx.roundRect(
-      position.x + scaledBorderThickness / 2,
-      position.y + scaledBorderThickness / 2,
-      scaledWidth * fill - scaledBorderThickness,
-      scaledHeight - scaledBorderThickness,
-      Theme.Widget.Border.Radius * scale
-    );
-    ctx.fill();
-    ctx.textAlign = "center" /* Center */;
-    ctx.textBaseline = "middle" /* Middle */;
-    this.#textStyle.setupStyle(ctx, scale);
-    ctx.fillText(
-      this.#text,
-      position.x + scaledWidth / 2,
-      position.y + scaledHeight / 2
-    );
-    if (mousePosition !== void 0) {
-      CopyVector2(this.#lastMousePosition, mousePosition);
-      if (this.#clicking) {
-        const min = position.x + scaledBorderThickness / 2;
-        const max = min + scaledWidth - scaledBorderThickness;
-        const p = Clamp01((this.#lastMousePosition.x - min) / (max - min));
-        let value = p * (this.#max - this.#min) + this.#min;
-        if (this.#snapIncrement !== void 0) {
-          value = Math.round(value / this.#snapIncrement) * this.#snapIncrement;
-        }
-        this.SetValue(value);
-      }
+    drawFieldText(ctx, box, scale, {
+      input: true,
+      hovered: false,
+      label: this.label(),
+      value: formatNumber(Number(this.value().toFixed(3)))
+    });
+  }
+  onPointerDown(pointer) {
+    this.#startValue = this.value();
+    this.input(this.#valueAt(pointer.position.x));
+  }
+  onPointerMove(pointer) {
+    this.input(this.#valueAt(pointer.position.x));
+  }
+  onPointerUp() {
+    this.commit(this.value(), this.#startValue);
+  }
+  #valueAt(x) {
+    const box = this.box();
+    const border = Theme.Widget.Border.Size * this.scale();
+    const min = box.Position.x + border / 2;
+    const max = min + box.Size.x - border;
+    const p = Clamp01((x - min) / (max - min));
+    let value = p * (this.#max - this.#min) + this.#min;
+    if (this.#snapIncrement !== void 0) {
+      value = Math.round(value / this.#snapIncrement) * this.#snapIncrement;
     }
-    return {
-      Position: { x: position.x, y: position.y },
-      Size: {
-        x: scaledWidth,
-        y: scaledHeight
-      }
-    };
+    return Clamp(value, this.#min, this.#max);
   }
 };
 
-// src/popups/string.ts
-function SetStringPopup(config) {
-  let input = null;
-  return new Popup({
-    title: config.title,
-    options: ["Set", "Cancel"],
-    content: () => {
-      const container = document.createElement("div");
-      input = document.createElement("input");
-      input.value = config.startingValue;
-      container.append(input);
-      return container;
-    },
-    onClose: (button) => {
-      if (button !== "Set" || input === null) {
-        if (config.onCancel) {
-          config.onCancel();
-        }
-        return;
-      }
-      config.onUpdate(input.value);
-    }
-  });
-}
-
 // src/widgets/string.ts
-var StringWidget = class {
-  #value;
-  #idleStyle;
-  #hoverStyle;
-  #callback;
-  #node;
-  #nodeProperty;
+var StringWidget = class extends ValueWidget {
   constructor(node, config) {
-    this.#value = "";
-    this.#node = node;
-    this.#nodeProperty = config?.property;
-    this.#idleStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.textBoxStyle, {
-      box: {
-        color: Theme.Widget.BackgroundColor,
-        border: {
-          size: Theme.Widget.Border.Size,
-          color: Theme.Widget.Border.Color
-        },
-        radius: Theme.Widget.Border.Radius
-      },
-      text: { color: Theme.Widget.FontColor }
-    }));
-    this.#hoverStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.textBoxStyle, {
-      box: {
-        color: Theme.Widget.Hover.BackgroundColor,
-        border: {
-          size: Theme.Widget.Border.Size,
-          color: Theme.Widget.Border.Color
-        },
-        radius: Theme.Widget.Border.Radius
-      },
-      text: { color: Theme.Widget.FontColor }
-    }));
-    this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, ""));
-    this.#callback = config?.callback;
-    if (this.#nodeProperty !== void 0) {
-      this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
-        this.Set(newVal);
-      });
-    }
+    super(node, config, "");
   }
-  Size() {
-    return { "x": width, "y": height };
+  Cursor() {
+    return "text" /* Text */;
   }
-  Set(value) {
-    if (this.#value === value) {
-      return;
-    }
-    this.#value = value;
-    if (this.#nodeProperty !== void 0) {
-      this.#node.setProperty(this.#nodeProperty, this.#value);
-    }
-    if (this.#callback !== void 0) {
-      this.#callback(this.#value);
-    }
-  }
-  ClickStart() {
-  }
-  ClickEnd() {
-    const popup = SetStringPopup({
-      title: "Set String",
-      startingValue: this.#value,
-      onUpdate: (value) => {
-        this.Set(value);
-      }
+  render(ctx, box, scale) {
+    drawField(ctx, box, scale, {
+      input: true,
+      hovered: this.hovered(),
+      label: this.label(),
+      value: this.value()
     });
-    popup.Show();
   }
-  Draw(ctx, position, scale, mousePosition) {
-    const box = {
-      Position: { x: 0, y: 0 },
-      Size: {
-        x: width * scale,
-        y: height * scale
-      }
-    };
-    CopyVector2(box.Position, position);
-    let style = this.#idleStyle;
-    if (mousePosition !== void 0) {
-      if (InBox(box, mousePosition)) {
-        style = this.#hoverStyle;
-      }
-    }
-    style.DrawUnderline(ctx, box, scale, fitString(ctx, this.#value, box.Size.x - 20 * scale));
-    return box;
+  onClick() {
+    const before = this.value();
+    editInPlace({
+      canvas: this.canvas(),
+      box: this.box(),
+      scale: this.scale(),
+      value: before,
+      onCommit: (text) => this.commit(text, before)
+    });
   }
 };
 
 // src/widgets/toggle.ts
-var ToggleStyle = class {
-  #idleStyle;
-  #hoverStyle;
-  #lightColor;
-  #lightBorderColor;
-  #lightBlur;
-  #box;
-  constructor(config) {
-    this.#idleStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.idle, {
-      box: {
-        color: Theme.Widget.BackgroundColor,
-        border: {
-          size: Theme.Widget.Border.Size,
-          color: Theme.Widget.Border.Color
-        }
-      },
-      text: { color: Theme.Widget.FontColor }
-    }));
-    this.#hoverStyle = new TextBoxStyle(TextBoxStyleWithFallback(config?.hover, {
-      box: {
-        color: Theme.Widget.Hover.BackgroundColor,
-        border: {
-          size: Theme.Widget.Border.Size,
-          color: Theme.Widget.Border.Color
-        }
-      },
-      text: { color: Theme.Widget.FontColor }
-    }));
-    this.#lightColor = config?.lightColor === void 0 ? "#222222" : config.lightColor;
-    this.#lightBorderColor = config?.lightBorderColor === void 0 ? "black" : config.lightBorderColor;
-    this.#lightBlur = config?.lightBlur;
-    this.#box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
-  }
-  Draw(ctx, pos, scale, text, mousePosition) {
-    const scaledWidth = width * scale;
-    const scaledHeight = height * scale;
-    this.#box.Size.x = scaledWidth;
-    this.#box.Size.y = scaledHeight;
-    CopyVector2(this.#box.Position, pos);
-    let style = this.#idleStyle;
-    if (mousePosition !== void 0) {
-      if (InBox(this.#box, mousePosition)) {
-        style = this.#hoverStyle;
-      }
-    }
-    style.Draw(ctx, this.#box, scale, text);
-    const lightScale = Math.min(scaledWidth, scaledHeight);
-    ctx.strokeStyle = this.#lightBorderColor;
-    ctx.fillStyle = this.#lightColor;
-    ctx.beginPath();
-    ctx.roundRect(
-      pos.x + lightScale * 0.2,
-      pos.y + lightScale * 0.2,
-      lightScale * 0.6,
-      lightScale * 0.6,
-      Theme.Widget.Border.Radius * scale
-    );
-    if (this.#lightBlur) {
-      ctx.shadowBlur = this.#lightBlur * scale;
-      ctx.shadowColor = this.#lightColor;
-    }
-    ctx.fill();
-    if (this.#lightBlur) {
-      ctx.shadowBlur = 0;
-    }
-    return this.#box;
-  }
-};
-var ToggleWidget = class {
-  #node;
-  #nodeProperty;
-  #value;
-  #text;
-  #enabledStyle;
-  #disabledStyle;
-  #callback;
+var ToggleWidget = class extends ValueWidget {
+  #onColor;
+  #offColor;
   constructor(node, config) {
-    this.#value = false;
-    this.#node = node;
-    this.#nodeProperty = config?.property;
-    this.#text = config?.text === void 0 ? "Toggle" : config?.text;
-    this.#enabledStyle = new ToggleStyle({
-      idle: TextBoxStyleWithFallback(config?.enabledStyle?.idle, {
-        box: {
-          color: Theme.Widget.BackgroundColor,
-          border: {
-            size: Theme.Widget.Border.Size,
-            color: Theme.Widget.Border.Color
-          }
-        },
-        text: { color: Theme.Widget.FontColor }
-      }),
-      lightBorderColor: config?.enabledStyle?.lightBorderColor,
-      lightColor: config?.enabledStyle?.lightColor === void 0 ? "#00FF00" : config?.enabledStyle?.lightColor,
-      lightBlur: config?.enabledStyle?.lightBlur === void 0 ? 15 : config?.enabledStyle?.lightBlur
-    });
-    this.#disabledStyle = new ToggleStyle({
-      idle: TextBoxStyleWithFallback(config?.disabledStyle?.idle, {
-        box: {
-          color: Theme.Widget.BackgroundColor,
-          border: {
-            size: Theme.Widget.Border.Size,
-            color: Theme.Widget.Border.Color
-          }
-        },
-        text: { color: Theme.Widget.FontColor }
-      }),
-      lightBorderColor: config?.disabledStyle?.lightBorderColor,
-      lightColor: config?.disabledStyle?.lightColor === void 0 ? "#004400" : config?.enabledStyle?.lightColor
-    });
-    this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, false));
-    this.#callback = config?.callback;
-    if (this.#nodeProperty !== void 0) {
-      this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
-        this.Set(newVal);
-      });
-    }
-  }
-  Size() {
-    return { "x": width, "y": height };
-  }
-  Draw(ctx, position, scale, mousePosition) {
-    let style = this.#value ? this.#enabledStyle : this.#disabledStyle;
-    return style.Draw(ctx, position, scale, this.#text, mousePosition);
+    super(node, { ...config, label: config?.label ?? "Toggle" }, false);
+    this.#onColor = config?.onColor ?? "#00FF00";
+    this.#offColor = config?.offColor ?? "#004400";
   }
   Toggle() {
-    this.Set(!this.#value);
-  }
-  Set(value) {
-    if (this.#value === value) {
-      return;
-    }
-    this.#value = value;
-    if (this.#nodeProperty !== void 0) {
-      this.#node.setProperty(this.#nodeProperty, this.#value);
-    }
-    if (this.#callback !== void 0) {
-      this.#callback(this.#value);
+    const before = this.value();
+    this.commit(!before, before);
+  }
+  render(ctx, box, scale) {
+    drawFieldBox(ctx, box, scale, { hovered: this.hovered(), value: "" });
+    const light = Math.min(box.Size.x, box.Size.y) * 0.6;
+    const inset = (box.Size.y - light) / 2;
+    const on = this.value();
+    ctx.fillStyle = on ? this.#onColor : this.#offColor;
+    ctx.beginPath();
+    ctx.roundRect(box.Position.x + inset, box.Position.y + inset, light, light, Theme.Widget.Border.Radius * scale);
+    if (on) {
+      ctx.shadowBlur = 15 * scale;
+      ctx.shadowColor = this.#onColor;
     }
+    ctx.fill();
+    ctx.shadowBlur = 0;
+    const textLeft = box.Position.x + inset * 2 + light;
+    ctx.font = widgetFont(scale);
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = Theme.Widget.FontColor;
+    const room = box.Position.x + box.Size.x - textLeft - inset;
+    ctx.fillText(
+      fitString(ctx, this.label(), room),
+      textLeft + room / 2,
+      box.Position.y + box.Size.y / 2
+    );
   }
-  ClickStart() {
+  onClick() {
     this.Toggle();
   }
-  ClickEnd() {
-  }
 };
 
 // src/widgets/image.ts
-var ImageWidget = class {
+var ImageWidget = class extends WidgetBase {
   #url;
+  #ownedUrl;
   #image;
   #maxWidth;
   #maxHeight;
   constructor(config) {
+    super();
     this.#maxWidth = config?.maxWidth === void 0 ? 150 : config?.maxWidth;
     this.#maxHeight = config?.maxHeight === void 0 ? 150 : config?.maxHeight;
     if (config?.image) {
@@ -2676,16 +2685,23 @@ var ImageWidget = class {
     }
   }
   SetBlob(blob) {
-    const urlCreator = window.URL || window.webkitURL;
-    const imageUrl = urlCreator.createObjectURL(blob);
-    this.SetUrl(imageUrl);
+    const url = URL.createObjectURL(blob);
+    this.SetUrl(url);
+    this.#ownedUrl = url;
   }
   SetUrl(url) {
+    if (this.#ownedUrl !== void 0) {
+      URL.revokeObjectURL(this.#ownedUrl);
+      this.#ownedUrl = void 0;
+    }
     this.#image = void 0;
     this.#url = url;
     const img = document.createElement("img");
     img.src = url;
     img.onload = () => {
+      if (this.#url !== url) {
+        return;
+      }
       this.#image = img;
       requestRender();
     };
@@ -2693,6 +2709,9 @@ var ImageWidget = class {
       console.log("error loading image:", url, event);
     };
   }
+  Cursor() {
+    return "default" /* Default */;
+  }
   Size() {
     if (this.#image === void 0) {
       return { "x": 0, "y": 0 };
@@ -2712,88 +2731,178 @@ var ImageWidget = class {
       "y": adjust * this.#image.height
     };
   }
-  ClickStart() {
-  }
-  ClickEnd() {
-  }
-  Draw(ctx, position, scale, mousePosition) {
-    const size = this.Size();
-    const box = {
-      Position: { x: 0, y: 0 },
-      Size: {
-        x: size.x * scale,
-        y: size.y * scale
-      }
-    };
-    CopyVector2(box.Position, position);
+  render(ctx, box, scale) {
     if (!this.#image) {
-      return box;
+      return;
     }
+    const size = this.Size();
+    const w = size.x * scale;
+    const h = size.y * scale;
     ctx.drawImage(
       this.#image,
-      position.x,
-      position.y,
-      box.Size.x,
-      box.Size.y
+      box.Position.x + (box.Size.x - w) / 2,
+      box.Position.y,
+      w,
+      h
     );
-    return box;
   }
 };
 
 // src/widgets/text.ts
-var TextWidget = class {
+var TextWidget = class extends WidgetBase {
   #value;
-  #callback;
-  #node;
-  #nodeProperty;
   #size;
+  #styleConfig;
+  #styledForTheme = -1;
+  #followTheme() {
+    if (this.#styledForTheme === themeVersion()) {
+      return;
+    }
+    this.#styledForTheme = themeVersion();
+    const style = this.#value.style();
+    style.setColor(this.#styleConfig?.color ?? Theme.Widget.FontColor);
+    style.setSize(this.#styleConfig?.size ?? Theme.Note.FontSize);
+  }
   constructor(node, config) {
+    super();
     this.#size = Zero();
-    this.#node = node;
-    this.#nodeProperty = config?.property;
-    this.#value = new Text("", TextStyleFallback(config?.textBoxStyle, {
-      font: Theme.FontFamily,
-      color: Theme.Widget.FontColor,
-      size: Theme.Note.FontSize
-    }));
-    this.Set(config?.value === void 0 ? "" : config?.value);
-    this.#callback = config?.callback;
-    if (this.#nodeProperty !== void 0) {
-      this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
-        this.Set(newVal);
-      });
+    this.#styleConfig = config?.textBoxStyle;
+    this.#value = new Text("", TextStyleFallback(config?.textBoxStyle, {}));
+    this.#followTheme();
+    this.setText(config?.value ?? "");
+    const property = config?.property;
+    if (property !== void 0) {
+      const existing = node.getProperty(property);
+      if (existing !== void 0 && existing !== null) {
+        this.setText(String(existing));
+      }
+      node.addPropertyChangeListener(property, (_, next) => this.setText(String(next)));
     }
   }
+  Cursor() {
+    return "default" /* Default */;
+  }
   Size() {
     return this.#size;
   }
-  Set(value) {
+  text() {
+    return this.#value.get();
+  }
+  setText(value) {
     if (this.#value.get() === value) {
       return;
     }
     this.#value.set(value);
-    if (this.#nodeProperty !== void 0) {
-      this.#node.setProperty(this.#nodeProperty, value);
+    requestRender();
+  }
+  render(ctx, box, scale) {
+    this.#followTheme();
+    this.#value.size(ctx, 1, this.#size);
+    ctx.textAlign = "left";
+    this.#value.render(ctx, scale, box.Position);
+  }
+};
+
+// src/widgets/row.ts
+var RowWidget = class extends WidgetBase {
+  #children;
+  #grow;
+  #gap;
+  #boxes = [];
+  #captured = null;
+  #capturedBox = null;
+  #mouse;
+  constructor(children, config) {
+    super();
+    this.#children = children;
+    this.#grow = config?.grow ?? children.map(() => 1);
+    this.#gap = config?.gap ?? Theme.Widget.Gap;
+  }
+  children() {
+    return this.#children;
+  }
+  Size() {
+    const shown = this.#shown();
+    let x = 0;
+    let y = 0;
+    for (const child of shown) {
+      const size = child.Size();
+      x += size.x;
+      y = Math.max(y, size.y);
+    }
+    x += Math.max(0, shown.length - 1) * this.#gap;
+    return { x, y };
+  }
+  Cursor() {
+    const over = this.#captured ?? this.#childAt(this.#mouse);
+    return over?.Cursor?.() ?? "default" /* Default */;
+  }
+  Draw(ctx, box, scale, mousePosition) {
+    this.#mouse = mousePosition;
+    super.Draw(ctx, box, scale, mousePosition);
+  }
+  render(ctx, box, scale) {
+    const shown = this.#shown();
+    const gap = this.#gap * scale;
+    const natural = shown.reduce((sum, child) => sum + child.Size().x * scale, 0);
+    const extra = Math.max(0, box.Size.x - natural - gap * Math.max(0, shown.length - 1));
+    const totalGrow = shown.reduce((sum, child) => sum + this.#growOf(child), 0);
+    this.#boxes = this.#children.map(() => null);
+    let x = box.Position.x;
+    for (const child of shown) {
+      const size = child.Size();
+      const share = totalGrow > 0 ? extra * (this.#growOf(child) / totalGrow) : 0;
+      const childBox = {
+        Position: { x, y: box.Position.y + (box.Size.y - size.y * scale) / 2 },
+        Size: { x: size.x * scale + share, y: size.y * scale }
+      };
+      this.#boxes[this.#children.indexOf(child)] = childBox;
+      child.Draw(ctx, childBox, scale, this.#captured === null || this.#captured === child ? this.#mouse : void 0);
+      x += childBox.Size.x + gap;
     }
-    if (this.#callback !== void 0) {
-      this.#callback(value);
+  }
+  onPointerDown(pointer) {
+    const child = this.#childAt(pointer.position);
+    if (child === null || child.Disabled?.()) {
+      return;
     }
+    this.#captured = child;
+    this.#capturedBox = this.#boxes[this.#children.indexOf(child)];
+    child.PointerDown?.(this.#forChild(pointer));
   }
-  ClickStart() {
+  onPointerMove(pointer) {
+    this.#captured?.PointerMove?.(this.#forChild(pointer));
   }
-  ClickEnd() {
+  onPointerUp(pointer) {
+    const child = this.#captured;
+    const forChild = this.#forChild(pointer);
+    this.#captured = null;
+    this.#capturedBox = null;
+    child?.PointerUp?.(forChild);
   }
-  Draw(ctx, position, scale, mousePosition) {
-    this.#value.size(ctx, scale, this.#size);
-    const box = {
-      Position: { x: 0, y: 0 },
-      Size: this.#size
+  #forChild(pointer) {
+    return {
+      position: pointer.position,
+      inside: this.#capturedBox !== null && InBox(this.#capturedBox, pointer.position)
     };
-    CopyVector2(box.Position, position);
-    this.#value.size(ctx, 1, this.#size);
-    ctx.textAlign = "left";
-    this.#value.render(ctx, scale, box.Position);
-    return box;
+  }
+  #childAt(position) {
+    if (position === void 0) {
+      return null;
+    }
+    for (let i = 0; i < this.#children.length; i++) {
+      const box = this.#boxes[i];
+      if (box && InBox(box, position)) {
+        return this.#children[i];
+      }
+    }
+    return null;
+  }
+  #shown() {
+    return this.#children.filter((child) => !child.Hidden?.());
+  }
+  #growOf(child) {
+    return this.#grow[this.#children.indexOf(child)] ?? 1;
   }
 };
 
@@ -2813,6 +2922,9 @@ var WidgetFactory = class {
     }
     return builder(node, config);
   }
+  createFromConfig(node, config) {
+    return this.create(node, config.type, config.config);
+  }
 };
 var GlobalWidgetFactory = new WidgetFactory();
 GlobalWidgetFactory.register("button", (node, config) => new ButtonWidget(config));
@@ -2823,6 +2935,10 @@ GlobalWidgetFactory.register("string", (node, config) => new StringWidget(node,
 GlobalWidgetFactory.register("toggle", (node, config) => new ToggleWidget(node, config));
 GlobalWidgetFactory.register("image", (node, config) => new ImageWidget(config));
 GlobalWidgetFactory.register("text", (node, config) => new TextWidget(node, config));
+GlobalWidgetFactory.register("row", (node, config) => new RowWidget(
+  (config?.widgets ?? []).map((child) => GlobalWidgetFactory.createFromConfig(node, child)),
+  config
+));
 
 // src/connection.ts
 var BACKWARD_PORT_STUB = 30;
@@ -2907,7 +3023,7 @@ var Connection = class {
       return;
     }
     if (this.#inNode !== null) {
-      const inPortBox = this.#inNode.inputPortPosition(this.#inNodePortIndex);
+      const inPortBox = this.#inSlotBox();
       if (inPortBox === void 0) {
         return;
       }
@@ -2966,14 +3082,14 @@ var Connection = class {
     this.clearInput();
     this.clearOutput();
   }
-  setInput(node, portIndex, replace) {
+  setInput(node, portIndex, replace, insertAt) {
     this.#inNode = node;
     this.#inNodePortIndex = portIndex;
     const port = this.#inNode.inputPort(portIndex);
     if (!!replace && port.connections().length > 0) {
       port.replaceConnection(this, 0);
     } else {
-      port.addConnection(this);
+      port.addConnection(this, insertAt);
     }
   }
   setOutput(node, portIndex) {
@@ -2991,9 +3107,33 @@ var Connection = class {
     this.#outNode = null;
     this.#outNodePortIndex = -1;
   }
+  /**
+   * The part of the input port this wire lands on: the whole port, or its
+   * own slot on a port holding several wires.
+   */
+  #inSlotBox() {
+    if (this.#inNode === null) {
+      return void 0;
+    }
+    const box = this.#inNode.inputPortPosition(this.#inNodePortIndex);
+    const port = this.#inNode.inputPort(this.#inNodePortIndex);
+    const slots = port.slots();
+    if (box === void 0 || slots === 1) {
+      return box;
+    }
+    const index = port.connections().indexOf(this);
+    if (index === -1) {
+      return box;
+    }
+    const height2 = box.Size.y / slots;
+    return {
+      Position: { x: box.Position.x, y: box.Position.y + index * height2 },
+      Size: { x: box.Size.x, y: height2 }
+    };
+  }
   mouseOverPort(mousePosition) {
     if (this.#inNode !== null) {
-      const inPortBox = this.#inNode.inputPortPosition(this.#inNodePortIndex);
+      const inPortBox = this.#inSlotBox();
       if (inPortBox !== void 0 && InBox(inPortBox, mousePosition)) {
         return this.#inNode.inputPort(this.#inNodePortIndex);
       }
@@ -3070,7 +3210,10 @@ var Camera = class {
 // src/organize.ts
 var widthSpacing = 100;
 var heightSpacing = 50;
+var laneSpacing = 25;
+var pieceSpacing = 150;
 var orderingSweeps = 8;
+var placementSweeps = 8;
 function topologicalOrder(sorting, upstream) {
   const visited = /* @__PURE__ */ new Set();
   const order = new Array();
@@ -3092,11 +3235,7 @@ function topologicalOrder(sorting, upstream) {
         continue;
       }
       visited.add(top.node);
-      const feeders = upstream.get(top.node);
-      if (feeders === void 0) {
-        continue;
-      }
-      for (const feeder of feeders) {
+      for (const feeder of upstream.get(top.node) ?? []) {
         if (!visited.has(feeder)) {
           stack.push({ node: feeder, expanded: false });
         }
@@ -3105,43 +3244,103 @@ function topologicalOrder(sorting, upstream) {
   }
   return order;
 }
+function consumersOf(sorting, upstream) {
+  const downstream = /* @__PURE__ */ new Map();
+  for (const node of sorting) {
+    downstream.set(node, []);
+  }
+  for (const node of sorting) {
+    for (const feeder of upstream.get(node) ?? []) {
+      const consumers = downstream.get(feeder);
+      if (consumers !== void 0 && !consumers.includes(node)) {
+        consumers.push(node);
+      }
+    }
+  }
+  return downstream;
+}
 function assignLayers(sorting, upstream) {
-  const order = topologicalOrder(sorting, upstream);
+  const downstream = consumersOf(sorting, upstream);
+  const order = topologicalOrder(sorting, downstream);
   const placed = /* @__PURE__ */ new Set();
-  const layerOf = /* @__PURE__ */ new Map();
+  const rank = /* @__PURE__ */ new Map();
   for (const node of order) {
-    let layer = 0;
-    for (const feeder of upstream.get(node) ?? []) {
-      if (placed.has(feeder)) {
-        layer = Math.max(layer, layerOf.get(feeder) + 1);
+    let r = 0;
+    for (const consumer of downstream.get(node) ?? []) {
+      if (placed.has(consumer)) {
+        r = Math.max(r, rank.get(consumer) + 1);
       }
     }
-    layerOf.set(node, layer);
+    rank.set(node, r);
     placed.add(node);
   }
   let deepest = 0;
-  for (const layer of layerOf.values()) {
-    deepest = Math.max(deepest, layer);
+  for (const r of rank.values()) {
+    deepest = Math.max(deepest, r);
   }
-  const layers = new Array(deepest + 1);
-  for (let i = 0; i < layers.length; i++) {
-    layers[i] = new Array();
+  const layerOf = /* @__PURE__ */ new Map();
+  for (const node of sorting) {
+    layerOf.set(node, deepest - rank.get(node));
   }
-  for (const node of order) {
-    layers[layerOf.get(node)].push(node);
+  for (const node of sorting) {
+    const layer = layerOf.get(node);
+    if ((downstream.get(node) ?? []).some((c) => layerOf.get(c) > layer)) {
+      continue;
+    }
+    let pulled = -1;
+    for (const feeder of upstream.get(node) ?? []) {
+      const feederLayer = layerOf.get(feeder);
+      if (feederLayer !== void 0 && feederLayer < layer) {
+        pulled = Math.max(pulled, feederLayer + 1);
+      }
+    }
+    if (pulled >= 0) {
+      layerOf.set(node, pulled);
+    }
+  }
+  const used = [...new Set(layerOf.values())].sort((a, b) => a - b);
+  const compact = /* @__PURE__ */ new Map();
+  used.forEach((layer, i) => compact.set(layer, i));
+  const layers = used.map(() => new Array());
+  for (const node of sorting) {
+    const layer = compact.get(layerOf.get(node));
+    layerOf.set(node, layer);
+    layers[layer].push(node);
   }
   return { layers, layerOf };
 }
-function orderWithinLayers(layout, upstream, downstream) {
+function crossingsOf(layout, downstream) {
   const slotOf = /* @__PURE__ */ new Map();
-  const recordSlots = () => {
-    for (const layer of layout.layers) {
-      for (let i = 0; i < layer.length; i++) {
-        slotOf.set(layer[i], i);
+  for (const layer of layout.layers) {
+    layer.forEach((node, slot) => slotOf.set(node, slot));
+  }
+  let total = 0;
+  for (let i = 0; i + 1 < layout.layers.length; i++) {
+    const spans = new Array();
+    for (const node of layout.layers[i]) {
+      for (const consumer of downstream.get(node) ?? []) {
+        if (layout.layerOf.get(consumer) === i + 1) {
+          spans.push([slotOf.get(node), slotOf.get(consumer)]);
+        }
       }
     }
-  };
-  recordSlots();
+    for (let a = 0; a < spans.length; a++) {
+      for (let b = a + 1; b < spans.length; b++) {
+        if ((spans[a][0] - spans[b][0]) * (spans[a][1] - spans[b][1]) < 0) {
+          total++;
+        }
+      }
+    }
+  }
+  return total;
+}
+function orderWithinLayers(layout, upstream, downstream) {
+  const slotOf = /* @__PURE__ */ new Map();
+  for (const layer of layout.layers) {
+    for (let i = 0; i < layer.length; i++) {
+      slotOf.set(layer[i], i);
+    }
+  }
   const meanSlot = (node, neighbours, layer) => {
     let total = 0;
     let count = 0;
@@ -3161,22 +3360,377 @@ function orderWithinLayers(layout, upstream, downstream) {
       if (adjacent < 0 || adjacent >= layout.layers.length) {
         continue;
       }
-      const layer = layout.layers[index];
-      const keys = /* @__PURE__ */ new Map();
-      for (const node of layer) {
-        const mean = meanSlot(node, neighbours, adjacent);
-        keys.set(node, mean === -1 ? slotOf.get(node) : mean);
+      const layer = layout.layers[index];
+      const keys = /* @__PURE__ */ new Map();
+      for (const node of layer) {
+        const mean = meanSlot(node, neighbours, adjacent);
+        keys.set(node, mean === -1 ? slotOf.get(node) : mean);
+      }
+      layer.sort((a, b) => keys.get(a) - keys.get(b));
+      for (let s = 0; s < layer.length; s++) {
+        slotOf.set(layer[s], s);
+      }
+    }
+  };
+  let best = layout.layers.map((layer) => layer.slice());
+  let fewest = crossingsOf(layout, downstream);
+  for (let i = 0; i < orderingSweeps && fewest > 0; i++) {
+    sweep(upstream, -1);
+    sweep(downstream, 1);
+    const crossings = crossingsOf(layout, downstream);
+    if (crossings < fewest) {
+      fewest = crossings;
+      best = layout.layers.map((layer) => layer.slice());
+    }
+  }
+  for (let i = 0; i < best.length; i++) {
+    layout.layers[i] = best[i];
+  }
+}
+function findPieces(sorting, upstream, downstream) {
+  const rankOf = /* @__PURE__ */ new Map();
+  sorting.forEach((node, i) => rankOf.set(node, i));
+  const seen = /* @__PURE__ */ new Set();
+  const pieces = new Array();
+  for (const start of sorting) {
+    if (seen.has(start)) {
+      continue;
+    }
+    seen.add(start);
+    const piece = new Array();
+    const stack = [start];
+    while (stack.length > 0) {
+      const node = stack.pop();
+      piece.push(node);
+      for (const neighbour of [...upstream.get(node) ?? [], ...downstream.get(node) ?? []]) {
+        if (rankOf.has(neighbour) && !seen.has(neighbour)) {
+          seen.add(neighbour);
+          stack.push(neighbour);
+        }
+      }
+    }
+    piece.sort((a, b) => rankOf.get(a) - rankOf.get(b));
+    pieces.push(piece);
+  }
+  return pieces;
+}
+function treeRoot(piece, downstream) {
+  let root;
+  for (const node of piece) {
+    const consumers = downstream.get(node) ?? [];
+    if (consumers.length > 1) {
+      return void 0;
+    }
+    if (consumers.length === 0) {
+      if (root !== void 0) {
+        return void 0;
+      }
+      root = node;
+    }
+  }
+  return root;
+}
+function columnXs(widths) {
+  const xs = new Array();
+  let x = 0;
+  for (const width2 of widths) {
+    xs.push(x);
+    x += width2 + widthSpacing;
+  }
+  return xs;
+}
+function layoutTree(root, upstream, sizes) {
+  const children = (node) => [...new Set(upstream.get(node) ?? [])];
+  const depthOf = /* @__PURE__ */ new Map([[root, 0]]);
+  const preorder = new Array();
+  const stack = [root];
+  let deepest = 0;
+  while (stack.length > 0) {
+    const node = stack.pop();
+    preorder.push(node);
+    const kids = children(node);
+    for (let i = kids.length - 1; i >= 0; i--) {
+      const depth = depthOf.get(node) + 1;
+      depthOf.set(kids[i], depth);
+      deepest = Math.max(deepest, depth);
+      stack.push(kids[i]);
+    }
+  }
+  const widths = new Array(deepest + 1).fill(0);
+  for (const [node, depth] of depthOf) {
+    widths[deepest - depth] = Math.max(widths[deepest - depth], sizes.get(node).x);
+  }
+  const xs = columnXs(widths);
+  const band = /* @__PURE__ */ new Map();
+  const topInBand = /* @__PURE__ */ new Map();
+  const childOffset = /* @__PURE__ */ new Map();
+  for (let i = preorder.length - 1; i >= 0; i--) {
+    const node = preorder[i];
+    const height2 = sizes.get(node).y;
+    const kids = children(node);
+    if (kids.length === 0) {
+      band.set(node, height2);
+      topInBand.set(node, 0);
+      continue;
+    }
+    let offset = 0;
+    for (const kid of kids) {
+      childOffset.set(kid, offset);
+      offset += band.get(kid) + heightSpacing;
+    }
+    const centre = (kid) => childOffset.get(kid) + topInBand.get(kid) + sizes.get(kid).y / 2;
+    let top = (centre(kids[0]) + centre(kids[kids.length - 1])) / 2 - height2 / 2;
+    let shift = 0;
+    if (top < 0) {
+      shift = -top;
+      top = 0;
+      for (const kid of kids) {
+        childOffset.set(kid, childOffset.get(kid) + shift);
+      }
+    }
+    band.set(node, Math.max(offset - heightSpacing + shift, top + height2));
+    topInBand.set(node, top);
+  }
+  const positions = /* @__PURE__ */ new Map();
+  const bandTop = /* @__PURE__ */ new Map([[root, 0]]);
+  for (const node of preorder) {
+    const column = deepest - depthOf.get(node);
+    const size = sizes.get(node);
+    positions.set(node, {
+      x: xs[column] + (widths[column] - size.x) / 2,
+      y: bandTop.get(node) + topInBand.get(node)
+    });
+    for (const kid of children(node)) {
+      bandTop.set(kid, bandTop.get(node) + childOffset.get(kid));
+    }
+  }
+  return positions;
+}
+function isotonic(targets) {
+  const blocks = new Array();
+  for (const target of targets) {
+    blocks.push({ sum: target, count: 1 });
+    while (blocks.length > 1) {
+      const last = blocks[blocks.length - 1];
+      const before = blocks[blocks.length - 2];
+      if (before.sum / before.count <= last.sum / last.count) {
+        break;
+      }
+      before.sum += last.sum;
+      before.count += last.count;
+      blocks.pop();
+    }
+  }
+  const result = new Array();
+  for (const block of blocks) {
+    for (let i = 0; i < block.count; i++) {
+      result.push(block.sum / block.count);
+    }
+  }
+  return result;
+}
+function median(values) {
+  const sorted = values.slice().sort((a, b) => a - b);
+  const middle = Math.floor(sorted.length / 2);
+  return sorted.length % 2 === 1 ? sorted[middle] : (sorted[middle - 1] + sorted[middle]) / 2;
+}
+function layoutLayered(piece, upstream, downstream, sizes) {
+  const layout = assignLayers(piece, upstream);
+  const up = /* @__PURE__ */ new Map();
+  const down = /* @__PURE__ */ new Map();
+  const heightOf = /* @__PURE__ */ new Map();
+  for (const node of piece) {
+    up.set(node, [...new Set(upstream.get(node) ?? [])]);
+    down.set(node, [...new Set(downstream.get(node) ?? [])]);
+    heightOf.set(node, sizes.get(node).y);
+  }
+  let nextLane = -1;
+  for (const from of piece) {
+    const fromLayer = layout.layerOf.get(from);
+    const consumers = down.get(from);
+    for (let c = 0; c < consumers.length; c++) {
+      const to = consumers[c];
+      const toLayer = layout.layerOf.get(to);
+      if (toLayer - fromLayer < 2) {
+        continue;
+      }
+      let previous = from;
+      for (let layer = fromLayer + 1; layer < toLayer; layer++) {
+        const lane = nextLane--;
+        layout.layerOf.set(lane, layer);
+        layout.layers[layer].push(lane);
+        heightOf.set(lane, 0);
+        up.set(lane, [previous]);
+        down.set(lane, []);
+        if (previous === from) {
+          consumers[c] = lane;
+        } else {
+          down.get(previous).push(lane);
+        }
+        previous = lane;
+      }
+      down.get(previous).push(to);
+      const feeders = up.get(to);
+      feeders[feeders.indexOf(from)] = previous;
+    }
+  }
+  const sequence = /* @__PURE__ */ new Map();
+  for (const sink of piece) {
+    if (down.get(sink).length > 0) {
+      continue;
+    }
+    const stack = [sink];
+    while (stack.length > 0) {
+      const node = stack.pop();
+      if (sequence.has(node)) {
+        continue;
+      }
+      sequence.set(node, sequence.size);
+      const feeders = up.get(node) ?? [];
+      for (let i = feeders.length - 1; i >= 0; i--) {
+        stack.push(feeders[i]);
       }
-      layer.sort((a, b) => keys.get(a) - keys.get(b));
-      for (let s = 0; s < layer.length; s++) {
-        slotOf.set(layer[s], s);
+    }
+  }
+  for (const layer of layout.layers) {
+    layer.sort((a, b) => (sequence.get(a) ?? Infinity) - (sequence.get(b) ?? Infinity));
+  }
+  orderWithinLayers(layout, up, down);
+  const gapAfter = (above, below) => above < 0 || below < 0 ? laneSpacing : heightSpacing;
+  const topOf = /* @__PURE__ */ new Map();
+  for (const layer of layout.layers) {
+    let y = 0;
+    for (let i = 0; i < layer.length; i++) {
+      topOf.set(layer[i], y);
+      y += heightOf.get(layer[i]) + (i + 1 < layer.length ? gapAfter(layer[i], layer[i + 1]) : 0);
+    }
+    for (const node of layer) {
+      topOf.set(node, topOf.get(node) - y / 2);
+    }
+  }
+  const centreOf = (node) => topOf.get(node) + heightOf.get(node) / 2;
+  const place = (layer, neighbours, adjacent) => {
+    const offsets = new Array();
+    const targets = new Array();
+    let offset = 0;
+    for (let i = 0; i < layer.length; i++) {
+      const node = layer[i];
+      const centres = (neighbours.get(node) ?? []).filter((n) => layout.layerOf.get(n) === adjacent).map(centreOf);
+      const desired = centres.length > 0 ? median(centres) - heightOf.get(node) / 2 : topOf.get(node);
+      offsets.push(offset);
+      targets.push(desired - offset);
+      if (i + 1 < layer.length) {
+        offset += heightOf.get(node) + gapAfter(node, layer[i + 1]);
       }
     }
+    const solved = isotonic(targets);
+    for (let i = 0; i < layer.length; i++) {
+      topOf.set(layer[i], solved[i] + offsets[i]);
+    }
   };
-  for (let i = 0; i < orderingSweeps; i++) {
-    sweep(upstream, -1);
-    sweep(downstream, 1);
+  for (let s = 0; s < placementSweeps; s++) {
+    if (s % 2 === 0) {
+      for (let i = 1; i < layout.layers.length; i++) {
+        place(layout.layers[i], up, i - 1);
+      }
+    } else {
+      for (let i = layout.layers.length - 2; i >= 0; i--) {
+        place(layout.layers[i], down, i + 1);
+      }
+    }
   }
+  const widths = layout.layers.map((layer) => layer.reduce((widest, node) => node < 0 ? widest : Math.max(widest, sizes.get(node).x), 0));
+  const xs = columnXs(widths);
+  const positions = /* @__PURE__ */ new Map();
+  for (const node of piece) {
+    const layer = layout.layerOf.get(node);
+    positions.set(node, {
+      x: xs[layer] + (widths[layer] - sizes.get(node).x) / 2,
+      y: topOf.get(node)
+    });
+  }
+  return positions;
+}
+function layoutLoose(loose, sizes) {
+  const columns = Math.ceil(Math.sqrt(loose.length));
+  const widths = new Array(columns).fill(0);
+  const heights = new Array(Math.ceil(loose.length / columns)).fill(0);
+  loose.forEach((node, i) => {
+    const size = sizes.get(node);
+    widths[i % columns] = Math.max(widths[i % columns], size.x);
+    heights[Math.floor(i / columns)] = Math.max(heights[Math.floor(i / columns)], size.y);
+  });
+  const xs = new Array();
+  let x = 0;
+  for (const width2 of widths) {
+    xs.push(x);
+    x += width2 + heightSpacing;
+  }
+  const ys = new Array();
+  let y = 0;
+  for (const height2 of heights) {
+    ys.push(y);
+    y += height2 + heightSpacing;
+  }
+  const positions = /* @__PURE__ */ new Map();
+  loose.forEach((node, i) => positions.set(node, { x: xs[i % columns], y: ys[Math.floor(i / columns)] }));
+  return positions;
+}
+function toBlock(positions, sizes) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const [node, position] of positions) {
+    const size = sizes.get(node);
+    minX = Math.min(minX, position.x);
+    minY = Math.min(minY, position.y);
+    maxX = Math.max(maxX, position.x + size.x);
+    maxY = Math.max(maxY, position.y + size.y);
+  }
+  const shifted = /* @__PURE__ */ new Map();
+  for (const [node, position] of positions) {
+    shifted.set(node, { x: position.x - minX, y: position.y - minY });
+  }
+  return { positions: shifted, size: { x: maxX - minX, y: maxY - minY } };
+}
+function layoutGraph(sorting, upstream, downstream, sizes) {
+  const blocks = new Array();
+  const loose = new Array();
+  for (const piece of findPieces(sorting, upstream, downstream)) {
+    if (piece.length === 1) {
+      loose.push(piece[0]);
+      continue;
+    }
+    const root = treeRoot(piece, downstream);
+    const positions2 = root !== void 0 ? layoutTree(root, upstream, sizes) : layoutLayered(piece, upstream, downstream, sizes);
+    blocks.push(toBlock(positions2, sizes));
+  }
+  blocks.sort((a, b) => b.size.y - a.size.y || b.size.x - a.size.x);
+  if (loose.length > 0) {
+    blocks.push(toBlock(layoutLoose(loose, sizes), sizes));
+  }
+  let area = 0;
+  let widest = 0;
+  for (const block of blocks) {
+    area += (block.size.x + pieceSpacing) * (block.size.y + pieceSpacing);
+    widest = Math.max(widest, block.size.x);
+  }
+  const rowWidth = Math.max(widest, Math.sqrt(area));
+  const positions = /* @__PURE__ */ new Map();
+  let x = 0;
+  let y = 0;
+  let rowHeight = 0;
+  for (const block of blocks) {
+    if (x > 0 && x + block.size.x > rowWidth) {
+      x = 0;
+      y += rowHeight + pieceSpacing;
+      rowHeight = 0;
+    }
+    for (const [node, position] of block.positions) {
+      positions.set(node, { x: position.x + x, y: position.y + y });
+    }
+    x += block.size.x + pieceSpacing;
+    rowHeight = Math.max(rowHeight, block.size.y);
+  }
+  return positions;
 }
 function Organize(ctx, graph, nodesToSort) {
   const nodes = graph.getNodes();
@@ -3185,9 +3739,6 @@ function Organize(ctx, graph, nodesToSort) {
   }
   const sorting = new Array();
   if (nodesToSort) {
-    if (nodesToSort.length < 2) {
-      return;
-    }
     for (const index of nodesToSort) {
       if (index >= 0 && index < nodes.length) {
         sorting.push(index);
@@ -3207,33 +3758,28 @@ function Organize(ctx, graph, nodesToSort) {
     nodeLUT.set(nodes[i], i);
   }
   const camera = new Camera();
-  const bounds = /* @__PURE__ */ new Map();
+  const sizes = /* @__PURE__ */ new Map();
   for (const index of sorting) {
-    bounds.set(index, nodes[index].calculateBounds(ctx, camera));
+    sizes.set(index, nodes[index].calculateBounds(ctx, camera).Size);
   }
   const upstream = /* @__PURE__ */ new Map();
-  const downstream = /* @__PURE__ */ new Map();
   for (const index of sorting) {
+    const node = nodes[index];
     const feeders = new Array();
-    for (const feeder of graph.connectedInputsNodeReferencesByIndex(index)) {
-      const feederIndex = nodeLUT.get(feeder);
-      if (feederIndex !== void 0 && inLayout.has(feederIndex) && feederIndex !== index) {
-        feeders.push(feederIndex);
+    for (let i = 0; i < node.inputs(); i++) {
+      for (const connection of node.inputPort(i).connections()) {
+        const feeder = connection.outNode();
+        const feederIndex = feeder === null ? void 0 : nodeLUT.get(feeder);
+        if (feederIndex !== void 0 && inLayout.has(feederIndex) && feederIndex !== index && !feeders.includes(feederIndex)) {
+          feeders.push(feederIndex);
+        }
       }
     }
     upstream.set(index, feeders);
-    const consumers = new Array();
-    for (const consumer of graph.connectedOutputsNodeReferences(index)) {
-      const consumerIndex = nodeLUT.get(consumer);
-      if (consumerIndex !== void 0 && inLayout.has(consumerIndex) && consumerIndex !== index) {
-        consumers.push(consumerIndex);
-      }
-    }
-    downstream.set(index, consumers);
   }
-  const layout = assignLayers(sorting, upstream);
-  orderWithinLayers(layout, upstream, downstream);
-  let anchor = { x: 0, y: 0 };
+  const downstream = consumersOf(sorting, upstream);
+  const positions = layoutGraph(sorting, upstream, downstream, sizes);
+  const anchor = { x: 0, y: 0 };
   for (const index of sorting) {
     const position = nodes[index].getPosition();
     anchor.x += position.x;
@@ -3241,19 +3787,14 @@ function Organize(ctx, graph, nodesToSort) {
   }
   anchor.x /= sorting.length;
   anchor.y /= sorting.length;
-  const layerWidths = layout.layers.map((layer) => layer.reduce((widest, node) => Math.max(widest, bounds.get(node).Size.x), 0));
-  const layerHeights = layout.layers.map((layer) => layer.reduce((total, node) => total + bounds.get(node).Size.y + heightSpacing, -heightSpacing));
-  const totalWidth = layerWidths.reduce((total, width2) => total + width2 + widthSpacing, -widthSpacing);
-  const tallest = layerHeights.reduce((tallest2, height2) => Math.max(tallest2, height2), 0);
-  let x = anchor.x - totalWidth / 2;
-  for (let i = 0; i < layout.layers.length; i++) {
-    let y = anchor.y - tallest / 2 + (tallest - layerHeights[i]) / 2;
-    for (const node of layout.layers[i]) {
-      const size = bounds.get(node).Size;
-      nodes[node].setPosition({ x: x + (layerWidths[i] - size.x) / 2, y });
-      y += size.y + heightSpacing;
-    }
-    x += layerWidths[i] + widthSpacing;
+  let right = 0;
+  let bottom = 0;
+  for (const [index, position] of positions) {
+    right = Math.max(right, position.x + sizes.get(index).x);
+    bottom = Math.max(bottom, position.y + sizes.get(index).y);
+  }
+  for (const [index, position] of positions) {
+    nodes[index].setPosition({ x: anchor.x - right / 2 + position.x, y: anchor.y - bottom / 2 + position.y });
   }
 }
 
@@ -3445,14 +3986,17 @@ var NodeSubsystem2 = class {
   #portHovering;
   #widgetHovering;
   #widgetCurrentlyClicking;
+  #widgetHoveringBox = null;
+  #capturedWidgetBox = null;
+  #capturedPointer = Zero();
   #cursor;
   #nodeFactory;
   #boxSelect;
   #boxSelectStart_graphSpace;
   #boxSelectEnd_graphSpace;
   #boxSelectionNodes;
-  #boxSelectStyle;
   #lastCtx;
+  #lastMousePosition;
   // LISTENERS ==============================================================
   #nodeRemovedCallbacks;
   #registeredNodeAddedCallbacks;
@@ -3477,14 +4021,6 @@ var NodeSubsystem2 = class {
     this.#boxSelectEnd_graphSpace = Zero();
     this.#boxSelectionNodes = new List();
     this.#lastCtx = null;
-    this.#boxSelectStyle = new BoxStyle({
-      border: {
-        color: Theme.BoxSelect.Color,
-        size: Theme.BoxSelect.Size
-      },
-      color: "rgba(0,0,0,0)",
-      radius: Theme.BoxSelect.Radius
-    });
   }
   addPublisher(identifier, publisher) {
     this.#nodeFactory.addPublisher(identifier, publisher);
@@ -3521,6 +4057,7 @@ var NodeSubsystem2 = class {
         }
         if (intersection.Widget !== void 0) {
           this.#widgetHovering = intersection.Widget;
+          this.#widgetHoveringBox = intersection.WidgetBox ?? null;
         }
         if (intersection.Port !== void 0 && intersection.Node !== void 0 && intersection.PortIndex !== void 0 && intersection.PortIsInput !== void 0) {
           this.#portHovering = {
@@ -3543,8 +4080,15 @@ var NodeSubsystem2 = class {
       hoveringSomething = true;
     }
     if (this.#widgetHovering !== null) {
-      this.#widgetHovering.ClickStart();
-      this.#widgetCurrentlyClicking = this.#widgetHovering;
+      if (!this.#widgetHovering.Disabled?.()) {
+        this.#widgetCurrentlyClicking = this.#widgetHovering;
+        this.#capturedWidgetBox = this.#widgetHoveringBox === null ? null : {
+          Position: { x: this.#widgetHoveringBox.Position.x, y: this.#widgetHoveringBox.Position.y },
+          Size: { x: this.#widgetHoveringBox.Size.x, y: this.#widgetHoveringBox.Size.y }
+        };
+        CopyVector2(this.#capturedPointer, mousePosition);
+        this.#widgetCurrentlyClicking.PointerDown?.(this.#widgetPointer());
+      }
       hoveringSomething = true;
     }
     if (this.#portHovering === null) {
@@ -3559,12 +4103,12 @@ var NodeSubsystem2 = class {
       return hoveringSomething || ctrlKey;
     }
     if (this.#portHovering.InputPort) {
-      for (let i = 0; i < this.#connections.length; i++) {
-        if (this.#connections[i].inPort() === this.#portHovering.Port) {
-          this.#connections[i].clearInput();
-          this.#connectionSelected = this.#connections[i];
-          break;
-        }
+      const port = this.#portHovering.Port;
+      const wires = port.connections();
+      const picked = wires.find((wire) => wire.mouseOverPort(mousePosition) === port) ?? wires[0];
+      if (picked !== void 0) {
+        picked.clearInput();
+        this.#connectionSelected = picked;
       }
     } else {
       let inNode = this.#portHovering.Node;
@@ -3584,7 +4128,19 @@ var NodeSubsystem2 = class {
     }
     return true;
   }
+  #widgetPointer() {
+    return {
+      position: { x: this.#capturedPointer.x, y: this.#capturedPointer.y },
+      inside: this.#capturedWidgetBox !== null && InBox(this.#capturedWidgetBox, this.#capturedPointer)
+    };
+  }
   mouseDragEvent(delta, scale) {
+    if (this.#widgetCurrentlyClicking !== null) {
+      this.#capturedPointer.x += delta.x;
+      this.#capturedPointer.y += delta.y;
+      this.#widgetCurrentlyClicking.PointerMove?.(this.#widgetPointer());
+      return true;
+    }
     let nodeMoved = false;
     VectorPool.run(() => {
       const scaledDelta = VectorPool.get();
@@ -3703,13 +4259,20 @@ var NodeSubsystem2 = class {
   }
   #firstCompatiblePort(node, side, against) {
     const count = side === "INPUT" /* Input */ ? node.inputs() : node.outputs();
+    let firstHidden = -1;
     for (let i = 0; i < count; i++) {
       const port = side === "INPUT" /* Input */ ? node.inputPort(i) : node.outputPort(i);
-      if (portsCompatible(port, against)) {
+      if (!portsCompatible(port, against)) {
+        continue;
+      }
+      if (!port.hidden()) {
         return i;
       }
+      if (firstHidden === -1) {
+        firstHidden = i;
+      }
     }
-    return -1;
+    return firstHidden;
   }
   clickEnd() {
     for (let i = 0; i < this.#nodesGrabbed.Count(); i++) {
@@ -3725,10 +4288,11 @@ var NodeSubsystem2 = class {
       this.#boxSelect = false;
     }
     if (this.#widgetCurrentlyClicking !== null) {
-      if (this.#widgetHovering === this.#widgetCurrentlyClicking) {
-        this.#widgetCurrentlyClicking.ClickEnd();
-      }
+      const widget = this.#widgetCurrentlyClicking;
+      const pointer = this.#widgetPointer();
       this.#widgetCurrentlyClicking = null;
+      this.#capturedWidgetBox = null;
+      widget.PointerUp?.(pointer);
     }
     if (this.#connectionSelected === null) {
       return;
@@ -3773,7 +4337,7 @@ var NodeSubsystem2 = class {
         inputPort.connections()[0].clearOutput();
         this.#removeConnection(inputPort.connections()[0], false);
       }
-      conn.setInput(this.#portHovering.Node, this.#portHovering.Index, replace);
+      conn.setInput(this.#portHovering.Node, this.#portHovering.Index, replace, this.#insertIndex());
     } else {
       conn.setOutput(this.#portHovering.Node, this.#portHovering.Index);
     }
@@ -4145,7 +4709,8 @@ var NodeSubsystem2 = class {
         }
         if (intersection.Widget !== void 0) {
           this.#widgetHovering = intersection.Widget;
-          this.#cursor = "pointer" /* Pointer */;
+          this.#widgetHoveringBox = intersection.WidgetBox ?? null;
+          this.#cursor = intersection.Widget.Disabled?.() ? "default" /* Default */ : intersection.Widget.Cursor?.() ?? "pointer" /* Pointer */;
         }
         if (intersection.Port !== void 0 && intersection.Node !== void 0 && intersection.PortIndex !== void 0 && intersection.PortIsInput !== void 0) {
           this.#portHovering = {
@@ -4168,6 +4733,9 @@ var NodeSubsystem2 = class {
       }
       this.#nodes[i].render(ctx, camera, state, mousePosition, this.#postProcessPass);
     }
+    if (this.#widgetCurrentlyClicking !== null) {
+      this.#cursor = this.#widgetCurrentlyClicking.Cursor?.() ?? "pointer" /* Pointer */;
+    }
   }
   #boxSelectionScreenspaceBox(camera) {
     const box = { Position: Zero(), Size: Zero() };
@@ -4176,29 +4744,174 @@ var NodeSubsystem2 = class {
     SubVector2(box.Size, box.Size, box.Position);
     return box;
   }
+  /**
+   * Where a wire being dropped on the hovered array input would go, or
+   * undefined when it is not over one.
+   */
+  #insertIndex() {
+    const hovering = this.#portHovering;
+    if (hovering === null || !hovering.InputPort || this.#lastMousePosition === void 0 || hovering.Port.getPortType() !== "INPUTARRAY" /* InputArray */) {
+      return void 0;
+    }
+    const box = hovering.Node.inputPortPosition(hovering.Index);
+    return arrayInsertIndex(box, hovering.Port.connections().length, this.#lastMousePosition.y);
+  }
+  #renderInsertMarker(ctx, camera) {
+    const hovering = this.#portHovering;
+    if (this.#connectionSelected === null || this.#connectionSelected.inPort() !== null || hovering === null) {
+      return;
+    }
+    const index = this.#insertIndex();
+    const count = hovering.Port.connections().length;
+    if (index === void 0 || count === 0) {
+      return;
+    }
+    const box = hovering.Node.inputPortPosition(hovering.Index);
+    const y = box.Position.y + index * box.Size.y / count;
+    const overhang = 6 * camera.zoom;
+    ctx.save();
+    ctx.strokeStyle = "#ffffff";
+    ctx.lineWidth = Math.max(1, 2 * camera.zoom);
+    ctx.beginPath();
+    ctx.moveTo(box.Position.x - overhang, y);
+    ctx.lineTo(box.Position.x + box.Size.x + overhang, y);
+    ctx.stroke();
+    ctx.restore();
+  }
   render(ctx, camera, mousePosition) {
     this.#lastCtx = ctx;
+    this.#lastMousePosition = mousePosition;
     this.#cursor = "default" /* Default */;
     const awaitingLayout = this.#nodes.some((node) => !node.hasBeenLaidOut());
+    for (const node of this.#nodes) {
+      if (node.hasBeenLaidOut()) {
+        node.placePorts(node.calculateBounds(ctx, camera), camera.zoom);
+      }
+    }
     TimeExecution("Render_Connections", () => {
       this.#renderConnections(ctx, camera, mousePosition);
     });
     TimeExecution("Render_Nodes", () => {
       this.#renderNodes(ctx, camera, mousePosition);
     });
+    this.#renderInsertMarker(ctx, camera);
     if (awaitingLayout) {
       requestRender();
     }
     if (this.#boxSelect) {
       const box = this.#boxSelectionScreenspaceBox(camera);
       ctx.setLineDash([Theme.BoxSelect.LineDashLength]);
-      this.#boxSelectStyle.Draw(ctx, box, 1);
+      new BoxStyle({
+        border: { color: Theme.BoxSelect.Color, size: Theme.BoxSelect.Size },
+        color: "rgba(0,0,0,0)",
+        radius: Theme.BoxSelect.Radius
+      }).Draw(ctx, box, 1);
       ctx.setLineDash([]);
     }
     return { cursorStyle: this.#cursor };
   }
 };
 
+// src/popup.ts
+var Popup = class {
+  #title;
+  #options;
+  #content;
+  #onClose;
+  // Styling ================================================================
+  #buttonCSS;
+  // Runtime ================================================================
+  #popup;
+  #keyHandler;
+  constructor(config) {
+    this.#title = config.title;
+    this.#options = config.options;
+    this.#content = config.content;
+    this.#onClose = config.onClose;
+    this.#buttonCSS = config.buttonCSS === void 0 ? "flex-grow: 1; margin-right: 8px;" : config.buttonCSS;
+    this.#popup = null;
+    this.#keyHandler = null;
+  }
+  Hide() {
+    if (this.#popup === null) {
+      return;
+    }
+    if (this.#keyHandler !== null) {
+      document.removeEventListener("keydown", this.#keyHandler, true);
+      this.#keyHandler = null;
+    }
+    document.body.removeChild(this.#popup);
+    this.#popup = null;
+  }
+  #close(option) {
+    this.Hide();
+    if (this.#onClose !== void 0) {
+      this.#onClose(option);
+    }
+  }
+  Show() {
+    this.#popup = document.createElement("div");
+    this.#popup.style.cssText = `position:absolute;top:0;width:100%;display:flex;height:100%;justify-content:center;align-items:center;background-color:${Theme.Popup.Backdrop};`;
+    document.body.appendChild(this.#popup);
+    const container = document.createElement("div");
+    container.style.cssText = `background-color:${Theme.Popup.BackgroundColor};color:${Theme.Popup.FontColor};font-family:${Theme.Popup.FontFamily};border-radius:${Theme.Popup.BorderRadius}px;padding:16px;`;
+    this.#popup.appendChild(container);
+    const title = document.createElement("h2");
+    title.textContent = this.#title;
+    title.style.cssText = "margin-top:0;margin-bottom:16px;";
+    container.appendChild(title);
+    if (this.#content !== void 0) {
+      container.appendChild(this.#content());
+    }
+    const buttonContainer = document.createElement("div");
+    buttonContainer.style.cssText = "margin-top:16px;justify-content:space-around;align-items:center;flex-direction:row;display:flex;";
+    container.appendChild(buttonContainer);
+    for (let i = 0; i < this.#options.length; i++) {
+      const button = document.createElement("button");
+      button.style.cssText = this.#buttonCSS;
+      button.textContent = this.#options[i];
+      button.onclick = () => this.#close(this.#options[i]);
+      buttonContainer.appendChild(button);
+    }
+    this.#keyHandler = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this.#close(this.#options.length > 0 ? this.#options[0] : null);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        this.#close(null);
+      }
+      e.stopPropagation();
+    };
+    document.addEventListener("keydown", this.#keyHandler, true);
+  }
+};
+
+// src/popups/string.ts
+function SetStringPopup(config) {
+  let input = null;
+  return new Popup({
+    title: config.title,
+    options: ["Set", "Cancel"],
+    content: () => {
+      const container = document.createElement("div");
+      input = document.createElement("input");
+      input.value = config.startingValue;
+      container.append(input);
+      return container;
+    },
+    onClose: (button) => {
+      if (button !== "Set" || input === null) {
+        if (config.onCancel) {
+          config.onCancel();
+        }
+        return;
+      }
+      config.onUpdate(input.value);
+    }
+  });
+}
+
 // src/popups/form.ts
 function FormPopup(config) {
   let input = new Array();
@@ -4315,9 +5028,11 @@ var FlowNode = class {
   #titleChangeCallback;
   #infoChangeCallback;
   // Styling ================================================================
+  #styleConfig;
+  #styledForTheme = -1;
   #titleColor;
   #selectedStyle;
-  #stateStyles;
+  #stateStyles = /* @__PURE__ */ new Map();
   #padding;
   #portTextStyle;
   #elementSpacing;
@@ -4329,6 +5044,7 @@ var FlowNode = class {
   #data;
   #registeredAnyPropertyChangeCallbacks;
   #registeredPropertyChangeCallbacks;
+  #registeredPropertyEditCallbacks = /* @__PURE__ */ new Map();
   constructor(config) {
     this.#input = new Array();
     this.#output = new Array();
@@ -4381,58 +5097,17 @@ var FlowNode = class {
     this.#position = config?.position === void 0 ? { x: 0, y: 0 } : config.position;
     this.#title = new Text(
       config?.title === void 0 ? "" : config.title,
-      TextStyleFallback(config?.style?.title?.textStyle, {
-        size: 16,
-        weight: "bold" /* Bold */,
-        color: Theme.Node.FontColor
-      })
+      TextStyleFallback(config?.style?.title?.textStyle, { size: 16, weight: "bold" /* Bold */ })
     );
     this.#subTitle = new Text(
       config?.subTitle === void 0 ? "" : config.subTitle,
-      TextStyleFallback(config?.style?.title?.textStyle, {
-        size: 10,
-        weight: "bold" /* Bold */,
-        color: Theme.Node.FontColor
-      })
-    );
-    this.#infoSymbol = new Text(
-      "i",
-      {
-        size: 13,
-        weight: "bold" /* Bold */,
-        color: Theme.Node.FontColor
-      }
+      TextStyleFallback(config?.style?.title?.textStyle, { size: 10, weight: "bold" /* Bold */ })
     );
+    this.#infoSymbol = new Text("i", { size: 13, weight: "bold" /* Bold */ });
     this.#infoText = config?.info ? config?.info : "";
-    this.#titleColor = config?.style?.title?.color === void 0 ? "#154050" : config?.style?.title?.color;
     this.#padding = config?.style?.title?.padding === void 0 ? 15 : config?.style?.title?.padding;
-    this.#stateStyles = /* @__PURE__ */ new Map();
-    this.#stateStyles.set(0 /* Idle */, new BoxStyle(BoxStyleWithFallback(config?.style?.idle, {
-      border: { color: Theme.Node.Border.Idle, size: 1 },
-      radius: Theme.Node.BorderRadius,
-      color: Theme.Node.BackgroundColor
-    })));
-    this.#stateStyles.set(1 /* MouseOver */, new BoxStyle(BoxStyleWithFallback(config?.style?.mouseOver, {
-      border: { color: Theme.Node.Border.MouseOver, size: 1.1 },
-      radius: Theme.Node.BorderRadius,
-      color: Theme.Node.BackgroundColor
-    })));
-    this.#stateStyles.set(2 /* Grabbed */, new BoxStyle(BoxStyleWithFallback(config?.style?.grabbed, {
-      border: { color: Theme.Node.Border.Grabbed, size: 2 },
-      radius: Theme.Node.BorderRadius,
-      color: Theme.Node.BackgroundColor
-    })));
-    this.#selectedStyle = new BoxStyle(BoxStyleWithFallback(config?.style?.selected, {
-      border: { color: Theme.Node.Border.Selected, size: 1 },
-      radius: Theme.Node.BorderRadius,
-      color: Theme.Node.BackgroundColor
-    }));
-    this.#portTextStyle = new TextStyle({
-      size: config?.style?.portText?.size === void 0 ? 14 : config?.style?.portText?.size,
-      color: config?.style?.portText?.color === void 0 ? Theme.Node.Port.FontColor : config?.style?.portText?.color,
-      font: config?.style?.portText?.font,
-      weight: config?.style?.portText?.weight
-    });
+    this.#styleConfig = config?.style;
+    this.#applyStyle();
     if (config?.inputs !== void 0) {
       for (let i = 0; i < config.inputs.length; i++) {
         this.addInput(config.inputs[i]);
@@ -4444,12 +5119,8 @@ var FlowNode = class {
       }
     }
     if (config?.widgets !== void 0) {
-      for (let i = 0; i < config.widgets.length; i++) {
-        const widget = config.widgets[i];
-        if (widget.type === void 0) {
-          continue;
-        }
-        this.addWidget(GlobalWidgetFactory.create(this, widget.type, widget.config));
+      for (const widget of config.widgets) {
+        this.addWidget(GlobalWidgetFactory.createFromConfig(this, widget));
       }
     }
   }
@@ -4522,6 +5193,32 @@ var FlowNode = class {
       callbacks[i](oldValue, value);
     }
   }
+  /**
+   * Listens for a person changing the property through a widget, but not
+   * for the property being set from code.
+   */
+  addPropertyEditListener(name, callback) {
+    let callbacks = this.#registeredPropertyEditCallbacks.get(name);
+    if (callbacks === void 0) {
+      callbacks = [];
+      this.#registeredPropertyEditCallbacks.set(name, callbacks);
+    }
+    callbacks.push(callback);
+  }
+  /**
+   * Sets the property as a person's finished edit, so edit listeners hear
+   * it even when the value was already showing.
+   */
+  editProperty(name, value) {
+    this.setProperty(name, value);
+    const callbacks = this.#registeredPropertyEditCallbacks.get(name);
+    if (callbacks === void 0) {
+      return;
+    }
+    for (const callback of [...callbacks]) {
+      callback(value);
+    }
+  }
   getProperty(name) {
     return this.#data[name];
   }
@@ -4810,6 +5507,7 @@ var FlowNode = class {
   //     return this.#titleTextStyle.measure(ctx, scale, this.#title);
   // }
   calculateBounds(ctx, camera) {
+    this.#followTheme();
     const tempMeasurement = Zero();
     const doublePadding = this.#padding * 2;
     const screenSpacePosition = Zero();
@@ -4823,25 +5521,21 @@ var FlowNode = class {
       size.x += size.y * 4;
     }
     size.x += doublePadding;
-    size.y += doublePadding + this.#elementSpacing * this.#input.length;
-    for (let i = 0; i < this.#input.length; i++) {
-      const port = this.#input[i];
-      this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
-      size.y += tempMeasurement.y;
-      size.x = Math.max(size.x, tempMeasurement.x + doublePadding);
-    }
-    size.y += this.#elementSpacing * this.#output.length;
-    for (let i = 0; i < this.#output.length; i++) {
-      const port = this.#output[i];
+    size.y += doublePadding;
+    for (const port of [...this.#input, ...this.#output]) {
+      if (port.hidden()) {
+        continue;
+      }
       this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
-      size.y += tempMeasurement.y;
+      size.y += this.#portRowHeight(port, tempMeasurement.y) + this.#elementSpacing;
       size.x = Math.max(size.x, tempMeasurement.x + doublePadding);
     }
-    size.y += this.#elementSpacing * this.#widgets.length;
-    for (let i = 0; i < this.#widgets.length; i++) {
-      const element = this.#widgets[i];
-      const eleSize = element.Size();
-      size.y += eleSize.y;
+    for (const widget of this.#widgets) {
+      if (widget.Hidden?.()) {
+        continue;
+      }
+      const eleSize = widget.Size();
+      size.y += eleSize.y + this.#elementSpacing;
       size.x = Math.max(size.x, eleSize.x + doublePadding);
     }
     size.y += this.#elementSpacing;
@@ -4925,7 +5619,7 @@ var FlowNode = class {
       intersection.Node = this;
     }
     for (let i = 0; i < this.#inputPortPositions.Count(); i++) {
-      if (InBox(this.#inputPortPositions.At(i), position)) {
+      if (!this.#input[i].hidden() && InBox(this.#inputPortPositions.At(i), position)) {
         intersection.Node = this;
         intersection.PortIndex = i;
         intersection.PortIsInput = true;
@@ -4933,7 +5627,7 @@ var FlowNode = class {
       }
     }
     for (let i = 0; i < this.#outputPortPositions.Count(); i++) {
-      if (InBox(this.#outputPortPositions.At(i), position)) {
+      if (!this.#output[i].hidden() && InBox(this.#outputPortPositions.At(i), position)) {
         intersection.Node = this;
         intersection.PortIndex = i;
         intersection.PortIsInput = false;
@@ -4941,10 +5635,12 @@ var FlowNode = class {
       }
     }
     for (let i = 0; i < this.#widgetPositions.Count(); i++) {
-      if (InBox(this.#widgetPositions.At(i), position)) {
+      const widget = this.#widgets[i];
+      if (widget !== void 0 && !widget.Hidden?.() && InBox(this.#widgetPositions.At(i), position)) {
         intersection.Node = this;
         intersection.WidgetIndex = i;
-        intersection.Widget = this.#widgets[i];
+        intersection.Widget = widget;
+        intersection.WidgetBox = this.#widgetPositions.At(i);
       }
     }
     return intersection;
@@ -4993,6 +5689,12 @@ var FlowNode = class {
   inputPortPosition(index) {
     return this.#inputPortPositions.At(index);
   }
+  widgetPosition(index) {
+    if (index < 0 || index >= this.#widgetPositions.Count()) {
+      return void 0;
+    }
+    return this.#widgetPositions.At(index);
+  }
   inputPort(index) {
     return this.#input[index];
   }
@@ -5008,6 +5710,35 @@ var FlowNode = class {
   outputs() {
     return this.#output.length;
   }
+  #applyStyle() {
+    const style = this.#styleConfig;
+    const titleText = style?.title?.textStyle?.color ?? Theme.Node.Title.FontColor;
+    this.#title.style().setColor(titleText);
+    this.#subTitle.style().setColor(titleText);
+    this.#infoSymbol.style().setColor(titleText);
+    this.#titleColor = style?.title?.color ?? Theme.Node.Title.Color;
+    const box = (config, border, size) => new BoxStyle(BoxStyleWithFallback(config, {
+      border: { color: border, size },
+      radius: Theme.Node.BorderRadius,
+      color: Theme.Node.BackgroundColor
+    }));
+    this.#stateStyles.set(0 /* Idle */, box(style?.idle, Theme.Node.Border.Idle, 1));
+    this.#stateStyles.set(1 /* MouseOver */, box(style?.mouseOver, Theme.Node.Border.MouseOver, 1.1));
+    this.#stateStyles.set(2 /* Grabbed */, box(style?.grabbed, Theme.Node.Border.Grabbed, 2));
+    this.#selectedStyle = box(style?.selected, Theme.Node.Border.Selected, 1);
+    this.#portTextStyle = new TextStyle({
+      size: style?.portText?.size ?? 14,
+      color: style?.portText?.color ?? Theme.Node.Port.FontColor,
+      font: style?.portText?.font,
+      weight: style?.portText?.weight
+    });
+    this.#styledForTheme = themeVersion();
+  }
+  #followTheme() {
+    if (this.#styledForTheme !== themeVersion()) {
+      this.#applyStyle();
+    }
+  }
   #calculateStyle(state) {
     if (this.#selected && state === 0 /* Idle */) {
       return this.#selectedStyle;
@@ -5024,9 +5755,22 @@ var FlowNode = class {
   clearMessages() {
     this.#messages = [];
   }
+  #portRowHeight(port, textHeight) {
+    const slots = port.slots();
+    return slots > 1 ? Math.max(textHeight, slots * ARRAY_SLOT_PITCH) : textHeight;
+  }
   hasBeenLaidOut() {
     return this.#laidOut;
   }
+  /**
+   * Throws away where the ports were last placed, so wires wait for the
+   * next draw instead of pointing at the old spots.
+   */
+  invalidateLayout() {
+    this.#laidOut = false;
+    this.#portOffsets = { input: [], output: [] };
+    requestRender();
+  }
   #laidOut = false;
   render(ctx, camera, state, mousePosition, postProcess) {
     this.#laidOut = true;
@@ -5064,6 +5808,9 @@ var FlowNode = class {
         [nodeStyle.radius() * camera.zoom, nodeStyle.radius() * camera.zoom, 0, 0]
       );
       ctx.fill();
+      if (Theme.Node.Bevel !== null) {
+        drawBevel(ctx, nodeBounds, camera.zoom, Theme.Node.Bevel, false);
+      }
       const titlePosition = VectorPool.get();
       titlePosition.x = nodeBounds.Position.x + nodeBounds.Size.x / 2;
       titlePosition.y = nodeBounds.Position.y + scaledPadding + titleSize.y / 2;
@@ -5124,8 +5871,12 @@ var FlowNode = class {
       for (let i = 0; i < this.#input.length; i++) {
         ctx.textAlign = "left" /* Left */;
         const port = this.#input[i];
+        if (port.hidden()) {
+          this.#inputPortPositions.Push({ Position: { x: nodeBounds.Position.x, y: startY }, Size: { x: 0, y: 0 } });
+          continue;
+        }
         this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
-        const portHeight = tempMeasurement.y * camera.zoom;
+        const portHeight = this.#portRowHeight(port, tempMeasurement.y) * camera.zoom;
         const position = VectorPool.get();
         position.x = nodeBounds.Position.x;
         position.y = startY + portHeight / 2;
@@ -5138,6 +5889,10 @@ var FlowNode = class {
       ctx.textAlign = "right" /* Right */;
       for (let i = 0; i < this.#output.length; i++) {
         const port = this.#output[i];
+        if (port.hidden()) {
+          this.#outputPortPositions.Push({ Position: { x: rightSide, y: startY }, Size: { x: 0, y: 0 } });
+          continue;
+        }
         this.#portTextStyle.measure(ctx, 1, port.getDisplayName(), tempMeasurement);
         const portHeight = tempMeasurement.y * camera.zoom;
         const position = VectorPool.get();
@@ -5150,13 +5905,18 @@ var FlowNode = class {
       }
       for (let i = 0; i < this.#widgets.length; i++) {
         const widget = this.#widgets[i];
+        if (widget.Hidden?.()) {
+          this.#widgetPositions.Push({ Position: { x: nodeBounds.Position.x, y: startY }, Size: { x: 0, y: 0 } });
+          continue;
+        }
         const widgetSize = widget.Size();
-        const scaledWidgetWidth = widgetSize.x * camera.zoom;
-        const position = VectorPool.get();
-        position.x = nodeBounds.Position.x + (nodeBounds.Size.x - scaledWidgetWidth) / 2;
-        position.y = startY;
-        this.#widgetPositions.Push(widget.Draw(ctx, position, camera.zoom, mousePosition));
-        startY += widgetSize.y * camera.zoom + scaledElementSpacing;
+        const box = {
+          Position: { x: nodeBounds.Position.x + scaledPadding, y: startY },
+          Size: { x: nodeBounds.Size.x - scaledPadding * 2, y: widgetSize.y * camera.zoom }
+        };
+        widget.Draw(ctx, box, camera.zoom, mousePosition);
+        this.#widgetPositions.Push(box);
+        startY += box.Size.y + scaledElementSpacing;
       }
       const messageStart = VectorPool.get();
       messageStart.x = nodeBounds.Position.x + nodeBounds.Size.x / 2;
@@ -5193,6 +5953,13 @@ var FlowNode = class {
     record(this.#outputPortPositions, this.#portOffsets.output);
   }
   layoutPortsWithoutDrawing(bounds, zoom) {
+    if (!this.placePorts(bounds, zoom)) {
+      return false;
+    }
+    this.#widgetPositions.Clear();
+    return true;
+  }
+  placePorts(bounds, zoom) {
     if (this.#portOffsets.input.length === 0 && this.#portOffsets.output.length === 0) {
       return false;
     }
@@ -5214,7 +5981,6 @@ var FlowNode = class {
     };
     project(this.#portOffsets.input, this.#inputPortPositions);
     project(this.#portOffsets.output, this.#outputPortPositions);
-    this.#widgetPositions.Clear();
     return true;
   }
 };
@@ -5406,33 +6172,33 @@ var CodeBlockEntry = class {
   }
   render(ctx, position, scale, maxWidth) {
     this.#calculateLayout(ctx, maxWidth);
-    let padding = Theme.Note.CodeBlock.Padding * scale;
-    let max = 0;
-    for (let i = 0; i < this.#calculatedEntries.Count(); i++) {
-      const pos = this.#calculatedPositions.At(i);
-      max = Math.max(max, pos.y * scale);
-    }
-    const y = position.y + max + scale * 5;
+    const padding = Theme.Note.CodeBlock.Padding * scale;
+    const lineCount = this.#calculatedEntries.Count();
+    const lastTop = lineCount === 0 ? 0 : this.#calculatedPositions.At(lineCount - 1).y;
+    const contentHeight = lineCount === 0 ? 0 : (lastTop + this.#text.style().getSize()) * scale;
+    const height2 = contentHeight + padding * 2;
     ctx.fillStyle = Theme.Note.CodeBlock.BackgroundColor;
     ctx.beginPath();
     ctx.roundRect(
       position.x,
       position.y,
       maxWidth * scale,
-      max + padding * 2,
+      height2,
       Theme.Note.CodeBlock.BorderRadius * scale
     );
     ctx.fill();
-    for (let i = 0; i < this.#calculatedEntries.Count(); i++) {
+    const baseline = ctx.textBaseline;
+    ctx.textBaseline = "top";
+    for (let i = 0; i < lineCount; i++) {
       const entry = this.#calculatedEntries.At(i);
       const pos = this.#calculatedPositions.At(i);
       entry.render(ctx, scale, {
         x: pos.x * scale + position.x + padding,
         y: pos.y * scale + position.y + padding
       });
-      max = Math.max(max, pos.y * scale);
     }
-    return max + padding * 2;
+    ctx.textBaseline = baseline;
+    return height2;
   }
 };
 var UnorderedListMarkdownEntry = class {
@@ -5810,9 +6576,10 @@ var MarkdownSyntaxParser = class {
     this.#inc();
     this.#inc();
     this.#inc();
-    const codeBlockText = this.#originalText.substring(start, end);
+    const codeBlockText = this.#originalText.substring(start, end).replace(/\r?\n$/, "");
     const entryText = new Text(codeBlockText);
     this.#assignStandardStyling([entryText]);
+    entryText.setColor(Theme.Note.CodeBlock.FontColor);
     return new CodeBlockEntry(entryText);
   }
   parse() {
@@ -5867,6 +6634,7 @@ var BOX_SIZE = 10;
 var FlowNote = class {
   #originalText;
   #document;
+  #parsedForTheme = -1;
   #width;
   #edittingStyle;
   // Runtime ================================================================
@@ -5909,6 +6677,7 @@ var FlowNote = class {
   setText(text) {
     this.#originalText = text;
     this.#document = BuildMarkdown(this.#originalText);
+    this.#parsedForTheme = themeVersion();
     for (let i = 0; i < this.#contentChangeCallbacks.length; i++) {
       this.#contentChangeCallbacks[i](this, text);
     }
@@ -5996,6 +6765,10 @@ var FlowNote = class {
     }
     camera.graphSpaceToScreenSpace(this.#position, this.#tempPosition);
     CopyVector2(this.#lastRenderedBox.Position, this.#tempPosition);
+    if (this.#parsedForTheme !== themeVersion()) {
+      this.#document = BuildMarkdown(this.#originalText);
+      this.#parsedForTheme = themeVersion();
+    }
     const startY = this.#tempPosition.y;
     const lineSpacing = Theme.Note.EntrySpacing * camera.zoom;
     ctx.textAlign = "left" /* Left */;
@@ -6691,13 +7464,15 @@ var Minimap = class {
 // src/graph.ts
 function BuildBackgroundRenderer(backgroundColor) {
   return (canvas, context, position, scale) => {
-    context.fillStyle = backgroundColor;
+    context.fillStyle = backgroundColor ?? Theme.Graph.BackgroundColor;
     context.fillRect(0, 0, canvas.width, canvas.height);
-    const alpha = Math.round(Clamp01(scale - 0.3) * 255);
+    const alpha = Clamp01(scale - 0.3);
     if (alpha <= 0) {
       return;
     }
-    context.fillStyle = `rgba(41, 54, 57, ${alpha})`;
+    context.save();
+    context.globalAlpha = alpha;
+    context.fillStyle = Theme.Graph.DotColor;
     const spacing = 100;
     const pi2 = 2 * Math.PI;
     const dotScale = 2 * scale;
@@ -6710,6 +7485,7 @@ function BuildBackgroundRenderer(backgroundColor) {
         context.fill();
       }
     }
+    context.restore();
   };
 }
 var contextMenuGroup = "graph-context-menu";
@@ -6760,9 +7536,9 @@ var GraphView = class {
     const results = {};
     for (let i = 0; i < this.#subsystems.length; i++) {
       TimeExecution("Render_Subsystem_" + i, () => {
-        let results2 = this.#subsystems[i].render(ctx, camera, mousePosition);
-        if (results2?.cursorStyle) {
-          results2.cursorStyle = results2?.cursorStyle;
+        const layer = this.#subsystems[i].render(ctx, camera, mousePosition);
+        if (layer?.cursorStyle) {
+          results.cursorStyle = layer.cursorStyle;
         }
       });
     }
@@ -6822,8 +7598,7 @@ var NodeFlowGraph = class {
     if (config?.backgroundRenderer !== void 0) {
       this.#backgroundRenderer = config?.backgroundRenderer;
     } else {
-      const backgroundColor = config?.backgroundColor === void 0 ? Theme.Graph.BackgroundColor : config.backgroundColor;
-      this.#backgroundRenderer = BuildBackgroundRenderer(backgroundColor);
+      this.#backgroundRenderer = BuildBackgroundRenderer(config?.backgroundColor);
     }
     this.#minimap = new Minimap(config?.minimap);
     this.#mainNodeSubsystem.setConnectionReleasedHandler((dangling) => {
@@ -7289,11 +8064,15 @@ export {
   ColorWidget,
   Connection,
   ContextMenuItemState,
+  CursorStyle,
   DefaultConnectionRenderer,
+  DefaultTheme,
   FlowNode,
   FlowNote,
   GlobalWidgetFactory,
+  GraphView,
   ImageWidget,
+  InBox,
   MessageType,
   Minimap,
   NodeFactory,
@@ -7303,16 +8082,28 @@ export {
   Port,
   PortType,
   Publisher,
+  RowWidget,
   SliderWidget,
   StringWidget,
   TextWidget,
   Theme,
   ToggleWidget,
+  ValueWidget,
+  WidgetBase,
   WidgetFactory,
+  drawField,
+  drawFieldBox,
+  drawFieldText,
+  editInPlace,
+  formatNumber,
+  onThemeChange,
   portConfigTypes,
   portsCompatible,
   renderContinuously,
   requestRender,
-  typeSetsCompatible
+  setTheme,
+  themeVersion,
+  typeSetsCompatible,
+  widgetFont
 };
 //# sourceMappingURL=index.mjs.map