'use strict';

var web = require('solid-js/web');
var solidJs = require('solid-js');
var interact2 = require('interactjs');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var interact2__default = /*#__PURE__*/_interopDefault(interact2);

/* squanels v0.2.12 | MIT License */

var _tmpl$ = /* @__PURE__ */ web.template(`<span>&nbsp;`);
var _tmpl$2 = /* @__PURE__ */ web.template(`<div class=SquanelLayout>`);
exports.SquanelLayoutContext = solidJs.createContext({});
function SquanelLayout(props) {
  let layoutRef;
  const defaultHeader = () => (() => {
    var _el$ = _tmpl$();
    web.setAttribute(_el$, "draggable", true);
    return _el$;
  })();
  const [headers, setHeaders] = solidJs.createSignal(props.headers ?? true);
  const [focus, setFocus] = solidJs.createSignal(props.focus);
  const [leftHeader, setLeftHeader] = solidJs.createSignal(props.leftHeader ?? defaultHeader);
  const [rightHeader, setRightHeader] = solidJs.createSignal(props.rightHeader ?? defaultHeader);
  const [dragThreshold, setDragThreshold] = solidJs.createSignal(props.dragThreshold ?? 200);
  const [snapThreshold, setSnapThreshold] = solidJs.createSignal(props.snapThreshold ?? 50);
  const [handleSize, setHandleSize] = solidJs.createSignal(props.handleSize ?? 5);
  const [defaultMinHeight, setDefaultMinHeight] = solidJs.createSignal(props.defaultMinHeight ?? 0);
  const [defaultMaxHeight, setDefaultMaxHeight] = solidJs.createSignal(props.defaultMaxHeight ?? Infinity);
  const [defaultMinWidth, setDefaultMinWidth] = solidJs.createSignal(props.defaultMinWidth ?? 0);
  const [defaultMaxWidth, setDefaultMaxWidth] = solidJs.createSignal(props.defaultMaxWidth ?? Infinity);
  solidJs.createEffect(() => setHeaders(props.headers ?? true));
  solidJs.createEffect(() => setFocus(props.focus));
  solidJs.createEffect(() => setLeftHeader(() => props.leftHeader ?? defaultHeader));
  solidJs.createEffect(() => setRightHeader(() => props.rightHeader ?? defaultHeader));
  solidJs.createEffect(() => setDragThreshold(props.dragThreshold ?? 200));
  solidJs.createEffect(() => setSnapThreshold(props.snapThreshold ?? 50));
  solidJs.createEffect(() => setHandleSize(props.handleSize ?? 5));
  solidJs.createEffect(() => setDefaultMinHeight(props.defaultMinHeight ?? 0));
  solidJs.createEffect(() => setDefaultMaxHeight(props.defaultMaxHeight ?? Infinity));
  solidJs.createEffect(() => setDefaultMinWidth(props.defaultMinWidth ?? 0));
  solidJs.createEffect(() => setDefaultMaxWidth(props.defaultMaxWidth ?? Infinity));
  const reactiveData = {
    headers,
    setHeaders,
    focus,
    setFocus,
    leftHeader,
    setLeftHeader,
    rightHeader,
    setRightHeader,
    dragThreshold,
    setDragThreshold,
    snapThreshold,
    setSnapThreshold,
    handleSize,
    setHandleSize,
    defaultMinHeight,
    setDefaultMinHeight,
    defaultMaxHeight,
    setDefaultMaxHeight,
    defaultMinWidth,
    setDefaultMinWidth,
    defaultMaxWidth,
    setDefaultMaxWidth,
    maximize: handleMaximize,
    restore: handleRestore,
    show: handleShow,
    hide: handleHide
  };
  solidJs.onMount(() => {
    layoutRef.squanelContextData = reactiveData;
  });
  function handleMaximize(panel) {
    document.getElementById(panel)?.squanelContextData.setMaximized(true);
  }
  function handleRestore(panel) {
    document.getElementById(panel)?.squanelContextData.setMaximized(false);
  }
  function handleShow(panel) {
  }
  function handleHide(panel) {
  }
  return web.createComponent(exports.SquanelLayoutContext.Provider, {
    value: reactiveData,
    get children() {
      var _el$2 = _tmpl$2();
      var _ref$ = layoutRef;
      typeof _ref$ === "function" ? web.use(_ref$, _el$2) : layoutRef = _el$2;
      web.spread(_el$2, props, false, false);
      return _el$2;
    }
  });
}

// src/impl/constraint.ts
var defaultConstraint = {
  min: {
    width: 0,
    height: 0
  },
  max: {
    width: Infinity,
    height: Infinity
  }
};
var _tmpl$3 = /* @__PURE__ */ web.template(`<div class=SplitSquanel><div class=SquanelHandle>`);
function SplitSquanelImpl(props) {
  let splitRef;
  let handleRef;
  const [leftSide, rightSide] = props.children;
  let reactiveData = props.reactiveData;
  let constraint_a = structuredClone(defaultConstraint);
  let constraint_b = structuredClone(defaultConstraint);
  function checkConstraints(split) {
    const parentRect = splitRef.getBoundingClientRect();
    if (reactiveData.orientation() === "vertical") {
      if (split > constraint_a.max.height / parentRect.height) {
        return constraint_a.max.height / parentRect.height;
      } else if (split < 1 - constraint_b.max.height / parentRect.height) {
        return 1 - constraint_b.max.height / parentRect.height;
      } else if (split * parentRect.height < constraint_a.min.height && split !== 0) {
        return constraint_a.min.height / parentRect.height;
      } else if ((1 - split) * parentRect.height < constraint_b.min.height && split !== 1) {
        return 1 - constraint_b.min.height / parentRect.height;
      }
    } else if (reactiveData.orientation() === "horizontal") {
      if (split > constraint_a.max.width / parentRect.width) {
        return constraint_a.max.width / parentRect.width;
      } else if (split < 1 - constraint_b.max.width / parentRect.width) {
        return 1 - constraint_b.max.width / parentRect.width;
      } else if (split * parentRect.width < constraint_a.min.width && split !== 0) {
        return constraint_a.min.width / parentRect.width;
      } else if ((1 - split) * parentRect.width < constraint_b.min.width && split !== 1) {
        return 1 - constraint_b.min.width / parentRect.width;
      }
    }
    return split;
  }
  function applyConstraints() {
    const newSplit = checkConstraints(reactiveData.split());
    if (newSplit !== void 0) {
      reactiveData.setSplit(newSplit);
    }
    applyFlex();
  }
  function applyFlex() {
    if (!splitRef.children[0])
      return;
    splitRef.children[0].style.flexBasis = reactiveData.split() * 100 + "%";
    if (!splitRef.children[2])
      return;
    splitRef.children[2].style.flexBasis = (1 - reactiveData.split()) * 100 + "%";
  }
  function propagateConstraintUpdate() {
    splitRef.dispatchEvent(new CustomEvent("constraintupdate", {
      detail: {
        // if something feels off, this is where I would check first.
        min: {
          width: Math.min(constraint_a.min.width, constraint_b.min.width),
          height: Math.min(constraint_a.min.height, constraint_b.min.height)
        },
        max: {
          width: Math.max(constraint_a.max.width, constraint_b.max.width),
          height: Math.max(constraint_a.max.height, constraint_b.max.height)
        }
      }
    }));
  }
  function handleConstraintUpdateA(ev) {
    constraint_a = ev.detail;
    ev.stopPropagation();
    applyConstraints();
    propagateConstraintUpdate();
  }
  function handleConstraintUpdateB(ev) {
    constraint_b = ev.detail;
    ev.stopPropagation();
    applyConstraints();
    propagateConstraintUpdate();
  }
  solidJs.onMount(() => {
    splitRef.children[0].addEventListener("constraintupdate", handleConstraintUpdateA);
    splitRef.children[2].addEventListener("constraintupdate", handleConstraintUpdateB);
    splitRef.squanelContextData = reactiveData;
    for (let element of splitRef.getElementsByClassName("ContentSquanel")) {
      element.updateConstraints?.();
    }
  });
  solidJs.onCleanup(() => {
    splitRef.children[0].removeEventListener("constraintupdate", handleConstraintUpdateA);
    splitRef.children[2].removeEventListener("constraintupdate", handleConstraintUpdateB);
  });
  solidJs.createEffect(solidJs.on(reactiveData.split, applyFlex));
  solidJs.onMount(() => {
    applyConstraints();
    new ResizeObserver(applyConstraints).observe(handleRef.parentElement);
    interact2__default.default(handleRef).draggable({
      cursorChecker: () => reactiveData.orientation() === "horizontal" ? "ew-resize" : "ns-resize",
      inertia: true,
      onmove: (event) => {
        let splitTarget;
        const absMousePos = reactiveData.orientation() === "horizontal" ? event.clientX : event.clientY;
        const parentRect = splitRef.getBoundingClientRect();
        const parentSize = reactiveData.orientation() === "horizontal" ? parentRect.width : parentRect.height;
        const posInParent = absMousePos - parentRect[reactiveData.orientation() === "horizontal" ? "left" : "top"];
        const posInParentRatio = posInParent / parentSize;
        if (posInParent < reactiveData.snapThreshold()) {
          splitTarget = 0;
        } else if (posInParent > parentSize - reactiveData.snapThreshold()) {
          splitTarget = 1;
        } else {
          splitTarget = Math.min(Math.max(posInParentRatio, 0), 1);
        }
        const newSplit = checkConstraints(splitTarget);
        if (newSplit !== void 0) {
          reactiveData.setSplit(newSplit);
        }
      }
    });
  });
  return web.createComponent(exports.SplitSquanelContext.Provider, {
    value: reactiveData,
    get children() {
      var _el$ = _tmpl$3(), _el$2 = _el$.firstChild;
      var _ref$ = splitRef;
      typeof _ref$ === "function" ? web.use(_ref$, _el$) : splitRef = _el$;
      web.insert(_el$, leftSide, _el$2);
      var _ref$2 = handleRef;
      typeof _ref$2 === "function" ? web.use(_ref$2, _el$2) : handleRef = _el$2;
      web.insert(_el$, rightSide, null);
      web.effect((_p$) => {
        var _v$ = reactiveData.orientation(), _v$2 = reactiveData.handleSize() + "px";
        _v$ !== _p$.e && web.setAttribute(_el$, "orientation", _p$.e = _v$);
        _v$2 !== _p$.t && ((_p$.t = _v$2) != null ? _el$2.style.setProperty("--squanel-handle-size", _v$2) : _el$2.style.removeProperty("--squanel-handle-size"));
        return _p$;
      }, {
        e: void 0,
        t: void 0
      });
      return _el$;
    }
  });
}

// src/api/split.tsx
exports.SplitSquanelContext = solidJs.createContext(void 0);
function SplitSquanel(props) {
  const squanelLayoutContext = solidJs.useContext(exports.SquanelLayoutContext);
  const [orientation, setOrientation] = solidJs.createSignal(props.orientation);
  const [split, setSplit] = solidJs.createSignal(props.split ?? 0.5);
  const [snapThreshold, setSnapThreshold] = solidJs.createSignal(props.snapThreshold ?? squanelLayoutContext.snapThreshold());
  const [handleSize, setHandleSize] = solidJs.createSignal(props.handleSize ?? squanelLayoutContext.handleSize());
  solidJs.createEffect(() => setOrientation(props.orientation));
  solidJs.createEffect(() => setSplit(props.split ?? 0.5));
  solidJs.createEffect(() => setSnapThreshold(props.snapThreshold ?? squanelLayoutContext.snapThreshold()));
  solidJs.createEffect(() => setHandleSize(props.handleSize ?? squanelLayoutContext.handleSize()));
  const reactiveData = {
    orientation,
    setOrientation,
    split,
    setSplit,
    snapThreshold,
    setSnapThreshold,
    handleSize,
    setHandleSize
  };
  return web.createComponent(SplitSquanelImpl, web.mergeProps({
    reactiveData
  }, props));
}
var _tmpl$4 = /* @__PURE__ */ web.template(`<div class=SquanelHeader draggable=true>`);
var _tmpl$22 = /* @__PURE__ */ web.template(`<div><div class=SquanelContent>`);
function ContentSquanelImpl(props) {
  let reactiveData = props.reactiveData;
  let interaction;
  let contentRef;
  let headerRef;
  let innerRef;
  function propagateConstraint(constraint) {
    contentRef.dispatchEvent(new CustomEvent("constraintupdate", {
      detail: constraint
    }));
  }
  function updateConstraints() {
    propagateConstraint({
      min: {
        width: reactiveData.minWidth(),
        height: reactiveData.minHeight()
      },
      max: {
        width: reactiveData.maxWidth(),
        height: reactiveData.maxHeight()
      }
    });
  }
  function convertToPinned() {
    reactiveData.setType("pinned");
    setDragging(true);
    disableInteractions();
  }
  solidJs.createEffect(solidJs.on([reactiveData.minWidth, reactiveData.maxWidth, reactiveData.minHeight, reactiveData.maxHeight], ([minWidth, maxWidth, minHeight, maxHeight]) => {
    propagateConstraint({
      min: {
        width: minWidth,
        height: minHeight
      },
      max: {
        width: maxWidth,
        height: maxHeight
      }
    });
  }));
  const [dragTarget, setDragTarget] = solidJs.createSignal();
  const [dragging, setDragging] = solidJs.createSignal(true);
  let dragStartX;
  let dragStartY;
  function handleDragPanelStart(event) {
    dragStartX = event.clientX;
    dragStartY = event.clientY;
  }
  function handleMouseMove(event) {
    if (reactiveData.type() !== "floating" || !dragging()) {
      return;
    }
    if (!event.buttons) {
      setDragging(false);
    }
    if (dragStartX === void 0 || dragStartY === void 0) {
      return;
    }
    const dx = event.clientX - dragStartX;
    const dy = event.clientY - dragStartY;
    dragStartX = event.clientX;
    dragStartY = event.clientY;
    reactiveData.setLeft(reactiveData.left() + dx);
    reactiveData.setTop(reactiveData.top() + dy);
  }
  solidJs.onMount(() => {
    contentRef.squanelContextData = reactiveData;
    contentRef.updateConstraints = updateConstraints;
    contentRef.convertToPinned = convertToPinned;
    if (reactiveData.type() === "floating") {
      enableInteractions();
    }
    headerRef.addEventListener("mousedown", (event) => {
      if (event.shiftKey || reactiveData.type() === "pinned") {
        return;
      }
      setDragging(true);
      event.preventDefault();
    });
    window.addEventListener("mousemove", handleMouseMove);
  });
  solidJs.onCleanup(() => {
    window.removeEventListener("mousemove", handleMouseMove);
  });
  function enableInteractions() {
    interaction = interact2__default.default(contentRef).resizable({
      edges: {
        left: true,
        right: true,
        bottom: true,
        top: true
      },
      modifiers: [interact2__default.default.modifiers.restrictSize({
        min: {
          width: reactiveData.minWidth(),
          height: reactiveData.minHeight()
        },
        max: {
          width: reactiveData.maxWidth(),
          height: reactiveData.maxHeight()
        }
      })],
      onmove: (event) => {
        if (dragging()) {
          return;
        }
        reactiveData.setTop(reactiveData.top() + event.deltaRect.top);
        reactiveData.setLeft(reactiveData.left() + event.deltaRect.left);
        reactiveData.setWidth(reactiveData.width() + event.deltaRect.width);
        reactiveData.setHeight(reactiveData.height() + event.deltaRect.height);
      },
      allowFrom: innerRef
    });
  }
  function disableInteractions() {
    interaction.unset();
  }
  function getTotalSizeAndOffset(element) {
    let minTop = Infinity, minLeft = Infinity;
    const smallestTop = -element.getBoundingClientRect().top;
    const smallestLeft = -element.getBoundingClientRect().left;
    for (const child of element.querySelectorAll("*")) {
      const childRect = child.getBoundingClientRect();
      if (childRect.top === 0 && childRect.left === 0) {
        continue;
      }
      minTop = Math.min(minTop, childRect.top + smallestTop);
      minLeft = Math.min(minLeft, childRect.left + smallestLeft);
    }
    minTop = Math.max(minTop, smallestTop);
    minLeft = Math.max(minLeft, smallestLeft);
    return {
      offsetLeft: minLeft,
      offsetTop: minTop
    };
  }
  function handleDragStart(event) {
    if (event.shiftKey && reactiveData.type() === "pinned") {
      event.preventDefault();
      const squanelLayoutRef = contentRef.closest(".SquanelLayout");
      const y = event.clientY - squanelLayoutRef.getBoundingClientRect().top - event.offsetY;
      const x = event.clientX - squanelLayoutRef.getBoundingClientRect().left - event.offsetX;
      const w = contentRef.clientWidth;
      const h = contentRef.clientHeight;
      const fromContainer = contentRef.parentElement;
      const otherSplitElement = contentRef.previousElementSibling?.previousElementSibling ?? contentRef.nextElementSibling?.nextElementSibling;
      fromContainer.replaceWith(otherSplitElement);
      otherSplitElement.updateConstraints?.();
      for (const element of otherSplitElement.getElementsByClassName("ContentSquanel")) {
        element.updateConstraints?.();
      }
      reactiveData.setType("floating");
      reactiveData.setTop(y);
      reactiveData.setLeft(x);
      reactiveData.setWidth(w);
      reactiveData.setHeight(h);
      enableInteractions();
      squanelLayoutRef.append(contentRef);
      return;
    }
    const contentOffset = getTotalSizeAndOffset(contentRef);
    const offsetX = contentOffset.offsetLeft - event.offsetX;
    const offsetY = contentOffset.offsetTop - event.offsetY;
    event.dataTransfer.setData("text/plain", "_squanels:" + reactiveData.id);
    event.dataTransfer.setDragImage(contentRef, -offsetX, -offsetY);
    const elem = event.currentTarget;
    setTimeout(() => {
      elem.parentElement.classList.add("squanels-dragging");
    });
  }
  function handleDragEnd(event) {
    const elem = event.currentTarget;
    elem.parentElement.classList.remove("squanels-dragging");
  }
  function handleDragOver(event) {
    if (reactiveData.type() === "floating") {
      return;
    }
    event.preventDefault();
    const bounds = event.currentTarget.getBoundingClientRect();
    const left = event.clientX - bounds.left;
    const right = bounds.right - event.clientX;
    const top = event.clientY - bounds.top;
    const bottom = bounds.bottom - event.clientY;
    const min = Math.min(left, right, top, bottom);
    if (min > reactiveData.dragThreshold()) {
      setDragTarget(void 0);
      return;
    }
    switch (min) {
      case left:
        setDragTarget("left");
        break;
      case right:
        setDragTarget("right");
        break;
      case top:
        setDragTarget("top");
        break;
      case bottom:
        setDragTarget("bottom");
        break;
      default:
        setDragTarget(void 0);
    }
  }
  function handleDragLeave() {
    setDragTarget(void 0);
  }
  function handleDrop(event) {
    const id = event.dataTransfer.getData("text/plain").substring(10);
    if (id === reactiveData.id) {
      console.warn("Cannot drop on the same panel");
      setDragTarget(void 0);
      return;
    }
    const orientation = dragTarget() === "top" || dragTarget() === "bottom" ? "vertical" : "horizontal";
    const position = dragTarget() === "top" || dragTarget() === "left" ? "a" : "b";
    let targetContainer;
    const fromElement = document.getElementById(id);
    if (fromElement.classList.contains("FloatingSquanel")) {
      const toElement = document.getElementById(reactiveData.id);
      targetContainer = toElement.parentElement;
      const tmp = document.createElement("div");
      toElement.insertAdjacentElement("beforebegin", tmp);
      web.render(() => {
        return web.createComponent(SplitSquanel, {
          orientation,
          split: 0.5,
          get snapThreshold() {
            return targetContainer.squanelContextData.snapThreshold;
          },
          get handleSize() {
            return targetContainer.squanelContextData.handleSize;
          },
          get children() {
            return [position === "a" ? fromElement : toElement, position === "a" ? toElement : fromElement];
          }
        });
      }, tmp);
      tmp.replaceWith(tmp.firstElementChild);
      fromElement.convertToPinned();
    } else {
      const fromContainer = fromElement.parentElement;
      const otherSplitElement = fromElement.previousElementSibling?.previousElementSibling ?? fromElement.nextElementSibling?.nextElementSibling;
      fromContainer.replaceWith(otherSplitElement);
      targetContainer = otherSplitElement.parentElement;
      const toElement = document.getElementById(reactiveData.id);
      const tmp = document.createElement("div");
      toElement.insertAdjacentElement("beforebegin", tmp);
      web.render(() => web.createComponent(SplitSquanel, {
        orientation,
        split: 0.5,
        get snapThreshold() {
          return fromContainer.squanelContextData.snapThreshold;
        },
        get handleSize() {
          return fromContainer.squanelContextData.handleSize;
        },
        get children() {
          return [position === "a" ? fromElement : toElement, position === "a" ? toElement : fromElement];
        }
      }), tmp);
      tmp.replaceWith(tmp.firstElementChild);
    }
    for (const element of targetContainer.getElementsByClassName("ContentSquanel")) {
      element.updateConstraints?.();
    }
    setDragTarget(void 0);
  }
  function handleFocus() {
    reactiveData.setFocus(reactiveData.id);
  }
  return web.createComponent(exports.ContentSquanelContext.Provider, {
    value: reactiveData,
    get children() {
      var _el$ = _tmpl$22(), _el$3 = _el$.firstChild;
      _el$.$$mousedown = handleFocus;
      var _ref$ = contentRef;
      typeof _ref$ === "function" ? web.use(_ref$, _el$) : contentRef = _el$;
      _el$.addEventListener("mousedown", handleDragPanelStart);
      web.insert(_el$, web.createComponent(solidJs.Show, {
        get when() {
          return reactiveData.headers();
        },
        get children() {
          var _el$2 = _tmpl$4();
          _el$2.addEventListener("dragend", handleDragEnd);
          _el$2.addEventListener("dragstart", handleDragStart);
          var _ref$2 = headerRef;
          typeof _ref$2 === "function" ? web.use(_ref$2, _el$2) : headerRef = _el$2;
          web.insert(_el$2, web.createComponent(web.Dynamic, {
            get component() {
              return reactiveData.leftHeader();
            }
          }), null);
          web.insert(_el$2, web.createComponent(web.Dynamic, {
            get component() {
              return reactiveData.rightHeader();
            }
          }), null);
          return _el$2;
        }
      }), _el$3);
      _el$3.addEventListener("drop", handleDrop);
      _el$3.addEventListener("dragleave", handleDragLeave);
      _el$3.addEventListener("dragover", handleDragOver);
      var _ref$3 = innerRef;
      typeof _ref$3 === "function" ? web.use(_ref$3, _el$3) : innerRef = _el$3;
      web.insert(_el$3, () => props.children);
      web.effect((_p$) => {
        var _v$ = reactiveData.id, _v$2 = !!(reactiveData.type() === "pinned"), _v$3 = !!(reactiveData.type() === "floating"), _v$4 = reactiveData.type() === "floating" ? {
          "left": `${reactiveData.left()}px`,
          "top": `${reactiveData.top()}px`,
          "width": `${reactiveData.width()}px`,
          "height": `${reactiveData.height()}px`
        } : {}, _v$5 = reactiveData.focus() === reactiveData.id, _v$6 = reactiveData.maximized(), _v$7 = dragTarget();
        _v$ !== _p$.e && web.setAttribute(_el$, "id", _p$.e = _v$);
        _v$2 !== _p$.t && _el$.classList.toggle("ContentSquanel", _p$.t = _v$2);
        _v$3 !== _p$.a && _el$.classList.toggle("FloatingSquanel", _p$.a = _v$3);
        _p$.o = web.style(_el$, _v$4, _p$.o);
        _v$5 !== _p$.i && web.setAttribute(_el$, "focused", _p$.i = _v$5);
        _v$6 !== _p$.n && web.setAttribute(_el$, "maximized", _p$.n = _v$6);
        _v$7 !== _p$.s && web.setAttribute(_el$3, "dragtarget", _p$.s = _v$7);
        return _p$;
      }, {
        e: void 0,
        t: void 0,
        a: void 0,
        o: void 0,
        i: void 0,
        n: void 0,
        s: void 0
      });
      return _el$;
    }
  });
}
web.delegateEvents(["mousedown"]);

// src/api/content.tsx
exports.ContentSquanelContext = solidJs.createContext(void 0);
function ContentSquanel(props) {
  const squanelLayoutContext = solidJs.useContext(exports.SquanelLayoutContext);
  const [type, setType] = solidJs.createSignal(props.type ?? "pinned");
  const [headers, setHeaders] = solidJs.createSignal(props.headers ?? squanelLayoutContext.headers());
  const [leftHeader, setLeftHeader] = solidJs.createSignal(props.leftHeader ?? squanelLayoutContext.leftHeader());
  const [rightHeader, setRightHeader] = solidJs.createSignal(props.rightHeader ?? squanelLayoutContext.rightHeader());
  const [dragThreshold, setDragThreshold] = solidJs.createSignal(props.dragThreshold ?? squanelLayoutContext.dragThreshold());
  const [minWidth, setMinWidth] = solidJs.createSignal(props.minWidth ?? squanelLayoutContext.defaultMinWidth());
  const [maxWidth, setMaxWidth] = solidJs.createSignal(props.maxWidth ?? squanelLayoutContext.defaultMaxWidth());
  const [minHeight, setMinHeight] = solidJs.createSignal(props.minHeight ?? squanelLayoutContext.defaultMinHeight());
  const [maxHeight, setMaxHeight] = solidJs.createSignal(props.maxHeight ?? squanelLayoutContext.defaultMaxHeight());
  const [top, setTop] = solidJs.createSignal(props.top ?? 0);
  const [left, setLeft] = solidJs.createSignal(props.left ?? 0);
  const [width, setWidth] = solidJs.createSignal(props.width ?? 20);
  const [height, setHeight] = solidJs.createSignal(props.height ?? 20);
  const [maximized, setMaximized] = solidJs.createSignal(props.maximized ?? false);
  solidJs.createEffect(() => setHeaders(props.headers ?? squanelLayoutContext.headers()));
  solidJs.createEffect(() => setLeftHeader(() => props.leftHeader ?? squanelLayoutContext.leftHeader()));
  solidJs.createEffect(() => setRightHeader(() => props.rightHeader ?? squanelLayoutContext.rightHeader()));
  solidJs.createEffect(() => setDragThreshold(props.dragThreshold ?? squanelLayoutContext.dragThreshold()));
  solidJs.createEffect(() => setMinWidth(props.minWidth ?? squanelLayoutContext.defaultMinWidth()));
  solidJs.createEffect(() => setMaxWidth(props.maxWidth ?? squanelLayoutContext.defaultMaxWidth()));
  solidJs.createEffect(() => setMinHeight(props.minHeight ?? squanelLayoutContext.defaultMinHeight()));
  solidJs.createEffect(() => setMaxHeight(props.maxHeight ?? squanelLayoutContext.defaultMaxHeight()));
  solidJs.createEffect(() => setTop(props.top ?? 0));
  solidJs.createEffect(() => setLeft(props.left ?? 0));
  solidJs.createEffect(() => setWidth(props.width ?? 20));
  solidJs.createEffect(() => setHeight(props.height ?? 20));
  const reactiveData = {
    id: props.id,
    type,
    setType,
    focus: squanelLayoutContext.focus,
    setFocus: squanelLayoutContext.setFocus,
    headers,
    setHeaders,
    maximized,
    setMaximized,
    leftHeader,
    setLeftHeader,
    rightHeader,
    setRightHeader,
    dragThreshold,
    setDragThreshold,
    minWidth,
    setMinWidth,
    maxWidth,
    setMaxWidth,
    minHeight,
    setMinHeight,
    maxHeight,
    setMaxHeight,
    top,
    setTop,
    left,
    setLeft,
    width,
    setWidth,
    height,
    setHeight,
    maximize: () => squanelLayoutContext.maximize(props.id),
    restore: () => squanelLayoutContext.restore(props.id),
    show: () => squanelLayoutContext.show(props.id),
    hide: () => squanelLayoutContext.hide(props.id)
  };
  return web.createComponent(ContentSquanelImpl, web.mergeProps({
    reactiveData
  }, props));
}
function useSquanelLayout() {
  return solidJs.useContext(exports.SquanelLayoutContext);
}
function useContentSquanel() {
  return solidJs.useContext(exports.ContentSquanelContext);
}
function useSplitSquanel() {
  return solidJs.useContext(exports.SplitSquanelContext);
}

exports.ContentSquanel = ContentSquanel;
exports.SplitSquanel = SplitSquanel;
exports.SquanelLayout = SquanelLayout;
exports.useContentSquanel = useContentSquanel;
exports.useSplitSquanel = useSplitSquanel;
exports.useSquanelLayout = useSquanelLayout;