tgui-core 4.0.3 → 4.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (72) hide show
  1. package/README.md +7 -0
  2. package/dist/common/events.js +1 -1
  3. package/dist/common/fuzzysearch.js +1 -1
  4. package/dist/common/hotkeys.js +1 -1
  5. package/dist/common/random.js +1 -1
  6. package/dist/common/ui.js +1 -1
  7. package/dist/common/vector.js +1 -1
  8. package/dist/components/AnimatedNumber.js +1 -1
  9. package/dist/components/Autofocus.js +1 -1
  10. package/dist/components/Blink.js +1 -1
  11. package/dist/components/BlockQuote.js +1 -1
  12. package/dist/components/Box.d.ts +2 -2
  13. package/dist/components/Box.js +1 -1
  14. package/dist/components/Button.d.ts +1 -1
  15. package/dist/components/Button.js +1 -1
  16. package/dist/components/ByondUi.js +1 -1
  17. package/dist/components/Chart.js +1 -1
  18. package/dist/components/Collapsible.js +1 -1
  19. package/dist/components/ColorBox.js +1 -1
  20. package/dist/components/Dialog.js +1 -1
  21. package/dist/components/Dimmer.js +1 -1
  22. package/dist/components/Divider.js +1 -1
  23. package/dist/components/DmIcon.js +1 -1
  24. package/dist/components/DraggableControl.js +1 -1
  25. package/dist/components/Dropdown.d.ts +2 -0
  26. package/dist/components/Dropdown.js +1 -1
  27. package/dist/components/FitText.js +1 -1
  28. package/dist/components/Flex.js +1 -1
  29. package/dist/components/Floating.d.ts +1 -1
  30. package/dist/components/Floating.js +1 -1
  31. package/dist/components/Icon.d.ts +1 -1
  32. package/dist/components/Icon.js +1 -1
  33. package/dist/components/Image.d.ts +7 -1
  34. package/dist/components/Image.js +1 -1
  35. package/dist/components/ImageButton.d.ts +1 -1
  36. package/dist/components/ImageButton.js +1 -1
  37. package/dist/components/InfinitePlane.js +1 -1
  38. package/dist/components/Input.js +1 -1
  39. package/dist/components/KeyListener.d.ts +1 -1
  40. package/dist/components/KeyListener.js +1 -1
  41. package/dist/components/Knob.d.ts +1 -1
  42. package/dist/components/Knob.js +1 -1
  43. package/dist/components/LabeledControls.js +1 -1
  44. package/dist/components/LabeledList.d.ts +1 -1
  45. package/dist/components/LabeledList.js +1 -1
  46. package/dist/components/MenuBar.js +1 -1
  47. package/dist/components/Modal.js +1 -1
  48. package/dist/components/NoticeBox.js +1 -1
  49. package/dist/components/NumberInput.d.ts +1 -1
  50. package/dist/components/NumberInput.js +1 -1
  51. package/dist/components/Popper.js +1 -1
  52. package/dist/components/ProgressBar.js +1 -1
  53. package/dist/components/RestrictedInput.js +1 -1
  54. package/dist/components/RoundGauge.js +1 -1
  55. package/dist/components/Section.js +1 -1
  56. package/dist/components/Slider.js +1 -1
  57. package/dist/components/Stack.js +1 -1
  58. package/dist/components/StyleableSection.js +1 -1
  59. package/dist/components/Table.js +1 -1
  60. package/dist/components/Tabs.js +1 -1
  61. package/dist/components/TextArea.js +1 -1
  62. package/dist/components/TimeDisplay.js +1 -1
  63. package/dist/components/Tooltip.js +1 -1
  64. package/dist/components/TrackOutsideClicks.js +1 -1
  65. package/dist/components/VirtualList.js +1 -1
  66. package/dist/components/index.js +1 -1
  67. package/package.json +15 -20
  68. package/styles/components/Button.scss +2 -1
  69. package/styles/components/Dropdown.scss +6 -0
  70. package/styles/components/Input.scss +1 -1
  71. package/styles/functions.scss +10 -0
  72. package/styles/reset.scss +1 -0
package/README.md CHANGED
@@ -4,7 +4,14 @@ A collection of utilities and components for the [tgui](https://github.com/tgsta
4
4
 
5
5
  This package was built to help the various downstream SS13 servers stay up to date with TGUI without having to keep a local version of each file.
6
6
 
7
+ ## Testing / Demos
8
+
9
+ This project uses Storybook both for testing locally (via `bun storybook`) and our live demo site (https://tgstation.github.io/tgui-core/).
10
+
11
+ Storybook is a sandbox environment for UI components so you can test them in isolation without needing to boot the game.
12
+
7
13
  ## Links
14
+
8
15
  - [GitHub](https://github.com/tgstation/tgui-core)
9
16
  - [npm](https://www.npmjs.com/package/tgui-core)
10
17
  - [Storybook](https://tgstation.github.io/tgui-core/?path=/docs/components-animatednumber--docs)
@@ -1 +1 @@
1
- let t;import*as e from"./keycodes.js";class i{listeners;constructor(){this.listeners={}}on(t,e){this.listeners[t]=this.listeners[t]||[],this.listeners[t].push(e)}off(t,e){let i=this.listeners[t];if(!i)throw Error(`There is no listeners for "${t}"`);this.listeners[t]=i.filter(t=>t!==e)}emit(t,...e){let i=this.listeners[t];if(i)for(let t=0,s=i.length;t<s;t+=1)(0,i[t])(...e)}clear(){this.listeners={}}}let s=new i,r=!1,n=(t={})=>{r=!!t.ignoreWindowFocus},o=!0;function l(e,i){if(r){o=!0;return}if(t&&(clearTimeout(t),t=null),i){t=setTimeout(()=>l(e));return}o!==e&&(o=e,s.emit(e?"window-focus":"window-blur"),s.emit("window-focus-change",e))}let d=null;function u(t){let e=String(t.tagName).toLowerCase();return"input"===e||"textarea"===e}function h(){d&&(d.removeEventListener("blur",h),d=null)}let c=null,a=null,f=[];function w(t){f.push(t)}function y(t){let e=f.indexOf(t);e>=0&&f.splice(e,1)}window.addEventListener("mousemove",t=>{let e=t.target;e!==a&&(a=e,function(t){if(d||!o)return;let e=document.body;for(;t&&t!==e;){if(f.includes(t)){if(t.contains(c))return;c=t,t.focus();return}t=t.parentElement}}(e))}),window.addEventListener("focusin",t=>{var e;a=null,c=t.target,l(!0),u(t.target)&&(e=t.target,h(),(d=e).addEventListener("blur",h))}),window.addEventListener("focusout",()=>{a=null,l(!1,!0)}),window.addEventListener("blur",()=>{a=null,l(!1,!0)}),window.addEventListener("beforeunload",()=>{l(!1)});let m={};class E{event;type;code;ctrl;shift;alt;repeat;_str;constructor(t,e,i){this.event=t,this.type=e,this.code=t.keyCode,this.ctrl=t.ctrlKey,this.shift=t.shiftKey,this.alt=t.altKey,this.repeat=!!i}hasModifierKeys(){return this.ctrl||this.alt||this.shift}isModifierKey(){return this.code===e.KEY_CTRL||this.code===e.KEY_SHIFT||this.code===e.KEY_ALT}isDown(){return"keydown"===this.type}isUp(){return"keyup"===this.type}toString(){return this._str||(this._str="",this.ctrl&&(this._str+="Ctrl+"),this.alt&&(this._str+="Alt+"),this.shift&&(this._str+="Shift+"),this.code>=48&&this.code<=90?this._str+=String.fromCharCode(this.code):this.code>=e.KEY_F1&&this.code<=e.KEY_F12?this._str+=`F${this.code-111}`:this._str+=`[${this.code}]`),this._str}}document.addEventListener("keydown",t=>{if(u(t.target))return;let e=t.keyCode,i=new E(t,"keydown",m[e]);s.emit("keydown",i),s.emit("key",i),m[e]=!0}),document.addEventListener("keyup",t=>{if(u(t.target))return;let e=t.keyCode,i=new E(t,"keyup");s.emit("keyup",i),s.emit("key",i),m[e]=!1});export{i as EventEmitter,E as KeyEvent,w as addScrollableNode,u as canStealFocus,s as globalEvents,y as removeScrollableNode,n as setupGlobalEvents};
1
+ let t;import{KEY_ALT as e,KEY_CTRL as i,KEY_F1 as s,KEY_F12 as r,KEY_SHIFT as n}from"./keycodes.js";class o{listeners;constructor(){this.listeners={}}on(t,e){this.listeners[t]=this.listeners[t]||[],this.listeners[t].push(e)}off(t,e){let i=this.listeners[t];if(!i)throw Error(`There is no listeners for "${t}"`);this.listeners[t]=i.filter(t=>t!==e)}emit(t,...e){let i=this.listeners[t];if(i)for(let t=0,s=i.length;t<s;t+=1)(0,i[t])(...e)}clear(){this.listeners={}}}let l=new o,d=!1,u=(t={})=>{d=!!t.ignoreWindowFocus},h=!0;function c(e,i){if(d){h=!0;return}if(t&&(clearTimeout(t),t=null),i){t=setTimeout(()=>c(e));return}h!==e&&(h=e,l.emit(e?"window-focus":"window-blur"),l.emit("window-focus-change",e))}let a=null;function f(t){let e=String(t.tagName).toLowerCase();return"input"===e||"textarea"===e}function w(){a&&(a.removeEventListener("blur",w),a=null)}let y=null,m=null,p=[];function v(t){p.push(t)}function E(t){let e=p.indexOf(t);e>=0&&p.splice(e,1)}window.addEventListener("mousemove",t=>{let e=t.target;e!==m&&(m=e,function(t){if(a||!h)return;let e=document.body;for(;t&&t!==e;){if(p.includes(t)){if(t.contains(y))return;y=t,t.focus();return}t=t.parentElement}}(e))}),window.addEventListener("focusin",t=>{var e;m=null,y=t.target,c(!0),f(t.target)&&(e=t.target,w(),(a=e).addEventListener("blur",w))}),window.addEventListener("focusout",()=>{m=null,c(!1,!0)}),window.addEventListener("blur",()=>{m=null,c(!1,!0)}),window.addEventListener("beforeunload",()=>{c(!1)});let g={};class k{event;type;code;ctrl;shift;alt;repeat;_str;constructor(t,e,i){this.event=t,this.type=e,this.code=t.keyCode,this.ctrl=t.ctrlKey,this.shift=t.shiftKey,this.alt=t.altKey,this.repeat=!!i}hasModifierKeys(){return this.ctrl||this.alt||this.shift}isModifierKey(){return this.code===i||this.code===n||this.code===e}isDown(){return"keydown"===this.type}isUp(){return"keyup"===this.type}toString(){return this._str||(this._str="",this.ctrl&&(this._str+="Ctrl+"),this.alt&&(this._str+="Alt+"),this.shift&&(this._str+="Shift+"),this.code>=48&&this.code<=90?this._str+=String.fromCharCode(this.code):this.code>=s&&this.code<=r?this._str+=`F${this.code-111}`:this._str+=`[${this.code}]`),this._str}}document.addEventListener("keydown",t=>{if(f(t.target))return;let e=t.keyCode,i=new k(t,"keydown",g[e]);l.emit("keydown",i),l.emit("key",i),g[e]=!0}),document.addEventListener("keyup",t=>{if(f(t.target))return;let e=t.keyCode,i=new k(t,"keyup");l.emit("keyup",i),l.emit("key",i),g[e]=!1});export{o as EventEmitter,k as KeyEvent,v as addScrollableNode,f as canStealFocus,l as globalEvents,E as removeScrollableNode,u as setupGlobalEvents};
@@ -1 +1 @@
1
- import*as t from"@nozbe/microfuzz";import*as e from"react";function r(r){let{getSearchString:a,matchStrategy:u="smart",searchArray:o}=r,[i,m]=(0,e.useState)(""),[s,f]=(0,e.useState)([]),n=(0,e.useCallback)((0,t.default)(o,{getText:t=>[a(t)],strategy:u}),[o,a]);return{query:i,setQuery:function(t){if(m(t),""===t.trim())return void f([]);f(n(t).map(t=>t.item))},results:s}}export{r as useFuzzySearch};
1
+ import t from"@nozbe/microfuzz";import{useCallback as r,useState as e}from"react";function o(o){let{getSearchString:i,matchStrategy:m="smart",searchArray:u}=o,[n,f]=e(""),[a,c]=e([]),z=r(t(u,{getText:t=>[i(t)],strategy:m}),[u,i]);return{query:n,setQuery:function(t){if(f(t),""===t.trim())return void c([]);c(z(t).map(t=>t.item))},results:a}}export{o as useFuzzySearch};
@@ -1 +1 @@
1
- import*as e from"./events.js";import*as t from"./keycodes.js";let n={},o=[t.KEY_ESCAPE,t.KEY_ENTER,t.KEY_SPACE,t.KEY_TAB,t.KEY_CTRL,t.KEY_SHIFT,t.KEY_UP,t.KEY_DOWN,t.KEY_LEFT,t.KEY_RIGHT,t.KEY_F5],r={},l=[];function s(e){o.push(e)}function i(e){let t=o.indexOf(e);t>=0&&o.splice(t,1)}function a(){for(let e in r)r[e]&&(r[e]=!1,Byond.command(f.verbParamsFn(f.keyUpVerb,e)))}let f={keyDownVerb:"KeyDown",keyUpVerb:"KeyUp",verbParamsFn:(e,t)=>`${e} "${t}"`};function u(t){t&&(f=t),Byond.winget("default.*").then(e=>{let t={};for(let n in e){let o=n.split("."),r=o[1],l=o[2];r&&l&&(t[r]||(t[r]={}),t[r][l]=e[n])}let o=/\\"/g;function r(e){return e.substring(1,e.length-1).replace(o,'"')}for(let e in t){let o=t[e];n[r(o.name)]=r(o.command)}}),e.globalEvents.on("window-blur",()=>{a()}),d()}function d(){e.globalEvents.on("key",y)}function c(){e.globalEvents.off("key",y)}function y(e){for(let t of l)t(e);!function(e){var t;let l=String(e);if("Ctrl+F5"===l||"Ctrl+R"===l)return location.reload();if("Ctrl+F"===l||e.event.defaultPrevented||e.isModifierKey()||o.includes(e.code))return;let s=16===(t=e.code)?"Shift":17===t?"Ctrl":18===t?"Alt":33===t?"Northeast":34===t?"Southeast":35===t?"Southwest":36===t?"Northwest":37===t?"West":38===t?"North":39===t?"East":40===t?"South":45===t?"Insert":46===t?"Delete":t>=48&&t<=57||t>=65&&t<=90?String.fromCharCode(t):t>=96&&t<=105?`Numpad${t-96}`:t>=112&&t<=123?`F${t-111}`:188===t?",":189===t?"-":190===t?".":void 0;if(!s)return;let i=n[s];if(i)return Byond.command(i);if(e.isDown()&&!r[s]){r[s]=!0;let e=f.verbParamsFn(f.keyDownVerb,s);return Byond.command(e)}if(e.isUp()&&r[s]){r[s]=!1;let e=f.verbParamsFn(f.keyUpVerb,s);Byond.command(e)}}(e)}function E(e){l.push(e);let t=!1;return()=>{t||(t=!0,l.splice(l.indexOf(e),1))}}export{s as acquireHotKey,E as listenForKeyEvents,a as releaseHeldKeys,i as releaseHotKey,u as setupHotKeys,d as startKeyPassthrough,c as stopKeyPassthrough};
1
+ import{globalEvents as e}from"./events.js";import{KEY_CTRL as t,KEY_DOWN as n,KEY_ENTER as r,KEY_ESCAPE as o,KEY_F5 as i,KEY_LEFT as s,KEY_RIGHT as l,KEY_SHIFT as f,KEY_SPACE as u,KEY_TAB as a,KEY_UP as d}from"./keycodes.js";let c={},y=[o,r,u,a,t,f,d,n,s,l,i],m={},p=[];function h(e){y.push(e)}function b(e){let t=y.indexOf(e);t>=0&&y.splice(t,1)}function v(){for(let e in m)m[e]&&(m[e]=!1,Byond.command(K.verbParamsFn(K.keyUpVerb,e)))}let K={keyDownVerb:"KeyDown",keyUpVerb:"KeyUp",verbParamsFn:(e,t)=>`${e} "${t}"`};function w(t){t&&(K=t),Byond.winget("default.*").then(e=>{let t={};for(let n in e){let r=n.split("."),o=r[1],i=r[2];o&&i&&(t[o]||(t[o]={}),t[o][i]=e[n])}let n=/\\"/g;function r(e){return e.substring(1,e.length-1).replace(n,'"')}for(let e in t){let n=t[e];c[r(n.name)]=r(n.command)}}),e.on("window-blur",()=>{v()}),g()}function g(){e.on("key",F)}function k(){e.off("key",F)}function F(e){for(let t of p)t(e);!function(e){var t;let n=String(e);if("Ctrl+F5"===n||"Ctrl+R"===n)return location.reload();if("Ctrl+F"===n||e.event.defaultPrevented||e.isModifierKey()||y.includes(e.code))return;let r=16===(t=e.code)?"Shift":17===t?"Ctrl":18===t?"Alt":33===t?"Northeast":34===t?"Southeast":35===t?"Southwest":36===t?"Northwest":37===t?"West":38===t?"North":39===t?"East":40===t?"South":45===t?"Insert":46===t?"Delete":t>=48&&t<=57||t>=65&&t<=90?String.fromCharCode(t):t>=96&&t<=105?`Numpad${t-96}`:t>=112&&t<=123?`F${t-111}`:188===t?",":189===t?"-":190===t?".":void 0;if(!r)return;let o=c[r];if(o)return Byond.command(o);if(e.isDown()&&!m[r]){m[r]=!0;let e=K.verbParamsFn(K.keyDownVerb,r);return Byond.command(e)}if(e.isUp()&&m[r]){m[r]=!1;let e=K.verbParamsFn(K.keyUpVerb,r);Byond.command(e)}}(e)}function P(e){p.push(e);let t=!1;return()=>{t||(t=!0,p.splice(p.indexOf(e),1))}}export{h as acquireHotKey,P as listenForKeyEvents,v as releaseHeldKeys,b as releaseHotKey,w as setupHotKeys,g as startKeyPassthrough,k as stopKeyPassthrough};
@@ -1 +1 @@
1
- import*as r from"./math.js";function n(r,n){return Math.random()*(n-r)+r}function o(r,n){let o=Math.ceil(r);return Math.floor(Math.random()*(Math.floor(n)-o)+o)}function t(r){return r[Math.floor(Math.random()*r.length)]}function a(n){return Math.random()<=(0,r.clamp)(n,0,100)/100}export{o as randomInteger,n as randomNumber,t as randomPick,a as randomProb};
1
+ import{clamp as r}from"./math.js";function n(r,n){return Math.random()*(n-r)+r}function o(r,n){let o=Math.ceil(r);return Math.floor(Math.random()*(Math.floor(n)-o)+o)}function t(r){return r[Math.floor(Math.random()*r.length)]}function a(n){return Math.random()<=r(n,0,100)/100}export{o as randomInteger,n as randomNumber,t as randomPick,a as randomProb};
package/dist/common/ui.js CHANGED
@@ -1 +1 @@
1
- import*as t from"./constants.js";import*as o from"./react.js";let i=t=>"string"==typeof t?t.endsWith("px")?`${Number.parseFloat(t)/12}rem`:t:"number"==typeof t?`${t}rem`:void 0,e=t=>"string"==typeof t?i(t):"number"==typeof t?i(.5*t):void 0;function n(o){return"string"==typeof o&&t.CSS_COLORS.includes(o)}let r=t=>(o,i)=>{("number"==typeof i||"string"==typeof i)&&(o[t]=i)},l=(t,o)=>(i,e)=>{("number"==typeof e||"string"==typeof e)&&(i[t]=o(e))},p=(t,o)=>(i,e)=>{e&&(i[t]=o)},a=(t,o,i)=>(e,n)=>{if("number"==typeof n||"string"==typeof n)for(let r=0;r<i.length;r++)e[t+i[r]]=o(n)},g=t=>(o,i)=>{n(i)||(o[t]=i)},f={align:r("textAlign"),backgroundColor:g("backgroundColor"),bottom:l("bottom",i),color:g("color"),fontFamily:r("fontFamily"),fontSize:l("fontSize",i),fontWeight:r("fontWeight"),g:l("gap",e),gc:l("columnGap",e),gr:l("rowGap",e),height:l("height",i),left:l("left",i),lineHeight:(t,o)=>{"number"==typeof o?t.lineHeight=o:"string"==typeof o&&(t.lineHeight=i(o))},m:a("margin",e,["Top","Bottom","Left","Right"]),maxHeight:l("maxHeight",i),maxWidth:l("maxWidth",i),mb:l("marginBottom",e),minHeight:l("minHeight",i),minWidth:l("minWidth",i),ml:l("marginLeft",e),mr:l("marginRight",e),mt:l("marginTop",e),mx:a("margin",e,["Left","Right"]),my:a("margin",e,["Top","Bottom"]),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),p:a("padding",e,["Top","Bottom","Left","Right"]),pb:l("paddingBottom",e),pl:l("paddingLeft",e),position:r("position"),pr:l("paddingRight",e),pt:l("paddingTop",e),px:a("padding",e,["Left","Right"]),py:a("padding",e,["Top","Bottom"]),right:l("right",i),textAlign:r("textAlign"),textColor:g("color"),top:l("top",i),verticalAlign:r("verticalAlign"),width:l("width",i)},m={bold:p("fontWeight","bold"),fillPositionedParent:(t,o)=>{o&&(t.position="absolute",t.top=0,t.bottom=0,t.left=0,t.right=0)},inline:p("display","inline-block"),italic:p("fontStyle","italic"),nowrap:p("whiteSpace","nowrap"),preserveWhitespace:p("whiteSpace","pre-wrap")};function s(t){let o={},i={};for(let e in t){if("style"===e)continue;let n=t[e],r=f[e]||m[e];r?r(i,n):o[e]=n}return o.style={...i,...t.style},o}function h(t){let i=t.textColor||t.color,{backgroundColor:e}=t;return(0,o.classes)([n(i)&&`color-${i}`,n(e)&&`color-bg-${e}`])}function c(t){let o={};if(!t)return o;for(let i of t.split(" ")){let[t,e]=i.split("-");if(t)if(t in f){if(""===e)continue;let i=Number(e);!Number.isNaN(i)&&Number.isFinite(i)?o[t]=i:o[t]=e}else t in m?o[t]=!0:console.warn(`Unknown prop ${t}`)}return o}export{m as booleanStyleMap,h as computeBoxClassName,s as computeBoxProps,c as computeTwClass,e as halfUnit,f as stringStyleMap,i as unit};
1
+ import{CSS_COLORS as t}from"./constants.js";import{classes as o}from"./react.js";let i=t=>"string"==typeof t?t.endsWith("px")?`${Number.parseFloat(t)/12}rem`:t:"number"==typeof t?`${t}rem`:void 0,e=t=>"string"==typeof t?i(t):"number"==typeof t?i(.5*t):void 0;function n(o){return"string"==typeof o&&t.includes(o)}let r=t=>(o,i)=>{("number"==typeof i||"string"==typeof i)&&(o[t]=i)},l=(t,o)=>(i,e)=>{("number"==typeof e||"string"==typeof e)&&(i[t]=o(e))},p=(t,o)=>(i,e)=>{e&&(i[t]=o)},g=(t,o,i)=>(e,n)=>{if("number"==typeof n||"string"==typeof n)for(let r=0;r<i.length;r++)e[t+i[r]]=o(n)},a=t=>(o,i)=>{n(i)||(o[t]=i)},f={align:r("textAlign"),backgroundColor:a("backgroundColor"),bottom:l("bottom",i),color:a("color"),fontFamily:r("fontFamily"),fontSize:l("fontSize",i),fontWeight:r("fontWeight"),g:l("gap",e),gc:l("columnGap",e),gr:l("rowGap",e),height:l("height",i),left:l("left",i),lineHeight:(t,o)=>{"number"==typeof o?t.lineHeight=o:"string"==typeof o&&(t.lineHeight=i(o))},m:g("margin",e,["Top","Bottom","Left","Right"]),maxHeight:l("maxHeight",i),maxWidth:l("maxWidth",i),mb:l("marginBottom",e),minHeight:l("minHeight",i),minWidth:l("minWidth",i),ml:l("marginLeft",e),mr:l("marginRight",e),mt:l("marginTop",e),mx:g("margin",e,["Left","Right"]),my:g("margin",e,["Top","Bottom"]),opacity:r("opacity"),overflow:r("overflow"),overflowX:r("overflowX"),overflowY:r("overflowY"),p:g("padding",e,["Top","Bottom","Left","Right"]),pb:l("paddingBottom",e),pl:l("paddingLeft",e),position:r("position"),pr:l("paddingRight",e),pt:l("paddingTop",e),px:g("padding",e,["Left","Right"]),py:g("padding",e,["Top","Bottom"]),right:l("right",i),textAlign:r("textAlign"),textColor:a("color"),top:l("top",i),verticalAlign:r("verticalAlign"),width:l("width",i)},m={bold:p("fontWeight","bold"),fillPositionedParent:(t,o)=>{o&&(t.position="absolute",t.top=0,t.bottom=0,t.left=0,t.right=0)},inline:p("display","inline-block"),italic:p("fontStyle","italic"),nowrap:p("whiteSpace","nowrap"),preserveWhitespace:p("whiteSpace","pre-wrap")};function s(t){let o={},i={};for(let e in t){if("style"===e)continue;let n=t[e],r=f[e]||m[e];r?r(i,n):o[e]=n}return o.style={...i,...t.style},o}function h(t){let i=t.textColor||t.color,{backgroundColor:e}=t;return o([n(i)&&`color-${i}`,n(e)&&`color-bg-${e}`])}function c(t){let o={};if(!t)return o;for(let i of t.split(" ")){let[t,e]=i.split("-");if(t)if(t in f){if(""===e)continue;let i=Number(e);!Number.isNaN(i)&&Number.isFinite(i)?o[t]=i:o[t]=e}else t in m?o[t]=!0:console.warn(`Unknown prop ${t}`)}return o}export{m as booleanStyleMap,h as computeBoxClassName,s as computeBoxProps,c as computeTwClass,e as halfUnit,f as stringStyleMap,i as unit};
@@ -1 +1 @@
1
- import*as e from"./collections.js";function n(e,n){return e+n}function r(e,n){return e-n}function t(e,n){return e*n}function u(e,n){return e/n}function c(...r){return(0,e.zip)(...r).map(e=>e.reduce(n))}function i(...n){return(0,e.zip)(...n).map(e=>e.reduce(r))}function o(...n){return(0,e.zip)(...n).map(e=>e.reduce(t))}function p(...n){return(0,e.zip)(...n).map(e=>e.reduce(u))}function f(e,n){return e.map(e=>e*n)}function a(e){return e.map(e=>-e)}function m(e){return Math.sqrt(o(e,e).reduce(n))}function v(e){let n=m(e);return e.map(e=>e/n)}export{c as vecAdd,p as vecDivide,a as vecInverse,m as vecLength,o as vecMultiply,v as vecNormalize,f as vecScale,i as vecSubtract};
1
+ import{zip as e}from"./collections.js";function n(e,n){return e+n}function r(e,n){return e-n}function t(e,n){return e*n}function u(e,n){return e/n}function c(...r){return e(...r).map(e=>e.reduce(n))}function i(...n){return e(...n).map(e=>e.reduce(r))}function o(...n){return e(...n).map(e=>e.reduce(t))}function f(...n){return e(...n).map(e=>e.reduce(u))}function a(e,n){return e.map(e=>e*n)}function m(e){return e.map(e=>-e)}function p(e){return Math.sqrt(o(e,e).reduce(n))}function v(e){let n=p(e);return e.map(e=>e/n)}export{c as vecAdd,f as vecDivide,m as vecInverse,p as vecLength,o as vecMultiply,v as vecNormalize,a as vecScale,i as vecSubtract};
@@ -1 +1 @@
1
- import*as t from"react/jsx-runtime";import*as e from"react";import*as r from"../common/math.js";let i=1e3/60;class s extends e.Component{ref=(0,e.createRef)();interval;currentValue=0;constructor(t){super(t);let{initial:e,value:i}=t;void 0!==e&&(0,r.isSafeNumber)(e)?this.currentValue=e:(0,r.isSafeNumber)(i)&&(this.currentValue=i)}componentDidMount(){this.currentValue!==this.props.value&&this.startTicking()}componentWillUnmount(){this.stopTicking()}shouldComponentUpdate(t){return t.value!==this.props.value&&this.startTicking(),!1}startTicking(){void 0===this.interval&&(this.interval=setInterval(()=>this.tick(),i))}stopTicking(){void 0!==this.interval&&(clearInterval(this.interval),this.interval=void 0)}tick(){let{currentValue:t}=this,{value:e}=this.props;(0,r.isSafeNumber)(e)?this.currentValue=.8333*t+.16669999999999996*e:this.stopTicking(),Math.abs(e-this.currentValue)<Math.max(.001,.001*e)&&(this.currentValue=e,this.stopTicking()),this.ref.current&&(this.ref.current.textContent=this.getText())}getText(){let{props:t,currentValue:e}=this,{format:i,value:s}=t;if(!(0,r.isSafeNumber)(s))return String(s);if(i)return i(this.currentValue);let n=String(s).split(".")[1],a=n?n.length:0;return(0,r.toFixed)(e,(0,r.clamp)(a,0,8))}render(){return(0,t.jsx)("span",{ref:this.ref,children:this.getText()})}}export{s as AnimatedNumber};
1
+ import{jsx as t}from"react/jsx-runtime";import{clamp as e,isSafeNumber as r,toFixed as i}from"../common/math.js";import{Component as n,createRef as s}from"react";let a=1e3/60;class h extends n{ref=s();interval;currentValue=0;constructor(t){super(t);let{initial:e,value:i}=t;void 0!==e&&r(e)?this.currentValue=e:r(i)&&(this.currentValue=i)}componentDidMount(){this.currentValue!==this.props.value&&this.startTicking()}componentWillUnmount(){this.stopTicking()}shouldComponentUpdate(t){return t.value!==this.props.value&&this.startTicking(),!1}startTicking(){void 0===this.interval&&(this.interval=setInterval(()=>this.tick(),a))}stopTicking(){void 0!==this.interval&&(clearInterval(this.interval),this.interval=void 0)}tick(){let{currentValue:t}=this,{value:e}=this.props;r(e)?this.currentValue=.8333*t+.16669999999999996*e:this.stopTicking(),Math.abs(e-this.currentValue)<Math.max(.001,.001*e)&&(this.currentValue=e,this.stopTicking()),this.ref.current&&(this.ref.current.textContent=this.getText())}getText(){let{props:t,currentValue:n}=this,{format:s,value:a}=t;if(!r(a))return String(a);if(s)return s(this.currentValue);let h=String(a).split(".")[1];return i(n,e(h?h.length:0,0,8))}render(){return t("span",{ref:this.ref,children:this.getText()})}}export{h as AnimatedNumber};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";function r(r){let{children:u}=r,o=(0,t.useRef)(null);return(0,t.useEffect)(()=>{let e=setTimeout(()=>{o.current?.focus()},1);return()=>{clearTimeout(e)}},[]),(0,e.jsx)("div",{ref:o,tabIndex:-1,children:u})}export{r as Autofocus};
1
+ import{jsx as r}from"react/jsx-runtime";import{useEffect as t,useRef as e}from"react";function o(o){let{children:u}=o,n=e(null);return t(()=>{let r=setTimeout(()=>{n.current?.focus()},1);return()=>{clearTimeout(r)}},[]),r("div",{ref:n,tabIndex:-1,children:u})}export{o as Autofocus};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";function r(r){let{children:i,interval:s=1e3,time:n=1e3}=r,[l,a]=(0,t.useState)(!1);return(0,t.useEffect)(()=>{let e=setInterval(()=>{a(!0),setTimeout(()=>{a(!1)},n)},s+n);return()=>{clearInterval(e)}},[s,n]),(0,e.jsx)("span",{style:{visibility:l?"hidden":"visible"},children:i})}export{r as Blink};
1
+ import{jsx as e}from"react/jsx-runtime";import{useEffect as t,useState as r}from"react";function i(i){let{children:n,interval:l=1e3,time:o=1e3}=i,[s,a]=r(!1);return t(()=>{let e=setInterval(()=>{a(!0),setTimeout(()=>{a(!1)},o)},l+o);return()=>{clearInterval(e)}},[l,o]),e("span",{style:{visibility:s?"hidden":"visible"},children:n})}export{i as Blink};
@@ -1 +1 @@
1
- import*as o from"react/jsx-runtime";import*as r from"../common/react.js";import*as s from"./Box.js";function t(t){let{className:e,...m}=t;return(0,o.jsx)(s.Box,{className:(0,r.classes)(["BlockQuote",e]),...m})}export{t as BlockQuote};
1
+ import{jsx as o}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{Box as t}from"./Box.js";function m(m){let{className:e,...c}=m;return o(t,{className:r(["BlockQuote",e]),...c})}export{m as BlockQuote};
@@ -1,6 +1,6 @@
1
+ import type { BooleanLike } from '../common/react.ts';
2
+ import { type BooleanStyleMap, type StringStyleMap } from '../common/ui.ts';
1
3
  import { type CSSProperties, type KeyboardEventHandler, type MouseEventHandler, type ReactNode, type UIEventHandler } from 'react';
2
- import type { BooleanLike } from '../common/react';
3
- import { type BooleanStyleMap, type StringStyleMap } from '../common/ui';
4
4
  type EventHandlers<TElement = HTMLDivElement> = Partial<{
5
5
  onClick: MouseEventHandler<TElement>;
6
6
  onContextMenu: MouseEventHandler<TElement>;
@@ -1 +1 @@
1
- import*as o from"react";import*as e from"../common/ui.js";function m(m){let{as:t="div",className:s,children:a,tw:r,...c}=m,p=s?`${s} ${(0,e.computeBoxClassName)(c)}`:(0,e.computeBoxClassName)(c),u=(0,e.computeBoxProps)({...c,...(0,e.computeTwClass)(r)});return(0,o.createElement)(t,{...u,className:p},a)}export{m as Box};
1
+ import{computeBoxClassName as o,computeBoxProps as r,computeTwClass as m}from"../common/ui.js";import{createElement as t}from"react";function e(e){let{as:i="div",className:c,children:n,tw:a,...f}=e,p=c?`${c} ${o(f)}`:o(f);return t(i,{...r({...f,...m(a)}),className:p},n)}export{e as Box};
@@ -1,6 +1,6 @@
1
+ import { type BooleanLike } from '../common/react.ts';
1
2
  import type { Placement } from '@floating-ui/react';
2
3
  import { type ReactNode, type RefObject } from 'react';
3
- import { type BooleanLike } from '../common/react';
4
4
  import { type BoxProps } from './Box';
5
5
  /**
6
6
  * Getting ellipses to work requires that you use:
@@ -1 +1 @@
1
- var t;import*as e from"react/jsx-runtime";import*as n from"react";import*as o from"../common/keys.js";import*as r from"../common/react.js";import*as s from"../common/ui.js";import*as u from"./Box.js";import*as i from"./Icon.js";import*as c from"./Tooltip.js";function l(t){let{captureKeys:n=!0,children:u,circular:l,className:a,color:f,compact:m,content:p,disabled:d,ellipsis:B,fluid:x,icon:j,iconColor:h,iconPosition:y,iconRotation:g,iconSize:k,iconSpin:v,onClick:C,selected:b,tooltip:E,tooltipPosition:N,verticalAlignContent:_,...w}=t,D=p||u,I=(0,e.jsx)(i.Icon,{className:"Button--icon",color:h,name:j||"",rotation:g,size:k,spin:v}),T=(0,e.jsx)("div",{className:(0,r.classes)(["Button",x&&"Button--fluid",d&&"Button--disabled",b&&"Button--selected",l&&"Button--circular",m&&"Button--compact",!D&&"Button--empty",y&&`Button--icon-${y}`,_&&"Button--flex",_&&x&&"Button--flex--fluid",_&&`Button--verticalAlignContent--${_}`,f&&"string"==typeof f?`Button--color--${f}`:"Button--color--default",a,(0,s.computeBoxClassName)(w)]),onClick:t=>{!d&&C&&C(t)},onKeyDown:t=>{if(n){if(t.key===o.KEY.Space||t.key===o.KEY.Enter){t.preventDefault(),!d&&C&&C(t);return}(0,o.isEscape)(t.key)&&t.preventDefault()}},tabIndex:d?void 0:0,...(0,s.computeBoxProps)(w),children:(0,e.jsxs)("div",{className:(0,r.classes)(["Button__content",B&&"Button__content--ellipsis"]),children:[j&&"right"!==y&&I,B?(0,e.jsx)("span",{className:"Button--ellipsis",children:D}):D,j&&"right"===y&&I]})});return E&&(T=(0,e.jsx)(c.Tooltip,{content:E,position:N,children:T})),T}(t=l||(l={})).Checkbox=function(t){let{checked:n,...o}=t;return(0,e.jsx)(l,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:o,color:r,confirmColor:s="bad",confirmContent:u="Confirm?",confirmIcon:i,ellipsis:c=!0,icon:a,onBlur:f,onClick:m,...p}=t,[d,B]=(0,n.useState)(!1);return(0,e.jsx)(l,{color:d?s:r,icon:d?i:a,onBlur:function(t){B(!1),f?.(t)},onClick:function(t){if(!d)return void B(!0);m?.(t),B(!1)},...p,children:d?u:o})},t.Input=function(t){let{buttonText:s,children:c,color:l="default",disabled:a,fluid:f,icon:m,iconRotation:p,iconSpin:d,maxLength:B,onCommit:x,ref:j,value:h="",...y}=t,[g,k]=(0,n.useState)(h),[v,C]=(0,n.useState)(!1),b=(0,n.useRef)(!1),E=(0,n.createRef)(),N=j??E;return(0,n.useEffect)(()=>{v&&(N.current?.focus(),N.current?.select())},[v]),(0,n.useEffect)(()=>{v||h===g||k(h)},[v,h]),(0,e.jsxs)(u.Box,{className:(0,r.classes)(["Button",f&&"Button--fluid",a&&"Button--disabled",`Button--color--${l}`]),onClick:()=>C(!0),...y,children:[m&&(0,e.jsx)(i.Icon,{name:m,rotation:p,spin:d}),s??g,(0,e.jsx)("input",{className:"NumberInput__input",disabled:!!a,maxLength:B,onBlur:function(){b.current||h===g||(x?.(g),b.current=!1),C(!1)},onChange:function(t){k(t.currentTarget.value)},onKeyDown:function(t){if(t.key===o.KEY.Enter){t.preventDefault(),t.currentTarget.blur();return}if((0,o.isEscape)(t.key)){t.preventDefault(),b.current=!0,t.currentTarget.blur();return}},ref:N,spellCheck:"false",style:{display:v?"":"none",textAlign:"left"},type:"text",value:g})]})},t.File=function(t){let{accept:o,multiple:r,onSelectFiles:s,...u}=t,i=(0,n.useRef)(null);async function c(t){let e=Array.from(t).map(t=>{let e=new FileReader;return new Promise(n=>{e.onload=()=>n(e.result),e.readAsText(t)})});return await Promise.all(e)}async function a(t){let e=t.target.files;if(e?.length){let t=await c(e);s(r?t:t[0])}}return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)(l,{onClick:()=>i.current?.click(),...u}),(0,e.jsx)("input",{accept:o,hidden:!0,multiple:r,onChange:a,ref:i,type:"file"})]})};export{l as Button};
1
+ var t;import{Fragment as n,jsx as e,jsxs as o}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{classes as u}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{createRef as a,useEffect as s,useRef as f,useState as m}from"react";import{Box as p}from"./Box.js";import{Icon as d}from"./Icon.js";import{Tooltip as B}from"./Tooltip.js";function h(t){let{captureKeys:n=!0,children:a,circular:s,className:f,color:m,compact:p,content:h,disabled:y,ellipsis:k,fluid:g,icon:v,iconColor:x,iconPosition:C,iconRotation:b,iconSize:j,iconSpin:N,onClick:_,selected:w,tooltip:D,tooltipPosition:T,verticalAlignContent:A,...I}=t,$=h||a,q=e(d,{className:"Button--icon",color:x,name:v||"",rotation:b,size:j,spin:N}),E=e("div",{className:u(["Button",g&&"Button--fluid",y&&"Button--disabled",w&&"Button--selected",s&&"Button--circular",p&&"Button--compact",!$&&"Button--empty",C&&`Button--icon-${C}`,A&&"Button--flex",A&&g&&"Button--flex--fluid",A&&`Button--verticalAlignContent--${A}`,m&&"string"==typeof m?`Button--color--${m}`:"Button--color--default",f,l(I)]),onClick:t=>{!y&&_&&_(t)},onKeyDown:t=>{if(n){if(t.key===r.Space||t.key===r.Enter){t.preventDefault(),!y&&_&&_(t);return}i(t.key)&&t.preventDefault()}},tabIndex:y?void 0:0,...c(I),children:o("div",{className:u(["Button__content",k&&"Button__content--ellipsis"]),children:[v&&"right"!==C&&q,k?e("span",{className:"Button--ellipsis",children:$}):$,v&&"right"===C&&q]})});return D&&(E=e(B,{content:D,position:T,children:E})),E}(t=h||(h={})).Checkbox=function(t){let{checked:n,...o}=t;return e(h,{color:"transparent",icon:n?"check-square-o":"square-o",selected:n,...o})},t.Confirm=function(t){let{children:n,color:o,confirmColor:r="bad",confirmContent:i="Confirm?",confirmIcon:u,ellipsis:l=!0,icon:c,onBlur:a,onClick:s,...f}=t,[p,d]=m(!1);return e(h,{color:p?r:o,icon:p?u:c,onBlur:function(t){d(!1),a?.(t)},onClick:function(t){if(!p)return void d(!0);s?.(t),d(!1)},...f,children:p?i:n})},t.Input=function(t){let{buttonText:n,children:l,color:c="default",disabled:B,fluid:h,icon:y,iconRotation:k,iconSpin:g,maxLength:v,onCommit:x,ref:C,value:b="",...j}=t,[N,_]=m(b),[w,D]=m(!1),T=f(!1),A=a(),I=C??A;return s(()=>{w&&(I.current?.focus(),I.current?.select())},[w]),s(()=>{w||b===N||_(b)},[w,b]),o(p,{className:u(["Button",h&&"Button--fluid",B&&"Button--disabled",`Button--color--${c}`]),onClick:()=>D(!0),...j,children:[y&&e(d,{name:y,rotation:k,spin:g}),n??N,e("input",{className:"NumberInput__input",disabled:!!B,maxLength:v,onBlur:function(){T.current||b===N||(x?.(N),T.current=!1),D(!1)},onChange:function(t){_(t.currentTarget.value)},onKeyDown:function(t){if(t.key===r.Enter){t.preventDefault(),t.currentTarget.blur();return}if(i(t.key)){t.preventDefault(),T.current=!0,t.currentTarget.blur();return}},ref:I,spellCheck:"false",style:{display:w?"":"none",textAlign:"left"},type:"text",value:N})]})},t.File=function(t){let{accept:r,multiple:i,onSelectFiles:u,...l}=t,c=f(null);async function a(t){let n=Array.from(t).map(t=>{let n=new FileReader;return new Promise(e=>{n.onload=()=>e(n.result),n.readAsText(t)})});return await Promise.all(n)}async function s(t){let n=t.target.files;if(n?.length){let t=await a(n);u(i?t:t[0])}}return o(n,{children:[e(h,{onClick:()=>c.current?.click(),...l}),e("input",{accept:r,hidden:!0,multiple:i,onChange:s,ref:c,type:"file"})]})};export{h as Button};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as n from"react";import*as t from"../common/timer.js";import*as o from"../common/ui.js";let r=[];function i(i){let{params:s,phonehome:d,...u}=i,l=(0,n.useRef)(null),m=(0,n.useRef)(function(e,n=!0){let t=r.length;r.push(null);let o=e||`byondui_${t}`;return{render:e=>{n&&Byond.sendMessage("renderByondUi",{renderByondUi:o}),r[t]=o,Byond.winset(o,e)},unmount:()=>{n&&Byond.sendMessage("unmountByondUi",{renderByondUi:o}),r[t]=null,Byond.winset(o,{parent:""})}}}(s?.id,d));function f(){let e=l.current;if(!e)return;let n=function(e){let n=window.devicePixelRatio??1,t=e.getBoundingClientRect();return{pos:[t.left*n,t.top*n],size:[(t.right-t.left)*n,(t.bottom-t.top)*n]}}(e);m.current.render({parent:Byond.windowId,...s,pos:`${n.pos[0]},${n.pos[1]}`,size:`${n.size[0]}x${n.size[1]}`})}let p=(0,t.debounce)(()=>{f()},100);return(0,n.useEffect)(()=>(window.addEventListener("resize",p),f(),()=>{window.removeEventListener("resize",p),m.current.unmount()}),[]),(0,e.jsx)("div",{ref:l,...(0,o.computeBoxProps)(u),children:(0,e.jsx)("div",{style:{minHeight:"22px"}})})}window.addEventListener("beforeunload",()=>{for(let e=0;e<r.length;e++){let n=r[e];"string"==typeof n&&(r[e]=null,Byond.winset(n,{parent:""}))}});export{i as ByondUi};
1
+ import{jsx as e}from"react/jsx-runtime";import{debounce as n}from"../common/timer.js";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as o,useRef as r}from"react";let i=[];function d(d){let{params:s,phonehome:l,...u}=d,m=r(null),p=r(function(e,n=!0){let t=i.length;i.push(null);let o=e||`byondui_${t}`;return{render:e=>{n&&Byond.sendMessage("renderByondUi",{renderByondUi:o}),i[t]=o,Byond.winset(o,e)},unmount:()=>{n&&Byond.sendMessage("unmountByondUi",{renderByondUi:o}),i[t]=null,Byond.winset(o,{parent:""})}}}(s?.id,l));function f(){let e=m.current;if(!e)return;let n=function(e){let n=window.devicePixelRatio??1,t=e.getBoundingClientRect();return{pos:[t.left*n,t.top*n],size:[(t.right-t.left)*n,(t.bottom-t.top)*n]}}(e);p.current.render({parent:Byond.windowId,...s,pos:`${n.pos[0]},${n.pos[1]}`,size:`${n.size[0]}x${n.size[1]}`})}let c=n(()=>{f()},100);return o(()=>(window.addEventListener("resize",c),f(),()=>{window.removeEventListener("resize",c),p.current.unmount()}),[]),e("div",{ref:m,...t(u),children:e("div",{style:{minHeight:"22px"}})})}window.addEventListener("beforeunload",()=>{for(let e=0;e<i.length;e++){let n=i[e];"string"==typeof n&&(i[e]=null,Byond.winset(n,{parent:""}))}});export{d as ByondUi};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";import*as i from"../common/collections.js";import*as n from"./Box.js";let r={bottom:0,left:0,overflow:"hidden",position:"absolute",right:0,top:0};function o(o){let{data:s=[],rangeX:l,rangeY:f,fillColor:a="none",strokeColor:h="#ffffff",strokeWidth:p=2,...u}=o,m=(0,t.useRef)(null),[c,d]=(0,t.useState)([600,200]),v=function(e,t,n,r){if(0===e.length)return[];let o=(0,i.zip)(...e),s=o.map(e=>Math.min(...e)),l=o.map(e=>Math.max(...e));return void 0!==n&&(s[0]=n[0],l[0]=n[1]),void 0!==r&&(s[1]=r[0],l[1]=r[1]),e.map(e=>(0,i.zip)(e,s,l,t).map(([e,t,i,n])=>(e-t)/(i-t)*n))}(s,c,l,f);if(v.length>0){let e=v[0],t=v[v.length-1];v.push([c[0]+p,t[1]]),v.push([c[0]+p,-p]),v.push([-p,-p]),v.push([-p,e[1]])}let x=function(e){let t="";for(let i=0;i<e.length;i++){let n=e[i];t+=`${n[0]},${n[1]} `}return t}(v);function g(){let e=m.current;if(!e)return;let t=e.getBoundingClientRect();d([t.width,t.height])}return(0,t.useEffect)(()=>(window.addEventListener("resize",g),g(),()=>{window.removeEventListener("resize",g)}),[]),(0,e.jsx)(n.Box,{position:"relative",...u,children:(0,e.jsx)("div",{ref:m,style:r,children:(0,e.jsxs)("svg",{preserveAspectRatio:"none",style:r,viewBox:`0 0 ${c[0]} ${c[1]}`,children:[(0,e.jsx)("title",{children:"chart"}),(0,e.jsx)("polyline",{fill:a,points:x,stroke:h,strokeWidth:p,transform:`scale(1, -1) translate(0, -${c[1]})`})]})})})}o.Line=o;export{o as Chart};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{zip as n}from"../common/collections.js";import{useEffect as r,useRef as i,useState as o}from"react";import{Box as l}from"./Box.js";let s={bottom:0,left:0,overflow:"hidden",position:"absolute",right:0,top:0};function f(f){let{data:h=[],rangeX:m,rangeY:p,fillColor:a="none",strokeColor:c="#ffffff",strokeWidth:u=2,...d}=f,v=i(null),[g,w]=o([600,200]),x=function(e,t,r,i){if(0===e.length)return[];let o=n(...e),l=o.map(e=>Math.min(...e)),s=o.map(e=>Math.max(...e));return void 0!==r&&(l[0]=r[0],s[0]=r[1]),void 0!==i&&(l[1]=i[0],s[1]=i[1]),e.map(e=>n(e,l,s,t).map(([e,t,n,r])=>(e-t)/(n-t)*r))}(h,g,m,p);if(x.length>0){let e=x[0],t=x[x.length-1];x.push([g[0]+u,t[1]]),x.push([g[0]+u,-u]),x.push([-u,-u]),x.push([-u,e[1]])}let $=function(e){let t="";for(let n=0;n<e.length;n++){let r=e[n];t+=`${r[0]},${r[1]} `}return t}(x);function j(){let e=v.current;if(!e)return;let t=e.getBoundingClientRect();w([t.width,t.height])}return r(()=>(window.addEventListener("resize",j),j(),()=>{window.removeEventListener("resize",j)}),[]),e(l,{position:"relative",...d,children:e("div",{ref:v,style:s,children:t("svg",{preserveAspectRatio:"none",style:s,viewBox:`0 0 ${g[0]} ${g[1]}`,children:[e("title",{children:"chart"}),e("polyline",{fill:a,points:$,stroke:c,strokeWidth:u,transform:`scale(1, -1) translate(0, -${g[1]})`})]})})})}f.Line=f;export{f as Chart};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as l from"react";import*as o from"./Box.js";import*as s from"./Button.js";function r(r){let{children:c,child_mt:i=1,childStyles:t,color:a,title:n,buttons:m,icon:d,...x}=r,[h,j]=(0,l.useState)(r.open);return(0,e.jsxs)(o.Box,{mb:1,children:[(0,e.jsxs)("div",{className:"Table",children:[(0,e.jsx)("div",{className:"Table__cell",children:(0,e.jsx)(s.Button,{color:a,fluid:!0,icon:d||(h?"chevron-down":"chevron-right"),onClick:()=>j(!h),...x,children:n})}),m&&(0,e.jsx)("div",{className:"Table__cell Table__cell--collapsing",children:m})]}),h&&(0,e.jsx)(o.Box,{mt:i,style:t,children:c})]})}export{r as Collapsible};
1
+ import{jsx as l,jsxs as e}from"react/jsx-runtime";import{useState as r}from"react";import{Box as o}from"./Box.js";import{Button as c}from"./Button.js";function i(i){let{children:n,child_mt:t=1,childStyles:a,color:m,title:s,buttons:d,icon:h,...p}=i,[b,f]=r(i.open);return e(o,{mb:1,children:[e("div",{className:"Table",children:[l("div",{className:"Table__cell",children:l(c,{color:m,fluid:!0,icon:h||(b?"chevron-down":"chevron-right"),onClick:()=>f(!b),...p,children:s})}),d&&l("div",{className:"Table__cell Table__cell--collapsing",children:d})]}),b&&l(o,{mt:t,style:a,children:n})]})}export{i as Collapsible};
@@ -1 +1 @@
1
- import*as o from"react/jsx-runtime";import*as r from"../common/react.js";import*as m from"../common/ui.js";function s(s){let{content:e,children:l,className:t,...a}=s;return a.color=e?null:"default",a.backgroundColor=s.color||"default",(0,o.jsx)("div",{className:(0,r.classes)(["ColorBox",t,(0,m.computeBoxClassName)(a)]),...(0,m.computeBoxProps)(a),children:e||""})}export{s as ColorBox};
1
+ import{jsx as o}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as m}from"../common/ui.js";function t(t){let{content:c,children:e,className:n,...i}=t;return i.color=c?null:"default",i.backgroundColor=t.color||"default",o("div",{className:r(["ColorBox",n,l(i)]),...m(i),children:c||""})}export{t as ColorBox};
@@ -1 +1 @@
1
- import*as t from"react/jsx-runtime";import*as o from"./Box.js";import*as i from"./Button.js";function e(e){let{title:n,onClose:l,children:s,width:r,height:a}=e;return(0,t.jsx)("div",{className:"Dialog",children:(0,t.jsxs)(o.Box,{className:"Dialog__content",height:a,width:r||"370px",children:[(0,t.jsxs)("div",{className:"Dialog__header",children:[(0,t.jsx)("div",{className:"Dialog__title",children:n}),(0,t.jsx)(o.Box,{mr:2,children:(0,t.jsx)(i.Button,{color:"transparent",icon:"window-close-o",lineHeight:"22px",mr:"-3px",onClick:l,textAlign:"center",tooltip:"Close",tooltipPosition:"bottom-start",width:"26px"})})]}),s]})})}e.Button=function(o){let{onClick:e,children:n}=o;return(0,t.jsx)(i.Button,{className:"Dialog__button",onClick:e,verticalAlignContent:"middle",children:n})};export{e as Dialog};
1
+ import{jsx as t,jsxs as i}from"react/jsx-runtime";import{Box as o}from"./Box.js";import{Button as e}from"./Button.js";function l(l){let{title:n,onClose:r,children:a,width:c,height:s}=l;return t("div",{className:"Dialog",children:i(o,{className:"Dialog__content",height:s,width:c||"370px",children:[i("div",{className:"Dialog__header",children:[t("div",{className:"Dialog__title",children:n}),t(o,{mr:2,children:t(e,{color:"transparent",icon:"window-close-o",lineHeight:"22px",mr:"-3px",onClick:r,textAlign:"center",tooltip:"Close",tooltipPosition:"bottom-start",width:"26px"})})]}),a]})})}l.Button=function(i){let{onClick:o,children:l}=i;return t(e,{className:"Dialog__button",onClick:o,verticalAlignContent:"middle",children:l})};export{l as Dialog};
@@ -1 +1 @@
1
- import*as r from"react/jsx-runtime";import*as m from"../common/react.js";import*as e from"./Box.js";function s(s){let{className:i,children:o,...a}=s;return(0,r.jsx)(e.Box,{className:(0,m.classes)(["Dimmer",i]),...a,children:(0,r.jsx)("div",{className:"Dimmer__inner",children:o})})}export{s as Dimmer};
1
+ import{jsx as r}from"react/jsx-runtime";import{classes as m}from"../common/react.js";import{Box as e}from"./Box.js";function i(i){let{className:o,children:t,...n}=i;return r(e,{className:m(["Dimmer",o]),...n,children:r("div",{className:"Dimmer__inner",children:t})})}export{i as Dimmer};
@@ -1 +1 @@
1
- import*as i from"react/jsx-runtime";import*as r from"../common/react.js";function e(e){let{hidden:t,vertical:o}=e;return(0,i.jsx)("div",{className:(0,r.classes)(["Divider",t&&"Divider--hidden",o?"Divider--vertical":"Divider--horizontal"])})}export{e as Divider};
1
+ import{jsx as i}from"react/jsx-runtime";import{classes as r}from"../common/react.js";function e(e){let{hidden:t,vertical:o}=e;return i("div",{className:r(["Divider",t&&"Divider--hidden",o?"Divider--vertical":"Divider--horizontal"])})}export{e as Divider};
@@ -1 +1 @@
1
- import*as T from"react/jsx-runtime";import*as r from"./Image.js";var S,e=((S={})[S.NORTH=1]="NORTH",S[S.SOUTH=2]="SOUTH",S[S.EAST=4]="EAST",S[S.WEST=8]="WEST",S[S.NORTHEAST=5]="NORTHEAST",S[S.NORTHWEST=9]="NORTHWEST",S[S.SOUTHEAST=6]="SOUTHEAST",S[S.SOUTHWEST=10]="SOUTHWEST",S);function t(S){let{direction:e=2,fallback:t,frame:o=1,icon_state:E,icon:i,movement:m=!1,...n}=S,H=Byond.iconRefMap?.[i];if(!H)return t;let O=`${H}?state=${E}&dir=${e}&movement=${!!m}&frame=${o}`;return(0,T.jsx)(r.Image,{fixErrors:!0,src:O,...n})}export{e as Direction,t as DmIcon};
1
+ import{jsx as T}from"react/jsx-runtime";import{Image as r}from"./Image.js";var S,o=((S={})[S.NORTH=1]="NORTH",S[S.SOUTH=2]="SOUTH",S[S.EAST=4]="EAST",S[S.WEST=8]="WEST",S[S.NORTHEAST=5]="NORTHEAST",S[S.NORTHWEST=9]="NORTHWEST",S[S.SOUTHEAST=6]="SOUTHEAST",S[S.SOUTHWEST=10]="SOUTHWEST",S);function e(S){let{direction:o=2,fallback:e,frame:t=1,icon_state:E,icon:H,movement:O=!1,...i}=S,m=Byond.iconRefMap?.[H];return m?T(r,{fixErrors:!0,src:`${m}?state=${E}&dir=${o}&movement=${!!O}&frame=${t}`,...i}):e}export{o as Direction,e as DmIcon};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as r from"react";import*as t from"../common/keys.js";import*as n from"../common/math.js";import*as u from"./AnimatedNumber.js";function c(e,r){return e.screenX*r[0]+e.screenY*r[1]}function o(o){let{animated:a,children:s,dragMatrix:m=[1,0],format:i,maxValue:l=Number.POSITIVE_INFINITY,minValue:v=Number.NEGATIVE_INFINITY,onChange:f,onDrag:d,step:p=1,stepPixelSize:N=1,unclamped:E,unit:I,updateRate:b=400,fontSize:g,height:y,lineHeight:T}=o,[j,R]=(0,r.useState)(o.value),[h,S]=(0,r.useState)(!1),x=(0,r.useRef)(!1),F=(0,r.useRef)(o.value),L=(0,r.useRef)(0),Y=(0,r.useRef)(-1),_=(0,r.useRef)(null),k=(0,r.useRef)(null),A=(0,r.useRef)(null);function D(e){let r=c(e,m),t=r-Y.current,u=Number.isFinite(v)?v%p:0;L.current=(0,n.clamp)(L.current+t*p/N,v-p,l+p);let o=(0,n.clamp)(L.current-L.current%p+u,v,l);F.current=o,R(o),Y.current=r}function K(e){document.body.style["pointer-events"]="auto",k.current&&clearInterval(k.current),Y.current=-1,document.removeEventListener("mousemove",D),document.removeEventListener("mouseup",K),x.current&&(f?.(e,F.current),d?.(e,F.current),x.current=!1)}(0,r.useEffect)(()=>{o.value!==F.current&&(F.current=o.value,R(o.value))},[o.value]);let V=o.value;x.current&&(V=F.current);let w=(0,e.jsxs)(e.Fragment,{children:[a&&!x.current?(0,e.jsx)(u.AnimatedNumber,{format:i,value:V}):i?i(V):V,I?` ${I}`:""]}),z=(0,e.jsx)("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(E||(r=(0,n.clamp)(r,v,l)),Number.isNaN(r))return void S(!1);L.current=r,F.current=r,R(r),f?.(e.nativeEvent,r),h&&S(!1)},onKeyDown:function(e){(e.key===t.KEY.Enter||(0,t.isEscape)(e.key))&&S(!1)},ref:_,style:{display:h?void 0:"none",fontSize:g,height:y,lineHeight:T}});return s({displayElement:w,displayValue:V,dragging:x.current,editing:h,handleDragStart:function(e){h||(document.body.style["pointer-events"]="none",Y.current=c(e.nativeEvent,m),L.current=o.value,x.current=!0,document.addEventListener("mouseup",K),A.current=setTimeout(()=>{var r=e.nativeEvent;if(x.current)document.addEventListener("mousemove",D),k.current=setInterval(()=>{x.current&&d?.(r,o.value)},b);else if(S(!0),_.current){let e=_.current;e.value=L.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}A.current&&clearTimeout(A.current)},100))},inputElement:z})}export{o as DraggableControl};
1
+ import{Fragment as e,jsx as r,jsxs as t}from"react/jsx-runtime";import{KEY as n,isEscape as u}from"../common/keys.js";import{clamp as c}from"../common/math.js";import{useEffect as o,useRef as i,useState as l}from"react";import{AnimatedNumber as m}from"./AnimatedNumber.js";function a(e,r){return e.screenX*r[0]+e.screenY*r[1]}function v(v){let{animated:s,children:d,dragMatrix:f=[1,0],format:p,maxValue:N=Number.POSITIVE_INFINITY,minValue:I=Number.NEGATIVE_INFINITY,onChange:E,onDrag:b,step:g=1,stepPixelSize:y=1,unclamped:T,unit:h,updateRate:j=400,fontSize:F,height:L,lineHeight:S}=v,[_,k]=l(v.value),[D,Y]=l(!1),x=i(!1),A=i(v.value),V=i(0),w=i(-1),z=i(null),B=i(null),C=i(null);function G(e){let r=a(e,f),t=r-w.current,n=Number.isFinite(I)?I%g:0;V.current=c(V.current+t*g/y,I-g,N+g);let u=c(V.current-V.current%g+n,I,N);A.current=u,k(u),w.current=r}function H(e){document.body.style["pointer-events"]="auto",B.current&&clearInterval(B.current),w.current=-1,document.removeEventListener("mousemove",G),document.removeEventListener("mouseup",H),x.current&&(E?.(e,A.current),b?.(e,A.current),x.current=!1)}o(()=>{v.value!==A.current&&(A.current=v.value,k(v.value))},[v.value]);let K=v.value;x.current&&(K=A.current);let O=t(e,{children:[s&&!x.current?r(m,{format:p,value:K}):p?p(K):K,h?` ${h}`:""]}),P=r("input",{className:"NumberInput__input",onBlur:function(e){let r=Number.parseFloat(e.currentTarget.value);if(T||(r=c(r,I,N)),Number.isNaN(r))return void Y(!1);V.current=r,A.current=r,k(r),E?.(e.nativeEvent,r),D&&Y(!1)},onKeyDown:function(e){(e.key===n.Enter||u(e.key))&&Y(!1)},ref:z,style:{display:D?void 0:"none",fontSize:F,height:L,lineHeight:S}});return d({displayElement:O,displayValue:K,dragging:x.current,editing:D,handleDragStart:function(e){D||(document.body.style["pointer-events"]="none",w.current=a(e.nativeEvent,f),V.current=v.value,x.current=!0,document.addEventListener("mouseup",H),C.current=setTimeout(()=>{var r=e.nativeEvent;if(x.current)document.addEventListener("mousemove",G),B.current=setInterval(()=>{x.current&&b?.(r,v.value)},j);else if(Y(!0),z.current){let e=z.current;e.value=V.current.toString(),setTimeout(()=>{e.focus(),e.select()},10)}C.current&&clearTimeout(C.current)},100))},inputElement:P})}export{v as DraggableControl};
@@ -38,6 +38,8 @@ type Props = {
38
38
  noChevron: boolean;
39
39
  /** Dropdown renders over instead of below */
40
40
  over: boolean;
41
+ /** Fill all available horizontal space */
42
+ fluid: boolean;
41
43
  /** Text to show when nothing has been selected. */
42
44
  placeholder: string;
43
45
  /** @deprecated If you want to allow dropdown breaks layout, set width 100% */
@@ -1 +1 @@
1
- import*as o from"react/jsx-runtime";import*as n from"react";import*as e from"../common/keys.js";import*as t from"../common/react.js";import*as s from"../common/ui.js";import*as r from"./Button.js";import*as l from"./Floating.js";import*as c from"./Icon.js";function i(o){return"string"==typeof o?o:o.value}function a(a){let{autoScroll:d=!0,buttons:m,className:p,color:u="default",disabled:_,displayText:f,icon:h,iconRotation:w,iconSpin:x,iconOnly:j,menuWidth:D,noChevron:g,onClick:y,onSelected:v,options:N=[],over:b,placeholder:k="Select...",selected:C,width:B=15}=a,[I,E]=(0,n.useState)(!1),F=(0,n.useRef)(null),K=N.findIndex(o=>i(o)===C)||0;function S(o){let n=o;n=o<K?o<2?0:o-2:o>N.length-3?N.length-1:o-2;let e=F.current,t=e?.children[n];e&&t&&(e.scrollTop=t.offsetTop)}function T(o){let n;if(N.length<1||_)return;let e=N.length-1;n=K<0?"next"===o?e:0:"next"===o?K===e?0:K+1:0===K?e:K-1,I&&d&&S(n),v?.(i(N[n]))}let A=b?"top":"bottom";return j&&(A=`${A}-start`),(0,o.jsxs)("div",{className:"Dropdown",children:[(0,o.jsx)(l.Floating,{allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:(0,o.jsx)("div",{className:"Dropdown__menu",ref:F,children:0===N.length?(0,o.jsx)("div",{className:"Dropdown__menu--entry",children:"No options"}):N.map(n=>{let s=i(n);return(0,o.jsx)("div",{className:(0,t.classes)(["Dropdown__menu--entry",C===s&&"selected"]),onClick:()=>{v?.(s)},onKeyDown:o=>{o.key===e.KEY.Enter&&v?.(s)},children:"string"==typeof n?n:n.displayText},s)})}),contentAutoWidth:!D,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:D?(0,s.unit)(D):void 0},disabled:_,onMounted:()=>{I&&d&&-1!==K&&S(K)},onOpenChange:E,placement:A,children:(0,o.jsxs)("div",{className:(0,t.classes)(["Dropdown__control",`Button--color--${u}`,_&&"Button--disabled",j&&"Dropdown__control--icon-only",p]),onClick:o=>{(!_||I)&&y?.(o)},onKeyDown:o=>{o.key!==e.KEY.Enter||_||y?.(o)},style:{width:(0,s.unit)(B)},children:[h&&(0,o.jsx)(c.Icon,{className:"Dropdown__icon",name:h,rotation:w,spin:x}),!j&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("span",{className:"Dropdown__selected-text",children:f||C&&i(C)||k}),!g&&(0,o.jsx)(c.Icon,{className:(0,t.classes)(["Dropdown__icon","Dropdown__icon--arrow",b&&"over",I&&"open"]),name:"chevron-down"})]})]})}),m&&(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(r.Button,{className:"Dropdown__button",disabled:_,icon:"chevron-left",onClick:()=>{T("previous")}}),(0,o.jsx)(r.Button,{className:"Dropdown__button",disabled:_,icon:"chevron-right",onClick:()=>{T("next")}})]})]})}export{a as Dropdown};
1
+ import{Fragment as o,jsx as n,jsxs as e}from"react/jsx-runtime";import{KEY as t}from"../common/keys.js";import{classes as r}from"../common/react.js";import{unit as l}from"../common/ui.js";import{useRef as i,useState as c}from"react";import{Button as d}from"./Button.js";import{Floating as s}from"./Floating.js";import{Icon as a}from"./Icon.js";function m(o){return"string"==typeof o?o:o.value}function p(p){let{autoScroll:u=!0,buttons:_,className:w,color:f="default",disabled:h,displayText:D,icon:y,iconRotation:v,iconSpin:N,iconOnly:g,menuWidth:b,noChevron:x,onClick:j,onSelected:k,options:C=[],over:B,placeholder:I="Select...",selected:T,fluid:A,width:E=15}=p,[K,O]=c(!1),S=i(null),$=C.findIndex(o=>m(o)===T)||0;function F(o){let n=o;n=o<$?o<2?0:o-2:o>C.length-3?C.length-1:o-2;let e=S.current,t=e?.children[n];e&&t&&(e.scrollTop=t.offsetTop)}function M(o){let n;if(C.length<1||h)return;let e=C.length-1;n=$<0?"next"===o?e:0:"next"===o?$===e?0:$+1:0===$?e:$-1,K&&u&&F(n),k?.(m(C[n]))}let W=B?"top":"bottom";return g&&(W=`${W}-start`),e("div",{className:r(["Dropdown",A&&"Dropdown--fluid"]),children:[n(s,{allowedOutsideClasses:".Dropdown__button",closeAfterInteract:!0,content:n("div",{className:"Dropdown__menu",ref:S,children:0===C.length?n("div",{className:"Dropdown__menu--entry",children:"No options"}):C.map(o=>{let e=m(o);return n("div",{className:r(["Dropdown__menu--entry",T===e&&"selected"]),onClick:()=>{k?.(e)},onKeyDown:o=>{o.key===t.Enter&&k?.(e)},children:"string"==typeof o?o:o.displayText},e)})}),contentAutoWidth:!b,contentClasses:"Dropdown__menu--wrapper",contentStyles:{width:b?l(b):void 0},disabled:h,onMounted:()=>{K&&u&&-1!==$&&F($)},onOpenChange:O,placement:W,children:e("div",{className:r(["Dropdown__control",`Button--color--${f}`,h&&"Button--disabled",g&&"Dropdown__control--icon-only",w]),onClick:o=>{(!h||K)&&j?.(o)},onKeyDown:o=>{o.key!==t.Enter||h||j?.(o)},style:{width:l(E)},children:[y&&n(a,{className:"Dropdown__icon",name:y,rotation:v,spin:N}),!g&&e(o,{children:[n("span",{className:"Dropdown__selected-text",children:D||T&&m(T)||I}),!x&&n(a,{className:r(["Dropdown__icon","Dropdown__icon--arrow",B&&"over",K&&"open"]),name:"chevron-down"})]})]})}),_&&e(o,{children:[n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-left",onClick:()=>{M("previous")}}),n(d,{className:"Dropdown__button",disabled:h,icon:"chevron-right",onClick:()=>{M("next")}})]})]})}export{p as Dropdown};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";class i extends t.Component{ref=(0,t.createRef)();state={fontSize:0};constructor(e){super(e),this.resize=this.resize.bind(this),window.addEventListener("resize",this.resize)}componentDidUpdate(e){e.children!==this.props.children&&this.resize()}componentWillUnmount(){window.removeEventListener("resize",this.resize)}resize(){let e=this.ref.current;if(!e)return;let t=this.props.maxWidth,i=0,s=this.props.maxFontSize;for(let r=0;r<10;r++){let r=Math.round((i+s)/2);e.style.fontSize=`${r}px`;let n=e.offsetWidth-t;if(n>0)s=r;else if(n<(this.props.acceptableDifference??5))i=r;else break}this.setState({fontSize:Math.round((i+s)/2)})}componentDidMount(){this.resize()}render(){return(0,e.jsx)("span",{ref:this.ref,style:{fontSize:`${this.state.fontSize}px`,..."object"==typeof this.props.native?.style?this.props.native.style:{}},children:this.props.children})}}export{i as FitText};
1
+ import{jsx as e}from"react/jsx-runtime";import{Component as t,createRef as i}from"react";class s extends t{ref=i();state={fontSize:0};constructor(e){super(e),this.resize=this.resize.bind(this),window.addEventListener("resize",this.resize)}componentDidUpdate(e){e.children!==this.props.children&&this.resize()}componentWillUnmount(){window.removeEventListener("resize",this.resize)}resize(){let e=this.ref.current;if(!e)return;let t=this.props.maxWidth,i=0,s=this.props.maxFontSize;for(let r=0;r<10;r++){let r=Math.round((i+s)/2);e.style.fontSize=`${r}px`;let n=e.offsetWidth-t;if(n>0)s=r;else if(n<(this.props.acceptableDifference??5))i=r;else break}this.setState({fontSize:Math.round((i+s)/2)})}componentDidMount(){this.resize()}render(){return e("span",{ref:this.ref,style:{fontSize:`${this.state.fontSize}px`,..."object"==typeof this.props.native?.style?this.props.native.style:{}},children:this.props.children})}}export{s as FitText};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"../common/react.js";import*as s from"../common/ui.js";function o(e){return(0,t.classes)(["Flex",e.inlineFlex&&"Flex--inline",(0,s.computeBoxClassName)(e)])}function l(e){let{direction:t,wrap:o,align:l,justify:r,...m}=e;return(0,s.computeBoxProps)({style:{...m.style,alignItems:l,flexDirection:t,flexWrap:!0===o?"wrap":o,justifyContent:r},...m})}function r(s){let{className:r,...m}=s;return(0,e.jsx)("div",{className:(0,t.classes)([r,o(m)]),...l(m)})}let m=e=>(0,t.classes)(["Flex__item",(0,s.computeBoxClassName)(e)]);function i(e){let{style:t,grow:o,order:l,shrink:r,basis:m,align:i,...n}=e,a=m??e.width??(void 0!==o?0:void 0);return(0,s.computeBoxProps)({style:{...t,alignSelf:i,flexBasis:(0,s.unit)(a),flexGrow:void 0!==o&&Number(o),flexShrink:void 0!==r&&Number(r),order:l},...n})}r.Item=function(s){let{className:o,...l}=s;return(0,e.jsx)("div",{className:(0,t.classes)([o,m(s)]),...i(l)})};export{r as Flex,o as computeFlexClassName,m as computeFlexItemClassName,i as computeFlexItemProps,l as computeFlexProps};
1
+ import{jsx as e}from"react/jsx-runtime";import{classes as t}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as r,unit as o}from"../common/ui.js";function i(e){return t(["Flex",e.inlineFlex&&"Flex--inline",l(e)])}function n(e){let{direction:t,wrap:l,align:o,justify:i,...n}=e;return r({style:{...n.style,alignItems:o,flexDirection:t,flexWrap:!0===l?"wrap":l,justifyContent:i},...n})}function m(l){let{className:r,...o}=l;return e("div",{className:t([r,i(o)]),...n(o)})}let s=e=>t(["Flex__item",l(e)]);function u(e){let{style:t,grow:l,order:i,shrink:n,basis:m,align:s,...u}=e,c=m??e.width??(void 0!==l?0:void 0);return r({style:{...t,alignSelf:s,flexBasis:o(c),flexGrow:void 0!==l&&Number(l),flexShrink:void 0!==n&&Number(n),order:i},...u})}m.Item=function(l){let{className:r,...o}=l;return e("div",{className:t([r,s(l)]),...u(o)})};export{m as Flex,i as computeFlexClassName,s as computeFlexItemClassName,u as computeFlexItemProps,n as computeFlexProps};
@@ -1,6 +1,6 @@
1
+ import { type BooleanLike } from '../common/react.ts';
1
2
  import { type Placement } from '@floating-ui/react';
2
3
  import { type CSSProperties, type ReactNode } from 'react';
3
- import { type BooleanLike } from '../common/react';
4
4
  type Props = {
5
5
  /** Interacting with this element will open the floating element. */
6
6
  children: ReactNode;
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"@floating-ui/react";import*as n from"react";import*as s from"../common/react.js";function a(a){let o,{allowedOutsideClasses:i,animationDuration:r,children:l,closeAfterInteract:c,content:m,contentAutoWidth:d,contentClasses:p,contentOffset:f=6,contentStyles:u,disabled:g,hoverDelay:h,hoverOpen:x,handleOpen:F,onMounted:j,placement:C,preventPortal:v,stopChildPropagation:E,onOpenChange:w}=a,[S,b]=(0,n.useState)(!1),{refs:k,floatingStyles:y,context:z}=(0,t.useFloating)({middleware:[(0,t.offset)(f),(0,t.flip)({padding:6}),(0,t.shift)(),d&&(0,t.size)({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){b(e),w?.(e)},open:S,placement:C||"bottom",transform:!1,whileElementsMounted:(e,n,s)=>(void 0!==j&&j(),(0,t.autoUpdate)(e,n,s,{ancestorResize:!1,ancestorScroll:!1,elementResize:!d}))}),{isMounted:O,status:P}=(0,t.useTransitionStatus)(z,{duration:r||200}),R=(0,t.useDismiss)(z,{ancestorScroll:!0,outsidePress:e=>!i||e.target instanceof Element&&!e.target.closest(i)}),M=(0,t.useClick)(z,{enabled:!g}),D=(0,t.useHover)(z,{enabled:!g,restMs:h||200}),H=void 0!==F,{getReferenceProps:I,getFloatingProps:N}=(0,t.useInteractions)(H?[]:[R,x?D:M]),T=I({ref:k.setReference,...E&&{onClick:e=>e.stopPropagation()}}),U=N({onClick:()=>{c&&z.onOpenChange(!1)},ref:k.setFloating});(0,n.useEffect)(()=>{H&&z.onOpenChange(F)},[F]),o=(0,n.isValidElement)(l)?(0,n.cloneElement)(l,T):(0,e.jsx)("div",{...T,children:l});let V=(0,e.jsx)("div",{className:(0,s.classes)(["Floating",!r&&"Floating--animated",p]),"data-position":z.placement,"data-transition":P,style:{...y,...u},...U,children:m});return(0,e.jsxs)(e.Fragment,{children:[o,O&&!!m&&(v?V:(0,e.jsx)(t.FloatingPortal,{children:V}))]})}export{a as Floating};
1
+ import{Fragment as e,jsx as t,jsxs as n}from"react/jsx-runtime";import{classes as o}from"../common/react.js";import{FloatingPortal as i,autoUpdate as r,flip as a,offset as l,shift as s,size as c,useClick as d,useDismiss as m,useFloating as p,useHover as g,useInteractions as f,useTransitionStatus as h}from"@floating-ui/react";import{cloneElement as u,isValidElement as C,useEffect as v,useState as w}from"react";function F(F){let b,{allowedOutsideClasses:x,animationDuration:y,children:O,closeAfterInteract:R,content:j,contentAutoWidth:k,contentClasses:z,contentOffset:E=6,contentStyles:M,disabled:P,hoverDelay:S,hoverOpen:N,handleOpen:$,onMounted:q,placement:A,preventPortal:B,stopChildPropagation:D,onOpenChange:G}=F,[H,I]=w(!1),{refs:J,floatingStyles:K,context:L}=p({middleware:[l(E),a({padding:6}),s(),k&&c({apply({rects:e,elements:t}){t.floating.style.width=`${e.reference.width}px`}})],onOpenChange(e){I(e),G?.(e)},open:H,placement:A||"bottom",transform:!1,whileElementsMounted:(e,t,n)=>(void 0!==q&&q(),r(e,t,n,{ancestorResize:!1,ancestorScroll:!1,elementResize:!k}))}),{isMounted:Q,status:T}=h(L,{duration:y||200}),U=m(L,{ancestorScroll:!0,outsidePress:e=>!x||e.target instanceof Element&&!e.target.closest(x)}),V=d(L,{enabled:!P}),W=g(L,{enabled:!P,restMs:S||200}),X=void 0!==$,{getReferenceProps:Y,getFloatingProps:Z}=f(X?[]:[U,N?W:V]),_=Y({ref:J.setReference,...D&&{onClick:e=>e.stopPropagation()}}),ee=Z({onClick:()=>{R&&L.onOpenChange(!1)},ref:J.setFloating});v(()=>{X&&L.onOpenChange($)},[$]),b=C(O)?u(O,_):t("div",{..._,children:O});let et=t("div",{className:o(["Floating",!y&&"Floating--animated",z]),"data-position":L.placement,"data-transition":T,style:{...K,...M},...ee,children:j});return n(e,{children:[b,Q&&!!j&&(B?et:t(i,{id:"tgui-root",children:et}))]})}export{F as Floating};
@@ -1,4 +1,4 @@
1
- import { type BooleanLike } from '../common/react';
1
+ import { type BooleanLike } from '../common/react.ts';
2
2
  import type { BoxProps } from './Box';
3
3
  type Props = {
4
4
  /** Icon name. @see https://fontawesome.com/v6/search?o=r&m=free */
@@ -1 +1 @@
1
- import*as s from"react/jsx-runtime";import*as t from"../common/react.js";import*as e from"../common/ui.js";let o=/-o$/;function a(a){let{name:r="",size:c,spin:m,className:n,rotation:l,...i}=a,f=i.style||{};c&&(f.fontSize=`${100*c}%`),l&&(f.transform=`rotate(${l}deg)`),i.style=f;let p=(0,e.computeBoxProps)(i),u="";if(r.startsWith("tg-"))u=r;else{let s=o.test(r),t=r.replace(o,""),e=!t.startsWith("fa-");u=s?"far ":"fas ",e&&(u+="fa-"),u+=t,m&&(u+=" fa-spin")}return(0,s.jsx)("i",{className:(0,t.classes)(["Icon",u,n,(0,e.computeBoxClassName)(i)]),...p})}(a||(a={})).Stack=function(o){let{className:a,children:r,...c}=o;return(0,s.jsx)("span",{className:(0,t.classes)(["IconStack",a,(0,e.computeBoxClassName)(c)]),...(0,e.computeBoxProps)(c),children:r})};export{a as Icon};
1
+ import{jsx as t}from"react/jsx-runtime";import{classes as e}from"../common/react.js";import{computeBoxClassName as o,computeBoxProps as r}from"../common/ui.js";let a=/-o$/;function s(s){let{name:n="",size:c,spin:i,className:m,rotation:f,...l}=s,p=l.style||{};c&&(p.fontSize=`${100*c}%`),f&&(p.transform=`rotate(${f}deg)`),l.style=p;let u=r(l),I="";if(n.startsWith("tg-"))I=n;else{let t=a.test(n),e=n.replace(a,""),o=!e.startsWith("fa-");I=t?"far ":"fas ",o&&(I+="fa-"),I+=e,i&&(I+=" fa-spin")}return t("i",{className:e(["Icon",I,m,o(l)]),...u})}(s||(s={})).Stack=function(a){let{className:s,children:n,...c}=a;return t("span",{className:e(["IconStack",s,o(c)]),...r(c),children:n})};export{s as Icon};
@@ -9,6 +9,12 @@ type Props = Partial<{
9
9
  fixErrors: boolean;
10
10
  /** Fill is default. */
11
11
  objectFit: 'contain' | 'cover';
12
+ /**
13
+ * The image source.
14
+ *
15
+ * Use transparent base64 pixel if there is no src so we don't get a broken
16
+ * image icon when using assets.
17
+ */
12
18
  src: string;
13
19
  }> & BoxProps;
14
20
  /**
@@ -16,7 +22,7 @@ type Props = Partial<{
16
22
  *
17
23
  * A wrapper for the `<img>` element.
18
24
  *
19
- * By default, it will attempt to fix broken images by fetching them again.
25
+ * It can attempt to fix broken images by fetching them again with `fixErrors`.
20
26
  *
21
27
  * It will also try to fix blurry images by rendering them pixelated.
22
28
  */
@@ -1 +1 @@
1
- import*as A from"react/jsx-runtime";import*as e from"react";import*as r from"../common/ui.js";function t(t){let{fixBlur:o=!0,fixErrors:m=!1,objectFit:a="fill",src:i,...n}=t,s=(0,e.useRef)(0),c=(0,r.computeBoxProps)(n);return c.style={...c.style,imageRendering:o?"pixelated":"auto",objectFit:a},(0,A.jsx)("img",{onError:A=>{if(m&&s.current<5){let e=A.currentTarget;setTimeout(()=>{e.src=`${i}?attempt=${s.current}`,s.current++},1e3)}},src:i||"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...c,alt:"dm icon"})}export{t as Image};
1
+ import{jsx as r}from"react/jsx-runtime";import{computeBoxProps as e}from"../common/ui.js";import{useEffect as t,useRef as A}from"react";function n(n){let{fixBlur:u=!0,fixErrors:c,objectFit:i="fill",src:m="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=",...o}=n,a=A(0),l=A(null),g=e(o);return g.style={...g.style,imageRendering:u?"pixelated":"auto",objectFit:i},t(()=>()=>{l.current&&clearTimeout(l.current)},[]),r("img",{alt:"dm icon",onError:function(r){if(!c||a.current>=5){l.current&&clearTimeout(l.current);return}let e=r.currentTarget;l.current=setTimeout(()=>{e.src=`${m}?attempt=${a.current}`,a.current++},1e3)},src:m,...g})}export{n as Image};
@@ -3,9 +3,9 @@
3
3
  * @copyright 2024 Aylong (https://github.com/AyIong)
4
4
  * @license MIT
5
5
  */
6
+ import { type BooleanLike } from '../common/react.ts';
6
7
  import type { Placement } from '@floating-ui/react';
7
8
  import type { ReactNode } from 'react';
8
- import { type BooleanLike } from '../common/react';
9
9
  import type { BoxProps } from './Box';
10
10
  import { type Direction } from './DmIcon';
11
11
  type Props = Partial<{
@@ -1 +1 @@
1
- import*as t from"react/jsx-runtime";import*as e from"../common/react.js";import*as s from"../common/ui.js";import*as n from"./DmIcon.js";import*as o from"./Icon.js";import*as a from"./Image.js";import*as m from"./Tooltip.js";function i(o){let{asset:i,assetSize:l=32,base64:r,buttons:u,buttonsAlt:p,children:x,className:g,color:d,disabled:_,dmFallback:I,dmIcon:h,dmIconState:j,fluid:B,fallbackIcon:f,imageSize:$=64,imageSrc:y,onClick:N,onRightClick:b,selected:v,title:w,tooltip:k,tooltipPosition:D,...z}=o,C=(0,t.jsxs)("div",{className:"ImageButton__container",onClick:t=>{!_&&N&&N(t)},onContextMenu:t=>{t.preventDefault(),!_&&b&&b(t)},onKeyDown:t=>{"Enter"===t.key&&!_&&N&&N(t)},style:{width:B?"auto":`calc(${$}px + 0.5em + 2px)`},tabIndex:_?void 0:0,children:[(0,t.jsx)("div",{className:"ImageButton__image",children:r||y?(0,t.jsx)(a.Image,{height:`${$}px`,src:r?`data:image/png;base64,${r}`:y,width:`${$}px`}):h&&j?(0,t.jsx)(n.DmIcon,{fallback:I||(0,t.jsx)(c,{icon:"spinner",size:$,spin:!0}),height:`${$}px`,icon:h,icon_state:j,width:`${$}px`}):i?(0,t.jsx)(a.Image,{className:(0,e.classes)(i||[]),height:`${$}px`,style:{transform:`scale(${$/l})`,transformOrigin:"top left"},width:`${$}px`}):(0,t.jsx)(c,{icon:f||"question",size:$})}),B?(0,t.jsxs)("div",{className:"ImageButton__content",children:[w&&(0,t.jsx)("span",{className:(0,e.classes)(["ImageButton__content--title",!!x&&"ImageButton__content--divider"]),children:w}),x&&(0,t.jsx)("span",{className:"ImageButton__content--text",children:x})]}):!!x&&(0,t.jsx)("span",{className:"ImageButton__content",children:x})]});return k&&(C=(0,t.jsx)(m.Tooltip,{content:k,position:D,children:C})),(0,t.jsxs)("div",{className:(0,e.classes)(["ImageButton",B&&"ImageButton--fluid",v&&"ImageButton--selected",_&&"ImageButton--disabled",!x&&"ImageButton--empty",!(N||b)&&"ImageButton--noAction",d&&"string"==typeof d?`ImageButton__color--${d}`:"ImageButton__color--default",g]),...(0,s.computeBoxProps)(z),children:[C,u&&(0,t.jsx)("div",{className:(0,e.classes)(["ImageButton__buttons",!x&&"ImageButton__buttons--empty"]),style:{width:"auto"},children:u}),p&&(0,t.jsx)("div",{className:(0,e.classes)(["ImageButton__buttons","ImageButton__buttons--alt",!x&&"ImageButton__buttons--empty"]),style:{maxWidth:B?"auto":`calc(${$}px + 0.5em)`,width:`calc(${$}px + ${.5*!B}em)`},children:p})]})}function c(e){let{icon:s,spin:n,size:a=64}=e;return(0,t.jsx)(o.Icon,{className:"ImageButton__image--fallback",height:`${a}px`,name:s,spin:n,style:{fontSize:`${a}px`},width:`${a}px`})}export{i as ImageButton};
1
+ import{jsx as t,jsxs as e}from"react/jsx-runtime";import{classes as n}from"../common/react.js";import{computeBoxProps as o}from"../common/ui.js";import{DmIcon as a}from"./DmIcon.js";import{Icon as i}from"./Icon.js";import{Image as m}from"./Image.js";import{Tooltip as s}from"./Tooltip.js";function c(i){let{asset:c,assetSize:r=32,base64:u,buttons:p,buttonsAlt:d,children:g,className:_,color:h,disabled:I,dmFallback:B,dmIcon:f,dmIconState:x,fluid:$,fallbackIcon:y,imageSize:N=64,imageSrc:b,onClick:v,onRightClick:w,selected:j,title:k,tooltip:z,tooltipPosition:D,...C}=i,q=e("div",{className:"ImageButton__container",onClick:t=>{!I&&v&&v(t)},onContextMenu:t=>{t.preventDefault(),!I&&w&&w(t)},onKeyDown:t=>{"Enter"===t.key&&!I&&v&&v(t)},style:{width:$?"auto":`calc(${N}px + 0.5em + 2px)`},tabIndex:I?void 0:0,children:[t("div",{className:"ImageButton__image",children:u||b?t(m,{height:`${N}px`,src:u?`data:image/png;base64,${u}`:b,width:`${N}px`}):f&&x?t(a,{fallback:B||t(l,{icon:"spinner",size:N,spin:!0}),height:`${N}px`,icon:f,icon_state:x,width:`${N}px`}):c?t(m,{className:n(c||[]),height:`${N}px`,style:{transform:`scale(${N/r})`,transformOrigin:"top left"},width:`${N}px`}):t(l,{icon:y||"question",size:N})}),$?e("div",{className:"ImageButton__content",children:[k&&t("span",{className:n(["ImageButton__content--title",!!g&&"ImageButton__content--divider"]),children:k}),g&&t("span",{className:"ImageButton__content--text",children:g})]}):!!g&&t("span",{className:"ImageButton__content",children:g})]});return z&&(q=t(s,{content:z,position:D,children:q})),e("div",{className:n(["ImageButton",$&&"ImageButton--fluid",j&&"ImageButton--selected",I&&"ImageButton--disabled",!g&&"ImageButton--empty",!(v||w)&&"ImageButton--noAction",h&&"string"==typeof h?`ImageButton__color--${h}`:"ImageButton__color--default",_]),...o(C),children:[q,p&&t("div",{className:n(["ImageButton__buttons",!g&&"ImageButton__buttons--empty"]),style:{width:"auto"},children:p}),d&&t("div",{className:n(["ImageButton__buttons","ImageButton__buttons--alt",!g&&"ImageButton__buttons--empty"]),style:{maxWidth:$?"auto":`calc(${N}px + 0.5em)`,width:`calc(${N}px + ${.5*!$}em)`},children:d})]})}function l(e){let{icon:n,spin:o,size:a=64}=e;return t(i,{className:"ImageButton__image--fallback",height:`${a}px`,name:n,spin:o,style:{fontSize:`${a}px`},width:`${a}px`})}export{c as ImageButton};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/ui.js";import*as n from"./Button.js";import*as i from"./ProgressBar.js";import*as s from"./Stack.js";function r(n){let{backgroundImage:i,children:s,imageWidth:r,zoomPadding:u=0,initialLeft:c=0,initialTop:l=0,onBackgroundMoved:d,onZoomChange:m,...p}=n,[f,x]=(0,t.useState)(0),[h,j]=(0,t.useState)(0),[g,v]=(0,t.useState)(0),[k,S]=(0,t.useState)(!1),[w,b]=(0,t.useState)(0),[M,$]=(0,t.useState)(1);function B(e){x(e.clientX-g),j(e.clientY-w),S(!0)}function y(e){if(!k)return;let t=e.clientX-f,o=e.clientY-h;d?.(t+c,o+l),v(t),b(o)}function I(){S(!1)}function P(e){if("increase"===e&&M>=1.5||"decrease"===e&&M<=.5)return;let t=Math.round((M+("increase"===e?.1:-.1))*10)/10;$(t),m?.(t)}(0,t.useEffect)(()=>(window.addEventListener("mouseup",I),()=>{window.removeEventListener("mouseup",I)}),[]);let Y=c+g,C=l+w;return(0,e.jsxs)("div",{...(0,o.computeBoxProps)({...p,style:{...p.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),children:[(0,e.jsx)("div",{onMouseDown:B,onMouseMove:y,onWheel:function(e){0!==e.deltaY&&(e.preventDefault(),P(e.deltaY<0?"increase":"decrease"))},style:{backgroundImage:`url("${i}")`,backgroundPosition:`${Y}px ${C}px`,backgroundRepeat:"repeat",backgroundSize:`${M*r}px`,height:"100%",inset:0,position:"absolute",width:"100%"}}),(0,e.jsx)("div",{onMouseDown:B,onMouseMove:y,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${Y}px, ${C}px) scale(${M})`,transformOrigin:"top left",width:"100%"},children:s}),(0,e.jsx)(a,{padding:u,onZoomClick:P,zoom:M})]})}function a(t){let{zoom:o,padding:r,onZoomClick:a}=t;return(0,e.jsx)("div",{style:{left:5,position:"absolute",right:5+r,top:5},children:(0,e.jsxs)(s.Stack,{children:[(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{disabled:o<=.5,icon:"minus",onClick:()=>a("decrease")})}),(0,e.jsx)(s.Stack.Item,{grow:!0,children:(0,e.jsxs)(i.ProgressBar,{maxValue:1.5,minValue:.5,value:o,children:[o,"x"]})}),(0,e.jsx)(s.Stack.Item,{children:(0,e.jsx)(n.Button,{disabled:o>=1.5,icon:"plus",onClick:()=>a("increase")})})]})})}export{r as InfinitePlane};
1
+ import{jsx as e,jsxs as n}from"react/jsx-runtime";import{computeBoxProps as t}from"../common/ui.js";import{useEffect as i,useState as o}from"react";import{Button as r}from"./Button.js";import{ProgressBar as l}from"./ProgressBar.js";import{Stack as s}from"./Stack.js";function a(r){let{backgroundImage:l,children:s,imageWidth:a,zoomPadding:d=0,initialLeft:u=0,initialTop:m=0,onBackgroundMoved:p,onZoomChange:f,...h}=r,[g,v]=o(0),[w,b]=o(0),[x,k]=o(0),[M,$]=o(!1),[j,y]=o(0),[I,Y]=o(1);function C(e){v(e.clientX-x),b(e.clientY-j),$(!0)}function D(e){if(!M)return;let n=e.clientX-g,t=e.clientY-w;p?.(n+u,t+m),k(n),y(t)}function P(){$(!1)}function z(e){if("increase"===e&&I>=1.5||"decrease"===e&&I<=.5)return;let n=Math.round((I+("increase"===e?.1:-.1))*10)/10;Y(n),f?.(n)}i(()=>(window.addEventListener("mouseup",P),()=>{window.removeEventListener("mouseup",P)}),[]);let B=u+x,E=m+j;return n("div",{...t({...h,style:{...h.style,height:"100%",overflow:"hidden",position:"relative",width:"100%"}}),children:[e("div",{onMouseDown:C,onMouseMove:D,onWheel:function(e){0!==e.deltaY&&(e.preventDefault(),z(e.deltaY<0?"increase":"decrease"))},style:{backgroundImage:`url("${l}")`,backgroundPosition:`${B}px ${E}px`,backgroundRepeat:"repeat",backgroundSize:`${I*a}px`,height:"100%",inset:0,position:"absolute",width:"100%"}}),e("div",{onMouseDown:C,onMouseMove:D,style:{height:"100%",inset:0,position:"absolute",transform:`translate(${B}px, ${E}px) scale(${I})`,transformOrigin:"top left",width:"100%"},children:s}),e(c,{padding:d,onZoomClick:z,zoom:I})]})}function c(t){let{zoom:i,padding:o,onZoomClick:a}=t;return e("div",{style:{left:5,position:"absolute",right:5+o,top:5},children:n(s,{children:[e(s.Item,{children:e(r,{disabled:i<=.5,icon:"minus",onClick:()=>a("decrease")})}),e(s.Item,{grow:!0,children:n(l,{maxValue:1.5,minValue:.5,value:i,children:[i,"x"]})}),e(s.Item,{children:e(r,{disabled:i>=1.5,icon:"plus",onClick:()=>a("increase")})})]})})}export{a as InfinitePlane};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/keys.js";import*as u from"../common/react.js";import*as n from"../common/timer.js";import*as o from"../common/ui.js";let a=(0,n.debounce)(e=>e(),250);function c(n){let{autoFocus:c,autoSelect:s,className:m,disabled:l,expensive:p,fluid:f,maxLength:i,monospace:d,onBlur:g,onChange:v,onEnter:x,onEscape:T,onKeyDown:j,placeholder:E,ref:b,selfClear:y,value:I,...h}=n,k=(0,t.useRef)(null),C=b??k,[B,D]=(0,t.useState)(I??"");(0,t.useEffect)(()=>{let e;return(c||s)&&(e=setTimeout(()=>{C.current?.focus(),s&&C.current?.select()},1)),()=>clearTimeout(e)},[]),(0,t.useEffect)(()=>{C.current&&document.activeElement!==C.current&&I!==B&&D(I??"")},[I]);let K=(0,o.computeBoxProps)(h),N=(0,u.classes)(["Input",l&&"Input--disabled",f&&"Input--fluid",d&&"Input--monospace",(0,o.computeBoxClassName)(h),m]);return(0,e.jsx)("input",{...K,autoComplete:"off",className:N,disabled:l,maxLength:i,onBlur:function(e){g?.(B)},onChange:function(e){let t=e.currentTarget.value;D(t),p?a(()=>v?.(t)):v?.(t)},onKeyDown:function(e){if(j?.(e),e.key===r.KEY.Enter){e.preventDefault(),x?.(e.currentTarget.value),y&&D(""),e.currentTarget.blur();return}(0,r.isEscape)(e.key)&&(e.preventDefault(),T?.(e.currentTarget.value),e.currentTarget.blur())},placeholder:E,ref:C,spellCheck:!1,type:"text",value:B})}export{c as Input};
1
+ import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{debounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as m}from"../common/ui.js";import{useEffect as c,useRef as l,useState as a}from"react";let i=u(e=>e(),250);function p(u){let{autoFocus:p,autoSelect:f,className:s,disabled:d,expensive:g,fluid:v,maxLength:T,monospace:j,onBlur:y,onChange:I,onEnter:b,onEscape:h,onKeyDown:k,placeholder:x,ref:C,selfClear:D,value:E,...w}=u,B=l(null),K=C??B,[L,N]=a(E??"");c(()=>{let e;return(p||f)&&(e=setTimeout(()=>{K.current?.focus(),f&&K.current?.select()},1)),()=>clearTimeout(e)},[]),c(()=>{K.current&&document.activeElement!==K.current&&E!==L&&N(E??"")},[E]);let q=m(w),z=n(["Input",d&&"Input--disabled",v&&"Input--fluid",j&&"Input--monospace",o(w),s]);return e("input",{...q,autoComplete:"off",className:z,disabled:d,maxLength:T,onBlur:function(e){y?.(L)},onChange:function(e){let t=e.currentTarget.value;N(t),g?i(()=>I?.(t)):I?.(t)},onKeyDown:function(e){if(k?.(e),e.key===t.Enter){e.preventDefault(),b?.(e.currentTarget.value),D&&N(""),e.currentTarget.blur();return}r(e.key)&&(e.preventDefault(),h?.(e.currentTarget.value),e.currentTarget.blur())},placeholder:x,ref:K,spellCheck:!1,type:"text",value:L})}export{p as Input};
@@ -1,4 +1,4 @@
1
- import type { KeyEvent } from '../common/events';
1
+ import type { KeyEvent } from '../common/events.ts';
2
2
  type Props = Partial<{
3
3
  onKey: (key: KeyEvent) => void;
4
4
  onKeyDown: (key: KeyEvent) => void;
@@ -1 +1 @@
1
- import*as e from"react";import*as o from"../common/hotkeys.js";function n(n){return(0,e.useEffect)(()=>{let e=(0,o.listenForKeyEvents)(e=>{n.onKey&&n.onKey(e),e.isDown()&&n.onKeyDown&&n.onKeyDown(e),e.isUp()&&n.onKeyUp&&n.onKeyUp(e)});return()=>{e()}},[]),null}export{n as KeyListener};
1
+ import{listenForKeyEvents as o}from"../common/hotkeys.js";import{useEffect as n}from"react";function e(e){return n(()=>{let n=o(o=>{e.onKey&&e.onKey(o),o.isDown()&&e.onKeyDown&&e.onKeyDown(o),o.isUp()&&e.onKeyUp&&e.onKeyUp(o)});return()=>{n()}},[]),null}export{e as KeyListener};
@@ -1,5 +1,5 @@
1
+ import { type BooleanLike } from '../common/react.ts';
1
2
  import type { Placement } from '@floating-ui/react';
2
- import { type BooleanLike } from '../common/react';
3
3
  import type { BoxProps } from './Box';
4
4
  type Props = {
5
5
  /** Value itself, controls the position of the cursor. */
@@ -1 +1 @@
1
- import*as o from"react/jsx-runtime";import*as s from"../common/math.js";import*as e from"../common/react.js";import*as r from"../common/ui.js";import*as a from"./DraggableControl.js";import*as n from"./Floating.js";function t(t){let{animated:l,format:c,maxValue:i,minValue:m,onChange:x,onDrag:_,step:g,stepPixelSize:j,unclamped:p,unit:b,value:d,bipolar:h,popupPosition:f,className:K,color:u,fillValue:v,ranges:N={},size:y=1,style:M,...k}=t;return(0,o.jsx)(a.DraggableControl,{dragMatrix:[0,-1],animated:l,format:c,maxValue:i,minValue:m,onChange:x,onDrag:_,step:g,stepPixelSize:j,unclamped:p,unit:b,value:d,children:a=>{let{displayElement:t,displayValue:l,dragging:c,handleDragStart:x,inputElement:_}=a,g=(0,s.scale)(v??l,m,i),j=(0,s.scale)(l,m,i),p=u||(0,s.keyOfMatchingRange)(v??d,N)||"default",b=Math.min((j-.5)*270,225);return(0,o.jsx)(n.Floating,{content:t,contentClasses:"Knob__popupValue",handleOpen:c,placement:f||"top",preventPortal:!0,children:(0,o.jsxs)("div",{className:(0,e.classes)(["Knob",`Knob--color--${p}`,h&&"Knob--bipolar",K,(0,r.computeBoxClassName)(k)]),...(0,r.computeBoxProps)({style:{fontSize:`${y}em`,...M},...k}),onMouseDown:x,children:[(0,o.jsx)("div",{className:"Knob__circle",children:(0,o.jsx)("div",{className:"Knob__cursorBox",style:{transform:`rotate(${b}deg)`},children:(0,o.jsx)("div",{className:"Knob__cursor"})})}),(0,o.jsxs)("svg",{className:"Knob__ring Knob__ringTrackPivot",viewBox:"0 0 100 100",children:[(0,o.jsx)("circle",{className:"Knob__ringTrack",cx:"50",cy:"50",r:"50"}),(0,o.jsx)("title",{children:"track"})]}),(0,o.jsxs)("svg",{className:"Knob__ring Knob__ringFillPivot",viewBox:"0 0 100 100",children:[(0,o.jsx)("title",{children:"fill"}),(0,o.jsx)("circle",{className:"Knob__ringFill",cx:"50",cy:"50",r:"50",style:{strokeDashoffset:Math.max(((h?2.75:2)-1.5*g)*Math.PI*50,0)}})]}),_]})})}})}export{t as Knob};
1
+ import{jsx as o,jsxs as r}from"react/jsx-runtime";import{keyOfMatchingRange as e,scale as n}from"../common/math.js";import{classes as t}from"../common/react.js";import{computeBoxClassName as i,computeBoxProps as l}from"../common/ui.js";import{DraggableControl as c}from"./DraggableControl.js";import{Floating as a}from"./Floating.js";function s(s){let{animated:m,format:_,maxValue:d,minValue:b,onChange:h,onDrag:p,step:K,stepPixelSize:f,unclamped:g,unit:u,value:v,bipolar:x,popupPosition:N,className:j,color:y,fillValue:M,ranges:k={},size:P=1,style:w,...B}=s;return o(c,{dragMatrix:[0,-1],animated:m,format:_,maxValue:d,minValue:b,onChange:h,onDrag:p,step:K,stepPixelSize:f,unclamped:g,unit:u,value:v,children:c=>{let{displayElement:s,displayValue:m,dragging:_,handleDragStart:h,inputElement:p}=c,K=n(M??m,b,d),f=n(m,b,d),g=y||e(M??v,k)||"default",u=Math.min((f-.5)*270,225);return o(a,{content:s,contentClasses:"Knob__popupValue",handleOpen:_,placement:N||"top",preventPortal:!0,children:r("div",{className:t(["Knob",`Knob--color--${g}`,x&&"Knob--bipolar",j,i(B)]),...l({style:{fontSize:`${P}em`,...w},...B}),onMouseDown:h,children:[o("div",{className:"Knob__circle",children:o("div",{className:"Knob__cursorBox",style:{transform:`rotate(${u}deg)`},children:o("div",{className:"Knob__cursor"})})}),r("svg",{className:"Knob__ring Knob__ringTrackPivot",viewBox:"0 0 100 100",children:[o("circle",{className:"Knob__ringTrack",cx:"50",cy:"50",r:"50"}),o("title",{children:"track"})]}),r("svg",{className:"Knob__ring Knob__ringFillPivot",viewBox:"0 0 100 100",children:[o("title",{children:"fill"}),o("circle",{className:"Knob__ringFill",cx:"50",cy:"50",r:"50",style:{strokeDashoffset:Math.max(((x?2.75:2)-1.5*K)*Math.PI*50,0)}})]}),p]})})}})}export{s as Knob};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"./Flex.js";function l(l){let{children:r,wrap:n,...i}=l;return(0,e.jsx)(t.Flex,{align:"stretch",justify:"space-between",mx:-.5,wrap:n,...i,children:r})}l.Item=function(l){let{label:r,children:n,mx:i=1,...x}=l;return(0,e.jsx)(t.Flex.Item,{mx:i,children:(0,e.jsxs)(t.Flex,{align:"center",direction:"column",height:"100%",justify:"space-between",textAlign:"center",...x,children:[(0,e.jsx)(t.Flex.Item,{}),(0,e.jsx)(t.Flex.Item,{children:n}),(0,e.jsx)(t.Flex.Item,{color:"label",children:r})]})})};export{l as LabeledControls};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Flex as r}from"./Flex.js";function n(t){let{children:n,wrap:i,...l}=t;return e(r,{align:"stretch",justify:"space-between",mx:-.5,wrap:i,...l,children:n})}n.Item=function(n){let{label:i,children:l,mx:c=1,...m}=n;return e(r.Item,{mx:c,children:t(r,{align:"center",direction:"column",height:"100%",justify:"space-between",textAlign:"center",...m,children:[e(r.Item,{}),e(r.Item,{children:l}),e(r.Item,{color:"label",children:i})]})})};export{n as LabeledControls};
@@ -1,6 +1,6 @@
1
+ import { type BooleanLike } from '../common/react.ts';
1
2
  import type { Placement } from '@floating-ui/react';
2
3
  import type { PropsWithChildren, ReactNode } from 'react';
3
- import { type BooleanLike } from '../common/react';
4
4
  export declare function LabeledList(props: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
5
5
  type LabeledListItemProps = Partial<{
6
6
  /** Buttons to render aside the content. */
@@ -1 +1 @@
1
- var e;import*as s from"react/jsx-runtime";import*as t from"../common/react.js";import*as l from"../common/ui.js";import*as i from"./Box.js";import*as a from"./Divider.js";import*as o from"./Tooltip.js";function r(e){let{children:t}=e;return(0,s.jsx)("table",{className:"LabeledList",children:(0,s.jsx)("tbody",{children:t})})}(e=r||(r={})).Divider=function(e){let t=e.size?(0,l.unit)(Math.max(0,e.size-1)):0;return(0,s.jsx)("tr",{className:"LabeledList__row",children:(0,s.jsx)("td",{colSpan:3,style:{paddingBottom:t,paddingTop:t},children:(0,s.jsx)(a.Divider,{})})})},e.Item=function(e){let l,{className:a,label:r,labelColor:d="label",labelWrap:n,color:c,textAlign:m,buttons:L,content:p,children:x,verticalAlign:b="baseline",preserveWhitespace:j,tooltip:_,tooltipPosition:h}=e;r&&(l=r,"string"==typeof r&&(l+=":")),void 0!==_&&(l=(0,s.jsx)(o.Tooltip,{content:_,position:h,children:(0,s.jsx)(i.Box,{as:"span",style:{borderBottom:"2px dotted rgba(255, 255, 255, 0.8)"},children:l})}));let f=(0,s.jsx)(i.Box,{as:"td",className:(0,t.classes)(["LabeledList__cell",!n&&"LabeledList__label--nowrap"]),color:d,preserveWhitespace:j,verticalAlign:b,children:l});return(0,s.jsxs)("tr",{className:(0,t.classes)(["LabeledList__row",a]),children:[f,(0,s.jsxs)(i.Box,{as:"td",className:"LabeledList__cell",color:c,colSpan:L?void 0:2,textAlign:m,verticalAlign:b,children:[p,x]}),L&&(0,s.jsx)("td",{className:"LabeledList__cell LabeledList__buttons",children:L})]})};export{r as LabeledList};
1
+ var e;import{jsx as t,jsxs as l}from"react/jsx-runtime";import{classes as i}from"../common/react.js";import{unit as r}from"../common/ui.js";import{Box as o}from"./Box.js";import{Divider as a}from"./Divider.js";import{Tooltip as s}from"./Tooltip.js";function d(e){let{children:l}=e;return t("table",{className:"LabeledList",children:t("tbody",{children:l})})}(e=d||(d={})).Divider=function(e){let l=e.size?r(Math.max(0,e.size-1)):0;return t("tr",{className:"LabeledList__row",children:t("td",{colSpan:3,style:{paddingBottom:l,paddingTop:l},children:t(a,{})})})},e.Item=function(e){let r,{className:a,label:d,labelColor:n="label",labelWrap:c,color:m,textAlign:L,buttons:p,content:b,children:_,verticalAlign:h="baseline",preserveWhitespace:f,tooltip:u,tooltipPosition:v}=e;d&&(r=d,"string"==typeof d&&(r+=":")),void 0!==u&&(r=t(s,{content:u,position:v,children:t(o,{as:"span",style:{borderBottom:"2px dotted rgba(255, 255, 255, 0.8)"},children:r})}));let g=t(o,{as:"td",className:i(["LabeledList__cell",!c&&"LabeledList__label--nowrap"]),color:n,preserveWhitespace:f,verticalAlign:h,children:r});return l("tr",{className:i(["LabeledList__row",a]),children:[g,l(o,{as:"td",className:"LabeledList__cell",color:m,colSpan:p?void 0:2,textAlign:L,verticalAlign:h,children:[b,_]}),p&&t("td",{className:"LabeledList__cell LabeledList__buttons",children:p})]})};export{d as LabeledList};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as n from"react";import*as r from"../common/react.js";import*as s from"./Box.js";import*as a from"./Floating.js";import*as o from"./Icon.js";function t(o){let{children:t,className:l,disabled:u,display:c,onClick:i,onMouseOver:m,open:_,openWidth:M,onOutsideClick:B,...d}=o,x=(0,n.useRef)(null);return(0,e.jsx)(a.Floating,{allowedOutsideClasses:".Menubar_inner",content:(0,e.jsx)("div",{className:"MenuBar__menu",style:{width:M},children:t}),children:(0,e.jsx)("div",{className:"Menubar_inner",ref:x,children:(0,e.jsx)(s.Box,{className:(0,r.classes)(["MenuBar__MenuBarButton","MenuBar__font","MenuBar__hover",l]),...d,onClick:u?()=>null:i,onMouseOver:m,children:(0,e.jsx)("span",{className:"MenuBar__MenuBarButton-text",children:c})})})})}function l(n){let{entry:r,children:s,openWidth:a,display:o,setOpenMenuBar:l,openMenuBar:u,setOpenOnHover:c,openOnHover:i,disabled:m,className:_}=n;return(0,e.jsx)(t,{className:_,disabled:m,display:o,onClick:()=>{l(u===r?null:r),c(!i)},onMouseOver:()=>{i&&l(r)},onOutsideClick:()=>{l(null),c(!1)},open:u===r,openWidth:a,children:s})}function u(n){let{children:r}=n;return(0,e.jsx)(s.Box,{className:"MenuBar",children:r})}u.Dropdown=l,l.MenuItemToggle=function(n){let{value:a,displayText:t,onClick:l,checked:u}=n;return(0,e.jsxs)(s.Box,{className:(0,r.classes)(["MenuBar__font","MenuBar__MenuItem","MenuBar__MenuItemToggle","MenuBar__hover"]),onClick:()=>l(a),children:[(0,e.jsx)("div",{className:"MenuBar__MenuItemToggle__check",children:(0,e.jsx)(o.Icon,{name:u?"check":"",size:1.3})}),t]})},l.MenuItem=function(n){let{value:a,displayText:o,onClick:t}=n;return(0,e.jsx)(s.Box,{className:(0,r.classes)(["MenuBar__font","MenuBar__MenuItem","MenuBar__hover"]),onClick:()=>t?.(a),children:o})},l.Separator=function(){return(0,e.jsx)("div",{className:"MenuBar__Separator"})};export{u as MenuBar};
1
+ import{jsx as e,jsxs as n}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{useRef as a}from"react";import{Box as t}from"./Box.js";import{Floating as o}from"./Floating.js";import{Icon as u}from"./Icon.js";function l(n){let{children:u,className:l,disabled:i,display:c,onClick:s,onMouseOver:m,open:_,openWidth:M,onOutsideClick:d,...B}=n,h=a(null);return e(o,{allowedOutsideClasses:".Menubar_inner",content:e("div",{className:"MenuBar__menu",style:{width:M},children:u}),children:e("div",{className:"Menubar_inner",ref:h,children:e(t,{className:r(["MenuBar__MenuBarButton","MenuBar__font","MenuBar__hover",l]),...B,onClick:i?()=>null:s,onMouseOver:m,children:e("span",{className:"MenuBar__MenuBarButton-text",children:c})})})})}function i(n){let{entry:r,children:a,openWidth:t,display:o,setOpenMenuBar:u,openMenuBar:i,setOpenOnHover:c,openOnHover:s,disabled:m,className:_}=n;return e(l,{className:_,disabled:m,display:o,onClick:()=>{u(i===r?null:r),c(!s)},onMouseOver:()=>{s&&u(r)},onOutsideClick:()=>{u(null),c(!1)},open:i===r,openWidth:t,children:a})}function c(n){let{children:r}=n;return e(t,{className:"MenuBar",children:r})}c.Dropdown=i,i.MenuItemToggle=function(a){let{value:o,displayText:l,onClick:i,checked:c}=a;return n(t,{className:r(["MenuBar__font","MenuBar__MenuItem","MenuBar__MenuItemToggle","MenuBar__hover"]),onClick:()=>i(o),children:[e("div",{className:"MenuBar__MenuItemToggle__check",children:e(u,{name:c?"check":"",size:1.3})}),l]})},i.MenuItem=function(n){let{value:a,displayText:o,onClick:u}=n;return e(t,{className:r(["MenuBar__font","MenuBar__MenuItem","MenuBar__hover"]),onClick:()=>u?.(a),children:o})},i.Separator=function(){return e("div",{className:"MenuBar__Separator"})};export{c as MenuBar};
@@ -1 +1 @@
1
- import*as o from"react/jsx-runtime";import*as m from"../common/keys.js";import*as s from"../common/react.js";import*as e from"../common/ui.js";import*as r from"./Dimmer.js";function a(a){let{className:i,children:t,onEnter:c,onEscape:n,...l}=a;return(0,o.jsx)(r.Dimmer,{className:"Modal__dimmer",onKeyDown:function(o){o.key===m.KEY.Enter&&c?.(o),(0,m.isEscape)(o.key)&&n?.(o)},children:(0,o.jsx)("div",{className:(0,s.classes)(["Modal",i,(0,e.computeBoxClassName)(l)]),...(0,e.computeBoxProps)(l),children:t})})}export{a as Modal};
1
+ import{jsx as o}from"react/jsx-runtime";import{KEY as m,isEscape as r}from"../common/keys.js";import{classes as e}from"../common/react.js";import{computeBoxClassName as i,computeBoxProps as n}from"../common/ui.js";import{Dimmer as t}from"./Dimmer.js";function c(c){let{className:s,children:a,onEnter:l,onEscape:d,...f}=c;return o(t,{className:"Modal__dimmer",onKeyDown:function(o){o.key===m.Enter&&l?.(o),r(o.key)&&d?.(o)},children:o("div",{className:e(["Modal",s,i(f)]),...n(f),children:a})})}export{c as Modal};
@@ -1 +1 @@
1
- import*as o from"react/jsx-runtime";import*as e from"../common/react.js";import*as t from"./Box.js";function c(c){let{className:s,color:r,info:i,success:x,danger:m,...a}=c;return(0,o.jsx)(t.Box,{className:(0,e.classes)(["NoticeBox",r&&`NoticeBox--color--${r}`,i&&"NoticeBox--type--info",x&&"NoticeBox--type--success",m&&"NoticeBox--type--danger",s]),...a})}export{c as NoticeBox};
1
+ import{jsx as o}from"react/jsx-runtime";import{classes as t}from"../common/react.js";import{Box as e}from"./Box.js";function c(c){let{className:r,color:i,info:m,success:x,danger:s,...n}=c;return o(e,{className:t(["NoticeBox",i&&`NoticeBox--color--${i}`,m&&"NoticeBox--type--info",x&&"NoticeBox--type--success",s&&"NoticeBox--type--danger",r]),...n})}export{c as NoticeBox};
@@ -1,5 +1,5 @@
1
+ import { type BooleanLike } from '../common/react.ts';
1
2
  import { Component, type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler } from 'react';
2
- import { type BooleanLike } from '../common/react';
3
3
  import { type BoxProps } from './Box';
4
4
  type Props = Required<{
5
5
  /** Highest possible value. */
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/keys.js";import*as s from"../common/math.js";import*as i from"../common/react.js";import*as a from"./AnimatedNumber.js";import*as n from"./Box.js";class o extends t.Component{inputRef=(0,t.createRef)();dragTimeout;dragInterval;state={currentValue:0,dragging:!1,editing:!1,origin:0,previousValue:0};componentDidMount(){let e=Number.parseFloat(this.props.value.toString());this.setState({currentValue:e,previousValue:e})}handleDragStart=e=>{let{value:t,disabled:r}=this.props,{editing:s}=this.state;if(r||s)return;document.body.style["pointer-events"]="none";let i=Number.parseFloat(t.toString());this.setState({currentValue:i,dragging:!1,origin:e.screenY,previousValue:i}),this.dragTimeout=setTimeout(()=>{this.setState({dragging:!0})},250),this.dragInterval=setInterval(()=>{let{dragging:e,currentValue:t,previousValue:r}=this.state,{onDrag:s}=this.props;e&&t!==r&&(this.setState({previousValue:t}),s?.(t))},400),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd)};handleDragMove=e=>{let{minValue:t,maxValue:r,step:i,stepPixelSize:a,disabled:n}=this.props;n||this.setState(n=>{let o={...n},u=o.origin-e.screenY;if(n.dragging){let n=a||1,l=(0,s.clamp)(o.currentValue+u*i/n,t-i,r+i);Math.abs(l-o.currentValue)>=i?(o.currentValue=(0,s.clamp)((0,s.round)(l/i,0)*i,t,r),o.origin=e.screenY):Math.abs(u)>n&&(o.origin=e.screenY)}else Math.abs(u)>4&&(o.dragging=!0);return o})};handleDragEnd=e=>{let{dragging:t,currentValue:r}=this.state,{onDrag:s,onChange:i,disabled:a}=this.props;if(!a){if(document.body.style["pointer-events"]="auto",clearInterval(this.dragInterval),clearTimeout(this.dragTimeout),this.setState({dragging:!1,editing:!t,previousValue:r}),t)i?.(r),s?.(r);else if(this.inputRef){let e=this.inputRef.current;e&&(e.value=`${r}`,setTimeout(()=>{e.focus(),e.select()},10))}document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleBlur=e=>{let{editing:t,previousValue:r}=this.state,{minValue:i,maxValue:a,onChange:n,onDrag:o,disabled:u}=this.props;if(u||!t)return;let l=(0,s.clamp)(Number.parseFloat(e.target.value),i,a);if(Number.isNaN(l))return void this.setState({editing:!1});this.setState({currentValue:l,editing:!1,previousValue:l}),r!==l&&(n?.(l),o?.(l))};handleKeyDown=e=>{let{minValue:t,maxValue:i,onChange:a,onDrag:n,disabled:o}=this.props;if(o)return;let{previousValue:u}=this.state;if(e.key===r.KEY.Enter){let r=(0,s.clamp)(Number.parseFloat(e.currentTarget.value),t,i);if(Number.isNaN(r))return void this.setState({editing:!1});this.setState({currentValue:r,editing:!1,previousValue:r}),u!==r&&(a?.(r),n?.(r))}else(0,r.isEscape)(e.key)&&this.setState({editing:!1})};render(){let{dragging:t,editing:r,currentValue:o}=this.state,{className:u,fluid:l,animated:m,unit:h,value:d,minValue:p,maxValue:g,height:c,width:v,lineHeight:f,fontSize:N,format:b}=this.props,S=Number.parseFloat(d.toString());t&&(S=o);let V=(0,e.jsxs)("div",{className:"NumberInput__content",children:[m&&!t?(0,e.jsx)(a.AnimatedNumber,{format:b,value:S}):b?b(S):S,h?` ${h}`:""]});return(0,e.jsxs)(n.Box,{className:(0,i.classes)(["NumberInput",l&&"NumberInput--fluid",u]),fontSize:N,lineHeight:f,minHeight:c,minWidth:v,onMouseDown:this.handleDragStart,children:[(0,e.jsx)("div",{className:"NumberInput__barContainer",children:(0,e.jsx)("div",{className:"NumberInput__bar",style:{height:`${(0,s.clamp)((S-p)/(g-p)*100,0,100)}%`}})}),V,(0,e.jsx)("input",{className:"NumberInput__input",onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,ref:this.inputRef,style:{display:r?"inline":"none",fontSize:N,height:c,lineHeight:f}})]})}}export{o as NumberInput};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{KEY as r,isEscape as i}from"../common/keys.js";import{clamp as n,round as s}from"../common/math.js";import{classes as a}from"../common/react.js";import{Component as o,createRef as u}from"react";import{AnimatedNumber as l}from"./AnimatedNumber.js";import{Box as m}from"./Box.js";class h extends o{inputRef=u();dragTimeout;dragInterval;state={currentValue:0,dragging:!1,editing:!1,origin:0,previousValue:0};componentDidMount(){let e=Number.parseFloat(this.props.value.toString());this.setState({currentValue:e,previousValue:e})}handleDragStart=e=>{let{value:t,disabled:r}=this.props,{editing:i}=this.state;if(r||i)return;document.body.style["pointer-events"]="none";let n=Number.parseFloat(t.toString());this.setState({currentValue:n,dragging:!1,origin:e.screenY,previousValue:n}),this.dragTimeout=setTimeout(()=>{this.setState({dragging:!0})},250),this.dragInterval=setInterval(()=>{let{dragging:e,currentValue:t,previousValue:r}=this.state,{onDrag:i}=this.props;e&&t!==r&&(this.setState({previousValue:t}),i?.(t))},400),document.addEventListener("mousemove",this.handleDragMove),document.addEventListener("mouseup",this.handleDragEnd)};handleDragMove=e=>{let{minValue:t,maxValue:r,step:i,stepPixelSize:a,disabled:o}=this.props;o||this.setState(o=>{let u={...o},l=u.origin-e.screenY;if(o.dragging){let o=a||1,m=n(u.currentValue+l*i/o,t-i,r+i);Math.abs(m-u.currentValue)>=i?(u.currentValue=n(s(m/i,0)*i,t,r),u.origin=e.screenY):Math.abs(l)>o&&(u.origin=e.screenY)}else Math.abs(l)>4&&(u.dragging=!0);return u})};handleDragEnd=e=>{let{dragging:t,currentValue:r}=this.state,{onDrag:i,onChange:n,disabled:s}=this.props;if(!s){if(document.body.style["pointer-events"]="auto",clearInterval(this.dragInterval),clearTimeout(this.dragTimeout),this.setState({dragging:!1,editing:!t,previousValue:r}),t)n?.(r),i?.(r);else if(this.inputRef){let e=this.inputRef.current;e&&(e.value=`${r}`,setTimeout(()=>{e.focus(),e.select()},10))}document.removeEventListener("mousemove",this.handleDragMove),document.removeEventListener("mouseup",this.handleDragEnd)}};handleBlur=e=>{let{editing:t,previousValue:r}=this.state,{minValue:i,maxValue:s,onChange:a,onDrag:o,disabled:u}=this.props;if(u||!t)return;let l=n(Number.parseFloat(e.target.value),i,s);if(Number.isNaN(l))return void this.setState({editing:!1});this.setState({currentValue:l,editing:!1,previousValue:l}),r!==l&&(a?.(l),o?.(l))};handleKeyDown=e=>{let{minValue:t,maxValue:s,onChange:a,onDrag:o,disabled:u}=this.props;if(u)return;let{previousValue:l}=this.state;if(e.key===r.Enter){let r=n(Number.parseFloat(e.currentTarget.value),t,s);if(Number.isNaN(r))return void this.setState({editing:!1});this.setState({currentValue:r,editing:!1,previousValue:r}),l!==r&&(a?.(r),o?.(r))}else i(e.key)&&this.setState({editing:!1})};render(){let{dragging:r,editing:i,currentValue:s}=this.state,{className:o,fluid:u,animated:h,unit:d,value:p,minValue:g,maxValue:c,height:v,width:f,lineHeight:N,fontSize:b,format:S}=this.props,V=Number.parseFloat(p.toString());r&&(V=s);let y=t("div",{className:"NumberInput__content",children:[h&&!r?e(l,{format:S,value:V}):S?S(V):V,d?` ${d}`:""]});return t(m,{className:a(["NumberInput",u&&"NumberInput--fluid",o]),fontSize:b,lineHeight:N,minHeight:v,minWidth:f,onMouseDown:this.handleDragStart,children:[e("div",{className:"NumberInput__barContainer",children:e("div",{className:"NumberInput__bar",style:{height:`${n((V-g)/(c-g)*100,0,100)}%`}})}),y,e("input",{className:"NumberInput__input",onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,ref:this.inputRef,style:{display:i?"inline":"none",fontSize:b,height:v,lineHeight:N}})]})}}export{h as NumberInput};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"@floating-ui/react";function n(n){let{baseZIndex:i=5,children:r,content:s,isOpen:o,onClickOutside:a,placement:l}=n,{refs:f,floatingStyles:d,context:m}=(0,t.useFloating)({middleware:[(0,t.offset)(5),(0,t.flip)(),(0,t.shift)()],onOpenChange:a,open:o,placement:l,whileElementsMounted:t.autoUpdate}),p=(0,t.useDismiss)(m),{getReferenceProps:u,getFloatingProps:c}=(0,t.useInteractions)([p]);return(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("div",{ref:f.setReference,...u(),children:r}),o&&(0,e.jsx)("div",{ref:f.setFloating,style:{...d,zIndex:i},...c(),children:s})]})}export{n as Popper};
1
+ import{Fragment as e,jsx as r,jsxs as n}from"react/jsx-runtime";import{autoUpdate as t,flip as i,offset as o,shift as l,useDismiss as d,useFloating as c,useInteractions as f}from"@floating-ui/react";function m(m){let{baseZIndex:p=5,children:a,content:h,isOpen:s,onClickOutside:u,placement:g}=m,{refs:x,floatingStyles:v,context:w}=c({middleware:[o(5),i(),l()],onOpenChange:u,open:s,placement:g,whileElementsMounted:t}),{getReferenceProps:j,getFloatingProps:y}=f([d(w)]);return n(e,{children:[r("div",{ref:x.setReference,...j(),children:a}),s&&r("div",{ref:x.setFloating,style:{...v,zIndex:p},...y(),children:h})]})}export{m as Popper};
@@ -1 +1 @@
1
- import*as s from"react/jsx-runtime";import*as o from"../common/constants.js";import*as r from"../common/math.js";import*as e from"../common/react.js";import*as a from"../common/ui.js";function m(m){let{className:t,value:c,minValue:l=0,maxValue:i=1,color:n,ranges:d={},empty:f,children:p,...u}=m,g=(0,r.scale)(c,l,i),j=void 0!==p,x=n||(0,r.keyOfMatchingRange)(c,d)||"default",B=(0,a.computeBoxProps)(u),P=["ProgressBar",t,(0,a.computeBoxClassName)(u)],_={width:`${100*(0,r.clamp01)(g)}%`};return o.CSS_COLORS.includes(x)||"default"===x?P.push(`ProgressBar--color--${x}`):(B.style={...B.style,borderColor:x},_.backgroundColor=x),(0,s.jsxs)("div",{className:(0,e.classes)(P),...B,children:[(0,s.jsx)("div",{className:"ProgressBar__fill ProgressBar__fill--animated",style:_}),(0,s.jsx)("div",{className:"ProgressBar__content",children:j?p:!f&&`${(0,r.toFixed)(100*g)}%`})]})}export{m as ProgressBar};
1
+ import{jsx as r,jsxs as o}from"react/jsx-runtime";import{CSS_COLORS as s}from"../common/constants.js";import{clamp01 as e,keyOfMatchingRange as m,scale as t,toFixed as a}from"../common/math.js";import{classes as i}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";function n(n){let{className:d,value:f,minValue:u=0,maxValue:g=1,color:p,ranges:B={},empty:P,children:_,...h}=n,j=t(f,u,g),v=void 0!==_,y=p||m(f,B)||"default",N=c(h),$=["ProgressBar",d,l(h)],b={width:`${100*e(j)}%`};return s.includes(y)||"default"===y?$.push(`ProgressBar--color--${y}`):(N.style={...N.style,borderColor:y},b.backgroundColor=y),o("div",{className:i($),...N,children:[r("div",{className:"ProgressBar__fill ProgressBar__fill--animated",style:b}),r("div",{className:"ProgressBar__content",children:v?_:!P&&`${a(100*j)}%`})]})}export{n as ProgressBar};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"../common/react.js";import*as r from"../common/timer.js";import*as n from"../common/ui.js";import*as u from"react";import*as o from"../common/keys.js";let s=(0,r.debounce)(e=>e(),250);function c(r){let{allowFloats:c,autoFocus:i,autoSelect:m,className:a,disabled:l,expensive:f,fluid:p,maxValue:d=1e4,minValue:v=0,monospace:y,onBlur:E,onChange:b,onEnter:I,onEscape:j,onKeyDown:x,onValidationChange:k,value:C,...D}=r,R=(0,u.useRef)(null),[B,K]=(0,u.useState)(C??v),[N,g]=(0,u.useState)(!0);function h(e){b&&(f?s(()=>b(e)):b(e))}(0,u.useEffect)(()=>{let e;return(i||m)&&(e=setTimeout(()=>{R.current?.focus(),m&&R.current?.select()},1)),()=>clearTimeout(e)},[]),(0,u.useEffect)(()=>{if(R.current){let e=R.current.validity.valid;N!==e&&(g(e),k?.(e))}},[B]),(0,u.useEffect)(()=>{R.current&&document.activeElement!==R.current&&C!==B&&K(C??v)},[C]);let S=(0,n.computeBoxProps)(D),T=(0,t.classes)(["Input","RestrictedInput",l&&"Input--disabled",p&&"Input--fluid",y&&"Input--monospace",(0,n.computeBoxClassName)(D),a,!N&&"RestrictedInput--invalid"]);return(0,e.jsx)("input",{...S,autoComplete:"off",className:T,disabled:l,max:d,min:v,onBlur:function(e){E?.(B)},onChange:function(e){let t=Number(e.target.value);K(t),h(t)},onKeyDown:function(e){if(x?.(e),e.key===o.KEY.Enter){e.preventDefault(),I?.(B),R.current?.blur();return}if((0,o.isEscape)(e.key)){e.preventDefault(),j?.(B),R.current?.blur();return}if(e.key===o.KEY.Minus){e.preventDefault();let t=-1*B;K(t),h(t);return}},ref:R,spellCheck:!1,step:c?"any":"1",type:"number",value:B})}export{c as RestrictedInput};
1
+ import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{debounce as u}from"../common/timer.js";import{computeBoxClassName as o,computeBoxProps as i}from"../common/ui.js";import{useEffect as m,useRef as c,useState as l}from"react";let a=u(e=>e(),250);function f(u){let{allowFloats:f,autoFocus:p,autoSelect:s,className:d,disabled:v,expensive:y,fluid:I,maxValue:b=1e4,minValue:j=0,monospace:k,onBlur:D,onChange:x,onEnter:C,onEscape:R,onKeyDown:g,onValidationChange:h,value:E,...N}=u,T=c(null),[w,B]=l(E??j),[K,M]=l(!0);function q(e){x&&(y?a(()=>x(e)):x(e))}m(()=>{let e;return(p||s)&&(e=setTimeout(()=>{T.current?.focus(),s&&T.current?.select()},1)),()=>clearTimeout(e)},[]),m(()=>{if(T.current){let e=T.current.validity.valid;K!==e&&(M(e),h?.(e))}},[w]),m(()=>{T.current&&document.activeElement!==T.current&&E!==w&&B(E??j)},[E]);let z=i(N),A=n(["Input","RestrictedInput",v&&"Input--disabled",I&&"Input--fluid",k&&"Input--monospace",o(N),d,!K&&"RestrictedInput--invalid"]);return e("input",{...z,autoComplete:"off",className:A,disabled:v,max:b,min:j,onBlur:function(e){D?.(w)},onChange:function(e){let t=Number(e.target.value);B(t),q(t)},onKeyDown:function(e){if(g?.(e),e.key===t.Enter){e.preventDefault(),C?.(w),T.current?.blur();return}if(r(e.key)){e.preventDefault(),R?.(w),T.current?.blur();return}if(e.key===t.Minus){e.preventDefault();let t=-1*w;B(t),q(t);return}},ref:T,spellCheck:!1,step:f?"any":"1",type:"number",value:w})}export{f as RestrictedInput};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as a from"../common/math.js";import*as s from"../common/react.js";import*as r from"../common/ui.js";import*as o from"./AnimatedNumber.js";function c(c){let{alertAfter:l,alertBefore:t,className:n,format:m,maxValue:i=1,minValue:u=1,ranges:d,size:x=1,style:g,value:j,...C}=c,p=(0,a.scale)(j,u,i),_=(0,a.clamp01)(p),f=d?{}:{primary:[0,1]};if(d)for(let e in d){let s=d[e];f[e]=[(0,a.scale)(s[0],u,i),(0,a.scale)(s[1],u,i)]}let h=(!!l&&!!t&&!!(j>l)&&!!(j<t)||!!l&&!!(j>l)||!!t&&!!(j<t))&&(0,a.keyOfMatchingRange)(_,f);return(0,e.jsxs)("div",{className:"RoundGauge__wrapper",children:[(0,e.jsx)("div",{className:(0,s.classes)(["RoundGauge",n,(0,r.computeBoxClassName)(C)]),...(0,r.computeBoxProps)({style:{fontSize:`${x}em`,...g},...C}),children:(0,e.jsxs)("svg",{viewBox:"0 0 100 50",children:[(l||t)&&(0,e.jsx)("g",{className:(0,s.classes)(["RoundGauge__alert",h?`active RoundGauge__alert--${h}`:""]),children:(0,e.jsx)("path",{d:"M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z"})}),(0,e.jsx)("g",{children:(0,e.jsx)("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),(0,e.jsx)("g",{children:Object.keys(f).map((a,s)=>{let r=f[a];return(0,e.jsx)("circle",{className:`RoundGauge__ringFill RoundGauge--color--${a}`,cx:"50",cy:"50",r:"45",style:{strokeDashoffset:Math.max((2-(r[1]-r[0]))*Math.PI*50,0)},transform:`rotate(${180+180*r[0]} 50 50)`},s)})}),(0,e.jsxs)("g",{className:"RoundGauge__needle",transform:`rotate(${180*_-90} 50 50)`,children:[(0,e.jsx)("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),(0,e.jsx)("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),(0,e.jsx)("title",{children:"alert"})]})}),(0,e.jsx)(o.AnimatedNumber,{format:m,value:j})]})}export{c as RoundGauge};
1
+ import{jsx as e,jsxs as r}from"react/jsx-runtime";import{clamp01 as a,keyOfMatchingRange as o,scale as t}from"../common/math.js";import{classes as n}from"../common/react.js";import{computeBoxClassName as l,computeBoxProps as c}from"../common/ui.js";import{AnimatedNumber as i}from"./AnimatedNumber.js";function m(m){let{alertAfter:s,alertBefore:u,className:d,format:g,maxValue:C=1,minValue:_=1,ranges:f,size:h=1,style:p,value:G,...R}=m,N=a(t(G,_,C)),y=f?{}:{primary:[0,1]};if(f)for(let e in f){let r=f[e];y[e]=[t(r[0],_,C),t(r[1],_,C)]}let x=(!!s&&!!u&&!!(G>s)&&!!(G<u)||!!s&&!!(G>s)||!!u&&!!(G<u))&&o(N,y);return r("div",{className:"RoundGauge__wrapper",children:[e("div",{className:n(["RoundGauge",d,l(R)]),...c({style:{fontSize:`${h}em`,...p},...R}),children:r("svg",{viewBox:"0 0 100 50",children:[(s||u)&&e("g",{className:n(["RoundGauge__alert",x?`active RoundGauge__alert--${x}`:""]),children:e("path",{d:"M48.211,14.578C48.55,13.9 49.242,13.472 50,13.472C50.758,13.472 51.45,13.9 51.789,14.578C54.793,20.587 60.795,32.589 63.553,38.106C63.863,38.726 63.83,39.462 63.465,40.051C63.101,40.641 62.457,41 61.764,41C55.996,41 44.004,41 38.236,41C37.543,41 36.899,40.641 36.535,40.051C36.17,39.462 36.137,38.726 36.447,38.106C39.205,32.589 45.207,20.587 48.211,14.578ZM50,34.417C51.426,34.417 52.583,35.574 52.583,37C52.583,38.426 51.426,39.583 50,39.583C48.574,39.583 47.417,38.426 47.417,37C47.417,35.574 48.574,34.417 50,34.417ZM50,32.75C50,32.75 53,31.805 53,22.25C53,20.594 51.656,19.25 50,19.25C48.344,19.25 47,20.594 47,22.25C47,31.805 50,32.75 50,32.75Z"})}),e("g",{children:e("circle",{className:"RoundGauge__ringTrack",cx:"50",cy:"50",r:"45"})}),e("g",{children:Object.keys(y).map((r,a)=>{let o=y[r];return e("circle",{className:`RoundGauge__ringFill RoundGauge--color--${r}`,cx:"50",cy:"50",r:"45",style:{strokeDashoffset:Math.max((2-(o[1]-o[0]))*Math.PI*50,0)},transform:`rotate(${180+180*o[0]} 50 50)`},a)})}),r("g",{className:"RoundGauge__needle",transform:`rotate(${180*N-90} 50 50)`,children:[e("polygon",{className:"RoundGauge__needleLine",points:"46,50 50,0 54,50"}),e("circle",{className:"RoundGauge__needleMiddle",cx:"50",cy:"50",r:"8"})]}),e("title",{children:"alert"})]})}),e(i,{format:g,value:G})]})}export{m as RoundGauge};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";import*as o from"../common/events.js";import*as c from"../common/react.js";import*as n from"../common/ui.js";function s(s){let{buttons:r,children:i,className:l,container_id:a="",fill:m,fitted:d,flexGrow:S,noTopPadding:u,onScroll:_,ref:f,scrollable:x,scrollableHorizontal:p,stretchContents:j,title:N,...h}=s,v=(0,c.canRender)(N)||(0,c.canRender)(r),b=(0,t.useRef)(null),R=f??b;return(0,t.useEffect)(()=>(R.current&&(x||p)&&(0,o.addScrollableNode)(R.current),()=>{R.current&&(0,o.removeScrollableNode)(R.current)}),[]),(0,e.jsxs)("div",{className:(0,c.classes)(["Section",m&&"Section--fill",d&&"Section--fitted",x&&"Section--scrollable",p&&"Section--scrollableHorizontal",S&&"Section--flex",l,(0,n.computeBoxClassName)(h)]),id:a,...(0,n.computeBoxProps)(h),children:[v&&(0,e.jsxs)("div",{className:"Section__title",children:[(0,e.jsx)("span",{className:"Section__titleText",children:N}),(0,e.jsx)("div",{className:"Section__buttons",children:r})]}),(0,e.jsx)("div",{className:"Section__rest",children:(0,e.jsx)("div",{className:(0,c.classes)(["Section__content",j&&"Section__content--stretchContents",u&&"Section__content--noTopPadding"]),onScroll:_,ref:R,children:i})})]})}export{s as Section};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{addScrollableNode as n,removeScrollableNode as o}from"../common/events.js";import{canRender as c,classes as i}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as l}from"../common/ui.js";import{useEffect as s,useRef as m}from"react";function a(a){let{buttons:d,children:S,className:_,container_id:f="",fill:u,fitted:p,flexGrow:h,noTopPadding:v,onScroll:N,ref:j,scrollable:x,scrollableHorizontal:b,stretchContents:T,title:g,...z}=a,C=c(g)||c(d),H=m(null),P=j??H;return s(()=>(P.current&&(x||b)&&n(P.current),()=>{P.current&&o(P.current)}),[]),t("div",{className:i(["Section",u&&"Section--fill",p&&"Section--fitted",x&&"Section--scrollable",b&&"Section--scrollableHorizontal",h&&"Section--flex",_,r(z)]),id:f,...l(z),children:[C&&t("div",{className:"Section__title",children:[e("span",{className:"Section__titleText",children:g}),e("div",{className:"Section__buttons",children:d})]}),e("div",{className:"Section__rest",children:e("div",{className:i(["Section__content",T&&"Section__content--stretchContents",v&&"Section__content--noTopPadding"]),onScroll:N,ref:P,children:S})})]})}export{a as Section};
@@ -1 +1 @@
1
- import*as s from"react/jsx-runtime";import*as r from"../common/math.js";import*as e from"../common/react.js";import*as a from"../common/ui.js";import*as l from"./DraggableControl.js";function o(o){let{animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,className:x,fillValue:f,color:g,ranges:h={},children:v,...N}=o,B=void 0!==v;return(0,s.jsx)(l.DraggableControl,{dragMatrix:[1,0],animated:i,format:t,maxValue:c,minValue:m,onChange:d,onDrag:n,step:p,stepPixelSize:_,unit:j,value:u,children:l=>{let{displayElement:o,displayValue:i,dragging:t,handleDragStart:d,inputElement:n}=l,p=null!=f,_=(0,r.scale)(f??i,m,c),j=(0,r.scale)(i,m,c),P=g||(0,r.keyOfMatchingRange)(f??u,h)||"default";return(0,s.jsxs)("div",{className:(0,e.classes)(["Slider","ProgressBar",`ProgressBar--color--${P}`,x,(0,a.computeBoxClassName)(N)]),...(0,a.computeBoxProps)(N),onMouseDown:d,children:[(0,s.jsx)("div",{className:(0,e.classes)(["ProgressBar__fill",p&&"ProgressBar__fill--animated"]),style:{opacity:.4,width:`${100*(0,r.clamp01)(_)}%`}}),(0,s.jsx)("div",{className:"ProgressBar__fill",style:{width:`${100*(0,r.clamp01)(Math.min(_,j))}%`}}),(0,s.jsxs)("div",{className:"Slider__cursorOffset",style:{width:`${100*(0,r.clamp01)(j)}%`},children:[(0,s.jsx)("div",{className:"Slider__cursor"}),(0,s.jsx)("div",{className:"Slider__pointer"}),t&&(0,s.jsx)("div",{className:"Slider__popupValue",children:o})]}),(0,s.jsx)("div",{className:"ProgressBar__content",children:B?v:o}),n]})}})}export{o as Slider};
1
+ import{jsx as r,jsxs as e}from"react/jsx-runtime";import{clamp01 as s,keyOfMatchingRange as i,scale as o}from"../common/math.js";import{classes as l}from"../common/react.js";import{computeBoxClassName as a,computeBoxProps as t}from"../common/ui.js";import{DraggableControl as m}from"./DraggableControl.js";function d(d){let{animated:c,format:n,maxValue:_,minValue:f,onChange:u,onDrag:p,step:h,stepPixelSize:g,unit:v,value:N,className:B,fillValue:P,color:S,ranges:j={},children:w,...y}=d,$=void 0!==w;return r(m,{dragMatrix:[1,0],animated:c,format:n,maxValue:_,minValue:f,onChange:u,onDrag:p,step:h,stepPixelSize:g,unit:v,value:N,children:m=>{let{displayElement:d,displayValue:c,dragging:n,handleDragStart:u,inputElement:p}=m,h=null!=P,g=o(P??c,f,_),v=o(c,f,_),x=S||i(P??N,j)||"default";return e("div",{className:l(["Slider","ProgressBar",`ProgressBar--color--${x}`,B,a(y)]),...t(y),onMouseDown:u,children:[r("div",{className:l(["ProgressBar__fill",h&&"ProgressBar__fill--animated"]),style:{opacity:.4,width:`${100*s(g)}%`}}),r("div",{className:"ProgressBar__fill",style:{width:`${100*s(Math.min(g,v))}%`}}),e("div",{className:"Slider__cursorOffset",style:{width:`${100*s(v)}%`},children:[r("div",{className:"Slider__cursor"}),r("div",{className:"Slider__pointer"}),n&&r("div",{className:"Slider__popupValue",children:d})]}),r("div",{className:"ProgressBar__content",children:$?w:d}),p]})}})}export{d as Slider};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";import*as r from"../common/react.js";import*as s from"../common/ui.js";import*as a from"./Flex.js";function c(t){let{className:s,vertical:c,fill:o,reverse:m,zebra:i,...l}=t,n=m?"-reverse":"";return(0,e.jsx)("div",{className:(0,r.classes)(["Stack",o&&"Stack--fill",c?"Stack--vertical":"Stack--horizontal",i&&"Stack--zebra",m&&`Stack--reverse${c?"--vertical":""}`,s,(0,a.computeFlexClassName)(t)]),...(0,a.computeFlexProps)({direction:`${c?"column":"row"}${n}`,...l})})}c.Item=function(c){let{className:o,innerRef:m,...i}=c,l=(0,t.useRef)(m?.current??null);return(0,e.jsx)("div",{className:(0,r.classes)(["Stack__item",o,(0,s.computeBoxClassName)(i)]),ref:l,...(0,a.computeFlexItemProps)(i)})},c.Divider=function(t){let{className:c,hidden:o,...m}=t;return(0,e.jsx)("div",{className:(0,r.classes)(["Stack__item","Stack__divider",o&&"Stack__divider--hidden",c,(0,s.computeBoxClassName)(m)]),...(0,a.computeFlexItemProps)(m)})};export{c as Stack};
1
+ import{jsx as t}from"react/jsx-runtime";import{classes as r}from"../common/react.js";import{computeBoxClassName as e}from"../common/ui.js";import{useRef as i}from"react";import{computeFlexClassName as c,computeFlexItemProps as a,computeFlexProps as o}from"./Flex.js";function m(e){let{className:i,vertical:a,fill:m,reverse:n,zebra:l,...s}=e,d=n?"-reverse":"";return t("div",{className:r(["Stack",m&&"Stack--fill",a?"Stack--vertical":"Stack--horizontal",l&&"Stack--zebra",n&&`Stack--reverse${a?"--vertical":""}`,i,c(e)]),...o({direction:`${a?"column":"row"}${d}`,...s})})}m.Item=function(c){let{className:o,innerRef:m,...n}=c,l=i(m?.current??null);return t("div",{className:r(["Stack__item",o,e(n)]),ref:l,...a(n)})},m.Divider=function(i){let{className:c,hidden:o,...m}=i;return t("div",{className:r(["Stack__item","Stack__divider",o&&"Stack__divider--hidden",c,e(m)]),...a(m)})};export{m as Stack};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"./Box.js";function s(s){let{children:c,titleStyle:o,titleSubtext:i,title:l,textStyle:n,style:r}=s;return(0,e.jsxs)(t.Box,{style:r,children:[(0,e.jsxs)(t.Box,{className:"Section__title",style:o,children:[(0,e.jsx)(t.Box,{className:"Section__titleText",style:n,children:l}),(0,e.jsx)("div",{className:"Section__buttons",children:i})," "]}),(0,e.jsx)(t.Box,{className:"Section__rest",children:(0,e.jsx)(t.Box,{className:"Section__content",children:c})})]})}export{s as StyleableSection};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Box as c}from"./Box.js";function i(i){let{children:l,titleStyle:n,titleSubtext:s,title:r,textStyle:o,style:a}=i;return t(c,{style:a,children:[t(c,{className:"Section__title",style:n,children:[e(c,{className:"Section__titleText",style:o,children:r}),e("div",{className:"Section__buttons",children:s})," "]}),e(c,{className:"Section__rest",children:e(c,{className:"Section__content",children:l})})]})}export{i as StyleableSection};
@@ -1 +1 @@
1
- var e;import*as a from"react/jsx-runtime";import*as l from"../common/react.js";import*as s from"../common/ui.js";function o(e){let{className:o,collapsing:c,children:r,...t}=e;return(0,a.jsx)("table",{className:(0,l.classes)(["Table",c&&"Table--collapsing",o,(0,s.computeBoxClassName)(t)]),...(0,s.computeBoxProps)(t),children:(0,a.jsx)("tbody",{children:r})})}(e=o||(o={})).Cell=function(e){let{className:o,collapsing:c,colSpan:r,header:t,...m}=e;return(0,a.jsx)("td",{className:(0,l.classes)(["Table__cell",c&&"Table__cell--collapsing",t&&"Table__cell--header",o,(0,s.computeBoxClassName)(e)]),colSpan:r,...(0,s.computeBoxProps)(m)})},e.Row=function(e){let{className:o,header:c,...r}=e;return(0,a.jsx)("tr",{className:(0,l.classes)(["Table__row",c&&"Table__row--header",o,(0,s.computeBoxClassName)(e)]),...(0,s.computeBoxProps)(r)})};export{o as Table};
1
+ var e;import{jsx as l}from"react/jsx-runtime";import{classes as a}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as o}from"../common/ui.js";function t(e){let{className:t,collapsing:c,children:n,...m}=e;return l("table",{className:a(["Table",c&&"Table--collapsing",t,r(m)]),...o(m),children:l("tbody",{children:n})})}(e=t||(t={})).Cell=function(e){let{className:t,collapsing:c,colSpan:n,header:m,...b}=e;return l("td",{className:a(["Table__cell",c&&"Table__cell--collapsing",m&&"Table__cell--header",t,r(e)]),colSpan:n,...o(b)})},e.Row=function(e){let{className:t,header:c,...n}=e;return l("tr",{className:a(["Table__row",c&&"Table__row--header",t,r(e)]),...o(n)})};export{t as Table};
@@ -1 +1 @@
1
- import*as s from"react/jsx-runtime";import*as a from"../common/react.js";import*as e from"../common/ui.js";import*as c from"./Icon.js";function o(c){let{className:o,vertical:r,fill:i,fluid:l,children:n,...t}=c;return(0,s.jsx)("div",{className:(0,a.classes)(["Tabs",r?"Tabs--vertical":"Tabs--horizontal",i&&"Tabs--fill",l&&"Tabs--fluid",o,(0,e.computeBoxClassName)(t)]),...(0,e.computeBoxProps)(t),children:n})}(o||(o={})).Tab=function(o){let{className:r,selected:i,color:l,icon:n,iconSpin:t,leftSlot:m,rightSlot:b,children:T,onClick:d,...x}=o;return(0,s.jsxs)("div",{className:(0,a.classes)(["Tab","Tabs__Tab",`Tab--color--${l}`,i&&"Tab--selected",r,(0,e.computeBoxClassName)(x)]),onClick:function(s){d&&d(s)},...(0,e.computeBoxProps)(x),children:[(0,a.canRender)(m)&&(0,s.jsx)("div",{className:"Tab__left",children:m})||!!n&&(0,s.jsx)("div",{className:"Tab__left",children:(0,s.jsx)(c.Icon,{name:n,spin:t})}),(0,s.jsx)("div",{className:"Tab__text",children:T}),(0,a.canRender)(b)&&(0,s.jsx)("div",{className:"Tab__right",children:b})]})};export{o as Tabs};
1
+ import{jsx as a,jsxs as e}from"react/jsx-runtime";import{canRender as i,classes as s}from"../common/react.js";import{computeBoxClassName as r,computeBoxProps as c}from"../common/ui.js";import{Icon as l}from"./Icon.js";function t(e){let{className:i,vertical:l,fill:t,fluid:n,children:o,...m}=e;return a("div",{className:s(["Tabs",l?"Tabs--vertical":"Tabs--horizontal",t&&"Tabs--fill",n&&"Tabs--fluid",i,r(m)]),...c(m),children:o})}(t||(t={})).Tab=function(t){let{className:n,selected:o,color:m,icon:b,iconSpin:T,leftSlot:d,rightSlot:f,children:_,onClick:h,...u}=t;return e("div",{className:s(["Tab","Tabs__Tab",`Tab--color--${m}`,o&&"Tab--selected",n,r(u)]),onClick:function(a){h&&h(a)},...c(u),children:[i(d)&&a("div",{className:"Tab__left",children:d})||!!b&&a("div",{className:"Tab__left",children:a(l,{name:b,spin:T})}),a("div",{className:"Tab__text",children:_}),i(f)&&a("div",{className:"Tab__right",children:f})]})};export{t as Tabs};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"../common/timer.js";import*as r from"react";import*as n from"../common/keys.js";import*as u from"../common/react.js";import*as a from"../common/ui.js";let o=(0,t.debounce)(e=>e(),250);function s(t){let{autoFocus:s,autoSelect:c,className:l,disabled:m,dontUseTabForIndent:i,expensive:f,fluid:p,maxLength:g,monospace:T,onBlur:b,onChange:v,onEnter:y,onEscape:x,onKeyDown:E,placeholder:d,ref:k,selfClear:$,userMarkup:h,value:j,...K}=t,C=(0,r.useRef)(null),D=k??C,[I,B]=(0,r.useState)(j??"");(0,r.useEffect)(()=>{(s||c)&&setTimeout(()=>{D.current?.focus(),c&&D.current?.select()},1)},[]),(0,r.useEffect)(()=>{D.current&&document.activeElement!==D.current&&j!==I&&B(j??"")},[j]);let A=(0,a.computeBoxProps)(K),N=(0,u.classes)(["Input","TextArea",p&&"Input--fluid",T&&"Input--monospace",m&&"Input--disabled",(0,a.computeBoxClassName)(K),l]);return(0,e.jsx)("textarea",{...A,autoComplete:"off",className:N,maxLength:g,onBlur:function(e){b?.(I)},onChange:function(e){let t=e.currentTarget.value;B(t),v&&(f?o(()=>v(t)):v(t))},onKeyDown:function(e){if(E?.(e),e.key===n.KEY.Enter&&!e.shiftKey){e.preventDefault(),y?.(e.currentTarget.value),$&&B(""),e.currentTarget.blur();return}if((0,n.isEscape)(e.key)){x?.(e.currentTarget.value),e.currentTarget.blur();return}if(!i&&e.key===n.KEY.Tab){e.preventDefault();let{value:t,selectionStart:r,selectionEnd:n}=e.currentTarget;B(`${t.substring(0,r)} ${t.substring(n)}`),e.currentTarget.selectionEnd=r+1,v?.(e.currentTarget.value);return}if(h&&(e.ctrlKey||e.metaKey)&&h[e.key]){e.preventDefault();let{selectionStart:t,selectionEnd:r,value:n}=e.currentTarget,u=h[e.key];B(`${n.substring(0,t)}${u}${n.substring(t,r)}${u}${n.substring(r)}`),e.currentTarget.selectionEnd=r+2*u.length,v?.(e.currentTarget.value);return}},placeholder:d,ref:D,spellCheck:!1,value:I})}export{s as TextArea};
1
+ import{jsx as e}from"react/jsx-runtime";import{KEY as t,isEscape as r}from"../common/keys.js";import{classes as n}from"../common/react.js";import{computeBoxClassName as u,computeBoxProps as o}from"../common/ui.js";import{debounce as a}from"../common/timer.js";import{useEffect as c,useRef as l,useState as m}from"react";let i=a(e=>e(),250);function s(a){let{autoFocus:s,autoSelect:f,className:g,disabled:p,dontUseTabForIndent:T,expensive:v,fluid:y,maxLength:b,monospace:d,onBlur:k,onChange:$,onEnter:h,onEscape:x,onKeyDown:j,placeholder:D,ref:E,selfClear:I,userMarkup:K,value:C,...A}=a,w=l(null),B=E??w,[L,N]=m(C??"");c(()=>{(s||f)&&setTimeout(()=>{B.current?.focus(),f&&B.current?.select()},1)},[]),c(()=>{B.current&&document.activeElement!==B.current&&C!==L&&N(C??"")},[C]);let q=o(A),z=n(["Input","TextArea",y&&"Input--fluid",d&&"Input--monospace",p&&"Input--disabled",u(A),g]);return e("textarea",{...q,autoComplete:"off",className:z,maxLength:b,onBlur:function(e){k?.(L)},onChange:function(e){let t=e.currentTarget.value;N(t),$&&(v?i(()=>$(t)):$(t))},onKeyDown:function(e){if(j?.(e),e.key===t.Enter&&!e.shiftKey){e.preventDefault(),h?.(e.currentTarget.value),I&&N(""),e.currentTarget.blur();return}if(r(e.key)){x?.(e.currentTarget.value),e.currentTarget.blur();return}if(!T&&e.key===t.Tab){e.preventDefault();let{value:t,selectionStart:r,selectionEnd:n}=e.currentTarget;N(`${t.substring(0,r)} ${t.substring(n)}`),e.currentTarget.selectionEnd=r+1,$?.(e.currentTarget.value);return}if(K&&(e.ctrlKey||e.metaKey)&&K[e.key]){e.preventDefault();let{selectionStart:t,selectionEnd:r,value:n}=e.currentTarget,u=K[e.key];N(`${n.substring(0,t)}${u}${n.substring(t,r)}${u}${n.substring(r)}`),e.currentTarget.selectionEnd=r+2*u.length,$?.(e.currentTarget.value);return}},placeholder:D,ref:B,spellCheck:!1,value:L})}export{s as TextArea};
@@ -1 +1 @@
1
- import*as e from"react";import*as t from"../common/format.js";import*as r from"../common/math.js";function a(a){let{value:m=0,auto:u,format:o}=a,[s,f]=(0,e.useState)(()=>(0,r.isSafeNumber)(m)?m:0),[i,n]=(0,e.useState)((0,r.isSafeNumber)(m)?m:void 0),l=(0,e.useRef)(null);return((0,e.useEffect)(()=>(void 0!==u&&(l.current=setInterval(()=>{let e="up"===u?10:-10;f(t=>Math.max(0,t+e))},1e3)),()=>{l.current&&clearInterval(l.current)}),[u]),(0,e.useEffect)(()=>{m!==i&&(n(m),f(m))},[m,i]),(0,r.isSafeNumber)(m))?o?o(s):(0,t.formatTime)(s):m||null}export{a as TimeDisplay};
1
+ import{formatTime as r}from"../common/format.js";import{isSafeNumber as t}from"../common/math.js";import{useEffect as e,useRef as o,useState as m}from"react";function n(n){let{value:l=0,auto:a,format:u}=n,[c,i]=m(()=>t(l)?l:0),[p,f]=m(t(l)?l:void 0),v=o(null);return(e(()=>(void 0!==a&&(v.current=setInterval(()=>{let r="up"===a?10:-10;i(t=>Math.max(0,t+r))},1e3)),()=>{v.current&&clearInterval(v.current)}),[a]),e(()=>{l!==p&&(f(l),i(l))},[l,p]),t(l))?u?u(c):r(c):l||null}export{n as TimeDisplay};
@@ -1 +1 @@
1
- import*as t from"react/jsx-runtime";import*as o from"./Floating.js";function n(n){let{content:e,children:r,position:i}=n;return(0,t.jsx)(o.Floating,{content:e,contentAutoWidth:!1,contentClasses:"Tooltip",hoverOpen:!0,placement:i,children:r})}export{n as Tooltip};
1
+ import{jsx as t}from"react/jsx-runtime";import{Floating as o}from"./Floating.js";function e(e){let{content:n,children:r,position:i}=e;return t(o,{content:n,contentAutoWidth:!1,contentClasses:"Tooltip",hoverOpen:!0,placement:i,children:r})}export{e as Tooltip};
@@ -1 +1 @@
1
- import*as e from"react/jsx-runtime";import*as t from"react";function r(r){let{children:n,onOutsideClick:c}=r,i=(0,t.createRef)();function o(e){e.target instanceof Node&&i.current&&!i.current.contains(e.target)&&c()}return(0,t.useEffect)(()=>(document.addEventListener("click",o),()=>{document.removeEventListener("click",o)}),[]),(0,e.jsx)("div",{ref:i,style:{userSelect:"none"},children:n})}export{r as TrackOutsideClicks};
1
+ import{jsx as e}from"react/jsx-runtime";import{createRef as t,useEffect as r}from"react";function n(n){let{children:c,onOutsideClick:i}=n,o=t();function u(e){e.target instanceof Node&&o.current&&!o.current.contains(e.target)&&i()}return r(()=>(document.addEventListener("click",u),()=>{document.removeEventListener("click",u)}),[]),e("div",{ref:o,style:{userSelect:"none"},children:c})}export{n as TrackOutsideClicks};
@@ -1 +1 @@
1
- import*as t from"react/jsx-runtime";import*as e from"react";function a(a){let{children:r}=a,i=(0,e.useRef)(null),[l,s]=(0,e.useState)(1),[n,u]=(0,e.useState)(0),c=(0,e.useCallback)(()=>{let{current:t}=i;if(!r||!Array.isArray(r)||!t||l>=r.length)return;let e=document.body.offsetHeight-t.getBoundingClientRect().bottom,a=Math.ceil(t.offsetHeight/l);if(e>0){let t=Math.min(r.length,l+Math.max(1,Math.ceil(e/a)));s(t),u((r.length-t)*a)}},[i,l,r]);return(0,e.useEffect)(()=>{c();let t=setInterval(c,100);return()=>clearInterval(t)},[c]),(0,t.jsxs)("div",{className:"VirtualList",children:[(0,t.jsx)("div",{className:"VirtualList__Container",ref:i,children:Array.isArray(r)?r.slice(0,l):null}),(0,t.jsx)("div",{className:"VirtualList__Padding",style:{paddingBottom:`${n}px`}})]})}export{a as VirtualList};
1
+ import{jsx as t,jsxs as e}from"react/jsx-runtime";import{useCallback as r,useEffect as i,useRef as l,useState as a}from"react";function n(n){let{children:s}=n,o=l(null),[c,m]=a(1),[u,d]=a(0),h=r(()=>{let{current:t}=o;if(!s||!Array.isArray(s)||!t||c>=s.length)return;let e=document.body.offsetHeight-t.getBoundingClientRect().bottom,r=Math.ceil(t.offsetHeight/c);if(e>0){let t=Math.min(s.length,c+Math.max(1,Math.ceil(e/r)));m(t),d((s.length-t)*r)}},[o,c,s]);return i(()=>{h();let t=setInterval(h,100);return()=>clearInterval(t)},[h]),e("div",{className:"VirtualList",children:[t("div",{className:"VirtualList__Container",ref:o,children:Array.isArray(s)?s.slice(0,c):null}),t("div",{className:"VirtualList__Padding",style:{paddingBottom:`${u}px`}})]})}export{n as VirtualList};
@@ -1 +1 @@
1
- import*as o from"./AnimatedNumber.js";import*as e from"./Autofocus.js";import*as s from"./Blink.js";import*as a from"./BlockQuote.js";import*as _ from"./Box.js";import*as r from"./Button.js";import*as t from"./ByondUi.js";import*as p from"./Chart.js";import*as i from"./Collapsible.js";import*as m from"./ColorBox.js";import*as l from"./Dialog.js";import*as n from"./Dimmer.js";import*as c from"./Divider.js";import*as b from"./DmIcon.js";import*as x from"./DraggableControl.js";import*as k from"./Dropdown.js";import*as u from"./FitText.js";import*as f from"./Flex.js";import*as w from"./Floating.js";import*as j from"./Icon.js";import*as d from"./Image.js";import*as B from"./ImageButton.js";import*as g from"./InfinitePlane.js";import*as I from"./Input.js";import*as D from"./KeyListener.js";import*as T from"./Knob.js";import*as C from"./LabeledControls.js";import*as L from"./LabeledList.js";import*as S from"./MenuBar.js";import*as y from"./Modal.js";import*as A from"./NoticeBox.js";import*as F from"./NumberInput.js";import*as N from"./Popper.js";import*as P from"./ProgressBar.js";import*as K from"./RestrictedInput.js";import*as M from"./RoundGauge.js";import*as R from"./Section.js";import*as v from"./Slider.js";import*as h from"./Stack.js";import*as G from"./StyleableSection.js";import*as O from"./Table.js";import*as Q from"./Tabs.js";import*as U from"./TextArea.js";import*as V from"./TimeDisplay.js";import*as q from"./Tooltip.js";import*as z from"./TrackOutsideClicks.js";import*as E from"./VirtualList.js";var H=o.AnimatedNumber,J=e.Autofocus,W=s.Blink,X=a.BlockQuote,Y=_.Box,Z=r.Button,$=t.ByondUi,oo=p.Chart,oe=i.Collapsible,os=m.ColorBox,oa=l.Dialog,o_=n.Dimmer,or=c.Divider,ot=b.DmIcon,op=x.DraggableControl,oi=k.Dropdown,om=u.FitText,ol=f.Flex,on=w.Floating,oc=j.Icon,ob=d.Image,ox=B.ImageButton,ok=g.InfinitePlane,ou=I.Input,of=D.KeyListener,ow=T.Knob,oj=C.LabeledControls,od=L.LabeledList,oB=S.MenuBar,og=y.Modal,oI=A.NoticeBox,oD=F.NumberInput,oT=N.Popper,oC=P.ProgressBar,oL=K.RestrictedInput,oS=M.RoundGauge,oy=R.Section,oA=v.Slider,oF=h.Stack,oN=G.StyleableSection,oP=O.Table,oK=Q.Tabs,oM=U.TextArea,oR=V.TimeDisplay,ov=q.Tooltip,oh=z.TrackOutsideClicks,oG=E.VirtualList;export{H as AnimatedNumber,J as Autofocus,W as Blink,X as BlockQuote,Y as Box,Z as Button,$ as ByondUi,oo as Chart,oe as Collapsible,os as ColorBox,oa as Dialog,o_ as Dimmer,or as Divider,ot as DmIcon,op as DraggableControl,oi as Dropdown,om as FitText,ol as Flex,on as Floating,oc as Icon,ob as Image,ox as ImageButton,ok as InfinitePlane,ou as Input,of as KeyListener,ow as Knob,oj as LabeledControls,od as LabeledList,oB as MenuBar,og as Modal,oI as NoticeBox,oD as NumberInput,oT as Popper,oC as ProgressBar,oL as RestrictedInput,oS as RoundGauge,oy as Section,oA as Slider,oF as Stack,oN as StyleableSection,oP as Table,oK as Tabs,oM as TextArea,oR as TimeDisplay,ov as Tooltip,oh as TrackOutsideClicks,oG as VirtualList};
1
+ import{AnimatedNumber as o}from"./AnimatedNumber.js";import{Autofocus as r}from"./Autofocus.js";import{Blink as m}from"./Blink.js";import{BlockQuote as t}from"./BlockQuote.js";import{Box as i}from"./Box.js";import{Button as e}from"./Button.js";import{ByondUi as s}from"./ByondUi.js";import{Chart as p}from"./Chart.js";import{Collapsible as f}from"./Collapsible.js";import{ColorBox as a}from"./ColorBox.js";import{Dialog as l}from"./Dialog.js";import{Dimmer as j}from"./Dimmer.js";import{Divider as n}from"./Divider.js";import{DmIcon as u}from"./DmIcon.js";import{DraggableControl as c}from"./DraggableControl.js";import{Dropdown as d}from"./Dropdown.js";import{FitText as b}from"./FitText.js";import{Flex as B}from"./Flex.js";import{Floating as g}from"./Floating.js";import{Icon as I}from"./Icon.js";import{Image as D}from"./Image.js";import{ImageButton as T}from"./ImageButton.js";import{InfinitePlane as x}from"./InfinitePlane.js";import{Input as C}from"./Input.js";import{KeyListener as k}from"./KeyListener.js";import{Knob as L}from"./Knob.js";import{LabeledControls as S}from"./LabeledControls.js";import{LabeledList as y}from"./LabeledList.js";import{MenuBar as A}from"./MenuBar.js";import{Modal as F}from"./Modal.js";import{NoticeBox as N}from"./NoticeBox.js";import{NumberInput as P}from"./NumberInput.js";import{Popper as K}from"./Popper.js";import{ProgressBar as M}from"./ProgressBar.js";import{RestrictedInput as R}from"./RestrictedInput.js";import{RoundGauge as h}from"./RoundGauge.js";import{Section as v}from"./Section.js";import{Slider as w}from"./Slider.js";import{Stack as G}from"./Stack.js";import{StyleableSection as O}from"./StyleableSection.js";import{Table as Q}from"./Table.js";import{Tabs as U}from"./Tabs.js";import{TextArea as V}from"./TextArea.js";import{TimeDisplay as q}from"./TimeDisplay.js";import{Tooltip as z}from"./Tooltip.js";import{TrackOutsideClicks as E}from"./TrackOutsideClicks.js";import{VirtualList as H}from"./VirtualList.js";export{o as AnimatedNumber,r as Autofocus,m as Blink,t as BlockQuote,i as Box,e as Button,s as ByondUi,p as Chart,f as Collapsible,a as ColorBox,l as Dialog,j as Dimmer,n as Divider,u as DmIcon,c as DraggableControl,d as Dropdown,b as FitText,B as Flex,g as Floating,I as Icon,D as Image,T as ImageButton,x as InfinitePlane,C as Input,k as KeyListener,L as Knob,S as LabeledControls,y as LabeledList,A as MenuBar,F as Modal,N as NoticeBox,P as NumberInput,K as Popper,M as ProgressBar,R as RestrictedInput,h as RoundGauge,v as Section,w as Slider,G as Stack,O as StyleableSection,Q as Table,U as Tabs,V as TextArea,q as TimeDisplay,z as Tooltip,E as TrackOutsideClicks,H as VirtualList};
package/package.json CHANGED
@@ -1,30 +1,25 @@
1
1
  {
2
2
  "author": "jlsnow301",
3
3
  "dependencies": {
4
- "@floating-ui/react": "^0.27.8",
4
+ "@floating-ui/react": "^0.27.12",
5
5
  "@nozbe/microfuzz": "^1.0.0"
6
6
  },
7
7
  "description": "TGUI core component library",
8
8
  "devDependencies": {
9
- "@biomejs/biome": "^2.0.0-beta.5",
10
- "@rsbuild/core": "^1.3.20",
11
- "@rsbuild/plugin-react": "^1.3.1",
12
- "@rsbuild/plugin-sass": "^1.3.1",
13
- "@rslib/core": "^0.7.1",
14
- "@storybook/addon-console": "^3.0.0",
15
- "@storybook/addon-essentials": "^8.6.14",
16
- "@storybook/blocks": "^8.6.14",
17
- "@storybook/react": "^8.6.14",
18
- "@storybook/test": "^8.6.14",
19
- "@storybook/theming": "^8.6.14",
20
- "@types/bun": "^1.2.13",
21
- "@types/react": "^19.1.4",
22
- "@types/react-dom": "^19.1.5",
9
+ "@biomejs/biome": "^2.0.0-beta.6",
10
+ "@rsbuild/core": "^1.3.22",
11
+ "@rsbuild/plugin-react": "^1.3.2",
12
+ "@rsbuild/plugin-sass": "^1.3.2",
13
+ "@rslib/core": "^0.9.2",
14
+ "@storybook/addon-docs": "^9.0.6",
15
+ "@types/bun": "^1.2.15",
16
+ "@types/react": "^19.1.7",
17
+ "@types/react-dom": "^19.1.6",
23
18
  "prettier": "^3.5.3",
24
- "sass": "^1.89.0",
25
- "storybook": "^8.6.14",
19
+ "sass": "^1.89.2",
20
+ "storybook": "^9.0.6",
26
21
  "storybook-addon-sass-postcss": "^0.3.2",
27
- "storybook-react-rsbuild": "^1.0.1",
22
+ "storybook-react-rsbuild": "^2.0.1",
28
23
  "typescript": "^5.8.3"
29
24
  },
30
25
  "exports": {
@@ -55,7 +50,7 @@
55
50
  ],
56
51
  "license": "MIT",
57
52
  "name": "tgui-core",
58
- "packageManager": "bun@1.2.13",
53
+ "packageManager": "bun@1.2.15",
59
54
  "peerDependencies": {
60
55
  "react": "^19.1.0",
61
56
  "react-dom": "^19.1.0"
@@ -73,5 +68,5 @@
73
68
  "test": "bun test"
74
69
  },
75
70
  "type": "module",
76
- "version": "4.0.3"
71
+ "version": "4.0.4"
77
72
  }
@@ -143,6 +143,7 @@ $border-radius: 0 !default;
143
143
 
144
144
  /* Do not move it down, cause it will override selected by specificity */
145
145
  .Button--color--transparent {
146
+ cursor: var(--cursor-pointer);
146
147
  color: var(--button-color-transparent);
147
148
 
148
149
  &:not(.Button--disabled) {
@@ -180,7 +181,7 @@ $border-radius: 0 !default;
180
181
  }
181
182
 
182
183
  .Button--disabled {
183
- cursor: var(--cursor-disabled);
184
+ cursor: var(--cursor-disabled) !important;
184
185
  opacity: 0.5;
185
186
  }
186
187
 
@@ -18,6 +18,11 @@
18
18
  align-content: center;
19
19
  }
20
20
 
21
+ &--fluid {
22
+ flex: 1;
23
+ width: 100%;
24
+ }
25
+
21
26
  &__control {
22
27
  display: flex;
23
28
  overflow: hidden;
@@ -33,6 +38,7 @@
33
38
  flex: 1;
34
39
  display: inline-block;
35
40
  align-content: center;
41
+ overflow: hidden;
36
42
  text-overflow: ellipsis;
37
43
  white-space: nowrap;
38
44
  height: 100%;
@@ -1,5 +1,5 @@
1
1
  .Input {
2
- font-size: 1rem;
2
+ font-size: 1em;
3
3
  background-color: var(--input-background);
4
4
  border-radius: var(--input-border-radius);
5
5
  border: var(--border-thickness-tiny) solid var(--input-border-color);
@@ -11,3 +11,13 @@
11
11
  }
12
12
  @return math.div($value, $value * 0 + 1);
13
13
  }
14
+
15
+ // Increases perceptual color lightness.
16
+ @function lighten($color, $amount) {
17
+ @return color.adjust($color, $lightness: $amount * 1%, $space: hsl);
18
+ }
19
+
20
+ // Decreases perceptual color lightness.
21
+ @function darken($color, $amount) {
22
+ @return color.adjust($color, $lightness: -$amount * 1%, $space: hsl);
23
+ }
package/styles/reset.scss CHANGED
@@ -15,6 +15,7 @@ html {
15
15
 
16
16
  body {
17
17
  overflow: auto;
18
+ position: relative;
18
19
  font-family: var(--font-family, Verdana, Geneva, sans-serif);
19
20
  }
20
21