refactor util -> lib

app/client/local.js

@@ -1,6 +1,6 @@
 import Client from '@/net/client.js';
 import {decode, encode} from '@/net/packets/index.js';
-import {CLIENT_INTERPOLATION, CLIENT_PREDICTION} from '@/util/constants.js';
+import {CLIENT_INTERPOLATION, CLIENT_PREDICTION} from '@/lib/constants.js';
 
 export default class LocalClient extends Client {
   server = null;

app/client/predictor.js

@@ -1,7 +1,7 @@
 import Components from '@/ecs/components/index.js';
 import Ecs from '@/ecs/ecs.js';
 import Systems from '@/ecs/systems/index.js';
-import {get, loadResources, readAsset} from '@/util/resources.js';
+import {get, loadResources, readAsset} from '@/lib/resources.js';
 
 class PredictionEcs extends Ecs {
   readAsset(path) {

app/client/remote.js

@@ -1,6 +1,6 @@
 import Client from '@/net/client.js';
 import {decode, encode} from '@/net/packets/index.js';
-import {CLIENT_INTERPOLATION, CLIENT_PREDICTION} from '@/util/constants.js';
+import {CLIENT_INTERPOLATION, CLIENT_PREDICTION} from '@/lib/constants.js';
 
 export default class RemoteClient extends Client {
   socket = null;

app/ecs/components/collider.js

@@ -1,5 +1,5 @@
 import Component from '@/ecs/component.js';
-import {distance, intersects, transform} from '@/util/math.js';
+import {distance, intersects, transform} from '@/lib/math.js';
 
 import vector2d from './helpers/vector-2d';
 

app/ecs/components/direction.js

@@ -1,5 +1,5 @@
 import Component from '@/ecs/component.js';
-import {HALF_PI, TAU} from '@/util/math.js';
+import {HALF_PI, TAU} from '@/lib/math.js';
 
 export default class Direction extends Component {
   instanceFromSchema() {

app/ecs/components/emitter.js

@@ -1,7 +1,7 @@
 import Component from '@/ecs/component.js';
 
 import Emitter from '@/particles/emitter.js';
-import Ticker from '@/util/ticker.js';
+import Ticker from '@/lib/ticker.js';
 
 export default class EmitterComponent extends Component {
   instanceFromSchema() {

app/ecs/components/index.js

@@ -1,4 +1,4 @@
-import gather from '@/util/gather.js';
+import gather from '@/lib/gather.js';
 
 const Gathered = gather(
   import.meta.glob(['./*.js', '!./*.test.js'], {eager: true, import: 'default'}),
@@ -13,7 +13,7 @@ if (import.meta.env.PROD) {
   );
 }
 else {
-  const {default: ieval} = await import('@/util/eval.js');
+  const {default: ieval} = await import('@/lib/eval.js');
   wrapComponent = (componentName, Component) => (
     ieval(`
       ((Component) => (

app/ecs/components/inventory.js

@@ -1,6 +1,6 @@
 import Component from '@/ecs/component.js';
 
-import {distribute} from '@/util/inventory.js';
+import {distribute} from '@/lib/inventory.js';
 
 class ItemProxy {
   scripts = {};

app/ecs/components/sprite.js

@@ -1,5 +1,5 @@
 import Component from '@/ecs/component.js';
-import {hexToHsl, hslToHex} from '@/util/color.js';
+import {hexToHsl, hslToHex} from '@/lib/color.js';
 
 export default class Sprite extends Component {
   instanceFromSchema() {

app/ecs/components/ticking.js

@@ -1,5 +1,5 @@
 import Component from '@/ecs/component.js';
-import {withResolvers} from '@/util/promise.js';
+import {withResolvers} from '@/lib/promise.js';
 
 export default class Ticking extends Component {
   instanceFromSchema() {

app/ecs/components/tile-layers.js

@@ -1,6 +1,6 @@
 import Component from '@/ecs/component.js';
-import {CHUNK_SIZE} from '@/util/constants.js';
-import {floodwalk2D, ortho, removeCollinear} from '@/util/math.js';
+import {CHUNK_SIZE} from '@/lib/constants.js';
+import {floodwalk2D, ortho, removeCollinear} from '@/lib/math.js';
 
 import vector2d from './helpers/vector-2d';
 

app/ecs/components/time.js

@@ -1,5 +1,5 @@
 import Component from '@/ecs/component.js';
-import {IRL_MINUTES_PER_GAME_DAY} from '@/util/constants';
+import {IRL_MINUTES_PER_GAME_DAY} from '@/lib/constants';
 
 const realSecondsPerGameDay = 60 * IRL_MINUTES_PER_GAME_DAY;
 const realSecondsPerGameHour = realSecondsPerGameDay / 24;

app/ecs/components/vulnerable.js

@@ -1,6 +1,6 @@
 import Component from '@/ecs/component.js';
-import * as Math from '@/util/math.js';
-import Ticker from '@/util/ticker.js';
+import * as Math from '@/lib/math.js';
+import Ticker from '@/lib/ticker.js';
 
 export const DamageTypes = {
   PAIN: 0,

app/ecs/ecs.js

@@ -1,7 +1,7 @@
 import {Encoder, Decoder} from '@msgpack/msgpack';
 
-import {withResolvers} from '@/util/promise.js';
-import Script from '@/util/script.js';
+import {withResolvers} from '@/lib/promise.js';
+import Script from '@/lib/script.js';
 
 import EntityFactory from './entity-factory.js';
 

app/ecs/system.js

@@ -1,4 +1,4 @@
-import Digraph from '@/util/digraph.js';
+import Digraph from '@/lib/digraph.js';
 
 import Query from './query.js';
 

app/ecs/systems/apply-control-movement.js

@@ -1,5 +1,5 @@
 import {System} from '@/ecs/index.js';
-import {normalizeVector} from '@/util/math.js';
+import {normalizeVector} from '@/lib/math.js';
 
 export default class ApplyControlMovement extends System {
 

app/ecs/systems/attract.js

@@ -1,5 +1,5 @@
 import {System} from '@/ecs/index.js';
-import {distance, normalizeVector} from '@/util/math.js';
+import {distance, normalizeVector} from '@/lib/math.js';
 
 export default class Attract extends System {
 

app/ecs/systems/control-direction.js

@@ -1,5 +1,5 @@
 import {System} from '@/ecs/index.js';
-import {TAU} from '@/util/math.js';
+import {TAU} from '@/lib/math.js';
 
 export default class ControlDirection extends System {
 

app/ecs/systems/follow-camera.js

@@ -1,5 +1,5 @@
 import {System} from '@/ecs/index.js';
-// import {RESOLUTION} from '@/util/constants.js'
+// import {RESOLUTION} from '@/lib/constants.js'
 
 // const [hx, hy] = [RESOLUTION.x / 2, RESOLUTION.y / 2];
 

app/ecs/systems/index.js

@@ -1,5 +1,5 @@
 import System from '@/ecs/system.js';
-import gather from '@/util/gather.js';
+import gather from '@/lib/gather.js';
 
 const gathered = gather(import.meta.glob('./*.js', {eager: true, import: 'default'}));
 

app/ecs/systems/inventory-closer.js

@@ -1,5 +1,5 @@
 import {System} from '@/ecs/index.js';
-import {distance} from '@/util/math.js';
+import {distance} from '@/lib/math.js';
 
 export default class InventoryCloser extends System {
 

app/ecs/systems/maintain-collider-hash.js

@@ -1,5 +1,5 @@
 import {System} from '@/ecs/index.js';
-import SpatialHash from '@/util/spatial-hash.js';
+import SpatialHash from '@/lib/spatial-hash.js';
 
 export default class MaintainColliderHash extends System {
 

app/ecs/systems/visible-aabbs.js

@@ -1,5 +1,5 @@
 import {System} from '@/ecs/index.js';
-import SpatialHash from '@/util/spatial-hash.js';
+import SpatialHash from '@/lib/spatial-hash.js';
 
 export default class VisibleAabbs extends System {
 

app/lib/delta.js

@@ -1,4 +1,4 @@
-import Ticker from '@/util/ticker.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function delta(object, properties) {
   const deltas = {};

app/lib/dialogue.js

@@ -5,7 +5,7 @@ import {createNoise2D} from 'simplex-noise';
 import {unified} from 'unified';
 import {visitParents as visit} from 'unist-util-visit-parents';
 
-import {TAU} from '@/util/math.js';
+import {TAU} from '@/lib/math.js';
 
 const rawNoise = createNoise2D();
 const noise = (x, y) => (1 + rawNoise(x, y)) / 2;

app/lib/lfo.js

@@ -1,4 +1,4 @@
-import Ticker from '@/util/ticker.js';
+import Ticker from '@/lib/ticker.js';
 
 const Modulators = {
   flat: () => 0.5,

app/lib/noise.js

@@ -1,7 +1,7 @@
 // import {Texture} from '@pixi/core';
 // import {Sprite} from '@pixi/sprite';
 
-import {bresenham, createNoise2D, TAU} from '@/util/math.js';
+import {bresenham, createNoise2D, TAU} from '@/lib/math.js';
 
 const simplex2D = createNoise2D();
 

app/lib/script.js

@@ -1,4 +1,4 @@
-import Ticker from '@/util/ticker.js';
+import Ticker from '@/lib/ticker.js';
 
 export default class Script {
 

app/lib/spatial-hash.js

@@ -1,4 +1,4 @@
-import {clamp, intersects} from '@/util/math.js';
+import {clamp, intersects} from '@/lib/math.js';
 
 export default class SpatialHash {
 

app/lib/transition.js

@@ -1,4 +1,4 @@
-import Ticker from '@/util/ticker.js';
+import Ticker from '@/lib/ticker.js';
 
 import * as Easing from './easing';
 

app/net/client.js

@@ -1,5 +1,5 @@
-import {CLIENT_LATENCY, CLIENT_PREDICTION} from '@/util/constants.js';
-import EventEmitter from '@/util/event-emitter.js';
+import {CLIENT_LATENCY, CLIENT_PREDICTION} from '@/lib/constants.js';
+import EventEmitter from '@/lib/event-emitter.js';
 
 export default class Client {
   emitter = new EventEmitter();

app/net/packets/index.js

@@ -1,4 +1,4 @@
-import gather from '@/util/gather.js';
+import gather from '@/lib/gather.js';
 
 const Gathered = gather(import.meta.glob('./*.js', {eager: true, import: 'default'}));
 

app/net/server.js

@@ -1,5 +1,5 @@
-import {SERVER_LATENCY} from '@/util/constants.js';
-import EventEmitter from '@/util/event-emitter.js';
+import {SERVER_LATENCY} from '@/lib/constants.js';
+import EventEmitter from '@/lib/event-emitter.js';
 
 const textDecoder = new TextDecoder();
 

app/particles/emitter.js

@@ -1,7 +1,7 @@
 import K from 'kefir';
 
-import * as easings from '@/util/easing.js';
-import {TAU} from '@/util/math.js';
+import * as easings from '@/lib/easing.js';
+import {TAU} from '@/lib/math.js';
 
 export default class Emitter {
   constructor(ecs) {

app/react/components/client-ecs.js

@@ -1,5 +1,5 @@
 import Ecs from '@/ecs/ecs.js';
-import {readAsset} from '@/util/resources.js';
+import {readAsset} from '@/lib/resources.js';
 
 export default class ClientEcs extends Ecs {
   constructor(specification) {

app/react/components/dom/chat/message.jsx

@@ -1,7 +1,7 @@
 import {memo, useEffect, useState} from 'react';
 
 import {useRadians} from '@/react/context/radians.js';
-import {render} from '@/util/dialogue.js';
+import {render} from '@/lib/dialogue.js';
 
 import styles from './message.module.css';
 

app/react/components/dom/damages.jsx

@@ -3,7 +3,7 @@ import {memo, useCallback, useRef} from 'react';
 import {DamageTypes} from '@/ecs/components/vulnerable.js';
 import {useEcsTick} from '@/react/context/ecs.js';
 import useAnimationFrame from '@/react/hooks/use-animation-frame.js';
-import {easeInOutExpo, easeInQuint, easeOutQuad, linear} from '@/util/easing.js';
+import {easeInOutExpo, easeInQuint, easeOutQuad, linear} from '@/lib/easing.js';
 
 import styles from './damages.module.css';
 

app/react/components/dom/dialogue-caret.jsx

@@ -1,4 +1,4 @@
-import {RESOLUTION} from '@/util/constants.js';
+import {RESOLUTION} from '@/lib/constants.js';
 
 import styles from './dialogue-caret.module.css';
 

app/react/components/dom/dialogue.jsx

@@ -3,8 +3,8 @@ import {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useDomScale} from '@/react/context/dom-scale.js';
 import {useRadians} from '@/react/context/radians.js';
 import useAnimationFrame from '@/react/hooks/use-animation-frame.js';
-import {RESOLUTION} from '@/util/constants.js';
-import {render} from '@/util/dialogue.js';
+import {RESOLUTION} from '@/lib/constants.js';
+import {render} from '@/lib/dialogue.js';
 
 import DialogueCaret from './dialogue-caret.jsx';
 import styles from './dialogue.module.css';

app/react/components/dom/dom.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useRef, useState} from 'react';
 
 import DomContext from '@/react/context/dom-scale.js';
-import {RESOLUTION} from '@/util/constants.js';
+import {RESOLUTION} from '@/lib/constants.js';
 
 import styles from './dom.module.css';
 

app/react/components/dom/entities.jsx

@@ -2,8 +2,8 @@ import {useCallback, useState} from 'react';
 
 import {usePacket} from '@/react/context/client.js';
 import {useEcsTick} from '@/react/context/ecs.js';
-import {RESOLUTION} from '@/util/constants.js';
-import {parseLetters} from '@/util/dialogue.js';
+import {RESOLUTION} from '@/lib/constants.js';
+import {parseLetters} from '@/lib/dialogue.js';
 
 import Damages from './damages.jsx';
 import Entity from './entity.jsx';

app/react/components/pixi/pixi.jsx

@@ -8,7 +8,7 @@ import ClientContext from '@/react/context/client.js';
 import DebugContext from '@/react/context/debug.js';
 import EcsContext from '@/react/context/ecs.js';
 import MainEntityContext from '@/react/context/main-entity.js';
-import {RESOLUTION} from '@/util/constants.js';
+import {RESOLUTION} from '@/lib/constants.js';
 
 import Ecs from './ecs.jsx';
 import {ApplicationStageLayers, ApplicationStageLights} from './extensions.js';

app/react/components/pixi/tile-layer.jsx

@@ -7,7 +7,7 @@ import '@pixi/spritesheet'; // NECESSARY!
 import {CompositeTilemap} from '@pixi/tilemap';
 
 import {useAsset} from '@/react/context/assets.js';
-import {CHUNK_SIZE, RESOLUTION} from '@/util/constants.js';
+import {CHUNK_SIZE, RESOLUTION} from '@/lib/constants.js';
 
 import {deferredLighting} from './lights.js';
 

app/react/components/ui.jsx

@@ -4,9 +4,9 @@ import {useClient, usePacket} from '@/react/context/client.js';
 import {useDebug} from '@/react/context/debug.js';
 import {useEcs, useEcsTick} from '@/react/context/ecs.js';
 import {useMainEntity} from '@/react/context/main-entity.js';
-import {RESOLUTION} from '@/util/constants.js';
-import EventEmitter from '@/util/event-emitter.js';
-import {distribute} from '@/util/inventory.js';
+import {RESOLUTION} from '@/lib/constants.js';
+import EventEmitter from '@/lib/event-emitter.js';
+import {distribute} from '@/lib/inventory.js';
 
 import addKeyListener from './add-key-listener.js';
 import Disconnected from './dom/disconnected.jsx';

app/react/context/radians.js

@@ -1,7 +1,7 @@
 import {useCallback, useState} from 'react';
 
 import useAnimationFrame from '@/react/hooks/use-animation-frame.js';
-import {TAU} from '@/util/math.js';
+import {TAU} from '@/lib/math.js';
 
 export function useRadians() {
   const [radians, setRadians] = useState(0);

app/routes/_main-menu.play.$/route.jsx

@@ -3,7 +3,7 @@ import {json, useLoaderData} from "@remix-run/react";
 import {useEffect, useState} from 'react';
 import {Outlet, useParams} from 'react-router-dom';
 
-import {fetchMissingResources, readAsset} from '@/util/resources.js';
+import {fetchMissingResources, readAsset} from '@/lib/resources.js';
 
 import styles from './play.module.css';
 
@@ -14,7 +14,7 @@ settings.ADAPTER.fetch = async (path) => {
 
 export async function loader({request}) {
   const {juggleSession} = await import('@/server/session.server.js');
-  const {loadManifest} = await import('@/util/resources.server.js');
+  const {loadManifest} = await import('@/lib/resources.server.js');
   await juggleSession(request);
   return json({
     manifest: await loadManifest(),

app/routes/dev.gen.forest/route.jsx

@@ -4,7 +4,7 @@ import {useState} from 'react';
 import SliderText from '@/react/components/dev/slider-text.jsx';
 import TileLayer from '@/react/components/pixi/tile-layer.jsx';
 import AssetsContext from '@/react/context/assets.js';
-import {CHUNK_SIZE} from '@/util/constants.js';
+import {CHUNK_SIZE} from '@/lib/constants.js';
 
 import alea from 'alea';
 import {createNoise2D} from 'simplex-noise';

app/routes/resources.stream/route.jsx

@@ -1,4 +1,4 @@
-import {encodeResources, loadResources} from '@/util/resources.server.js';
+import {encodeResources, loadResources} from '@/lib/resources.server.js';
 
 export async function action({request}) {
   const paths = await request.json();

app/server/create/forest.js

@@ -1,7 +1,7 @@
 import alea from 'alea';
 import {createNoise2D} from 'simplex-noise';
 
-import {createRandom, Generator} from '@/util/math.js';
+import {createRandom, Generator} from '@/lib/math.js';
 
 const seed = 42069;
 const prng = alea(seed);

app/server/engine.js

@@ -5,7 +5,7 @@ import {
   RESOLUTION,
   TPS,
   UPS,
-} from '@/util/constants.js';
+} from '@/lib/constants.js';
 
 import createEcs from './create/ecs.js';
 import createForest from './create/forest.js';

app/server/websocket.js

@@ -5,8 +5,8 @@ import {WebSocketServer} from 'ws';
 
 import Server from '@/net/server.js';
 import {getSession} from '@/server/session.server.js';
-import {loadResources, readAsset} from '@/util/resources.js';
-import {loadResources as loadServerResources} from '@/util/resources.server.js';
+import {loadResources, readAsset} from '@/lib/resources.js';
+import {loadResources as loadServerResources} from '@/lib/resources.server.js';
 
 import Engine from './engine.js';
 

app/server/worker.js

@@ -2,8 +2,8 @@ import {del, get, set} from 'idb-keyval';
 
 import {encode} from '@/net/packets/index.js';
 import Server from '@/net/server.js';
-import {withResolvers} from '@/util/promise.js';
-import {get as getResources, loadResources, readAsset} from '@/util/resources.js';
+import {withResolvers} from '@/lib/promise.js';
+import {get as getResources, loadResources, readAsset} from '@/lib/resources.js';
 
 import createEcs from './create/ecs.js';
 import './create/forest.js';

resources/brush/start.js

@@ -1,4 +1,4 @@
-import Ticker from '@/util/ticker.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function*({wielder}) {
   const {Collider, Controlled, Interacts, Inventory, Sound, Sprite} = wielder

resources/combat/projectile/diffuse.js

@@ -1,4 +1,4 @@
-import Ticker from '@/util/ticker.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function *({Controlled, Direction, Speed}, duration, speed) {
   let accumulated = 0;

resources/combat/projectile/toward.js

@@ -1,5 +1,5 @@
-import * as Math from '@/util/math.js';
-import Ticker from '@/util/ticker.js';
+import * as Math from '@/lib/math.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function*({Controlled, Direction, Position}, {x, y}, duration) {
   const toward = Math.atan2(y - Position.y, x - Position.x);

resources/farm/animals/cow-adult/initial.js

@@ -1,5 +1,5 @@
-import * as Math from '@/util/math.js';
-import Ticker from '@/util/ticker.js';
+import * as Math from '@/lib/math.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function*({entity}) {
   const {Controlled, Direction, Sprite} = entity;

resources/farm/animals/cow-adult/interact.js

@@ -1,4 +1,4 @@
-import * as Math from '@/util/math.js';
+import * as Math from '@/lib/math.js';
 
 export default function* ({subject}) {
   const lines = [

resources/farm/animals/goat-white/initial.js

@@ -1,5 +1,5 @@
-import * as Math from '@/util/math.js';
-import Ticker from '@/util/ticker.js';
+import * as Math from '@/lib/math.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function*({entity}) {
   const {Controlled, Direction, Sprite} = entity;

resources/farm/animals/goat-white/interact.js

@@ -1,4 +1,4 @@
-import * as Math from '@/util/math.js';
+import * as Math from '@/lib/math.js';
 
 export default function* ({subject}) {
   const lines = [

resources/hoe/dirt-particle.js

@@ -1,4 +1,4 @@
-import delta from '@/util/delta.js';
+import delta from '@/lib/delta.js';
 
 export default function*({entity}) {
   yield delta(entity.Forces, {forceY: {delta: 480, duration: 0.125}}).ticker;

resources/hoe/start.js

@@ -1,4 +1,4 @@
-import Ticker from '@/util/ticker.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function*({ecs, wielder}) {
   const {Direction, Position, Wielder} = wielder;

resources/kitty/initial.js

@@ -1,5 +1,5 @@
-import * as Math from '@/util/math.js';
-import Ticker from '@/util/ticker.js';
+import * as Math from '@/lib/math.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function*({entity}) {
   const {Controlled, Direction, Sprite} = entity;

resources/kitty/interact.js

@@ -1,4 +1,4 @@
-import * as Math from '@/util/math.js';
+import * as Math from '@/lib/math.js';
 
 export default function* ({subject}) {
   const lines = [

resources/magic-swords/harm.js

@@ -1,4 +1,4 @@
-import * as Math from '@/util/math.js';
+import * as Math from '@/lib/math.js';
 
 export default function*({ecs, entity, other}) {
   const playerEntity = ecs.lookupPlayerEntity(entity.Owned.owner);

resources/magic-swords/start.js

@@ -1,5 +1,5 @@
-import * as Math from '@/util/math.js';
-import Ticker from '@/util/ticker.js';
+import * as Math from '@/lib/math.js';
+import Ticker from '@/lib/ticker.js';
 
 const SHOTS = 10;
 

resources/misc/death-default.js

@@ -1,4 +1,4 @@
-import transition from '@/util/transition.js';
+import transition from '@/lib/transition.js';
 
 export default function*({ecs, entity}) {
   const {Collider, Controlled, Sprite, Vulnerable} = entity;

resources/tomato-plant/interact.js

@@ -1,7 +1,7 @@
-import delta from '@/util/delta.js';
-import lfo from '@/util/lfo.js';
-import * as Math from '@/util/math.js';
-import Ticker from '@/util/ticker.js';
+import delta from '@/lib/delta.js';
+import lfo from '@/lib/lfo.js';
+import * as Math from '@/lib/math.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function*({ecs, subject}) {
   const {Interactive, Position, Plant, Sprite} = subject;

resources/tomato-seeds/start.js

@@ -1,5 +1,5 @@
-import * as Math from '@/util/math.js';
-import Ticker from '@/util/ticker.js';
+import * as Math from '@/lib/math.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function*({ecs, wielder}) {
   const {Direction, Position, Wielder} = wielder

resources/watering-can/start.js

@@ -1,5 +1,5 @@
-import * as Math from '@/util/math.js';
-import Ticker from '@/util/ticker.js';
+import * as Math from '@/lib/math.js';
+import Ticker from '@/lib/ticker.js';
 
 export default function*({ecs, wielder}) {
   const {Direction, Position, Wielder} = wielder

stories/dom-decorator.jsx

@@ -1,7 +1,7 @@
 import {useEffect, useRef, useState} from 'react';
 
 import Dom from '@/react/components/dom.jsx';
-import {RESOLUTION} from '@/util/constants.js';
+import {RESOLUTION} from '@/lib/constants.js';
 
 function Decorator({children, style}) {
   const ref = useRef();