@cardstack/boxel-cli 0.2.0 → 0.3.0-unstable.13

package/bundled-types/boxel-ui/components/resizable-panel-group/usage.gts

@@ -0,0 +1,350 @@
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+import {
+  type CSSVariableInfo,
+  cssVariable,
+} from 'ember-freestyle/decorators/css-variable';
+
+import { not } from '../../helpers.ts';
+import cssVar from '../../helpers/css-var.ts';
+import ResizablePanelGroup from './index.gts';
+
+export default class ResizablePanelUsage extends Component {
+  @tracked horizontalPanel1DefaultSize = 25;
+  @tracked horizontalPanel1MinSize = undefined;
+  @tracked horizontalPanel1MaxSize = undefined;
+  @tracked horizontalPanel1Collapsible = true;
+
+  @tracked horizontalPanel2DefaultSize = 50;
+  @tracked horizontalPanel2MinSize = undefined;
+  @tracked horizontalPanel2MaxSize = undefined;
+  @tracked horizontalPanel2Collapsible = true;
+
+  @tracked horizontalPanel3DefaultSize = 25;
+  @tracked horizontalPanel3MinSize = undefined;
+  @tracked horizontalPanel3MaxSize = undefined;
+  @tracked horizontalPanel3Collapsible = true;
+  @tracked horizontalPanel3IsHidden = false;
+
+  @tracked verticalReverseCollapse = true;
+
+  @tracked verticalPanel1DefaultSize = 33;
+  @tracked verticalPanel1MinSize = undefined;
+  @tracked verticalPanel1MaxSize = undefined;
+  @tracked verticalPanel1Collapsible = true;
+
+  @tracked verticalPanel2DefaultSize = 67;
+  @tracked verticalPanel2MinSize = undefined;
+  @tracked verticalPanel2MaxSize = undefined;
+  @tracked verticalPanel2Collapsible = true;
+
+  cssClassName = 'boxel-panel';
+  @cssVariable declare boxelPanelResizeHandleHeight: CSSVariableInfo;
+  @cssVariable declare boxelPanelResizeHandleWidth: CSSVariableInfo;
+  @cssVariable declare boxelPanelResizeHandleBackgroundColor: CSSVariableInfo;
+  @cssVariable
+  declare boxelPanelResizeHandleHoverBackgroundColor: CSSVariableInfo;
+
+  <template>
+    <FreestyleUsage @name='Horizontal ResizablePanelGroup'>
+      <:example>
+        <ResizablePanelGroup
+          @orientation='horizontal'
+          style={{cssVar
+            boxel-panel-resize-handle-height=this.boxelPanelResizeHandleHeight.value
+            boxel-panel-resize-handle-background-color=this.boxelPanelResizeHandleBackgroundColor.value
+            boxel-panel-resize-handle-hover-background-color=this.boxelPanelResizeHandleHoverBackgroundColor.value
+          }}
+          as |ResizablePanel ResizeHandle|
+        >
+          <ResizablePanel
+            class='panel'
+            @defaultSize={{this.horizontalPanel1DefaultSize}}
+            @minSize={{this.horizontalPanel1MinSize}}
+            @maxSize={{this.horizontalPanel1MaxSize}}
+            @collapsible={{this.horizontalPanel1Collapsible}}
+          >
+            Panel 1
+          </ResizablePanel>
+          <ResizeHandle />
+          <ResizablePanel
+            class='panel'
+            @defaultSize={{this.horizontalPanel2DefaultSize}}
+            @minSize={{this.horizontalPanel2MinSize}}
+            @maxSize={{this.horizontalPanel2MaxSize}}
+            @collapsible={{this.horizontalPanel2Collapsible}}
+          >
+            Panel 2
+          </ResizablePanel>
+          {{#if (not this.horizontalPanel3IsHidden)}}
+            <ResizeHandle />
+            <ResizablePanel
+              class='panel'
+              @defaultSize={{this.horizontalPanel3DefaultSize}}
+              @minSize={{this.horizontalPanel3MinSize}}
+              @maxSize={{this.horizontalPanel3MaxSize}}
+              @collapsible={{this.horizontalPanel3Collapsible}}
+            >
+              Panel 3
+            </ResizablePanel>
+          {{/if}}
+        </ResizablePanelGroup>
+      </:example>
+      <:api as |Args|>
+        <Args.Number
+          @name='defaultSize - Panel 1'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel1DefaultSize}}
+          @onInput={{fn (mut this.horizontalPanel1DefaultSize)}}
+          @required={{true}}
+        />
+        <Args.Number
+          @name='minSize - Panel 1'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.horizontalPanel1MinSize}}
+          @onInput={{fn (mut this.horizontalPanel1MinSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='maxSize - Panel 1'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel1MaxSize}}
+          @onInput={{fn (mut this.horizontalPanel1MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Bool
+          @name='collapsible - Panel 1'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.horizontalPanel1Collapsible}}
+          @onInput={{fn (mut this.horizontalPanel1Collapsible)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='defaultSize - Panel 2'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel2DefaultSize}}
+          @onInput={{fn (mut this.horizontalPanel2DefaultSize)}}
+          @required={{true}}
+        />
+        <Args.Number
+          @name='minSize - Panel 2'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.horizontalPanel2MinSize}}
+          @onInput={{fn (mut this.horizontalPanel2MinSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='maxSize - Panel 2'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel2MaxSize}}
+          @onInput={{fn (mut this.horizontalPanel2MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Bool
+          @name='collapsible - Panel 2'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.horizontalPanel2Collapsible}}
+          @onInput={{fn (mut this.horizontalPanel2Collapsible)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='defaultSize - Panel 3'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel3DefaultSize}}
+          @onInput={{fn (mut this.horizontalPanel3DefaultSize)}}
+          @required={{true}}
+        />
+        <Args.Number
+          @name='minSize - Panel 3'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.horizontalPanel3MinSize}}
+          @onInput={{fn (mut this.horizontalPanel3MinSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='maxSize - Panel 3'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.horizontalPanel3MaxSize}}
+          @onInput={{fn (mut this.horizontalPanel3MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Bool
+          @name='collapsible - Panel 2'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.horizontalPanel3Collapsible}}
+          @onInput={{fn (mut this.horizontalPanel3Collapsible)}}
+          @required={{false}}
+        />
+        <Args.Bool
+          @name='isHidden'
+          @optional={{true}}
+          @onInput={{fn (mut this.horizontalPanel3IsHidden)}}
+          @value={{this.horizontalPanel3IsHidden}}
+        />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='boxel-panel-resize-handle-height'
+          @type='dimension'
+          @defaultValue={{this.boxelPanelResizeHandleHeight.defaults}}
+          @value={{this.boxelPanelResizeHandleHeight.value}}
+          @onInput={{this.boxelPanelResizeHandleHeight.update}}
+        />
+        <Css.Basic
+          @name='boxel-panel-resize-handle-background-color'
+          @type='color'
+          @defaultValue={{this.boxelPanelResizeHandleBackgroundColor.defaults}}
+          @value={{this.boxelPanelResizeHandleBackgroundColor.value}}
+          @onInput={{this.boxelPanelResizeHandleBackgroundColor.update}}
+        />
+        <Css.Basic
+          @name='boxel-panel-resize-handle-hover-background-color'
+          @type='color'
+          @defaultValue={{this.boxelPanelResizeHandleHoverBackgroundColor.defaults}}
+          @value={{this.boxelPanelResizeHandleHoverBackgroundColor.value}}
+          @onInput={{this.boxelPanelResizeHandleHoverBackgroundColor.update}}
+        />
+      </:cssVars>
+    </FreestyleUsage>
+    <FreestyleUsage
+      @name='Two-panel vertical ResizablePanelGroup with reversed collapse'
+    >
+      <:description>
+        @reverseCollapse
+      </:description>
+      <:example>
+        <div class='vertical-container'>
+          <ResizablePanelGroup
+            @orientation='vertical'
+            @reverseCollapse={{this.verticalReverseCollapse}}
+            style={{cssVar
+              boxel-panel-resize-handle-width=this.boxelPanelResizeHandleWidth.value
+              boxel-panel-resize-handle-background-color=this.boxelPanelResizeHandleBackgroundColor.value
+              boxel-panel-resize-handle-hover-background-color=this.boxelPanelResizeHandleHoverBackgroundColor.value
+            }}
+            as |ResizablePanel ResizeHandle|
+          >
+            <ResizablePanel
+              class='panel'
+              @defaultSize={{this.verticalPanel1DefaultSize}}
+              @minSize={{this.verticalPanel1MinSize}}
+              @maxSize={{this.verticalPanel1MaxSize}}
+              @collapsible={{this.verticalPanel1Collapsible}}
+            >
+              Panel 1
+            </ResizablePanel>
+            <ResizeHandle />
+            <ResizablePanel
+              class='panel'
+              @defaultSize={{this.verticalPanel2DefaultSize}}
+              @minSize={{this.verticalPanel2MinSize}}
+              @maxSize={{this.verticalPanel2MaxSize}}
+              @collapsible={{this.verticalPanel2Collapsible}}
+            >
+              Panel 2
+            </ResizablePanel>
+          </ResizablePanelGroup>
+        </div>
+      </:example>
+
+      <:api as |Args|>
+        <Args.Bool
+          @name='reverseCollapse'
+          @description='Double-clicking the handle to collapse a panel will default to collapsing outward, this reverses it, which may be preferable in a two-panel setup.'
+          @value={{this.verticalReverseCollapse}}
+          @onInput={{fn (mut this.verticalReverseCollapse)}}
+        />
+        <Args.Number
+          @name='defaultSize - Panel 1'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.verticalPanel1DefaultSize}}
+          @onInput={{fn (mut this.verticalPanel1DefaultSize)}}
+          @required={{true}}
+        />
+        <Args.Number
+          @name='minSize - Panel 1'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.verticalPanel1MinSize}}
+          @onInput={{fn (mut this.verticalPanel1MinSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='maxSize - Panel 1'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.verticalPanel1MaxSize}}
+          @onInput={{fn (mut this.verticalPanel1MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='collapsible - Panel 1'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.verticalPanel1Collapsible}}
+          @onInput={{fn (mut this.verticalPanel1Collapsible)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='defaultSize - Panel 2'
+          @description='The default width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.verticalPanel2DefaultSize}}
+          @onInput={{fn (mut this.verticalPanel2DefaultSize)}}
+          @required={{true}}
+        />
+        <Args.Number
+          @name='minSize - Panel 2'
+          @description='The minimum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage. In double-click event, this argumen will be ingored if the panel is collapsible.'
+          @value={{this.verticalPanel2MinSize}}
+          @onInput={{fn (mut this.verticalPanel2MinSize)}}
+          @required={{false}}
+        />
+        <Args.Number
+          @name='maxSize - Panel 2'
+          @description='The maximum width of the panel is determined by this argument. The value of the argument must be a number between 0 and 100, representing a percentage.'
+          @value={{this.verticalPanel2MaxSize}}
+          @onInput={{fn (mut this.verticalPanel2MaxSize)}}
+          @required={{false}}
+        />
+        <Args.Bool
+          @name='collapsible - Panel 2'
+          @description='Before collapsing a panel, this argument will be checked. The default value for this argument is true. Please also define minSize if you set the value of this argument to false.'
+          @value={{this.verticalPanel2Collapsible}}
+          @onInput={{fn (mut this.verticalPanel2Collapsible)}}
+          @required={{false}}
+        />
+      </:api>
+      <:cssVars as |Css|>
+        <Css.Basic
+          @name='boxel-panel-resize-handle-width'
+          @type='dimension'
+          @defaultValue={{this.boxelPanelResizeHandleWidth.defaults}}
+          @value={{this.boxelPanelResizeHandleWidth.value}}
+          @onInput={{this.boxelPanelResizeHandleWidth.update}}
+        />
+        <Css.Basic
+          @name='boxel-panel-resize-handle-background-color'
+          @type='color'
+          @defaultValue={{this.boxelPanelResizeHandleBackgroundColor.defaults}}
+          @value={{this.boxelPanelResizeHandleBackgroundColor.value}}
+          @onInput={{this.boxelPanelResizeHandleBackgroundColor.update}}
+        />
+        <Css.Basic
+          @name='boxel-panel-resize-handle-hover-background-color'
+          @type='color'
+          @defaultValue={{this.boxelPanelResizeHandleHoverBackgroundColor.defaults}}
+          @value={{this.boxelPanelResizeHandleHoverBackgroundColor.value}}
+          @onInput={{this.boxelPanelResizeHandleHoverBackgroundColor.update}}
+        />
+      </:cssVars>
+    </FreestyleUsage>
+    <style scoped>
+      .panel {
+        background-color: var(--boxel-200);
+      }
+
+      .vertical-container {
+        height: 30rem;
+      }
+    </style>
+  </template>
+}

package/bundled-types/boxel-ui/components/resizable-panel-group/utils/adjust-layout-by-delta.ts

@@ -0,0 +1,231 @@
+import { fuzzyLayoutsEqual } from './fuzzy-layouts-equal.ts';
+import { fuzzyCompareNumbers, fuzzyNumbersEqual } from './fuzzy-numbers.ts';
+import { resizePanel } from './resize-panel.ts';
+import type { ResizablePanelConstraints } from './types.ts';
+
+export function adjustLayoutByDelta({
+  delta,
+  initialLayout,
+  panelConstraints: panelConstraintsArray,
+  pivotIndices,
+  prevLayout,
+}: {
+  delta: number;
+  initialLayout: number[];
+  panelConstraints: ResizablePanelConstraints[];
+  pivotIndices: number[];
+  prevLayout: number[];
+}): number[] {
+  if (fuzzyNumbersEqual(delta, 0)) {
+    return initialLayout;
+  }
+
+  const nextLayout = [...initialLayout];
+
+  const [firstPivotIndex, secondPivotIndex] = pivotIndices;
+  if (firstPivotIndex == null || secondPivotIndex == null) {
+    throw new Error('invalid pivot index');
+  }
+
+  let deltaApplied = 0;
+
+  // A resizing panel affects the panels before or after it.
+  //
+  // A negative delta means the panel(s) immediately after the resize handle should grow/expand by decreasing its offset.
+  // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.
+  //
+  // A positive delta means the panel(s) immediately before the resize handle should "expand".
+  // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resize handle.
+
+  {
+    // Pre-calculate max available delta in the opposite direction of our pivot.
+    // This will be the maximum amount we're allowed to expand/contract the panels in the primary direction.
+    // If this amount is less than the requested delta, adjust the requested delta.
+    // If this amount is greater than the requested delta, that's useful information too–
+    // as an expanding panel might change from collapsed to min size.
+
+    const increment = delta < 0 ? 1 : -1;
+
+    let index = delta < 0 ? secondPivotIndex : firstPivotIndex;
+    let maxAvailableDelta = 0;
+
+    // DEBUG.push("pre calc...");
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      const prevSize = initialLayout[index];
+      if (prevSize == null) {
+        throw new Error(`Previous layout not found for panel index ${index}`);
+      }
+
+      const maxSafeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: 100,
+      });
+      const delta = maxSafeSize - prevSize;
+      maxAvailableDelta += delta;
+      index += increment;
+
+      if (index < 0 || index >= panelConstraintsArray.length) {
+        break;
+      }
+    }
+
+    const minAbsDelta = Math.min(Math.abs(delta), Math.abs(maxAvailableDelta));
+    delta = delta < 0 ? 0 - minAbsDelta : minAbsDelta;
+  }
+
+  {
+    // WORKAROUND: For a collapsed panel, we need to adjust the delta to the minimum size.
+    // TODO: Address the following inconsistent behaviors:
+    // - When dragging outward on a collapsed panel, it opens the panel, but dragging inward does not collapse it again.
+    //   The behavior should match that of dragging an opened panel where the cursor delta reaches the panel's minimum size.
+    // - When dragging an opened panel inward and the delta reaches the panel's minimum size, the panel collapses.
+    //   However, if you continue dragging outward, it does not reopen as it does in the first scenario.
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+
+    const initSize = initialLayout[pivotIndex];
+    if (initSize == null) {
+      throw new Error(
+        `Previous layout not found for panel index ${pivotIndex}`,
+      );
+    }
+
+    const prevSize = prevLayout[pivotIndex];
+    if (prevSize == null) {
+      throw new Error(
+        `Previous layout not found for panel index ${pivotIndex}`,
+      );
+    }
+
+    let minSize = panelConstraintsArray[pivotIndex]?.minSize;
+    if (
+      (initSize == 0 || prevSize == 0) &&
+      minSize != null &&
+      fuzzyCompareNumbers(Math.abs(delta), minSize) < 0
+    ) {
+      delta = delta >= 0 ? minSize : 0 - minSize;
+    }
+  }
+
+  {
+    // Delta added to a panel needs to be subtracted from other panels (within the constraints that those panels allow).
+
+    const pivotIndex = delta < 0 ? firstPivotIndex : secondPivotIndex;
+    let index = pivotIndex;
+    while (index >= 0 && index < panelConstraintsArray.length) {
+      const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
+
+      const prevSize = initialLayout[index];
+      if (prevSize == null) {
+        throw new Error(`Previous layout not found for panel index ${index}`);
+      }
+
+      const unsafeSize = prevSize - deltaRemaining;
+      const safeSize = resizePanel({
+        panelConstraints: panelConstraintsArray,
+        panelIndex: index,
+        size: unsafeSize,
+      });
+
+      if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+        deltaApplied += prevSize - safeSize;
+
+        nextLayout[index] = safeSize;
+
+        if (
+          deltaApplied
+            .toPrecision(3)
+            .localeCompare(Math.abs(delta).toPrecision(3), undefined, {
+              numeric: true,
+            }) >= 0
+        ) {
+          break;
+        }
+      }
+
+      if (delta < 0) {
+        index--;
+      } else {
+        index++;
+      }
+    }
+  }
+
+  // If we were unable to resize any of the panels panels, return the previous state.
+  // This will essentially bailout and ignore e.g. drags past a panel's boundaries
+  if (fuzzyLayoutsEqual(prevLayout, nextLayout)) {
+    return prevLayout;
+  }
+
+  {
+    // Now distribute the applied delta to the panels in the other direction
+    const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+
+    const prevSize = initialLayout[pivotIndex];
+    if (prevSize == null) {
+      throw new Error(
+        `Previous layout not found for panel index ${pivotIndex}`,
+      );
+    }
+
+    const unsafeSize = prevSize + deltaApplied;
+    const safeSize = resizePanel({
+      panelConstraints: panelConstraintsArray,
+      panelIndex: pivotIndex,
+      size: unsafeSize,
+    });
+
+    // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
+    nextLayout[pivotIndex] = safeSize;
+
+    // Edge case where expanding or contracting one panel caused another one to change collapsed state
+    if (!fuzzyNumbersEqual(safeSize, unsafeSize)) {
+      let deltaRemaining = unsafeSize - safeSize;
+
+      const pivotIndex = delta < 0 ? secondPivotIndex : firstPivotIndex;
+      let index = pivotIndex;
+      while (index >= 0 && index < panelConstraintsArray.length) {
+        const prevSize = nextLayout[index];
+        if (prevSize == null) {
+          throw new Error(
+            `Previous layout not found for panel index ${pivotIndex}`,
+          );
+        }
+
+        const unsafeSize = prevSize + deltaRemaining;
+        const safeSize = resizePanel({
+          panelConstraints: panelConstraintsArray,
+          panelIndex: index,
+          size: unsafeSize,
+        });
+
+        if (!fuzzyNumbersEqual(prevSize, safeSize)) {
+          deltaRemaining -= safeSize - prevSize;
+
+          nextLayout[index] = safeSize;
+        }
+
+        if (fuzzyNumbersEqual(deltaRemaining, 0)) {
+          break;
+        }
+
+        if (delta > 0) {
+          index--;
+        } else {
+          index++;
+        }
+      }
+    }
+  }
+
+  const totalSize = nextLayout.reduce((total, size) => size + total, 0);
+
+  // If our new layout doesn't add up to 100%, that means the requested delta can't be applied
+  // In that case, fall back to our most recent valid layout
+  if (!fuzzyNumbersEqual(totalSize, 100)) {
+    return prevLayout;
+  }
+
+  return nextLayout;
+}

package/bundled-types/boxel-ui/components/resizable-panel-group/utils/assert.ts

@@ -0,0 +1,10 @@
+export function assert(
+  expectedCondition: any,
+  message: string,
+): asserts expectedCondition {
+  if (!expectedCondition) {
+    console.error(message);
+
+    throw Error(message);
+  }
+}

package/bundled-types/boxel-ui/components/resizable-panel-group/utils/calculate-delta-percentage.ts

@@ -0,0 +1,41 @@
+import { getPanelGroupElement } from './dom/get-panel-group-element.ts';
+import { getResizeHandleElement } from './dom/get-resize-handle-element.ts';
+import { getResizeEventCursorPosition } from './get-resize-event-cursor-position.ts';
+import type { DragState, Orientation, ResizeEvent } from './types.ts';
+
+export function calculateDeltaPercentage(
+  event: ResizeEvent,
+  dragHandleId: string,
+  orientation: Orientation,
+  initialDragState: DragState,
+  panelGroupElement: HTMLElement,
+): number {
+  const isHorizontal = orientation === 'horizontal';
+
+  const handleElement = getResizeHandleElement(dragHandleId, panelGroupElement);
+  if (!handleElement) {
+    throw new Error(`No resize handle element found for id "${dragHandleId}"`);
+  }
+
+  const groupId = handleElement.getAttribute('data-boxel-panel-group-id');
+  if (!groupId) {
+    throw new Error(`Resize handle element has no group id attribute`);
+  }
+
+  let { initialCursorPosition } = initialDragState;
+
+  const cursorPosition = getResizeEventCursorPosition(orientation, event);
+
+  const groupElement = getPanelGroupElement(groupId, panelGroupElement);
+  if (!groupElement) {
+    throw new Error(`No group element found for id "${groupId}"`);
+  }
+
+  const groupRect = groupElement.getBoundingClientRect();
+  const groupSizeInPixels = isHorizontal ? groupRect.width : groupRect.height;
+
+  const offsetPixels = cursorPosition - initialCursorPosition;
+  const offsetPercentage = (offsetPixels / groupSizeInPixels) * 100;
+
+  return offsetPercentage;
+}

package/bundled-types/boxel-ui/components/resizable-panel-group/utils/calculate-unsafe-default-layout.ts

@@ -0,0 +1,53 @@
+import type { ResizablePanelConstraints } from './types.ts';
+
+export function calculateUnsafeDefaultLayout({
+  panels,
+}: {
+  panels: {
+    constraints: ResizablePanelConstraints;
+  }[];
+}): number[] {
+  const layout = Array<number>(panels.length);
+
+  const panelConstraintsArray = panels.map((panel) => panel.constraints);
+
+  let numPanelsWithSizes = 0;
+  let remainingSize = 100;
+
+  // Distribute default sizes first
+  for (let index = 0; index < panels.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    if (!panelConstraints) {
+      throw new Error(`Panel constraints not found for index ${index}`);
+    }
+    const { defaultSize } = panelConstraints;
+
+    if (defaultSize != null) {
+      numPanelsWithSizes++;
+      layout[index] = defaultSize;
+      remainingSize -= defaultSize;
+    }
+  }
+
+  // Remaining size should be distributed evenly between panels without default sizes
+  for (let index = 0; index < panels.length; index++) {
+    const panelConstraints = panelConstraintsArray[index];
+    if (!panelConstraints) {
+      throw new Error(`Panel constraints not found for index ${index}`);
+    }
+    const { defaultSize } = panelConstraints;
+
+    if (defaultSize != null) {
+      continue;
+    }
+
+    const numRemainingPanels = panels.length - numPanelsWithSizes;
+    const size = remainingSize / numRemainingPanels;
+
+    numPanelsWithSizes++;
+    layout[index] = size;
+    remainingSize -= size;
+  }
+
+  return layout;
+}