@adecore/ui 0.49.7 → 0.50.0

package/dist/SlidingColumn.d.ts

@@ -3,6 +3,7 @@ export interface SlidingColumnProps {
     open: boolean;
     width: number;
     gap?: number;
+    edge?: boolean;
     bounds: {
         min: number;
         max(): number;
@@ -17,4 +18,4 @@ export interface SlidingColumnProps {
     ref?: Ref<HTMLElement>;
     children?: ReactNode;
 }
-export declare function SlidingColumn({ open, width, gap, bounds, onWidthChange, instant, body, className, ref, children }: SlidingColumnProps): import("react").JSX.Element;
+export declare function SlidingColumn({ open, width, gap, edge, bounds, onWidthChange, instant, body, className, ref, children }: SlidingColumnProps): import("react").JSX.Element;

package/dist/SlidingColumn.js

@@ -12,80 +12,82 @@ const TRANSITION_MS = 200;
  * moves, and stay mounted until the slide is over, so a close plays out.
  */
 export function SlidingColumn(t0) {
-  const $ = _c(42);
+  const $ = _c(43);
   const {
     open,
     width,
     gap: t1,
+    edge: t2,
     bounds,
     onWidthChange,
-    instant: t2,
+    instant: t3,
     body,
     className,
     ref,
     children
   } = t0;
   const gap = t1 === undefined ? 0 : t1;
-  const instant = t2 === undefined ? false : t2;
+  const edge = t2 === undefined ? true : t2;
+  const instant = t3 === undefined ? false : t3;
   const [settled, setSettled] = useState(!open);
   if (instant && settled !== !open) {
     setSettled(!open);
   }
   const present = open || !settled;
   const column = useRef(null);
-  let t3;
+  let t4;
   if ($[0] !== gap) {
-    t3 = Math.round(gap);
+    t4 = Math.round(gap);
     $[0] = gap;
-    $[1] = t3;
+    $[1] = t4;
   } else {
-    t3 = $[1];
+    t4 = $[1];
   }
-  const spacing = Math.max(0, t3);
-  const t4 = bounds.min + spacing;
-  let t5;
+  const spacing = Math.max(0, t4);
+  const t5 = bounds.min + spacing;
+  let t6;
   if ($[2] !== bounds || $[3] !== spacing) {
-    t5 = () => bounds.max() + spacing;
+    t6 = () => bounds.max() + spacing;
     $[2] = bounds;
     $[3] = spacing;
-    $[4] = t5;
+    $[4] = t6;
   } else {
-    t5 = $[4];
+    t6 = $[4];
   }
-  const t6 = width + spacing;
-  let t7;
+  const t7 = width + spacing;
+  let t8;
   if ($[5] !== onWidthChange || $[6] !== spacing) {
-    t7 = next => onWidthChange(next - spacing);
+    t8 = next => onWidthChange(next - spacing);
     $[5] = onWidthChange;
     $[6] = spacing;
-    $[7] = t7;
+    $[7] = t8;
   } else {
-    t7 = $[7];
+    t8 = $[7];
   }
-  let t8;
-  if ($[8] !== t4 || $[9] !== t5 || $[10] !== t6 || $[11] !== t7) {
-    t8 = {
-      min: t4,
-      max: t5,
-      size: t6,
+  let t9;
+  if ($[8] !== t5 || $[9] !== t6 || $[10] !== t7 || $[11] !== t8) {
+    t9 = {
+      min: t5,
+      max: t6,
+      size: t7,
       from: "right",
-      onSize: t7
+      onSize: t8
     };
-    $[8] = t4;
-    $[9] = t5;
-    $[10] = t6;
-    $[11] = t7;
-    $[12] = t8;
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+    $[11] = t8;
+    $[12] = t9;
   } else {
-    t8 = $[12];
+    t9 = $[12];
   }
   const {
     startResize
-  } = useColumnResize(column, t8);
+  } = useColumnResize(column, t9);
   let t10;
-  let t9;
+  let t11;
   if ($[13] !== open || $[14] !== settled) {
-    t9 = () => {
+    t10 = () => {
       if (open || settled) {
         return;
       }
@@ -94,64 +96,64 @@ export function SlidingColumn(t0) {
         window.clearTimeout(timer);
       };
     };
-    t10 = [open, settled];
+    t11 = [open, settled];
     $[13] = open;
     $[14] = settled;
     $[15] = t10;
-    $[16] = t9;
+    $[16] = t11;
   } else {
     t10 = $[15];
-    t9 = $[16];
+    t11 = $[16];
   }
-  useEffect(t9, t10);
-  let t11;
+  useEffect(t10, t11);
+  let t12;
   if ($[17] !== ref) {
-    t11 = mergeRefs(column, ref);
+    t12 = mergeRefs(column, ref);
     $[17] = ref;
-    $[18] = t11;
+    $[18] = t12;
   } else {
-    t11 = $[18];
+    t12 = $[18];
   }
-  const t12 = !open;
-  const t13 = instant ? "" : undefined;
-  const t14 = spacing > 0 ? "" : undefined;
-  let t15;
+  const t13 = !open;
+  const t14 = instant ? "" : undefined;
+  const t15 = spacing > 0 ? "" : undefined;
+  let t16;
   if ($[19] !== className) {
-    t15 = clsx("sliding-column flex h-full shrink-0 justify-end overflow-hidden", className);
+    t16 = clsx("sliding-column flex h-full shrink-0 justify-end overflow-hidden", className);
     $[19] = className;
-    $[20] = t15;
+    $[20] = t16;
   } else {
-    t15 = $[20];
+    t16 = $[20];
   }
-  const t16 = open ? width + spacing : 0;
-  let t17;
-  if ($[21] !== t16) {
-    t17 = {
-      width: t16
+  const t17 = open ? width + spacing : 0;
+  let t18;
+  if ($[21] !== t17) {
+    t18 = {
+      width: t17
     };
-    $[21] = t16;
-    $[22] = t17;
+    $[21] = t17;
+    $[22] = t18;
   } else {
-    t17 = $[22];
+    t18 = $[22];
   }
-  let t18;
+  let t19;
   if ($[23] !== open) {
-    t18 = event => {
+    t19 = event => {
       if (event.propertyName === "width" && event.target === event.currentTarget) {
         setSettled(!open);
       }
     };
     $[23] = open;
-    $[24] = t18;
+    $[24] = t19;
   } else {
-    t18 = $[24];
+    t19 = $[24];
   }
-  let t19;
-  if ($[25] !== body || $[26] !== children || $[27] !== open || $[28] !== present || $[29] !== spacing || $[30] !== startResize || $[31] !== width) {
-    t19 = present && /*#__PURE__*/_jsxs("div", {
+  let t20;
+  if ($[25] !== body || $[26] !== children || $[27] !== edge || $[28] !== open || $[29] !== present || $[30] !== spacing || $[31] !== startResize || $[32] !== width) {
+    t20 = present && /*#__PURE__*/_jsxs("div", {
       ref: body?.ref,
       tabIndex: body ? -1 : undefined,
-      className: clsx("relative flex h-full shrink-0 flex-col bg-surface outline-none", spacing === 0 && "border-l border-border"),
+      className: clsx("relative flex h-full shrink-0 flex-col bg-surface outline-none", spacing === 0 && clsx("border-l", edge ? "border-border" : "border-transparent")),
       style: {
         width,
         marginLeft: spacing
@@ -169,38 +171,39 @@ export function SlidingColumn(t0) {
     });
     $[25] = body;
     $[26] = children;
-    $[27] = open;
-    $[28] = present;
-    $[29] = spacing;
-    $[30] = startResize;
-    $[31] = width;
-    $[32] = t19;
+    $[27] = edge;
+    $[28] = open;
+    $[29] = present;
+    $[30] = spacing;
+    $[31] = startResize;
+    $[32] = width;
+    $[33] = t20;
   } else {
-    t19 = $[32];
+    t20 = $[33];
   }
-  let t20;
-  if ($[33] !== t11 || $[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t17 || $[39] !== t18 || $[40] !== t19) {
-    t20 = /*#__PURE__*/_jsx("aside", {
-      ref: t11,
-      inert: t12,
-      "data-instant": t13,
-      "data-gap": t14,
-      className: t15,
-      style: t17,
-      onTransitionEnd: t18,
-      children: t19
+  let t21;
+  if ($[34] !== t12 || $[35] !== t13 || $[36] !== t14 || $[37] !== t15 || $[38] !== t16 || $[39] !== t18 || $[40] !== t19 || $[41] !== t20) {
+    t21 = /*#__PURE__*/_jsx("aside", {
+      ref: t12,
+      inert: t13,
+      "data-instant": t14,
+      "data-gap": t15,
+      className: t16,
+      style: t18,
+      onTransitionEnd: t19,
+      children: t20
     });
-    $[33] = t11;
     $[34] = t12;
     $[35] = t13;
     $[36] = t14;
     $[37] = t15;
-    $[38] = t17;
+    $[38] = t16;
     $[39] = t18;
     $[40] = t19;
     $[41] = t20;
+    $[42] = t21;
   } else {
-    t20 = $[41];
+    t21 = $[42];
   }
-  return t20;
+  return t21;
 }

package/dist/index.d.ts

@@ -16,6 +16,7 @@ export type { MenuCheckProps, MenuHintProps, MenuLabelProps, MenuPopupProps, Men
 export type { KeyValueListItemProps, KeyValueListNameProps, KeyValueListRootProps, KeyValueListValueProps } from './key-value-list/parts.tsx';
 export type { PopoverPopupProps, PopupVariant, PreviewCardPopupProps } from './popover/parts.tsx';
 export type { TabsCountProps, TabsListProps, TabsRootProps, TabsTabProps, TabsValue, TabsVariant } from './tabs/parts.tsx';
+export { tabDropIndex, useTabDrag, type TabDrag, type TabDragOptions } from './tabs/use-tab-drag.ts';
 export { AccentSwatches, type AccentSwatchesProps } from './AccentSwatches.tsx';
 export { Banner, type BannerProps, type BannerTone } from './Banner.tsx';
 export { Button, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant } from './Button.tsx';
@@ -97,6 +98,10 @@ export type { FileTree as FileTreeModel, FileTreeVisibleRow, FileTreeDragAndDrop
 export type { FoldKeyOf, SortRow } from './file-tree/helpers.ts';
 export type { TreeRootProps, TreeRowProps, TreeChevronProps, TreeChevronSlotProps, TreeLabelProps, TreeDecorationProps, TreeControlProps, TreeCheckboxProps } from './tree/parts.tsx';
 export { Workspace, type WorkspaceProps } from './workspace/Workspace.tsx';
+export { WorkspaceRail, WorkspaceRailSeparator, WorkspaceRailSpacer, type WorkspaceRailProps } from './workspace/WorkspaceRail.tsx';
+export { WorkspaceTopRow, type WorkspaceTopRowProps } from './workspace/WorkspaceTopRow.tsx';
+export { useTopRowSlot } from './workspace/top-row-slot.ts';
+export { PaneBar, type PaneBarProps } from './workspace/PaneBar.tsx';
 export type { WorkspaceLayout } from './workspace/context.ts';
 export { DocumentTab, TabStrip, type DocumentTabProps, type TabStripProps, type TabStripItem } from './workspace/TabStrip.tsx';
 export { SplitView, type SplitViewProps, type SplitViewInfo, type SplitViewBounds, type SplitDropTarget, type SplitDrag } from './workspace/SplitView.tsx';

package/dist/index.js

@@ -13,6 +13,7 @@ export * as Menu from './menu/index.parts.js';
 export * as Popover from './popover/index.parts.js';
 export * as PreviewCard from './preview-card/index.parts.js';
 export * as Tabs from './tabs/index.parts.js';
+export { tabDropIndex, useTabDrag } from './tabs/use-tab-drag.js';
 export { AccentSwatches } from "./AccentSwatches.js";
 export { Banner } from "./Banner.js";
 export { Button } from "./Button.js";
@@ -87,6 +88,10 @@ export { useMeasuredWidth } from './useMeasuredWidth.js';
 export { useNow, useTickingText } from './useNow.js';
 export { useFileTree } from './file-tree/use-file-tree.js';
 export { Workspace } from "./workspace/Workspace.js";
+export { WorkspaceRail, WorkspaceRailSeparator, WorkspaceRailSpacer } from "./workspace/WorkspaceRail.js";
+export { WorkspaceTopRow } from "./workspace/WorkspaceTopRow.js";
+export { useTopRowSlot } from './workspace/top-row-slot.js';
+export { PaneBar } from "./workspace/PaneBar.js";
 export { DocumentTab, TabStrip } from "./workspace/TabStrip.js";
 export { SplitView } from "./workspace/SplitView.js";
 export { DropPreview } from "./workspace/DropPreview.js";

package/dist/locales/en.d.ts

@@ -87,6 +87,9 @@ declare const _default: {
         movePane: string;
         maximize: string;
         restore: string;
+        moreActions: string;
+        closePane: string;
+        tools: string;
     };
 };
 export default _default;

package/dist/locales/en.js

@@ -86,6 +86,9 @@ export default {
     pane: 'Panel',
     movePane: 'Move panel',
     maximize: 'Maximize panel',
-    restore: 'Restore panels'
+    restore: 'Restore panels',
+    moreActions: 'More actions',
+    closePane: 'Close panel',
+    tools: 'Tools'
   }
 };

package/dist/locales/nl.d.ts

@@ -87,6 +87,9 @@ declare const _default: {
         movePane: string;
         maximize: string;
         restore: string;
+        moreActions: string;
+        closePane: string;
+        tools: string;
     };
 };
 export default _default;

package/dist/locales/nl.js

@@ -86,6 +86,9 @@ export default {
     pane: 'Paneel',
     movePane: 'Paneel verplaatsen',
     maximize: 'Paneel maximaliseren',
-    restore: 'Panelen herstellen'
+    restore: 'Panelen herstellen',
+    moreActions: 'Meer acties',
+    closePane: 'Paneel sluiten',
+    tools: 'Gereedschappen'
   }
 };

package/dist/tabs/use-tab-drag.d.ts

@@ -0,0 +1,52 @@
+import { type PointerEvent, type RefObject } from 'react';
+export interface TabDragOptions {
+    /** The keys of the strip in their order, read when a drag needs them. */
+    keys(): readonly string[];
+    /** Where among the other tabs the tab lands for a drop before the `index`th of them, or null where it stays; pinned tabs keep their own run. */
+    landingOf(key: string, index: number): number | null;
+    onReorder(key: string, landing: number): void;
+    /**
+     * The tab leaves the strip while held: pulled `TEAR_DISTANCE` above or below it, or out of the window.
+     * `center` is where it is held, at the start of the strip; `width` is its width. Without it a tab stays in the strip.
+     */
+    onTearOut?(key: string, center: {
+        x: number;
+        y: number;
+    }, width: number): void;
+    /** A release outside the window, for a platform that cannot follow a tab out while it is held. `at` is where the window would stand on screen. */
+    onTearOff?(key: string, at: {
+        x: number;
+        y: number;
+    }): void;
+    /** Whether dragging this tab moves its window rather than the tab, as for the only tab of a window. */
+    dragsWindow?(key: string): boolean;
+    onWindowDrag?(key: string, grab: {
+        x: number;
+        y: number;
+    }): void;
+    /** The pointer let go after a tear-out or a window drag, wherever it was. `window` says it moved the window. */
+    onRelease?(key: string, window: boolean): void;
+}
+export interface TabDrag {
+    /** For the element around the tabs, whose box decides when a tab leaves the strip. */
+    strip: RefObject<HTMLDivElement | null>;
+    /** Where the line that says where the tab lands stands, from the strip's left, or null while there is none. */
+    insertion: number | null;
+    /** For each tab, which must also carry `data-tab-key`. */
+    tabProps(key: string): {
+        'data-tab-key': string;
+        onPointerDown(event: PointerEvent<HTMLElement>): void;
+        onPointerMove(event: PointerEvent<HTMLElement>): void;
+        onPointerUp(event: PointerEvent<HTMLElement>): void;
+        onPointerCancel(event: PointerEvent<HTMLElement>): void;
+        onLostPointerCapture(event: PointerEvent<HTMLElement>): void;
+    };
+}
+/** The place among the other tabs of a strip where a dragged tab lands: before the first one whose middle is right of `x`. */
+export declare function tabDropIndex(strip: Element, key: string, x: number): number;
+/**
+ * Pointer handling for a strip of tabs that a person reorders by dragging, and can drag out of the strip into
+ * a window of its own. The strip stays put while a tab is held, so the insertion line says where it lands and
+ * the drop moves it once. A press on a button inside a tab stays that button's.
+ */
+export declare function useTabDrag(options: TabDragOptions): TabDrag;

package/dist/tabs/use-tab-drag.js

@@ -0,0 +1,218 @@
+import { c as _c } from "react/compiler-runtime";
+import { useRef, useState } from 'react';
+/* How far a pressed tab moves before it is a drag rather than a click. */
+const DRAG_THRESHOLD_PX = 4;
+/* How far above or below the strip a dragged tab goes before it tears off. */
+const TEAR_DISTANCE_PX = 24;
+/* The width of `.ade-tab-insertion`, and how far outside the first or last tab it stands. */
+const INSERTION_WIDTH_PX = 2;
+const INSERTION_INSET_PX = 2;
+/** The place among the other tabs of a strip where a dragged tab lands: before the first one whose middle is right of `x`. */
+export function tabDropIndex(strip, key, x) {
+  const others = [...strip.querySelectorAll('[data-tab-key]')].filter(tab => tab.dataset.tabKey !== key);
+  return others.filter(tab => {
+    const box = tab.getBoundingClientRect();
+    return box.left + box.width / 2 < x;
+  }).length;
+}
+/* Where in the strip the insertion line stands for a tab landing at `landing` among the others: halfway the gap it goes in. */
+function insertionLeft(strip, others, landing) {
+  const boxOf = key => key === undefined ? null : strip.querySelector(`[data-tab-key="${CSS.escape(key)}"]`)?.getBoundingClientRect() ?? null;
+  const before = boxOf(others[landing - 1]);
+  const after = boxOf(others[landing]);
+  const origin = strip.getBoundingClientRect().left;
+  const x = before !== null && after !== null ? (before.right + after.left) / 2 : after !== null ? after.left - INSERTION_INSET_PX : (before?.right ?? origin) + INSERTION_INSET_PX;
+  return Math.max(0, Math.round(x - origin - INSERTION_WIDTH_PX / 2));
+}
+function outsideViewport(x, y) {
+  return x < 0 || y < 0 || x > window.innerWidth || y > window.innerHeight;
+}
+/**
+ * Pointer handling for a strip of tabs that a person reorders by dragging, and can drag out of the strip into
+ * a window of its own. The strip stays put while a tab is held, so the insertion line says where it lands and
+ * the drop moves it once. A press on a button inside a tab stays that button's.
+ */
+export function useTabDrag(options) {
+  const $ = _c(17);
+  const [insertion, setInsertion] = useState(null);
+  const press = useRef(null);
+  const strip = useRef(null);
+  const follows = options.onTearOut !== undefined;
+  let t0;
+  if ($[0] !== options) {
+    t0 = held => {
+      const types = ["pointerup", "mouseup", "pointercancel"];
+      const release = () => {
+        for (const type of types) {
+          removeEventListener(type, release);
+        }
+        if (press.current === held) {
+          press.current = null;
+        }
+        options.onRelease?.(held.key, held.mode === "window");
+      };
+      for (const type_0 of types) {
+        addEventListener(type_0, release);
+      }
+    };
+    $[0] = options;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const awaitRelease = t0;
+  let t1;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = (event, key) => {
+      if (event.button !== 0 || event.target.closest("button") !== null) {
+        return;
+      }
+      event.currentTarget.setPointerCapture(event.pointerId);
+      press.current = {
+        key,
+        pointerId: event.pointerId,
+        grab: {
+          x: event.clientX,
+          y: event.clientY
+        },
+        mode: "press",
+        landing: null
+      };
+    };
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const onPointerDown = t1;
+  let t2;
+  if ($[3] !== awaitRelease || $[4] !== follows || $[5] !== options) {
+    t2 = event_0 => {
+      const held_0 = press.current;
+      if (held_0 === null || held_0.pointerId !== event_0.pointerId) {
+        return;
+      }
+      if (held_0.mode === "press") {
+        if (Math.hypot(event_0.clientX - held_0.grab.x, event_0.clientY - held_0.grab.y) < DRAG_THRESHOLD_PX) {
+          return;
+        }
+        if (options.dragsWindow?.(held_0.key) === true && options.onWindowDrag !== undefined) {
+          held_0.mode = "window";
+          awaitRelease(held_0);
+          options.onWindowDrag(held_0.key, held_0.grab);
+          return;
+        }
+        held_0.mode = "reorder";
+      }
+      if (held_0.mode !== "reorder") {
+        return;
+      }
+      const box = strip.current?.getBoundingClientRect();
+      const offStrip = box !== undefined && (event_0.clientY < box.top - TEAR_DISTANCE_PX || event_0.clientY > box.bottom + TEAR_DISTANCE_PX);
+      if (follows && (offStrip || outsideViewport(event_0.clientX, event_0.clientY))) {
+        held_0.mode = "out";
+        held_0.landing = null;
+        setInsertion(null);
+        awaitRelease(held_0);
+        const tab = event_0.currentTarget.getBoundingClientRect();
+        const left = box?.left ?? tab.left;
+        options.onTearOut?.(held_0.key, {
+          x: left + tab.width / 2,
+          y: tab.top + tab.height / 2
+        }, tab.width);
+        return;
+      }
+      const row = event_0.currentTarget.parentElement;
+      if (row === null || strip.current === null) {
+        return;
+      }
+      held_0.landing = options.landingOf(held_0.key, tabDropIndex(row, held_0.key, event_0.clientX));
+      const others = options.keys().filter(one => one !== held_0.key);
+      setInsertion(held_0.landing === null ? null : insertionLeft(strip.current, others, held_0.landing));
+    };
+    $[3] = awaitRelease;
+    $[4] = follows;
+    $[5] = options;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const onPointerMove = t2;
+  let t3;
+  if ($[7] !== follows || $[8] !== options) {
+    t3 = (event_1, cancelled) => {
+      const held_1 = press.current;
+      if (held_1 === null || held_1.pointerId !== event_1.pointerId || held_1.mode === "out" || held_1.mode === "window") {
+        return;
+      }
+      press.current = null;
+      setInsertion(null);
+      if (held_1.mode !== "reorder" || cancelled) {
+        return;
+      }
+      if (!follows && options.onTearOff !== undefined && outsideViewport(event_1.clientX, event_1.clientY)) {
+        options.onTearOff(held_1.key, {
+          x: event_1.screenX - held_1.grab.x,
+          y: event_1.screenY - held_1.grab.y
+        });
+        return;
+      }
+      if (held_1.landing !== null) {
+        options.onReorder(held_1.key, held_1.landing);
+      }
+    };
+    $[7] = follows;
+    $[8] = options;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const onPointerEnd = t3;
+  let t4;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = event_2 => {
+      const held_2 = press.current;
+      if (held_2 === null || held_2.pointerId !== event_2.pointerId || held_2.mode !== "press" && held_2.mode !== "reorder") {
+        return;
+      }
+      try {
+        event_2.currentTarget.setPointerCapture(event_2.pointerId);
+      } catch {
+        press.current = null;
+      }
+    };
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  const onLostPointerCapture = t4;
+  let t5;
+  if ($[11] !== onPointerEnd || $[12] !== onPointerMove) {
+    t5 = key_0 => ({
+      "data-tab-key": key_0,
+      onPointerDown: event_3 => onPointerDown(event_3, key_0),
+      onPointerMove,
+      onPointerUp: event_4 => onPointerEnd(event_4, false),
+      onPointerCancel: event_5 => onPointerEnd(event_5, true),
+      onLostPointerCapture
+    });
+    $[11] = onPointerEnd;
+    $[12] = onPointerMove;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  let t6;
+  if ($[14] !== insertion || $[15] !== t5) {
+    t6 = {
+      strip,
+      insertion,
+      tabProps: t5
+    };
+    $[14] = insertion;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
+}