@tomorrowevening/ux-lib
Version:
React components extracted from Hermes editor
1,152 lines (1,151 loc) • 33 kB
JavaScript
import ce, { useState as A, useRef as j, useEffect as F, memo as U, useCallback as M, forwardRef as ie, useImperativeHandle as de } from "react";
function fe(x) {
return x.substring(0, 1).toUpperCase() + x.substring(1);
}
function we(x) {
const l = JSON.stringify(x);
return navigator.clipboard.writeText(l), l;
}
function ke() {
return Math.round(Math.random() * 1e6).toString();
}
var Z = { exports: {} }, J = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var re;
function me() {
if (re) return J;
re = 1;
var x = Symbol.for("react.transitional.element"), l = Symbol.for("react.fragment");
function s(n, r, o) {
var v = null;
if (o !== void 0 && (v = "" + o), r.key !== void 0 && (v = "" + r.key), "key" in r) {
o = {};
for (var d in r)
d !== "key" && (o[d] = r[d]);
} else o = r;
return r = o.ref, {
$$typeof: x,
type: n,
key: v,
ref: r !== void 0 ? r : null,
props: o
};
}
return J.Fragment = l, J.jsx = s, J.jsxs = s, J;
}
var q = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var se;
function pe() {
return se || (se = 1, process.env.NODE_ENV !== "production" && function() {
function x(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === $ ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case f:
return "Fragment";
case g:
return "Profiler";
case a:
return "StrictMode";
case m:
return "Suspense";
case E:
return "SuspenseList";
case C:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case c:
return "Portal";
case L:
return (e.displayName || "Context") + ".Provider";
case T:
return (e._context.displayName || "Context") + ".Consumer";
case i:
var h = e.render;
return e = e.displayName, e || (e = h.displayName || h.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case _:
return h = e.displayName || null, h !== null ? h : x(e.type) || "Memo";
case P:
h = e._payload, e = e._init;
try {
return x(e(h));
} catch {
}
}
return null;
}
function l(e) {
return "" + e;
}
function s(e) {
try {
l(e);
var h = !1;
} catch {
h = !0;
}
if (h) {
h = console;
var k = h.error, S = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return k.call(
h,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
S
), l(e);
}
}
function n(e) {
if (e === f) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === P)
return "<...>";
try {
var h = x(e);
return h ? "<" + h + ">" : "<...>";
} catch {
return "<...>";
}
}
function r() {
var e = w.A;
return e === null ? null : e.getOwner();
}
function o() {
return Error("react-stack-top-frame");
}
function v(e) {
if (O.call(e, "key")) {
var h = Object.getOwnPropertyDescriptor(e, "key").get;
if (h && h.isReactWarning) return !1;
}
return e.key !== void 0;
}
function d(e, h) {
function k() {
X || (X = !0, console.error(
"%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://react.dev/link/special-props)",
h
));
}
k.isReactWarning = !0, Object.defineProperty(e, "key", {
get: k,
configurable: !0
});
}
function N() {
var e = x(this.type);
return K[e] || (K[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function y(e, h, k, S, D, Y, B, H) {
return k = Y.ref, e = {
$$typeof: p,
type: e,
key: h,
props: Y,
_owner: D
}, (k !== void 0 ? k : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: N
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: B
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: H
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function R(e, h, k, S, D, Y, B, H) {
var I = h.children;
if (I !== void 0)
if (S)
if (W(I)) {
for (S = 0; S < I.length; S++)
b(I[S]);
Object.freeze && Object.freeze(I);
} else
console.error(
"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 b(I);
if (O.call(h, "key")) {
I = x(e);
var G = Object.keys(h).filter(function(ue) {
return ue !== "key";
});
S = 0 < G.length ? "{key: someKey, " + G.join(": ..., ") + ": ...}" : "{key: someKey}", ne[I + S] || (G = 0 < G.length ? "{" + G.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
S,
I,
G,
I
), ne[I + S] = !0);
}
if (I = null, k !== void 0 && (s(k), I = "" + k), v(h) && (s(h.key), I = "" + h.key), "key" in h) {
k = {};
for (var Q in h)
Q !== "key" && (k[Q] = h[Q]);
} else k = h;
return I && d(
k,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), y(
e,
I,
Y,
D,
r(),
k,
B,
H
);
}
function b(e) {
typeof e == "object" && e !== null && e.$$typeof === p && e._store && (e._store.validated = 1);
}
var u = ce, p = Symbol.for("react.transitional.element"), c = Symbol.for("react.portal"), f = Symbol.for("react.fragment"), a = Symbol.for("react.strict_mode"), g = Symbol.for("react.profiler"), T = Symbol.for("react.consumer"), L = Symbol.for("react.context"), i = Symbol.for("react.forward_ref"), m = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), _ = Symbol.for("react.memo"), P = Symbol.for("react.lazy"), C = Symbol.for("react.activity"), $ = Symbol.for("react.client.reference"), w = u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, W = Array.isArray, V = console.createTask ? console.createTask : function() {
return null;
};
u = {
"react-stack-bottom-frame": function(e) {
return e();
}
};
var X, K = {}, ee = u["react-stack-bottom-frame"].bind(
u,
o
)(), te = V(n(o)), ne = {};
q.Fragment = f, q.jsx = function(e, h, k, S, D) {
var Y = 1e4 > w.recentlyCreatedOwnerStacks++;
return R(
e,
h,
k,
!1,
S,
D,
Y ? Error("react-stack-top-frame") : ee,
Y ? V(n(e)) : te
);
}, q.jsxs = function(e, h, k, S, D) {
var Y = 1e4 > w.recentlyCreatedOwnerStacks++;
return R(
e,
h,
k,
!0,
S,
D,
Y ? Error("react-stack-top-frame") : ee,
Y ? V(n(e)) : te
);
};
}()), q;
}
var ae;
function ve() {
return ae || (ae = 1, process.env.NODE_ENV === "production" ? Z.exports = me() : Z.exports = pe()), Z.exports;
}
var t = ve();
function z(x) {
const [l, s] = A(x.defaultValue), n = j(x);
return n.current = x, F(() => {
s(x.defaultValue);
}, [x.defaultValue]), F(() => {
let r = !1, o = -1, v = 0, d = x.defaultValue, N = !1;
const y = (a) => {
N = a.ctrlKey;
}, R = (a) => {
if (!r) return;
const g = n.current, T = g.step !== void 0 ? g.step : 1, L = (a.clientX - o) * T * (N ? 10 : 1);
d = Number((v + L).toFixed(4)), g.min !== void 0 && (d = Math.max(d, g.min)), g.max !== void 0 && (d = Math.min(d, g.max)), g.onChange !== void 0 && g.onChange(d), s(d);
}, b = () => {
r = !1;
}, u = (a) => {
r = !0;
const g = n.current;
v = Number(g.input.current?.value), o = a.clientX;
}, p = (a) => {
const g = n.current, T = Number(a.target.value);
g.onChange !== void 0 && g.onChange(T), s(T);
}, c = x.label.current, f = x.sliderRef?.current;
return c?.addEventListener("mousedown", u, !1), f?.addEventListener("input", p), document.addEventListener("keydown", y, !1), document.addEventListener("keyup", y, !1), document.addEventListener("mouseup", b, !1), document.addEventListener("mousemove", R, !1), document.addEventListener("contextmenu", b, !1), () => {
c?.removeEventListener("mousedown", u), f?.removeEventListener("input", p), document.removeEventListener("keydown", y), document.removeEventListener("keyup", y), document.removeEventListener("mouseup", b), document.removeEventListener("mousemove", R), document.removeEventListener("contextmenu", b);
};
}, []), l;
}
const oe = U(function({
label: l,
value: s,
onChange: n,
min: r,
max: o,
step: v = 0.01,
type: d = "number",
disabled: N = !1
}) {
const y = j(null), R = j(null), b = j(null), u = M((f) => {
n(f);
}, [n]), p = M((f) => {
const a = parseFloat(f.target.value) || 0;
u(a);
}, [u]), c = z({
label: y,
input: R,
sliderRef: d === "range" ? b : void 0,
defaultValue: s,
min: r,
max: o,
step: v,
onChange: u
});
return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: y,
className: "field-label",
children: l
}
),
/* @__PURE__ */ t.jsx("div", { className: "field-control", children: d === "range" ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
/* @__PURE__ */ t.jsx(
"input",
{
ref: R,
type: "text",
value: c,
className: "field-input min",
disabled: N,
onChange: p
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: b,
type: "range",
value: c,
min: r,
max: o,
step: v,
className: "field-range",
disabled: N,
onChange: () => {
}
}
)
] }) : /* @__PURE__ */ t.jsx(
"input",
{
ref: R,
type: "number",
value: c,
disabled: N,
onChange: p,
min: r,
max: o,
step: v,
className: "field-input"
}
) })
] });
}), he = U(function({
value: l,
onChange: s,
min: n = 0,
max: r = 1,
step: o = 0.01
}) {
const v = j(null), d = j(null), [N, y] = A(!1), [R, b] = A(l.x), [u, p] = A(l.y), c = j(R), f = j(u);
F(() => {
c.current = R, f.current = u;
}, [R, u]), F(() => {
b(l.x), p(l.y);
}, [l]);
const a = j(null), g = j(null), T = j(null), L = j(null);
return z({
label: a,
input: T,
defaultValue: R,
min: n,
max: r,
step: o,
onChange: (i) => {
b(i), s({ x: i, y: f.current });
}
}), z({
label: g,
input: L,
defaultValue: u,
min: n,
max: r,
step: o,
onChange: (i) => {
p(i), s({ x: c.current, y: i });
}
}), F(() => {
const i = v.current;
if (!i) return;
const m = i.getContext("2d");
if (!m) return;
m.clearRect(0, 0, i.width, i.height), m.strokeStyle = "#444", m.lineWidth = 1;
for (let C = 0; C <= i.width; C += 20)
m.beginPath(), m.moveTo(C, 0), m.lineTo(C, i.height), m.stroke();
for (let C = 0; C <= i.height; C += 20)
m.beginPath(), m.moveTo(0, C), m.lineTo(i.width, C), m.stroke();
const E = (R - n) / (r - n) * i.width, _ = i.height - (u - n) / (r - n) * i.height, P = "#fff";
m.fillStyle = P, m.beginPath(), m.arc(E, _, 4, 0, Math.PI * 2), m.fill(), m.strokeStyle = P, m.lineWidth = 1, m.beginPath(), m.moveTo(E - 10, _), m.lineTo(E + 10, _), m.moveTo(E, _ - 10), m.lineTo(E, _ + 10), m.stroke();
}, [R, u, n, r]), F(() => {
const i = v.current;
if (!i) return;
const m = (P) => {
const C = i.getBoundingClientRect(), $ = Math.round(P.clientX - C.left), w = Math.round(P.clientY - C.top), O = n + $ / i.width * (r - n), W = n + (i.height - w) / i.height * (r - n), V = Math.max(n, Math.min(r, O)), X = Math.max(n, Math.min(r, W));
b(V), p(X), s({ x: V, y: X }), y(!0);
}, E = (P) => {
if (!N) return;
const C = i.getBoundingClientRect(), $ = Math.round(P.clientX - C.left), w = Math.round(P.clientY - C.top), O = n + $ / i.width * (r - n), W = n + (i.height - w) / i.height * (r - n), V = Math.max(n, Math.min(r, O)), X = Math.max(n, Math.min(r, W));
b(V), p(X), s({ x: V, y: X });
}, _ = () => {
y(!1);
};
return i.addEventListener("mousedown", m), document.addEventListener("mousemove", E), document.addEventListener("mouseup", _), () => {
i.removeEventListener("mousedown", m), document.removeEventListener("mousemove", E), document.removeEventListener("mouseup", _);
};
}, [N, n, r, s]), /* @__PURE__ */ t.jsxs("div", { className: "vector2-field", children: [
/* @__PURE__ */ t.jsxs("div", { className: "vector2-inputs", children: [
/* @__PURE__ */ t.jsxs("div", { className: "vector2-input", children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: a,
className: "field-label",
children: "X"
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: T,
type: "number",
value: R,
min: n,
max: r,
step: o,
className: "field-input",
onChange: (i) => {
const m = parseFloat(i.target.value);
b(m), s({ x: m, y: f.current });
}
}
)
] }),
/* @__PURE__ */ t.jsxs("div", { className: "vector2-input", children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: g,
className: "field-label",
children: "Y"
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: L,
type: "number",
value: u,
min: n,
max: r,
step: o,
className: "field-input",
onChange: (i) => {
const m = parseFloat(i.target.value);
p(m), s({ x: c.current, y: m });
}
}
)
] })
] }),
/* @__PURE__ */ t.jsx("div", { ref: d, className: "vector2-canvas-container", children: /* @__PURE__ */ t.jsx(
"canvas",
{
ref: v,
width: 200,
height: 200,
className: "vector2-canvas"
}
) })
] });
}), ge = U(function({
value: l,
onChange: s,
min: n,
max: r,
step: o = 0.01,
disabled: v = !1
}) {
const [d, N] = A(l.x), [y, R] = A(l.y), [b, u] = A(l.z), p = j(d), c = j(y), f = j(b);
F(() => {
p.current = d, c.current = y, f.current = b;
}, [d, y, b]), F(() => {
N(l.x), R(l.y), u(l.z);
}, [l]);
const a = j(null), g = j(null), T = j(null), L = j(null), i = j(null), m = j(null);
return z({
label: a,
input: L,
defaultValue: d,
min: n,
max: r,
step: o,
onChange: (E) => {
N(E), s({ x: E, y: c.current, z: f.current });
}
}), z({
label: g,
input: i,
defaultValue: y,
min: n,
max: r,
step: o,
onChange: (E) => {
R(E), s({ x: p.current, y: E, z: f.current });
}
}), z({
label: T,
input: m,
defaultValue: b,
min: n,
max: r,
step: o,
onChange: (E) => {
u(E), s({ x: p.current, y: c.current, z: E });
}
}), /* @__PURE__ */ t.jsx("div", { className: "grid3-field", children: /* @__PURE__ */ t.jsxs("div", { className: "grid3-inputs", children: [
/* @__PURE__ */ t.jsxs("div", { className: "grid3-input", children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: a,
className: "field-label",
children: "X"
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: L,
type: "number",
value: d,
min: n,
max: r,
step: o,
className: "field-input",
disabled: v,
onChange: (E) => {
const _ = parseFloat(E.target.value) || 0;
N(_), s({ x: _, y: c.current, z: f.current });
}
}
)
] }),
/* @__PURE__ */ t.jsxs("div", { className: "grid3-input", children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: g,
className: "field-label",
children: "Y"
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: i,
type: "number",
value: y,
min: n,
max: r,
step: o,
className: "field-input",
disabled: v,
onChange: (E) => {
const _ = parseFloat(E.target.value) || 0;
R(_), s({ x: p.current, y: _, z: f.current });
}
}
)
] }),
/* @__PURE__ */ t.jsxs("div", { className: "grid3-input", children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: T,
className: "field-label",
children: "Z"
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: m,
type: "number",
value: b,
min: n,
max: r,
step: o,
className: "field-input",
disabled: v,
onChange: (E) => {
const _ = parseFloat(E.target.value) || 0;
u(_), s({ x: p.current, y: c.current, z: _ });
}
}
)
] })
] }) });
}), be = U(function({
value: l,
onChange: s,
min: n,
max: r,
step: o = 0.01,
disabled: v = !1
}) {
const [d, N] = A(l.x), [y, R] = A(l.y), [b, u] = A(l.z), [p, c] = A(l.w), f = j(d), a = j(y), g = j(b), T = j(p);
F(() => {
f.current = d, a.current = y, g.current = b, T.current = p;
}, [d, y, b, p]), F(() => {
N(l.x), R(l.y), u(l.z), c(l.w);
}, [l]);
const L = j(null), i = j(null), m = j(null), E = j(null), _ = j(null), P = j(null), C = j(null), $ = j(null);
return z({
label: L,
input: _,
defaultValue: d,
min: n,
max: r,
step: o,
onChange: (w) => {
N(w), s({ x: w, y: a.current, z: g.current, w: T.current });
}
}), z({
label: i,
input: P,
defaultValue: y,
min: n,
max: r,
step: o,
onChange: (w) => {
R(w), s({ x: f.current, y: w, z: g.current, w: T.current });
}
}), z({
label: m,
input: C,
defaultValue: b,
min: n,
max: r,
step: o,
onChange: (w) => {
u(w), s({ x: f.current, y: a.current, z: w, w: T.current });
}
}), z({
label: E,
input: $,
defaultValue: p,
min: n,
max: r,
step: o,
onChange: (w) => {
c(w), s({ x: f.current, y: a.current, z: g.current, w });
}
}), /* @__PURE__ */ t.jsx("div", { className: "grid4-field", children: /* @__PURE__ */ t.jsxs("div", { className: "grid4-inputs", children: [
/* @__PURE__ */ t.jsxs("div", { className: "grid4-input", children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: L,
className: "field-label",
children: "X"
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: _,
type: "number",
value: d,
min: n,
max: r,
step: o,
className: "field-input",
disabled: v,
onChange: (w) => {
const O = parseFloat(w.target.value) || 0;
N(O), s({ x: O, y: a.current, z: g.current, w: T.current });
}
}
)
] }),
/* @__PURE__ */ t.jsxs("div", { className: "grid4-input", children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: i,
className: "field-label",
children: "Y"
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: P,
type: "number",
value: y,
min: n,
max: r,
step: o,
className: "field-input",
disabled: v,
onChange: (w) => {
const O = parseFloat(w.target.value) || 0;
R(O), s({ x: f.current, y: O, z: g.current, w: T.current });
}
}
)
] }),
/* @__PURE__ */ t.jsxs("div", { className: "grid4-input", children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: m,
className: "field-label",
children: "Z"
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: C,
type: "number",
value: b,
min: n,
max: r,
step: o,
className: "field-input",
disabled: v,
onChange: (w) => {
const O = parseFloat(w.target.value) || 0;
u(O), s({ x: f.current, y: a.current, z: O, w: T.current });
}
}
)
] }),
/* @__PURE__ */ t.jsxs("div", { className: "grid4-input", children: [
/* @__PURE__ */ t.jsx(
"label",
{
ref: E,
className: "field-label",
children: "W"
}
),
/* @__PURE__ */ t.jsx(
"input",
{
ref: $,
type: "number",
value: p,
min: n,
max: r,
step: o,
className: "field-input",
disabled: v,
onChange: (w) => {
const O = parseFloat(w.target.value) || 0;
c(O), s({ x: f.current, y: a.current, z: g.current, w: O });
}
}
)
] })
] }) });
}), xe = U(function({
value: l,
onChange: s
}) {
const n = j(null), [r, o] = A(""), [v, d] = A(l), N = M((b) => {
const u = b.target.files?.[0];
if (u) {
o(u.name);
const p = URL.createObjectURL(u);
d(p);
const c = new FileReader();
c.onload = (f) => {
const a = f.target?.result;
s(a);
}, c.readAsDataURL(u);
}
}, [s]), y = M(() => {
n.current?.click();
}, []), R = M(() => {
o(""), d(""), s(""), n.current && (n.current.value = "");
}, [s]);
return /* @__PURE__ */ t.jsxs("div", { className: "inspector-field image-field", children: [
/* @__PURE__ */ t.jsx(
"input",
{
ref: n,
type: "file",
accept: "image/*",
onChange: N,
style: { display: "none" }
}
),
/* @__PURE__ */ t.jsxs("div", { className: "image-controls", children: [
/* @__PURE__ */ t.jsx(
"button",
{
onClick: y,
className: "field-button image-button",
children: r ? "Change Image" : "Choose Image"
}
),
r && /* @__PURE__ */ t.jsx(
"button",
{
onClick: R,
className: "field-button image-clear-button",
children: "Clear"
}
)
] }),
r && /* @__PURE__ */ t.jsx("div", { className: "image-info", children: /* @__PURE__ */ t.jsx("span", { className: "image-filename", children: r }) }),
v && /* @__PURE__ */ t.jsx("div", { className: "image-preview", children: /* @__PURE__ */ t.jsx(
"img",
{
src: v,
alt: "Preview",
className: "preview-image"
}
) })
] });
}), le = U(function({
label: l,
type: s,
value: n,
onChange: r,
onClick: o,
min: v,
max: d,
step: N,
options: y,
block: R = !1,
disabled: b = !1
}) {
const u = M((a) => {
r?.(a);
}, [r]), p = M(() => {
o?.();
}, [o]), f = (() => {
switch (s) {
case "string":
return /* @__PURE__ */ t.jsx(
"input",
{
type: "text",
value: n || "",
onChange: (a) => u(a.target.value),
className: "field-input",
disabled: b
}
);
case "number":
return /* @__PURE__ */ t.jsx(
oe,
{
label: l,
value: n || 0,
onChange: u,
min: v,
max: d,
step: N,
disabled: b
}
);
case "range":
return /* @__PURE__ */ t.jsx(
oe,
{
label: l,
value: n || 0,
onChange: u,
min: v,
max: d,
step: N,
type: "range",
disabled: b
}
);
case "boolean":
return /* @__PURE__ */ t.jsx(
"input",
{
type: "checkbox",
checked: n || !1,
onChange: (a) => u(a.target.checked),
className: "field-checkbox"
}
);
case "color":
return /* @__PURE__ */ t.jsx(
"input",
{
type: "color",
value: n || "#ffffff",
onChange: (a) => u(a.target.value),
className: "field-color"
}
);
case "vector2":
return /* @__PURE__ */ t.jsx(
he,
{
value: n || { x: 0, y: 0 },
min: v,
max: d,
step: N,
onChange: u
}
);
case "grid3":
return /* @__PURE__ */ t.jsx(
ge,
{
value: n || { x: 0, y: 0, z: 0 },
min: v,
max: d,
step: N,
onChange: u
}
);
case "grid4":
return /* @__PURE__ */ t.jsx(
be,
{
value: n || { x: 0, y: 0, z: 0, w: 0 },
min: v,
max: d,
step: N,
onChange: u
}
);
case "image":
return /* @__PURE__ */ t.jsx(
xe,
{
value: n || "",
onChange: u
}
);
case "option":
return /* @__PURE__ */ t.jsx(
"select",
{
value: JSON.stringify(n),
onChange: (a) => {
try {
const g = JSON.parse(a.target.value);
u(g);
} catch {
u(a.target.value);
}
},
className: "field-select",
children: y?.map((a, g) => /* @__PURE__ */ t.jsx("option", { value: JSON.stringify(a.value), children: a.label }, g))
}
);
case "button":
return /* @__PURE__ */ t.jsx(
"button",
{
onClick: p,
className: "field-button",
children: l
}
);
default:
return null;
}
})();
return s === "button" ? /* @__PURE__ */ t.jsx("div", { className: "inspector-field button-field", children: f }) : s === "number" || s === "range" ? /* @__PURE__ */ t.jsx("div", { className: `inspector-field ${R ? "block" : ""}`, children: f }) : /* @__PURE__ */ t.jsxs("div", { className: `inspector-field ${R ? "block" : ""}`, children: [
/* @__PURE__ */ t.jsx("label", { className: `field-label ${s === "vector2" || s === "grid3" || s === "grid4" || s === "boolean" || s === "color" || s === "option" || s === "string" || s === "image" ? "non-draggable" : ""}`, children: l }),
/* @__PURE__ */ t.jsx("div", { className: "field-control", children: f })
] });
}), je = U(function({
title: l,
children: s,
defaultOpen: n = !1,
className: r = ""
}) {
const [o, v] = A(n), d = j(null), N = !o || s === void 0, y = M(() => {
v((R) => !R);
}, []);
return /* @__PURE__ */ t.jsxs("div", { className: `accordion ${N ? "hide" : ""} ${r}`, children: [
/* @__PURE__ */ t.jsxs(
"button",
{
className: `accordion-header ${o ? "open" : ""}`,
onClick: y,
type: "button",
children: [
/* @__PURE__ */ t.jsx("span", { className: "accordion-title", children: l }),
/* @__PURE__ */ t.jsx("span", { className: `accordion-arrow ${o ? "open" : ""}`, children: "▼" })
]
}
),
/* @__PURE__ */ t.jsx(
"div",
{
ref: d,
className: `accordion-content ${o ? "open" : ""}`,
children: /* @__PURE__ */ t.jsx("div", { className: "accordion-body", children: s })
}
)
] });
});
function Re(x) {
return "items" in x;
}
const Ne = ie(
function({ title: l, defaultOpen: s = !1, items: n }, r) {
const [o, v] = A([]), [d, N] = A(/* @__PURE__ */ new Map()), y = M((p) => (console.warn("Nested groups not yet supported in memoized version"), ce.createRef()), []), R = M((p) => {
v((c) => c.filter((f) => f.name !== p));
}, []), b = M((p, c) => {
N((f) => {
const a = new Map(f);
return a.set(p, c), a;
});
}, []);
de(r, () => ({
addGroup: y,
removeGroup: R,
setField: b
}));
const u = () => {
const p = [];
return n.forEach((c, f) => {
if (Re(c))
p.push(
/* @__PURE__ */ t.jsxs("div", { style: { marginLeft: "10px" }, children: [
/* @__PURE__ */ t.jsx("h4", { children: fe(c.title) }),
c.items.map((a, g) => /* @__PURE__ */ t.jsx(
le,
{
label: a.label,
type: a.type,
value: a.value,
onChange: a.onChange,
onClick: a.onClick
},
`nested-field-${g}`
))
] }, `group-${f}`)
);
else {
const a = d.get(c.label), g = a !== void 0 ? a : c.value;
p.push(
/* @__PURE__ */ t.jsx(
le,
{
label: c.label,
type: c.type,
value: g,
min: c.min,
max: c.max,
step: c.step,
disabled: c.disabled,
options: c.options,
onChange: (T) => {
c.onChange !== void 0 && (N((L) => {
const i = new Map(L);
return i.delete(c.label), i;
}), c.onChange(T));
},
onClick: c.onClick
},
`field-${f}`
)
);
}
}), o.forEach((c) => {
p.push(c.element);
}), p;
};
return /* @__PURE__ */ t.jsx(
je,
{
title: l,
defaultOpen: s,
children: u()
}
);
}
), ye = U(Ne, (x, l) => JSON.stringify(x.items) === JSON.stringify(l.items) && x.title === l.title && x.defaultOpen === l.defaultOpen);
ye.displayName = "InspectorGroup";
export {
je as Accordion,
ge as InspectGrid3,
be as InspectGrid4,
xe as InspectImage,
oe as InspectNumber,
he as InspectVector2,
le as InspectorField,
ye as InspectorGroup,
fe as capitalize,
we as copyToClipboard,
ke as randomID,
z as useDragNumber
};