@deck.gl/widgets 9.3.7 → 9.4.0-alpha.1

package/dist/dist.dev.js

@@ -88,7 +88,8 @@ var __exports__ = (() => {
     _SimpleMenu: () => SimpleMenu,
     _SplitterWidget: () => SplitterWidget,
     _StatsWidget: () => StatsWidget,
-    _TimelineWidget: () => TimelineWidget
+    _TimelineWidget: () => TimelineWidget,
+    buildViewsFromViewLayout: () => buildViewsFromViewLayout
   });
 
   // ../core/bundle/peer-dependency.ts
@@ -724,12 +725,12 @@ var __exports__ = (() => {
     }
     handleZoomIn() {
       for (const viewId of this.viewIds) {
-        this.handleZoom(viewId, 1);
+        this.handleZoom(viewId, this.props.zoomStep);
       }
     }
     handleZoomOut() {
       for (const viewId of this.viewIds) {
-        this.handleZoom(viewId, -1);
+        this.handleZoom(viewId, -this.props.zoomStep);
       }
     }
   };
@@ -739,6 +740,7 @@ var __exports__ = (() => {
     placement: "top-left",
     orientation: "vertical",
     transitionDuration: 200,
+    zoomStep: 1,
     zoomInLabel: "Zoom In",
     zoomOutLabel: "Zoom Out",
     zoomAxis: "all",
@@ -1731,17 +1733,534 @@ var __exports__ = (() => {
   };
 
   // src/splitter-widget.tsx
+  var import_core11 = __toESM(require_core(), 1);
+
+  // src/view-layout/view-layout.ts
   var import_core10 = __toESM(require_core(), 1);
-  function parseViewLayout(root) {
+  var VIEW_LAYOUT_TYPES = /* @__PURE__ */ new Set(["row", "column", "overlay", "spacer"]);
+  var VIEW_LAYOUT_ORIENTATIONS = /* @__PURE__ */ new Set(["horizontal", "vertical"]);
+  function isViewLayout(child) {
+    return Boolean(
+      child && typeof child === "object" && !(child instanceof import_core10.View) && ("type" in child && VIEW_LAYOUT_TYPES.has(String(child.type)) || "orientation" in child && VIEW_LAYOUT_ORIENTATIONS.has(String(child.orientation)))
+    );
+  }
+  function getViewLayoutType(item) {
+    if ("orientation" in item) {
+      return item.orientation === "horizontal" ? "row" : "column";
+    }
+    return item.type;
+  }
+  function getViewLayoutChildren(item) {
+    return "views" in item ? item.views : item.children;
+  }
+  function assertViewLayout(item) {
+    if (!item || typeof item !== "object") {
+      throw new Error("ViewLayout must be an object.");
+    }
+    const type = getViewLayoutType(item);
+    switch (type) {
+      case "row":
+      case "column":
+      case "overlay": {
+        const children = getViewLayoutChildren(item);
+        if (!Array.isArray(children)) {
+          throw new Error("ViewLayout requires a children or views array.");
+        }
+        if (isSplitLayoutItem(item) && item.splitId) {
+          if (children.filter(Boolean).length < 2) {
+            throw new Error("ViewLayout with splitId requires at least two children.");
+          }
+        }
+        children.forEach(assertViewLayoutChild);
+        break;
+      }
+      case "spacer":
+        break;
+      default:
+        throw new Error(`Unsupported view layout item: ${String(type)}`);
+    }
+  }
+  function isSplitLayoutItem(item) {
+    const type = getViewLayoutType(item);
+    return type === "row" || type === "column";
+  }
+  function assertViewLayoutChild(child) {
+    if (!child) {
+      return;
+    }
+    if (isViewLayout(child)) {
+      assertViewLayout(child);
+      return;
+    }
+    if (child instanceof import_core10.View) {
+      return;
+    }
+    throw new Error("ViewLayout children must be deck.gl View instances or layout objects.");
+  }
+
+  // src/view-layout/build-views-from-view-layout.ts
+  function buildViewsFromViewLayout(args) {
+    assertViewLayout(args.layout);
+    const rootRect = {
+      x: 0,
+      y: 0,
+      width: Math.max(1, args.width),
+      height: Math.max(1, args.height)
+    };
+    const previousViewsById = new Map(
+      (args.previous?.views ?? []).map((view) => [getViewId(view), view]).filter((entry) => Boolean(entry[0]))
+    );
+    const outputViews = [];
+    const rectsById = {};
+    const splittersById = {};
+    compileLayoutItem({
+      item: args.layout,
+      rect: rootRect,
+      rootRect,
+      outputViews,
+      rectsById,
+      splittersById,
+      previousViewsById,
+      splitValues: args.splitValues ?? {},
+      viewPropsById: args.viewPropsById ?? {}
+    });
+    return {
+      views: outputViews,
+      rectsById,
+      splittersById
+    };
+  }
+  function compileLayoutItem(args) {
+    const { item } = args;
+    const type = getViewLayoutType(item);
+    switch (type) {
+      case "row":
+        compileStackLayout({
+          ...args,
+          item,
+          orientation: "row",
+          children: getViewLayoutChildren(item)
+        });
+        return;
+      case "column":
+        compileStackLayout({
+          ...args,
+          item,
+          orientation: "column",
+          children: getViewLayoutChildren(item)
+        });
+        return;
+      case "overlay":
+        compileOverlayLayout({
+          ...args,
+          item,
+          children: getViewLayoutChildren(item)
+        });
+        return;
+      case "spacer":
+        return;
+      default:
+        throw new Error(`Unsupported view layout item: ${String(type)}`);
+    }
+  }
+  function compileStackLayout(args) {
+    const containerRect = applyInsets(args.rect, args.item.inset);
+    const children = args.children.filter(isPresentChild);
+    if (children.length === 0) {
+      return;
+    }
+    const containerAxisLength = args.orientation === "row" ? containerRect.width : containerRect.height;
+    const stackAxisConfig = getStackAxisConfig({
+      children,
+      containerAxisLength,
+      item: args.item,
+      orientation: args.orientation,
+      splitValues: args.splitValues
+    });
+    let cursor = args.orientation === "row" ? containerRect.x : containerRect.y;
+    for (const splitConfig of stackAxisConfig.splitConfigs) {
+      args.splittersById[splitConfig.splitId] = {
+        id: splitConfig.splitId,
+        orientation: args.orientation === "row" ? "horizontal" : "vertical",
+        x: containerRect.x / args.rootRect.width * 100,
+        y: containerRect.y / args.rootRect.height * 100,
+        width: containerRect.width / args.rootRect.width * 100,
+        height: containerRect.height / args.rootRect.height * 100,
+        split: splitConfig.split,
+        minSplit: splitConfig.minSplit,
+        maxSplit: splitConfig.maxSplit
+      };
+    }
+    children.forEach((child, index) => {
+      const childAxisLength = stackAxisConfig.childAxisLengths[index];
+      const childRect = args.orientation === "row" ? {
+        x: cursor,
+        y: containerRect.y,
+        width: childAxisLength,
+        height: containerRect.height
+      } : {
+        x: containerRect.x,
+        y: cursor,
+        width: containerRect.width,
+        height: childAxisLength
+      };
+      cursor += childAxisLength;
+      compileLayoutChild({
+        child,
+        rect: childRect,
+        rootRect: args.rootRect,
+        outputViews: args.outputViews,
+        rectsById: args.rectsById,
+        splittersById: args.splittersById,
+        previousViewsById: args.previousViewsById,
+        splitValues: args.splitValues,
+        viewPropsById: args.viewPropsById
+      });
+    });
+  }
+  function compileOverlayLayout(args) {
+    const containerRect = applyInsets(args.rect, args.item.inset);
+    args.children.filter(isPresentChild).forEach(
+      (child) => compileLayoutChild({
+        child,
+        rect: containerRect,
+        rootRect: args.rootRect,
+        outputViews: args.outputViews,
+        rectsById: args.rectsById,
+        splittersById: args.splittersById,
+        previousViewsById: args.previousViewsById,
+        splitValues: args.splitValues,
+        viewPropsById: args.viewPropsById
+      })
+    );
+  }
+  function compileLayoutChild(args) {
+    if (isViewLayout(args.child)) {
+      compileLayoutItem({
+        item: args.child,
+        rect: args.rect,
+        rootRect: args.rootRect,
+        outputViews: args.outputViews,
+        rectsById: args.rectsById,
+        splittersById: args.splittersById,
+        previousViewsById: args.previousViewsById,
+        splitValues: args.splitValues,
+        viewPropsById: args.viewPropsById
+      });
+      return;
+    }
+    compileResolvedView({
+      view: args.child,
+      rect: args.rect,
+      outputViews: args.outputViews,
+      rectsById: args.rectsById,
+      previousViewsById: args.previousViewsById,
+      viewPropsById: args.viewPropsById
+    });
+  }
+  function getStackAxisConfig(args) {
+    const constraints = args.children.map(
+      (child) => getStackChildAxisConstraints(child, args.orientation, args.containerAxisLength)
+    );
+    if (args.item.splitId) {
+      return getSplitStackAxisConfig({ ...args, constraints });
+    }
+    return {
+      childAxisLengths: getConstrainedStackChildAxisLengths(args.containerAxisLength, constraints),
+      splitConfigs: []
+    };
+  }
+  function getSplitStackAxisConfig(args) {
+    const axisLength = Math.max(args.containerAxisLength, 1);
+    const boundaries = getDefaultSplitBoundaries(args);
+    const splitConfigs = [];
+    for (let index = 0; index < boundaries.length; index++) {
+      const splitId = getSplitId(args.item.splitId, args.children.length, index);
+      const desiredSplit = args.splitValues[splitId] ?? (args.children.length === 2 ? args.item.initialSplit : void 0) ?? boundaries[index];
+      const { minSplit, maxSplit } = getSplitBoundaryLimits({
+        index,
+        boundaries,
+        constraints: args.constraints,
+        axisLength,
+        item: args.item
+      });
+      const split = Math.min(Math.max(desiredSplit, minSplit), maxSplit);
+      boundaries[index] = split;
+      splitConfigs.push({ splitId, split, minSplit, maxSplit });
+    }
+    return {
+      childAxisLengths: getStackAxisLengthsFromBoundaries(args.containerAxisLength, boundaries),
+      splitConfigs
+    };
+  }
+  function getDefaultSplitBoundaries(args) {
+    const childAxisLengths = getConstrainedStackChildAxisLengths(
+      args.containerAxisLength,
+      args.constraints
+    );
+    const totalLength = childAxisLengths.reduce((sum, length) => sum + length, 0);
+    if (totalLength <= 0) {
+      return args.children.slice(1).map((_3, index) => (index + 1) / args.children.length);
+    }
+    let cursor = 0;
+    return childAxisLengths.slice(0, -1).map((length) => {
+      cursor += length;
+      return cursor / totalLength;
+    });
+  }
+  function getSplitBoundaryLimits(args) {
+    const previousSplit = args.index === 0 ? 0 : args.boundaries[args.index - 1];
+    const nextSplit = args.index === args.boundaries.length - 1 ? 1 : args.boundaries[args.index + 1];
+    const leftConstraints = args.constraints[args.index];
+    const rightConstraints = args.constraints[args.index + 1];
+    const leftMaxSplit = Number.isFinite(leftConstraints.maxPixels) ? previousSplit + leftConstraints.maxPixels / args.axisLength : 1;
+    const rightMaxSplit = Number.isFinite(rightConstraints.maxPixels) ? nextSplit - rightConstraints.maxPixels / args.axisLength : 0;
+    const minSplit = Math.max(
+      args.item.minSplit ?? 0.05,
+      previousSplit + leftConstraints.minPixels / args.axisLength,
+      rightMaxSplit
+    );
+    const maxSplit = Math.max(
+      minSplit,
+      Math.min(
+        args.item.maxSplit ?? 0.95,
+        nextSplit - rightConstraints.minPixels / args.axisLength,
+        leftMaxSplit
+      )
+    );
+    return { minSplit, maxSplit };
+  }
+  function getSplitId(splitId, childCount, index) {
+    return childCount === 2 ? splitId : `${splitId}-${index}`;
+  }
+  function getStackAxisLengthsFromBoundaries(containerAxisLength, boundaries) {
+    let previousBoundary = 0;
+    const childAxisLengths = boundaries.map((boundary) => {
+      const length = containerAxisLength * (boundary - previousBoundary);
+      previousBoundary = boundary;
+      return length;
+    });
+    childAxisLengths.push(containerAxisLength * (1 - previousBoundary));
+    return childAxisLengths;
+  }
+  function getConstrainedStackChildAxisLengths(containerAxisLength, constraints) {
+    const { childAxisLengths, flexibleChildIndexes, fixedLength } = getInitialStackChildAxisLengths(constraints);
+    let remainingLength = Math.max(containerAxisLength - fixedLength, 0);
+    let unsettledIndexes = flexibleChildIndexes;
+    while (unsettledIndexes.length > 0) {
+      const sharedLength = remainingLength / unsettledIndexes.length;
+      const nextIndexes = [];
+      let didClamp = false;
+      for (const index of unsettledIndexes) {
+        const { minPixels, maxPixels } = constraints[index];
+        if (sharedLength < minPixels) {
+          childAxisLengths[index] = minPixels;
+          remainingLength -= minPixels;
+          didClamp = true;
+        } else if (sharedLength > maxPixels) {
+          childAxisLengths[index] = maxPixels;
+          remainingLength -= maxPixels;
+          didClamp = true;
+        } else {
+          nextIndexes.push(index);
+        }
+      }
+      if (!didClamp) {
+        for (const index of unsettledIndexes) {
+          childAxisLengths[index] = sharedLength;
+        }
+        break;
+      }
+      unsettledIndexes = nextIndexes;
+    }
+    return childAxisLengths.map((length) => length ?? 0);
+  }
+  function getInitialStackChildAxisLengths(constraints) {
+    const childAxisLengths = constraints.map(({ explicitLength }) => explicitLength);
+    const flexibleChildIndexes = [];
+    let fixedLength = 0;
+    childAxisLengths.forEach((length, index) => {
+      if (length === void 0) {
+        flexibleChildIndexes.push(index);
+      } else {
+        fixedLength += length;
+      }
+    });
+    return { childAxisLengths, flexibleChildIndexes, fixedLength };
+  }
+  function compileResolvedView(args) {
+    const viewId = getRequiredViewId(args.view);
+    const resolvedRect = resolveViewRectWithinParent(
+      args.view,
+      args.rect,
+      args.viewPropsById[viewId]
+    );
+    args.rectsById[viewId] = resolvedRect;
+    const nextProps = {
+      ...args.view.props,
+      x: resolvedRect.x,
+      y: resolvedRect.y,
+      width: resolvedRect.width,
+      height: resolvedRect.height
+    };
+    const previousView = args.previousViewsById.get(viewId);
+    const nextView = previousView && previousView.constructor === args.view.constructor && arePropsEqual(previousView.props, nextProps) ? previousView : instantiateView(args.view, nextProps);
+    args.outputViews.push(nextView);
+  }
+  function getStackChildAxisConstraints(child, orientation, parentAxisLength) {
+    const axisValue = getAxisLengthValue(child, orientation);
+    const minPixels = getPixelConstraintValue(child, "minPixels") ?? 0;
+    const maxPixels = getPixelConstraintValue(child, "maxPixels") ?? Number.POSITIVE_INFINITY;
+    if (axisValue === void 0) {
+      return { minPixels, maxPixels };
+    }
+    const explicitLength = Math.min(
+      Math.max(resolveLength(axisValue, parentAxisLength), minPixels),
+      maxPixels
+    );
+    return { explicitLength, minPixels, maxPixels };
+  }
+  function resolveViewRectWithinParent(view, parentRect, overrides) {
+    const props = { ...view.props, ...overrides };
+    const x2 = parentRect.x + resolveOffset(props.x, parentRect.width);
+    const y3 = parentRect.y + resolveOffset(props.y, parentRect.height);
+    const width = resolveDimension(props.width, parentRect.width, parentRect.width);
+    const height = resolveDimension(props.height, parentRect.height, parentRect.height);
+    return {
+      x: x2,
+      y: y3,
+      width,
+      height
+    };
+  }
+  function instantiateView(view, props) {
+    const ViewConstructor = view.constructor;
+    return new ViewConstructor(props);
+  }
+  function getAxisLengthValue(child, orientation) {
+    if (isViewLayout(child)) {
+      return orientation === "row" ? child.width : child.height;
+    }
+    const props = child.props;
+    return orientation === "row" ? props.width : props.height;
+  }
+  function getPixelConstraintValue(child, propName) {
+    const value = isViewLayout(child) ? child[propName] : child.props[propName];
+    return typeof value === "number" ? value : void 0;
+  }
+  function applyInsets(rect, inset) {
+    if (!inset) {
+      return rect;
+    }
+    const top = inset.top ?? 0;
+    const right = inset.right ?? 0;
+    const bottom = inset.bottom ?? 0;
+    const left = inset.left ?? 0;
+    return {
+      x: rect.x + left,
+      y: rect.y + top,
+      width: Math.max(0, rect.width - left - right),
+      height: Math.max(0, rect.height - top - bottom)
+    };
+  }
+  function resolveOffset(value, parentLength) {
+    if (value === void 0 || value === null) {
+      return 0;
+    }
+    return resolveLength(value, parentLength);
+  }
+  function resolveDimension(value, parentLength, fallback) {
+    if (value === void 0 || value === null) {
+      return fallback;
+    }
+    return resolveLength(value, parentLength);
+  }
+  function resolveLength(value, parentLength) {
+    if (typeof value === "number") {
+      return value;
+    }
+    const normalized = value.trim();
+    if (normalized.length === 0) {
+      throw new Error("View layout length must not be empty.");
+    }
+    if (normalized.startsWith("calc(") && normalized.endsWith(")")) {
+      return resolveCalcExpression(normalized.slice(5, -1), parentLength);
+    }
+    return resolveLengthTerm(normalized, parentLength);
+  }
+  function resolveCalcExpression(expression, parentLength) {
+    const sanitized = expression.replace(/\s+/g, "");
+    const terms = sanitized.match(/[+-]?[^+-]+/g);
+    if (!terms) {
+      throw new Error(`Unsupported calc expression: calc(${expression})`);
+    }
+    return terms.reduce((sum, term) => sum + resolveLengthTerm(term, parentLength), 0);
+  }
+  function resolveLengthTerm(term, parentLength) {
+    if (term.endsWith("%")) {
+      return Number.parseFloat(term.slice(0, -1)) / 100 * parentLength;
+    }
+    if (term.endsWith("px")) {
+      return Number.parseFloat(term.slice(0, -2));
+    }
+    return Number.parseFloat(term);
+  }
+  function getViewId(view) {
+    const viewId = view.props.id;
+    return typeof viewId === "string" && viewId.length > 0 ? viewId : null;
+  }
+  function getRequiredViewId(view) {
+    const viewId = getViewId(view);
+    if (!viewId) {
+      throw new Error("Every compiled deck view must have a string id.");
+    }
+    return viewId;
+  }
+  function arePropsEqual(left, right) {
+    if (left === right) {
+      return true;
+    }
+    const leftKeys = Object.keys(left);
+    const rightKeys = Object.keys(right);
+    if (leftKeys.length !== rightKeys.length) {
+      return false;
+    }
+    return leftKeys.every((key) => areValuesEqual(left[key], right[key]));
+  }
+  function areValuesEqual(left, right) {
+    if (Object.is(left, right)) {
+      return true;
+    }
+    if (Array.isArray(left) && Array.isArray(right)) {
+      return left.length === right.length && left.every((value, index) => areValuesEqual(value, right[index]));
+    }
+    if (isPlainObject(left) && isPlainObject(right)) {
+      const leftEntries = Object.keys(left);
+      const rightEntries = Object.keys(right);
+      return leftEntries.length === rightEntries.length && leftEntries.every((key) => areValuesEqual(left[key], right[key]));
+    }
+    return false;
+  }
+  function isPlainObject(value) {
+    return Boolean(value) && typeof value === "object" && Object.getPrototypeOf(value) === Object.prototype;
+  }
+  function isPresentChild(child) {
+    return Boolean(child);
+  }
+
+  // src/splitter-widget.tsx
+  function adaptViewLayout(root) {
     const layoutsById = [];
-    const isViewLayout = (v3) => "views" in v3;
-    function createManagedViewLayout(l3) {
+    const isViewLayout2 = (v3) => "views" in v3;
+    function adaptLayout(l3) {
       const id = layoutsById.length;
+      const splitId = `splitter-${id}`;
       const minSplit = l3.minSplit ?? 0.05;
       const maxSplit = l3.maxSplit ?? 0.95;
       const split = Math.min(Math.max(l3.initialSplit ?? 0.5, minSplit), maxSplit);
       const managed = {
         id,
+        splitId,
         orientation: l3.orientation,
         views: l3.views,
         split,
@@ -1754,83 +2273,77 @@ var __exports__ = (() => {
         height: 0
       };
       layoutsById.push(managed);
-      managed.views = [
-        isViewLayout(l3.views[0]) ? createManagedViewLayout(l3.views[0]) : l3.views[0],
-        isViewLayout(l3.views[1]) ? createManagedViewLayout(l3.views[1]) : l3.views[1]
-      ];
-      return managed;
-    }
-    createManagedViewLayout(root);
-    return layoutsById;
-  }
-  function evaluateViews(root) {
-    const views = [];
-    function evaluateViewLayout(l3, x2, y3, width, height) {
-      l3.x = x2;
-      l3.y = y3;
-      l3.width = width;
-      l3.height = height;
-      const child1X = x2;
-      const child1Y = y3;
-      let child1Width = width;
-      let child1Height = height;
-      let child2X = x2;
-      let child2Y = y3;
-      let child2Width = width;
-      let child2Height = height;
-      if (l3.orientation === "horizontal") {
-        child1Width = width * l3.split;
-        child2X = x2 + child1Width;
-        child2Width = width - child1Width;
-      } else {
-        child1Height = height * l3.split;
-        child2Y = y3 + child1Height;
-        child2Height = height - child1Height;
-      }
-      const [view1, view2] = l3.views;
-      if ("views" in view1) {
-        evaluateViewLayout(view1, child1X, child1Y, child1Width, child1Height);
-      } else {
-        views.push(
-          view1.clone({
-            x: `${child1X}%`,
-            y: `${child1Y}%`,
-            width: `${child1Width}%`,
-            height: `${child1Height}%`
-          })
-        );
-      }
-      if ("views" in view2) {
-        evaluateViewLayout(view2, child2X, child2Y, child2Width, child2Height);
-      } else {
-        views.push(
-          view2.clone({
-            x: `${child2X}%`,
-            y: `${child2Y}%`,
-            width: `${child2Width}%`,
-            height: `${child2Height}%`
-          })
-        );
-      }
+      const childEntries = l3.views.map((view) => {
+        if (!isViewLayout2(view)) {
+          return { layout: view, managed: view };
+        }
+        const adapted = adaptLayout(view);
+        return { layout: adapted.layout, managed: adapted.managed };
+      });
+      managed.views = [childEntries[0].managed, childEntries[1].managed];
+      const layout2 = {
+        orientation: l3.orientation,
+        splitId,
+        initialSplit: split,
+        minSplit,
+        maxSplit,
+        views: [childEntries[0].layout, childEntries[1].layout]
+      };
+      return { layout: layout2, managed };
     }
-    evaluateViewLayout(root, 0, 0, 100, 100);
-    return views;
+    const { layout } = adaptLayout(root);
+    return { layout, viewLayouts: layoutsById };
   }
-  var SplitterWidget = class extends import_core10.Widget {
+  function evaluateViews(layout, viewLayouts, splitValues) {
+    const compiled = buildViewsFromViewLayout({
+      layout,
+      width: 100,
+      height: 100,
+      splitValues
+    });
+    for (const viewLayout of viewLayouts) {
+      const splitter = compiled.splittersById[viewLayout.splitId];
+      if (splitter) {
+        viewLayout.x = splitter.x;
+        viewLayout.y = splitter.y;
+        viewLayout.width = splitter.width;
+        viewLayout.height = splitter.height;
+        viewLayout.split = splitter.split;
+        viewLayout.minSplit = splitter.minSplit;
+        viewLayout.maxSplit = splitter.maxSplit;
+      }
+    }
+    return compiled.views.map(
+      (view) => view.clone({
+        x: `${view.props.x}%`,
+        y: `${view.props.y}%`,
+        width: `${view.props.width}%`,
+        height: `${view.props.height}%`
+      })
+    );
+  }
+  var SplitterWidget = class extends import_core11.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-splitter";
       this.placement = "fill";
+      this.splitValues = {};
       this.needsUpdate = true;
-      this.viewLayouts = parseViewLayout(this.props.viewLayout);
+      this.updateViewLayout(this.props.viewLayout);
     }
     setProps(props) {
-      if (props.viewLayout && !(0, import_core10._deepEqual)(props.viewLayout, this.props.viewLayout, -1)) {
-        this.viewLayouts = parseViewLayout(props.viewLayout);
+      if (props.viewLayout && !(0, import_core11._deepEqual)(props.viewLayout, this.props.viewLayout, -1)) {
+        this.updateViewLayout(props.viewLayout);
         this.views = void 0;
       }
       super.setProps(props);
     }
+    updateViewLayout(viewLayout) {
+      const adapted = adaptViewLayout(viewLayout);
+      this.viewLayout = adapted.layout;
+      this.viewLayouts = adapted.viewLayouts;
+      this.splitValues = {};
+    }
     onRedraw() {
       super.updateHTML();
     }
@@ -1839,7 +2352,7 @@ var __exports__ = (() => {
     // so we update deck props here and rerender DOM in the next onRedraw
     updateHTML() {
       if (!this.views) {
-        this.views = evaluateViews(this.viewLayouts[0]);
+        this.views = evaluateViews(this.viewLayout, this.viewLayouts, this.splitValues);
         this.props.onChange(this.views.slice());
       }
       requestAnimationFrame(() => {
@@ -1861,8 +2374,8 @@ var __exports__ = (() => {
       }
     }
     onChange(newSplit, layout) {
-      layout.split = newSplit;
-      this.views = evaluateViews(this.viewLayouts[0]);
+      this.splitValues = { ...this.splitValues, [layout.splitId]: newSplit };
+      this.views = evaluateViews(this.viewLayout, this.viewLayouts, this.splitValues);
       this.props.onChange(this.views.slice());
       this.doUpdate();
     }
@@ -1884,7 +2397,7 @@ var __exports__ = (() => {
     }
   };
   SplitterWidget.defaultProps = {
-    ...import_core10.Widget.defaultProps,
+    ...import_core11.Widget.defaultProps,
     id: "splitter-widget",
     viewLayout: void 0,
     onChange: () => {
@@ -1963,7 +2476,7 @@ var __exports__ = (() => {
   }
 
   // src/info-widget.tsx
-  var import_core12 = __toESM(require_core(), 1);
+  var import_core13 = __toESM(require_core(), 1);
 
   // ../../node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
   var min = Math.min;
@@ -3504,7 +4017,7 @@ var __exports__ = (() => {
   };
 
   // src/info-widget.tsx
-  var InfoWidget = class extends import_core12.Widget {
+  var InfoWidget = class extends import_core13.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-info";
@@ -3595,7 +4108,7 @@ var __exports__ = (() => {
     }
   };
   InfoWidget.defaultProps = {
-    ...import_core12.Widget.defaultProps,
+    ...import_core13.Widget.defaultProps,
     id: "info",
     viewId: null,
     mode: "hover",
@@ -3606,8 +4119,8 @@ var __exports__ = (() => {
   };
 
   // src/popup-widget.tsx
-  var import_core13 = __toESM(require_core(), 1);
-  var PopupWidget = class extends import_core13.Widget {
+  var import_core14 = __toESM(require_core(), 1);
+  var PopupWidget = class extends import_core14.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-popup";
@@ -3692,7 +4205,7 @@ var __exports__ = (() => {
     }
   };
   PopupWidget.defaultProps = {
-    ...import_core13.Widget.defaultProps,
+    ...import_core14.Widget.defaultProps,
     id: "info",
     viewId: null,
     position: [0, 0],
@@ -3709,8 +4222,8 @@ var __exports__ = (() => {
   };
 
   // src/context-menu-widget.tsx
-  var import_core14 = __toESM(require_core(), 1);
-  var ContextMenuWidget = class extends import_core14.Widget {
+  var import_core15 = __toESM(require_core(), 1);
+  var ContextMenuWidget = class extends import_core15.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-context-menu";
@@ -3782,7 +4295,7 @@ var __exports__ = (() => {
     }
   };
   ContextMenuWidget.defaultProps = {
-    ...import_core14.Widget.defaultProps,
+    ...import_core15.Widget.defaultProps,
     id: "context",
     viewId: null,
     menuItems: [],
@@ -3795,7 +4308,7 @@ var __exports__ = (() => {
   };
 
   // src/scrollbar-widget.tsx
-  var import_core15 = __toESM(require_core(), 1);
+  var import_core16 = __toESM(require_core(), 1);
 
   // src/lib/components/range-input.tsx
   var wheelListenerOptions = { passive: false };
@@ -4148,7 +4661,7 @@ var __exports__ = (() => {
     }
     return value;
   };
-  var _ScrollbarWidget = class extends import_core15.Widget {
+  var _ScrollbarWidget = class extends import_core16.Widget {
     constructor(props) {
       const resolved = {
         ..._ScrollbarWidget.defaultProps,
@@ -4317,7 +4830,7 @@ var __exports__ = (() => {
   };
   var ScrollbarWidget = _ScrollbarWidget;
   ScrollbarWidget.defaultProps = {
-    ...import_core15.Widget.defaultProps,
+    ...import_core16.Widget.defaultProps,
     contentBounds: null,
     placement: "top-right",
     viewId: null,
@@ -4342,8 +4855,8 @@ var __exports__ = (() => {
   }
 
   // src/icon-widget.tsx
-  var import_core16 = __toESM(require_core(), 1);
-  var IconWidget = class extends import_core16.Widget {
+  var import_core17 = __toESM(require_core(), 1);
+  var IconWidget = class extends import_core17.Widget {
     constructor(props) {
       super(props);
       this.className = "";
@@ -4374,7 +4887,7 @@ var __exports__ = (() => {
     }
   };
   IconWidget.defaultProps = {
-    ...import_core16.Widget.defaultProps,
+    ...import_core17.Widget.defaultProps,
     id: "icon",
     placement: "top-left",
     viewId: null,
@@ -4385,8 +4898,8 @@ var __exports__ = (() => {
   };
 
   // src/toggle-widget.tsx
-  var import_core17 = __toESM(require_core(), 1);
-  var ToggleWidget = class extends import_core17.Widget {
+  var import_core18 = __toESM(require_core(), 1);
+  var ToggleWidget = class extends import_core18.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-toggle";
@@ -4434,7 +4947,7 @@ var __exports__ = (() => {
     }
   };
   ToggleWidget.defaultProps = {
-    ...import_core17.Widget.defaultProps,
+    ...import_core18.Widget.defaultProps,
     id: "icon",
     placement: "top-left",
     viewId: null,
@@ -4449,8 +4962,8 @@ var __exports__ = (() => {
   };
 
   // src/selector-widget.tsx
-  var import_core18 = __toESM(require_core(), 1);
-  var SelectorWidget = class extends import_core18.Widget {
+  var import_core19 = __toESM(require_core(), 1);
+  var SelectorWidget = class extends import_core19.Widget {
     constructor(props) {
       super(props);
       this.className = "deck-widget-selector";
@@ -4509,7 +5022,7 @@ var __exports__ = (() => {
     }
   };
   SelectorWidget.defaultProps = {
-    ...import_core18.Widget.defaultProps,
+    ...import_core19.Widget.defaultProps,
     id: "view-selector",
     placement: "top-left",
     viewId: null,
@@ -4520,8 +5033,8 @@ var __exports__ = (() => {
   };
 
   // src/timeline-widget.tsx
-  var import_core19 = __toESM(require_core(), 1);
-  var TimelineWidget = class extends import_core19.Widget {
+  var import_core20 = __toESM(require_core(), 1);
+  var TimelineWidget = class extends import_core20.Widget {
     constructor(props = {}) {
       super(props);
       this.id = "timeline";
@@ -4707,7 +5220,7 @@ var __exports__ = (() => {
     }
   };
   TimelineWidget.defaultProps = {
-    ...import_core19.Widget.defaultProps,
+    ...import_core20.Widget.defaultProps,
     id: "timeline",
     placement: "bottom-left",
     viewId: null,
@@ -4728,8 +5241,8 @@ var __exports__ = (() => {
   };
 
   // src/screenshot-widget.tsx
-  var import_core20 = __toESM(require_core(), 1);
-  var ScreenshotWidget = class extends import_core20.Widget {
+  var import_core21 = __toESM(require_core(), 1);
+  var ScreenshotWidget = class extends import_core21.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-screenshot";
@@ -4778,7 +5291,7 @@ var __exports__ = (() => {
     }
   };
   ScreenshotWidget.defaultProps = {
-    ...import_core20.Widget.defaultProps,
+    ...import_core21.Widget.defaultProps,
     id: "screenshot",
     placement: "top-left",
     viewId: null,
@@ -4789,8 +5302,8 @@ var __exports__ = (() => {
   };
 
   // src/theme-widget.tsx
-  var import_core21 = __toESM(require_core(), 1);
   var import_core22 = __toESM(require_core(), 1);
+  var import_core23 = __toESM(require_core(), 1);
 
   // src/themes.ts
   var LightTheme = {
@@ -4907,7 +5420,7 @@ var __exports__ = (() => {
   };
 
   // src/theme-widget.tsx
-  var ThemeWidget = class extends import_core22.Widget {
+  var ThemeWidget = class extends import_core23.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-theme";
@@ -4959,16 +5472,16 @@ var __exports__ = (() => {
     /** Apply theme styling without changing internal state */
     _applyTheme(themeMode, rootElement) {
       const themeStyle = themeMode === "dark" ? this.props.darkModeTheme : this.props.lightModeTheme;
-      if ((0, import_core21._deepEqual)(themeStyle, this.appliedTheme, 1)) {
+      if ((0, import_core22._deepEqual)(themeStyle, this.appliedTheme, 1)) {
         return;
       }
       const container = rootElement.closest(".deck-widget-container");
       if (!container)
         return;
-      (0, import_core21._applyStyles)(container, themeStyle);
+      (0, import_core22._applyStyles)(container, themeStyle);
       this.appliedTheme = themeStyle;
       const label = themeMode === "dark" ? this.props.darkModeLabel : this.props.lightModeLabel;
-      import_core21.log.log(1, `Switched theme to ${label}`, themeStyle)();
+      import_core22.log.log(1, `Switched theme to ${label}`, themeStyle)();
     }
     /** Read browser preference */
     _getInitialThemeMode() {
@@ -4983,7 +5496,7 @@ var __exports__ = (() => {
     }
   };
   ThemeWidget.defaultProps = {
-    ...import_core22.Widget.defaultProps,
+    ...import_core23.Widget.defaultProps,
     id: "theme",
     placement: "top-left",
     viewId: null,
@@ -4998,8 +5511,8 @@ var __exports__ = (() => {
   };
 
   // src/loading-widget.tsx
-  var import_core23 = __toESM(require_core(), 1);
-  var LoadingWidget = class extends import_core23.Widget {
+  var import_core24 = __toESM(require_core(), 1);
+  var LoadingWidget = class extends import_core24.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-loading";
@@ -5039,7 +5552,7 @@ var __exports__ = (() => {
     }
   };
   LoadingWidget.defaultProps = {
-    ...import_core23.Widget.defaultProps,
+    ...import_core24.Widget.defaultProps,
     id: "loading",
     placement: "top-left",
     viewId: null,
@@ -5049,8 +5562,8 @@ var __exports__ = (() => {
   };
 
   // src/stats-widget.tsx
-  var import_core24 = __toESM(require_core(), 1);
-  var import_core25 = __toESM(require_core2(), 1);
+  var import_core25 = __toESM(require_core(), 1);
+  var import_core26 = __toESM(require_core2(), 1);
   var DEFAULT_COUNT_FORMATTER = (stat) => `${stat.name}: ${stat.count}`;
   function formatTime(time) {
     return time < 1e3 ? `${time.toFixed(2)}ms` : `${(time / 1e3).toFixed(2)}s`;
@@ -5066,7 +5579,7 @@ var __exports__ = (() => {
     fps: (stat) => `${stat.name}: ${Math.round(stat.getHz())}fps`,
     memory: (stat) => `${stat.name}: ${formatMemory(stat.count)}`
   };
-  var StatsWidget = class extends import_core24.Widget {
+  var StatsWidget = class extends import_core25.Widget {
     constructor(props = {}) {
       super(props);
       this.className = "deck-widget-stats";
@@ -5173,7 +5686,7 @@ var __exports__ = (() => {
           const metrics = this.deck?.metrics ?? {};
           return Object.entries(metrics);
         case "luma":
-          return Array.from(import_core25.luma.stats.stats.values())[0];
+          return Array.from(import_core26.luma.stats.stats.values())[0];
         case "device":
           const device = this.deck?.device;
           const stats = device?.statsManager.stats.values();
@@ -5209,7 +5722,7 @@ var __exports__ = (() => {
     }
   };
   StatsWidget.defaultProps = {
-    ...import_core24.Widget.defaultProps,
+    ...import_core25.Widget.defaultProps,
     type: "deck",
     placement: "top-left",
     viewId: null,