react-layman
Version:
A dynamic tiling layout manager made for React
1,614 lines (1,611 loc) • 58.2 kB
JavaScript
import { v4 as _t } from "uuid";
import Qe, { createContext as et, useReducer as kt, useState as Y, useContext as X, useEffect as H, useRef as ge, useMemo as tt } from "react";
import { DndProvider as Ot, useDrag as Ee, useDrop as Wt, useDragLayer as rt } from "react-dnd";
import { HTML5Backend as It } from "react-dnd-html5-backend";
import m from "lodash";
import { createPortal as Lt } from "react-dom";
import './index.css';class re {
// private UUID representing the tab
id;
// Is the tab currently selected in a window?
isSelected;
// Display name of tab
name;
// Optional data attached to each tab
options;
/** Creates an instance of the TabData class. */
constructor(r, n = {}) {
this.id = _t(), this.isSelected = !1, this.name = r, this.options = n;
}
}
var ue = { exports: {} }, ne = {};
/**
* @license React
* react-jsx-runtime.production.min.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Ze;
function At() {
if (Ze) return ne;
Ze = 1;
var t = Qe, r = Symbol.for("react.element"), n = Symbol.for("react.fragment"), i = Object.prototype.hasOwnProperty, s = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, g = { key: !0, ref: !0, __self: !0, __source: !0 };
function p(f, l, b) {
var d, v = {}, c = null, j = null;
b !== void 0 && (c = "" + b), l.key !== void 0 && (c = "" + l.key), l.ref !== void 0 && (j = l.ref);
for (d in l) i.call(l, d) && !g.hasOwnProperty(d) && (v[d] = l[d]);
if (f && f.defaultProps) for (d in l = f.defaultProps, l) v[d] === void 0 && (v[d] = l[d]);
return { $$typeof: r, type: f, key: c, ref: j, props: v, _owner: s.current };
}
return ne.Fragment = n, ne.jsx = p, ne.jsxs = p, ne;
}
var ie = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var Xe;
function Vt() {
return Xe || (Xe = 1, process.env.NODE_ENV !== "production" && (function() {
var t = Qe, r = Symbol.for("react.element"), n = Symbol.for("react.portal"), i = Symbol.for("react.fragment"), s = Symbol.for("react.strict_mode"), g = Symbol.for("react.profiler"), p = Symbol.for("react.provider"), f = Symbol.for("react.context"), l = Symbol.for("react.forward_ref"), b = Symbol.for("react.suspense"), d = Symbol.for("react.suspense_list"), v = Symbol.for("react.memo"), c = Symbol.for("react.lazy"), j = Symbol.for("react.offscreen"), P = Symbol.iterator, W = "@@iterator";
function C(e) {
if (e === null || typeof e != "object")
return null;
var o = P && e[P] || e[W];
return typeof o == "function" ? o : null;
}
var h = t.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
function x(e) {
{
for (var o = arguments.length, u = new Array(o > 1 ? o - 1 : 0), w = 1; w < o; w++)
u[w - 1] = arguments[w];
D("error", e, u);
}
}
function D(e, o, u) {
{
var w = h.ReactDebugCurrentFrame, S = w.getStackAddendum();
S !== "" && (o += "%s", u = u.concat([S]));
var k = u.map(function(R) {
return String(R);
});
k.unshift("Warning: " + o), Function.prototype.apply.call(console[e], console, k);
}
}
var y = !1, Q = !1, M = !1, O = !1, F = !1, _;
_ = Symbol.for("react.module.reference");
function L(e) {
return !!(typeof e == "string" || typeof e == "function" || e === i || e === g || F || e === s || e === b || e === d || O || e === j || y || Q || M || typeof e == "object" && e !== null && (e.$$typeof === c || e.$$typeof === v || e.$$typeof === p || e.$$typeof === f || e.$$typeof === l || // This needs to include all possible module reference object
// types supported by any Flight configuration anywhere since
// we don't know which Flight build this will end up being used
// with.
e.$$typeof === _ || e.getModuleId !== void 0));
}
function z(e, o, u) {
var w = e.displayName;
if (w)
return w;
var S = o.displayName || o.name || "";
return S !== "" ? u + "(" + S + ")" : u;
}
function U(e) {
return e.displayName || "Context";
}
function B(e) {
if (e == null)
return null;
if (typeof e.tag == "number" && x("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
return e.displayName || e.name || null;
if (typeof e == "string")
return e;
switch (e) {
case i:
return "Fragment";
case n:
return "Portal";
case g:
return "Profiler";
case s:
return "StrictMode";
case b:
return "Suspense";
case d:
return "SuspenseList";
}
if (typeof e == "object")
switch (e.$$typeof) {
case f:
var o = e;
return U(o) + ".Consumer";
case p:
var u = e;
return U(u._context) + ".Provider";
case l:
return z(e, e.render, "ForwardRef");
case v:
var w = e.displayName || null;
return w !== null ? w : B(e.type) || "Memo";
case c: {
var S = e, k = S._payload, R = S._init;
try {
return B(R(k));
} catch {
return null;
}
}
}
return null;
}
var q = Object.assign, T = 0, A, Se, De, _e, ke, Oe, We;
function Ie() {
}
Ie.__reactDisabledLog = !0;
function ot() {
{
if (T === 0) {
A = console.log, Se = console.info, De = console.warn, _e = console.error, ke = console.group, Oe = console.groupCollapsed, We = console.groupEnd;
var e = {
configurable: !0,
enumerable: !0,
value: Ie,
writable: !0
};
Object.defineProperties(console, {
info: e,
log: e,
warn: e,
error: e,
group: e,
groupCollapsed: e,
groupEnd: e
});
}
T++;
}
}
function at() {
{
if (T--, T === 0) {
var e = {
configurable: !0,
enumerable: !0,
writable: !0
};
Object.defineProperties(console, {
log: q({}, e, {
value: A
}),
info: q({}, e, {
value: Se
}),
warn: q({}, e, {
value: De
}),
error: q({}, e, {
value: _e
}),
group: q({}, e, {
value: ke
}),
groupCollapsed: q({}, e, {
value: Oe
}),
groupEnd: q({}, e, {
value: We
})
});
}
T < 0 && x("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
}
}
var ve = h.ReactCurrentDispatcher, we;
function ae(e, o, u) {
{
if (we === void 0)
try {
throw Error();
} catch (S) {
var w = S.stack.trim().match(/\n( *(at )?)/);
we = w && w[1] || "";
}
return `
` + we + e;
}
}
var me = !1, se;
{
var st = typeof WeakMap == "function" ? WeakMap : Map;
se = new st();
}
function Le(e, o) {
if (!e || me)
return "";
{
var u = se.get(e);
if (u !== void 0)
return u;
}
var w;
me = !0;
var S = Error.prepareStackTrace;
Error.prepareStackTrace = void 0;
var k;
k = ve.current, ve.current = null, ot();
try {
if (o) {
var R = function() {
throw Error();
};
if (Object.defineProperty(R.prototype, "props", {
set: function() {
throw Error();
}
}), typeof Reflect == "object" && Reflect.construct) {
try {
Reflect.construct(R, []);
} catch (J) {
w = J;
}
Reflect.construct(e, [], R);
} else {
try {
R.call();
} catch (J) {
w = J;
}
e.call(R.prototype);
}
} else {
try {
throw Error();
} catch (J) {
w = J;
}
e();
}
} catch (J) {
if (J && w && typeof J.stack == "string") {
for (var E = J.stack.split(`
`), N = w.stack.split(`
`), I = E.length - 1, V = N.length - 1; I >= 1 && V >= 0 && E[I] !== N[V]; )
V--;
for (; I >= 1 && V >= 0; I--, V--)
if (E[I] !== N[V]) {
if (I !== 1 || V !== 1)
do
if (I--, V--, V < 0 || E[I] !== N[V]) {
var G = `
` + E[I].replace(" at new ", " at ");
return e.displayName && G.includes("<anonymous>") && (G = G.replace("<anonymous>", e.displayName)), typeof e == "function" && se.set(e, G), G;
}
while (I >= 1 && V >= 0);
break;
}
}
} finally {
me = !1, ve.current = k, at(), Error.prepareStackTrace = S;
}
var te = e ? e.displayName || e.name : "", Je = te ? ae(te) : "";
return typeof e == "function" && se.set(e, Je), Je;
}
function lt(e, o, u) {
return Le(e, !1);
}
function ct(e) {
var o = e.prototype;
return !!(o && o.isReactComponent);
}
function le(e, o, u) {
if (e == null)
return "";
if (typeof e == "function")
return Le(e, ct(e));
if (typeof e == "string")
return ae(e);
switch (e) {
case b:
return ae("Suspense");
case d:
return ae("SuspenseList");
}
if (typeof e == "object")
switch (e.$$typeof) {
case l:
return lt(e.render);
case v:
return le(e.type, o, u);
case c: {
var w = e, S = w._payload, k = w._init;
try {
return le(k(S), o, u);
} catch {
}
}
}
return "";
}
var ce = Object.prototype.hasOwnProperty, Ae = {}, Ve = h.ReactDebugCurrentFrame;
function de(e) {
if (e) {
var o = e._owner, u = le(e.type, e._source, o ? o.type : null);
Ve.setExtraStackFrame(u);
} else
Ve.setExtraStackFrame(null);
}
function dt(e, o, u, w, S) {
{
var k = Function.call.bind(ce);
for (var R in e)
if (k(e, R)) {
var E = void 0;
try {
if (typeof e[R] != "function") {
var N = Error((w || "React class") + ": " + u + " type `" + R + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[R] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
throw N.name = "Invariant Violation", N;
}
E = e[R](o, R, w, u, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
} catch (I) {
E = I;
}
E && !(E instanceof Error) && (de(S), x("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", w || "React class", u, R, typeof E), de(null)), E instanceof Error && !(E.message in Ae) && (Ae[E.message] = !0, de(S), x("Failed %s type: %s", u, E.message), de(null));
}
}
}
var ut = Array.isArray;
function be(e) {
return ut(e);
}
function ft(e) {
{
var o = typeof Symbol == "function" && Symbol.toStringTag, u = o && e[Symbol.toStringTag] || e.constructor.name || "Object";
return u;
}
}
function ht(e) {
try {
return Me(e), !1;
} catch {
return !0;
}
}
function Me(e) {
return "" + e;
}
function Fe(e) {
if (ht(e))
return x("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", ft(e)), Me(e);
}
var Ne = h.ReactCurrentOwner, gt = {
key: !0,
ref: !0,
__self: !0,
__source: !0
}, He, $e;
function pt(e) {
if (ce.call(e, "ref")) {
var o = Object.getOwnPropertyDescriptor(e, "ref").get;
if (o && o.isReactWarning)
return !1;
}
return e.ref !== void 0;
}
function vt(e) {
if (ce.call(e, "key")) {
var o = Object.getOwnPropertyDescriptor(e, "key").get;
if (o && o.isReactWarning)
return !1;
}
return e.key !== void 0;
}
function wt(e, o) {
typeof e.ref == "string" && Ne.current;
}
function mt(e, o) {
{
var u = function() {
He || (He = !0, x("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", o));
};
u.isReactWarning = !0, Object.defineProperty(e, "key", {
get: u,
configurable: !0
});
}
}
function bt(e, o) {
{
var u = function() {
$e || ($e = !0, x("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", o));
};
u.isReactWarning = !0, Object.defineProperty(e, "ref", {
get: u,
configurable: !0
});
}
}
var xt = function(e, o, u, w, S, k, R) {
var E = {
// This tag allows us to uniquely identify this as a React Element
$$typeof: r,
// Built-in properties that belong on the element
type: e,
key: o,
ref: u,
props: R,
// Record the component responsible for creating this element.
_owner: k
};
return E._store = {}, Object.defineProperty(E._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: !1
}), Object.defineProperty(E, "_self", {
configurable: !1,
enumerable: !1,
writable: !1,
value: w
}), Object.defineProperty(E, "_source", {
configurable: !1,
enumerable: !1,
writable: !1,
value: S
}), Object.freeze && (Object.freeze(E.props), Object.freeze(E)), E;
};
function Pt(e, o, u, w, S) {
{
var k, R = {}, E = null, N = null;
u !== void 0 && (Fe(u), E = "" + u), vt(o) && (Fe(o.key), E = "" + o.key), pt(o) && (N = o.ref, wt(o, S));
for (k in o)
ce.call(o, k) && !gt.hasOwnProperty(k) && (R[k] = o[k]);
if (e && e.defaultProps) {
var I = e.defaultProps;
for (k in I)
R[k] === void 0 && (R[k] = I[k]);
}
if (E || N) {
var V = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
E && mt(R, V), N && bt(R, V);
}
return xt(e, E, N, S, w, Ne.current, R);
}
}
var xe = h.ReactCurrentOwner, ze = h.ReactDebugCurrentFrame;
function ee(e) {
if (e) {
var o = e._owner, u = le(e.type, e._source, o ? o.type : null);
ze.setExtraStackFrame(u);
} else
ze.setExtraStackFrame(null);
}
var Pe;
Pe = !1;
function je(e) {
return typeof e == "object" && e !== null && e.$$typeof === r;
}
function Be() {
{
if (xe.current) {
var e = B(xe.current.type);
if (e)
return `
Check the render method of \`` + e + "`.";
}
return "";
}
}
function jt(e) {
return "";
}
var Ye = {};
function Et(e) {
{
var o = Be();
if (!o) {
var u = typeof e == "string" ? e : e.displayName || e.name;
u && (o = `
Check the top-level render call using <` + u + ">.");
}
return o;
}
}
function Ue(e, o) {
{
if (!e._store || e._store.validated || e.key != null)
return;
e._store.validated = !0;
var u = Et(o);
if (Ye[u])
return;
Ye[u] = !0;
var w = "";
e && e._owner && e._owner !== xe.current && (w = " It was passed a child from " + B(e._owner.type) + "."), ee(e), x('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', u, w), ee(null);
}
}
function Ge(e, o) {
{
if (typeof e != "object")
return;
if (be(e))
for (var u = 0; u < e.length; u++) {
var w = e[u];
je(w) && Ue(w, o);
}
else if (je(e))
e._store && (e._store.validated = !0);
else if (e) {
var S = C(e);
if (typeof S == "function" && S !== e.entries)
for (var k = S.call(e), R; !(R = k.next()).done; )
je(R.value) && Ue(R.value, o);
}
}
}
function yt(e) {
{
var o = e.type;
if (o == null || typeof o == "string")
return;
var u;
if (typeof o == "function")
u = o.propTypes;
else if (typeof o == "object" && (o.$$typeof === l || // Note: Memo only checks outer props here.
// Inner props are checked in the reconciler.
o.$$typeof === v))
u = o.propTypes;
else
return;
if (u) {
var w = B(o);
dt(u, e.props, "prop", w, e);
} else if (o.PropTypes !== void 0 && !Pe) {
Pe = !0;
var S = B(o);
x("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", S || "Unknown");
}
typeof o.getDefaultProps == "function" && !o.getDefaultProps.isReactClassApproved && x("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
}
}
function Rt(e) {
{
for (var o = Object.keys(e.props), u = 0; u < o.length; u++) {
var w = o[u];
if (w !== "children" && w !== "key") {
ee(e), x("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", w), ee(null);
break;
}
}
e.ref !== null && (ee(e), x("Invalid attribute `ref` supplied to `React.Fragment`."), ee(null));
}
}
function qe(e, o, u, w, S, k) {
{
var R = L(e);
if (!R) {
var E = "";
(e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (E += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
var N = jt();
N ? E += N : E += Be();
var I;
e === null ? I = "null" : be(e) ? I = "array" : e !== void 0 && e.$$typeof === r ? (I = "<" + (B(e.type) || "Unknown") + " />", E = " Did you accidentally export a JSX literal instead of a component?") : I = typeof e, x("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", I, E);
}
var V = Pt(e, o, u, S, k);
if (V == null)
return V;
if (R) {
var G = o.children;
if (G !== void 0)
if (w)
if (be(G)) {
for (var te = 0; te < G.length; te++)
Ge(G[te], e);
Object.freeze && Object.freeze(G);
} else
x("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
else
Ge(G, e);
}
return e === i ? Rt(V) : yt(V), V;
}
}
function Tt(e, o, u) {
return qe(e, o, u, !0);
}
function Ct(e, o, u) {
return qe(e, o, u, !1);
}
var St = Ct, Dt = Tt;
ie.Fragment = i, ie.jsx = St, ie.jsxs = Dt;
})()), ie;
}
var Ke;
function Mt() {
return Ke || (Ke = 1, process.env.NODE_ENV === "production" ? ue.exports = At() : ue.exports = Vt()), ue.exports;
}
var a = Mt();
function Ft({ position: t, isDragging: r }) {
return /* @__PURE__ */ a.jsx(
"div",
{
className: "layman-drop-highlight",
style: {
...t,
visibility: r ? "visible" : "hidden",
opacity: r ? 0.2 : 0
}
}
);
}
const $ = (t, r) => {
if (r.length === 0) return t;
const n = "children." + r.join(".children.");
return m.get(t, n);
}, Re = (t, r) => {
if (!t)
return {
tabs: [r.tab]
};
const n = "children." + r.path.join(".children."), i = $(t, r.path);
if (!i || !("tabs" in i)) return t;
const s = {
...i,
tabs: [...i.tabs, r.tab]
};
return r.path.length == 0 ? s : m.set(m.cloneDeep(t), n, s);
}, Nt = (t, r) => {
if (!t) return t;
const n = "children." + r.path.join(".children."), i = $(t, r.path);
if (!i || !("tabs" in i)) return t;
const s = i.tabs.filter((l) => l.id !== r.tab.id);
let g = i.selectedIndex;
const p = m.indexOf(i.tabs, r.tab);
if (i.selectedIndex && p <= i.selectedIndex && (g = Math.max(0, i.selectedIndex - 1)), s.length === 0)
return pe(t, {
type: "removeWindow",
path: r.path
});
const f = {
...i,
tabs: s,
selectedIndex: g
};
return r.path.length == 0 ? f : m.set(m.cloneDeep(t), n, f);
}, Ht = (t, r) => {
if (!t) return t;
const n = "children." + r.path.join(".children."), i = $(t, r.path);
if (!i || !("tabs" in i)) return t;
const s = {
...i,
selectedIndex: i.tabs.findIndex((g) => g.id === r.tab.id)
};
return r.path.length == 0 ? s : m.set(m.cloneDeep(t), n, s);
}, $t = (t, r) => {
if (!t) return t;
const n = $(t, r.newPath);
if (!n || !("tabs" in n)) return t;
let i = t;
return r.path.length === 1 && r.path[0] === -1 || (i = pe(t, {
type: "removeTab",
path: r.path,
tab: r.tab
})), r.placement === "center" ? Re(i, {
path: r.newPath,
tab: r.tab
}) : Te(i, {
path: r.newPath,
window: {
tabs: [r.tab],
selectedIndex: 0
},
placement: r.placement
});
}, zt = (t, r) => {
if (!t) return t;
const n = m.dropRight(r.path), i = "children." + n.join(".children."), s = $(t, n);
if (!s || !("children" in s))
return;
const g = s.children.find((c, j) => j === m.last(r.path)), p = g ? g.viewPercent : void 0, f = s.children.filter((c, j) => j !== m.last(r.path)).map((c) => {
if (c)
return {
...c,
viewPercent: p ? (c.viewPercent ? c.viewPercent : 100 / s.children.length) * 100 / (100 - p) : (c.viewPercent ? c.viewPercent : 100 / s.children.length) * s.children.length / (s.children.length - 1)
};
});
if (f.length != 1) {
const c = {
...s,
children: f
};
return n.length == 0 ? c : m.set(m.cloneDeep(t), i, c);
}
const l = f[0];
if ("tabs" in l)
return n.length == 0 ? { ...l, viewPercent: s.viewPercent } : m.set(m.cloneDeep(t), i, { ...l, viewPercent: s.viewPercent });
const b = m.dropRight(n), d = "children." + b.join(".children."), v = $(t, b);
if (!v || !("children" in v)) return t;
if (v.direction === l.direction) {
const c = m.last(n), j = {
...v,
children: [
...v.children.slice(0, c).map((P) => {
if (P)
return {
...P,
viewPercent: P.viewPercent ? P.viewPercent * v.children.length / (v.children.length + l.children.length - 1) : P.viewPercent
};
}),
...l.children.map((P) => {
if (P)
return {
...P,
viewPercent: P.viewPercent ? P.viewPercent * l.children.length / (v.children.length + l.children.length - 1) : P.viewPercent
};
}),
...v.children.slice(c + 1).map((P) => {
if (P)
return {
...P,
viewPercent: P.viewPercent ? P.viewPercent * v.children.length / (v.children.length + l.children.length - 1) : P.viewPercent
};
})
]
};
return b.length == 0 ? j : m.set(m.cloneDeep(t), d, j);
} else
return b.length == 0 ? f[0] : m.set(m.cloneDeep(t), i, f[0]);
}, Te = (t, r) => {
if (!t) return t;
const n = "children." + m.dropRight(r.path).join(".children."), i = $(t, m.dropRight(r.path));
if (!i) return t;
if (!("children" in i)) {
const p = r.placement === "top" || r.placement === "bottom", f = r.placement === "top" || r.placement === "left" ? [r.window, i] : [i, r.window];
return {
direction: p ? "column" : "row",
children: f
};
}
const s = r.placement === "top" || r.placement === "bottom", g = r.placement === "bottom" || r.placement === "right" ? m.last(r.path) + 1 : m.last(r.path);
if (s && i.direction === "column" || !s && i.direction === "row") {
const p = {
...i,
children: [
...i.children.slice(0, g).map((f) => {
if (f)
return {
...f,
viewPercent: f.viewPercent ? f.viewPercent * i.children.length / (i.children.length + 1) : f.viewPercent
};
}),
{ ...r.window, viewPercent: 100 / (i.children.length + 1) },
...i.children.slice(g).map((f) => {
if (f)
return {
...f,
viewPercent: f.viewPercent ? f.viewPercent * i.children.length / (i.children.length + 1) : f.viewPercent
};
})
]
};
return r.path.length == 1 ? p : m.set(m.cloneDeep(t), n, p);
} else {
const p = $(t, r.path);
if (!p || !("tabs" in p)) return t;
const f = r.placement === "top" || r.placement === "left" ? [r.window, { ...p, viewPercent: 50 }] : [{ ...p, viewPercent: 50 }, r.window], l = {
...i,
children: i.children.map(
(b, d) => d === m.last(r.path) ? {
direction: s ? "column" : "row",
children: f,
viewPercent: p.viewPercent
} : b
)
};
return r.path.length == 1 ? l : m.set(m.cloneDeep(t), n, l);
}
}, Bt = (t, r) => {
const n = r.path, i = r.newPath, s = m.takeWhile(n, (l, b) => l === i[b]).length;
if (s != n.length - 1) {
if (s != n.length - 2)
return i;
const l = m.clone(i), b = m.dropRight(r.path), d = $(t, b);
if (!d || !("children" in d)) return l;
const v = m.dropRight(b), c = $(t, v);
if (!c || !("children" in c)) return l;
const j = d.children[m.last(n) == 1 ? 0 : 1];
if (!j || !("children" in j))
return l;
if (c.direction === j.direction)
return l[s] > n[s] && (l[s] += j.children.length - 1), l;
}
const g = m.clone(i);
i[s] > n[s] && (g[s] = i[s] - 1);
const p = m.dropRight(n), f = $(t, p);
if (!f || !("children" in f))
return g;
if (f.children.length == 2) {
g.splice(s, 1);
const l = m.dropRight(p), b = $(t, l);
if (!b || !("children" in b))
return g;
const d = f.children[m.last(n) == 1 ? 0 : 1];
if (!d || !("children" in d))
return g;
b.direction === d.direction && (g[s - 1] += g[s], g.splice(s, 1));
}
return g;
}, Yt = (t, r) => {
const n = $(t, r.path);
if (!n || !("tabs" in n)) return t;
const i = pe(t, {
type: "removeWindow",
path: r.path
}), s = Bt(t, r);
if (r.placement === "center") {
let g = m.cloneDeep(i);
return r.window.tabs.forEach((p) => {
g = Re(g, {
path: s,
tab: p
});
}), g;
} else
return Te(i, {
path: s,
window: r.window,
placement: r.placement
});
}, Ut = (t, r) => {
if (!t) return t;
const n = $(t, r.path);
if (!n || !("children" in n)) return t;
const i = "children." + r.path.join(".children."), s = n.children.length, g = n.children[r.index].viewPercent ?? 100 / s, p = n.children[r.index + 1].viewPercent ?? 100 / s, f = r.newSplitPercentage, l = g + p - f, b = m.cloneDeep(n);
return b.children[r.index].viewPercent = f, b.children[r.index + 1].viewPercent = l, r.path.length == 0 ? b : m.set(m.cloneDeep(t), i, b);
}, fe = (t, r) => {
if (!t)
return {
tabs: [r.tab]
};
if ("tabs" in t)
return {
...t,
tabs: [...t.tabs, r.tab],
selectedIndex: t.tabs.length
};
if (r.heuristic === "topleft") {
const n = [...t.children];
return n[0] = fe(n[0], r), { ...t, children: n };
} else if (r.heuristic === "topright") {
const n = [...t.children];
return t.direction === "column" ? n[0] = fe(n[0], r) : n[n.length - 1] = fe(n[n.length - 1], r), { ...t, children: n };
}
return t;
}, nt = (t) => {
if (!t || "tabs" in t)
return t;
const n = 100 / t.children.length;
return {
...t,
children: t.children.map((i) => ({
...nt(i),
viewPercent: n
}))
};
}, pe = (t, r) => {
switch (r.type) {
case "addTab":
return Re(t, r);
case "removeTab":
return Nt(t, r);
case "selectTab":
return Ht(t, r);
case "moveTab":
return $t(t, r);
case "addWindow":
return Te(t, r);
case "removeWindow":
return zt(t, r);
case "moveWindow":
return Yt(t, r);
case "moveSeparator":
return Ut(t, r);
case "addTabWithHeuristic":
return fe(t, r);
case "autoArrange":
return nt(t);
default:
throw new Error("Unknown action: " + r);
}
}, Gt = {
globalContainerSize: { top: 0, left: 0, width: 0, height: 0 },
setGlobalContainerSize: () => {
},
layout: { tabs: [] },
layoutDispatch: () => {
},
setDropHighlightPosition: () => {
},
globalDragging: !1,
setGlobalDragging: () => {
},
draggedWindowTabs: [],
setDraggedWindowTabs: () => {
},
windowDragStartPosition: { x: 0, y: 0 },
setWindowDragStartPosition: () => {
},
renderPane: () => /* @__PURE__ */ a.jsx(a.Fragment, {}),
renderTab: () => /* @__PURE__ */ a.jsx(a.Fragment, {}),
mutable: !1,
toolbarButtons: [],
renderNull: /* @__PURE__ */ a.jsx(a.Fragment, {})
}, K = et(Gt), gr = ({
initialLayout: t,
renderPane: r,
renderTab: n,
renderNull: i,
mutable: s = !1,
toolbarButtons: g = [],
children: p
}) => {
const [f, l] = kt(pe, t), [b, d] = Y({
top: 0,
left: 0,
width: 0,
height: 0
}), [v, c] = Y({
top: 0,
left: 0,
width: 0,
height: 0
}), [j, P] = Y([]), [W, C] = Y({
x: 0,
y: 0
}), [h, x] = Y(!1);
return /* @__PURE__ */ a.jsx(
K.Provider,
{
value: {
globalContainerSize: b,
setGlobalContainerSize: d,
layout: f,
layoutDispatch: l,
setDropHighlightPosition: c,
globalDragging: h,
setGlobalDragging: x,
draggedWindowTabs: j,
setDraggedWindowTabs: P,
windowDragStartPosition: W,
setWindowDragStartPosition: C,
renderPane: r,
renderTab: n,
mutable: s,
toolbarButtons: g,
renderNull: i
},
children: /* @__PURE__ */ a.jsxs(Ot, { backend: It, children: [
/* @__PURE__ */ a.jsx(Ft, { position: v, isDragging: h }),
/* @__PURE__ */ a.jsx("div", { id: "drag-window-border" }),
p
] })
}
);
}, it = et({
position: {
top: 0,
left: 0,
width: 0,
height: 0
},
path: [],
tab: new re(""),
isSelected: !1
}), pr = () => X(it);
function Ce() {
return /* @__PURE__ */ a.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ a.jsx(
"path",
{
fillRule: "evenodd",
clipRule: "evenodd",
d: "M8 8.707l3.646 3.647.708-.707L8.707 8l3.647-3.646-.707-.708L8 7.293 4.354 3.646l-.707.708L7.293 8l-3.646 3.646.707.708L8 8.707z"
}
)
}
);
}
function qt() {
return /* @__PURE__ */ a.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ a.jsx("path", { d: "M14 7v1H8v6H7V8H1V7h6V1h1v6h6z" })
}
);
}
function Jt() {
return /* @__PURE__ */ a.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ a.jsx("path", { d: "M4 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z" })
}
);
}
function Zt() {
return /* @__PURE__ */ a.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ a.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 1L1 2V14L2 15H14L15 14V2L14 1H2ZM2 10V2H14V10H2Z" })
}
);
}
function Xt() {
return /* @__PURE__ */ a.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
style: { transform: "rotate(180deg)" },
children: /* @__PURE__ */ a.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 1L1 2V14L2 15H14L15 14V2L14 1H2ZM2 10V2H14V10H2Z" })
}
);
}
function Kt() {
return /* @__PURE__ */ a.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
style: { transform: "rotate(900deg)" },
children: /* @__PURE__ */ a.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 1L1 2V14L2 15H14L15 14V2L14 1H2ZM2 10V2H14V10H2Z" })
}
);
}
function Qt() {
return /* @__PURE__ */ a.jsx(
"svg",
{
stroke: "currentColor",
fill: "currentColor",
strokeWidth: "0",
viewBox: "0 0 16 16",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
style: { transform: "rotate(270deg)" },
children: /* @__PURE__ */ a.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2 1L1 2V14L2 15H14L15 14V2L14 1H2ZM2 10V2H14V10H2Z" })
}
);
}
function er() {
return /* @__PURE__ */ a.jsxs(
"svg",
{
stroke: "currentColor",
fill: "none",
strokeWidth: "2",
viewBox: "0 0 24 24",
strokeLinecap: "round",
strokeLinejoin: "round",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ a.jsx("polyline", { points: "15 3 21 3 21 9" }),
/* @__PURE__ */ a.jsx("polyline", { points: "9 21 3 21 3 15" }),
/* @__PURE__ */ a.jsx("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
/* @__PURE__ */ a.jsx("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
]
}
);
}
function tr() {
return /* @__PURE__ */ a.jsxs(
"svg",
{
stroke: "currentColor",
fill: "none",
strokeWidth: "2",
viewBox: "0 0 24 24",
strokeLinecap: "round",
strokeLinejoin: "round",
height: "1em",
width: "1em",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ a.jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3" }),
/* @__PURE__ */ a.jsx("path", { d: "M21 8h-3a2 2 0 0 1-2-2V3" }),
/* @__PURE__ */ a.jsx("path", { d: "M3 16h3a2 2 0 0 1 2 2v3" }),
/* @__PURE__ */ a.jsx("path", { d: "M16 21v-3a2 2 0 0 1 2-2h3" })
]
}
);
}
const rr = ({ tab: t, path: r, isSelected: n, onDelete: i, onMouseDown: s }) => {
const { renderTab: g, setGlobalDragging: p, mutable: f } = X(K), [{ isDragging: l }, b] = Ee({
type: ye,
item: {
path: r,
tab: t
},
collect: (d) => ({
isDragging: d.isDragging()
})
});
return H(() => {
p(l);
}, [l, p]), /* @__PURE__ */ a.jsxs(
"div",
{
ref: b,
className: `tab ${n ? "selected" : ""}`,
style: {
visibility: l ? "hidden" : "visible",
width: l ? 0 : "auto"
},
children: [
n && /* @__PURE__ */ a.jsx("div", { className: "indicator" }),
/* @__PURE__ */ a.jsx("button", { className: "tab-selector", onMouseDown: s, children: g(t) }),
f && /* @__PURE__ */ a.jsx("button", { className: "close-tab", onClick: i, children: /* @__PURE__ */ a.jsx(Ce, {}) })
]
}
);
}, nr = ({ dragRef: t, tab: r, onDelete: n, onMouseDown: i }) => {
const { renderTab: s, mutable: g } = X(K);
return /* @__PURE__ */ a.jsxs("div", { ref: t, className: "tab selected", children: [
/* @__PURE__ */ a.jsx("div", { className: "indicator" }),
/* @__PURE__ */ a.jsx("button", { className: "tab-selector", onMouseDown: i, children: s(r) }),
g && /* @__PURE__ */ a.jsx("button", { className: "close-tab", onClick: n, children: /* @__PURE__ */ a.jsx(Ce, {}) })
] });
};
function Z({
children: t,
...r
// Spread operator for capturing all additional props
}) {
return /* @__PURE__ */ a.jsx("button", { className: "toolbar-button", ...r, children: t });
}
function oe({ path: t, position: r, placement: n }) {
const { globalContainerSize: i, layoutDispatch: s, setDropHighlightPosition: g } = X(K), p = ge({
top: 0,
left: 0,
width: 0,
height: 0
}), f = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--toolbar-height").trim(), 10) ?? 64, l = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--separator-thickness").trim(), 10) ?? 8;
H(() => {
const d = {
top: r.top + f,
left: r.left,
width: r.width - l,
height: r.height - f - l / 2
};
n === "top" && (d.height = d.height / 2), n === "bottom" && (d.top += d.height / 2, d.height = d.height / 2), n === "left" && (d.width = d.width / 2), n === "right" && (d.left += d.width / 2, d.width = d.width / 2), d.top += i.top, d.left += i.left, p.current = d;
}, [
i.left,
i.top,
n,
r.height,
r.left,
r.top,
r.width,
l,
f
]);
const [, b] = Wt(() => ({
accept: [ye, he],
drop: (d, v) => {
const c = v.getItemType();
c === ye && "tab" in d ? s({
type: "moveTab",
tab: d.tab,
path: d.path ?? [-1],
newPath: t,
placement: n
}) : c === he && "tabs" in d && s({
type: "moveWindow",
path: d.path,
newPath: t,
window: {
tabs: d.tabs,
selectedIndex: d.selectedIndex
},
placement: n
});
},
hover: () => g(p.current)
}));
return /* @__PURE__ */ a.jsx("div", { ref: b, className: `layman-window-drop-target ${n}` });
}
function ir(t) {
const r = ge(0);
return H(() => {
r.current = t;
}), r.current;
}
function or({ path: t, position: r, tabs: n, selectedIndex: i }) {
const {
layoutDispatch: s,
globalDragging: g,
setGlobalDragging: p,
setWindowDragStartPosition: f,
setDraggedWindowTabs: l,
mutable: b,
toolbarButtons: d
} = X(K), v = ge(null), c = ir(n.length), j = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--toolbar-height").trim(), 10) ?? 64, P = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--separator-thickness").trim(), 10) ?? 8, W = tt(() => {
const T = new Image();
return T.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7", T;
}, []);
H(() => {
if (c !== void 0 && n.length > c && v.current) {
const T = v.current;
T.scrollWidth > T.clientWidth && (T.scrollLeft = T.scrollWidth);
}
}, [n.length, c]), H(() => {
s({
type: "selectTab",
path: t,
tab: n[i]
});
}, []);
const [C, h] = Y({
top: r.top,
left: r.left
}), [x, D] = Y({ x: 0, y: 0 }), [{ isDragging: y }, Q, M] = Ee({
type: he,
item: { path: t, tabs: n, selectedIndex: i },
collect: (T) => ({
isDragging: T.isDragging()
}),
end: () => {
l([]), f({ x: 0, y: 0 });
}
}), [{ singleTabIsDragging: O }, F, _] = Ee({
type: he,
item: { path: t, tabs: n, selectedIndex: i },
collect: (T) => ({
singleTabIsDragging: T.isDragging()
}),
end: () => {
l([]), f({ x: 0, y: 0 });
}
});
H(() => {
M(W);
}, [M, W]), H(() => {
_(W);
}, [_, W]);
const { clientOffset: L } = rt((T) => ({
clientOffset: T.getClientOffset()
}));
H(() => {
h(L && (y || O) ? {
top: L.y - x.y,
left: L.x - x.x
} : {
top: 0,
left: 0
});
}, [L, x.x, x.y, y, O]), H(() => {
p(y || O);
}, [y, p, O]), H(() => {
(y || O) && (l(n), f(x));
}, [x, y, l, f, O, n]);
const z = y || O ? 0.7 : 1, U = {
top: r.top + C.top,
left: r.left * z + C.left,
width: r.width - P,
height: j
}, B = {
top: r.top + j,
left: r.left,
width: r.width - P,
height: r.height - j - P / 2
}, q = (T, A) => {
switch (T) {
case "splitTop":
return /* @__PURE__ */ a.jsx(
Z,
{
onClick: () => s({
type: "addWindow",
path: t,
window: {
tabs: [new re("blank")],
selectedIndex: 0
},
placement: "top"
}),
children: /* @__PURE__ */ a.jsx(Xt, {})
},
A
);
case "splitBottom":
return /* @__PURE__ */ a.jsx(
Z,
{
onClick: () => s({
type: "addWindow",
path: t,
window: {
tabs: [new re("blank")],
selectedIndex: 0
},
placement: "bottom"
}),
children: /* @__PURE__ */ a.jsx(Zt, {})
},
A
);
case "splitLeft":
return /* @__PURE__ */ a.jsx(
Z,
{
onClick: () => s({
type: "addWindow",
path: t,
window: {
tabs: [new re("blank")],
selectedIndex: 0
},
placement: "left"
}),
children: /* @__PURE__ */ a.jsx(Kt, {})
},
A
);
case "splitRight":
return /* @__PURE__ */ a.jsx(
Z,
{
onClick: () => s({
type: "addWindow",
path: t,
window: {
tabs: [new re("blank")],
selectedIndex: 0
},
placement: "right"
}),
children: /* @__PURE__ */ a.jsx(Qt, {})
},
A
);
case "maximize":
return /* @__PURE__ */ a.jsx(Z, { onClick: () => {
}, children: /* @__PURE__ */ a.jsx(er, {}) }, A);
case "minimize":
return /* @__PURE__ */ a.jsx(Z, { onClick: () => {
}, children: /* @__PURE__ */ a.jsx(tr, {}) }, A);
case "close":
return /* @__PURE__ */ a.jsx(
Z,
{
onClick: () => {
s({
type: "removeWindow",
path: t
});
},
children: /* @__PURE__ */ a.jsx(Ce, {})
},
A
);
case "misc":
return /* @__PURE__ */ a.jsx(Z, { onClick: () => {
}, children: /* @__PURE__ */ a.jsx(Jt, {}) }, A);
}
};
return /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
/* @__PURE__ */ a.jsxs(
"div",
{
id: t.join(":"),
style: {
...U,
transform: `scale(${z})`,
transformOrigin: `${x.x}px bottom`,
zIndex: y || O ? 13 : 7,
pointerEvents: y || O ? "none" : "auto",
userSelect: y || O ? "none" : "auto"
},
className: "layman-toolbar",
children: [
/* @__PURE__ */ a.jsx("div", { ref: v, className: "tab-container", children: n.length > 1 ? n.map((T, A) => /* @__PURE__ */ a.jsx(
rr,
{
path: t,
tab: T,
isSelected: A == i,
onDelete: () => s({
type: "removeTab",
path: t,
tab: n[A]
}),
onMouseDown: () => s({
type: "selectTab",
path: t,
tab: n[A]
})
},
A
)) : /* @__PURE__ */ a.jsx(
nr,
{
dragRef: F,
tab: n[0],
onDelete: () => s({
type: "removeTab",
path: t,
tab: n[0]
}),
onMouseDown: (T) => {
D({
x: T.clientX,
y: T.clientY
}), s({
type: "selectTab",
path: t,
tab: n[0]
});
}
}
) }),
/* @__PURE__ */ a.jsx("div", { style: { display: "flex" }, children: /* @__PURE__ */ a.jsx(
Z,
{
onClick: () => s({
type: "addTab",
path: t,
tab: new re("blank")
}),
children: /* @__PURE__ */ a.jsx(qt, {})
}
) }),
/* @__PURE__ */ a.jsx(
"div",
{
ref: Q,
className: "drag-area",
onMouseDown: (T) => {
D({
x: T.clientX,
y: T.clientY
});
}
}
),
/* @__PURE__ */ a.jsx("div", { className: "toolbar-button-container", children: b ? d?.map((T, A) => q(T, A)) : ["maximize", "minimize", "misc"].map(
(T, A) => q(T, A)
) })
]
}
),
!(y || O) && /* @__PURE__ */ a.jsxs(
"div",
{
style: {
position: "absolute",
...B,
zIndex: 10,
margin: "calc(var(--separator-thickness, 8px) / 2)",
marginTop: 0,
pointerEvents: g ? "auto" : "none"
},
children: [
/* @__PURE__ */ a.jsx(oe, { path: t, position: r, placement: "top" }),
/* @__PURE__ */ a.jsx(oe, { path: t, position: r, placement: "bottom" }),
/* @__PURE__ */ a.jsx(oe, { path: t, position: r, placement: "left" }),
/* @__PURE__ */ a.jsx(oe, { path: t, position: r, placement: "right" }),
/* @__PURE__ */ a.jsx(oe, { path: t, position: r, placement: "center" })
]
}
)
] });
}
function ar({ position: t, path: r, tab: n, isSelected: i }) {
const { globalContainerSize: s, renderPane: g, draggedWindowTabs: p, windowDragStartPosition: f } = X(K), l = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--separator-thickness").trim(), 10) ?? 8, b = parseInt(getComputedStyle(document.documentElement).getPropertyValue("--toolbar-height").trim(), 10) ?? 64, d = p.includes(n), v = d ? 0.7 : 1, { clientOffset: c } = rt((D) => ({
clientOffset: D.getClientOffset()
})), [j, P] = Y({
top: t.top,
left: t.left
});
H(() => {
if (d && c) {
const D = f.x, y = f.y;
P({
top: c.y - y,
left: c.x - D
});
} else
P({
top: 0,
left: 0
});
}, [c, d, f.x, f.y]);
const [W, C] = Y(null);
if (H(() => {
const D = document.getElementById("drag-window-border");
D ? C(D) : console.error("Element with id 'drag-window-border' not found.");
}, []), !W)
return null;
const h = {
top: t.top + b + l / 2 + j.top,
left: t.left * v + j.left,
width: t.width - l,
height: t.height - b - l
}, x = {
top: t.top + b / 2 * v + j.top + s.top,
left: t.left * v + j.left + s.left,
width: t.width - l + 2,
// +2 for thickness of the border itself
height: t.height - l / 2
};
return /* @__PURE__ */ a.jsxs(
"div",
{
id: n.id,
style: {
...h,
transform: `scale(${v})`,
transformOrigin: `${f.x}px top`,
zIndex: d ? 12 : 5,
pointerEvents: d ? "none" : "auto"
},
className: `layman-window ${i ? "selected" : "unselected"}`,
children: [
d && Lt(
/* @__PURE__ */ a.jsx(
"div",
{
style: {
position: "absolute",
zIndex: 12,
...x,
transform: `scale(${v})`,
transformOrigin: `${f.x}px top`,
border: "1px solid var(--indicator-color, #f97316)",