@arcanejs/toolkit 0.3.0 → 0.5.0

package/dist/{chunk-H2UQDFTS.mjs → chunk-SN2XKRYX.mjs}

@@ -1,21 +1,27 @@
 import {
   Base,
   EventEmitter
-} from "./chunk-EDTJ75FT.mjs";
+} from "./chunk-PW7QVLLF.mjs";
 
 // src/backend/components/slider-button.ts
 var DEFAULT_PROPS = {
-  value: null,
   min: 0,
   max: 255,
-  step: 5,
-  mode: "writeBack"
+  step: 5
 };
 var SliderButton = class extends Base {
   /** @hidden */
   events = new EventEmitter();
+  /**
+   * Manually manage the state of the slider,
+   * to support both controlled and uncontrolled inputs.
+   */
+  _value = null;
   constructor(props) {
-    super(DEFAULT_PROPS, props);
+    super(DEFAULT_PROPS, props, {
+      onPropsUpdated: () => this.onPropsUpdated()
+    });
+    this.onPropsUpdated();
   }
   addListener = this.events.addListener;
   removeListener = this.events.removeListener;
@@ -27,23 +33,29 @@ var SliderButton = class extends Base {
       min: this.props.min,
       max: this.props.max,
       step: this.props.step,
-      value: this.props.value
+      value: this._value,
+      gradient: this.props.gradient,
+      grow: this.props.grow
     };
   }
   /** @hidden */
   handleMessage(message) {
     if (message.component !== "slider_button") return;
     const newValue = this.sanitizeNumber(message.value);
-    if (this.props.value === newValue) return;
-    if (this.props.mode === "writeBack") {
-      this.updateProps({ value: newValue });
+    if (this._value === newValue) return;
+    if (this.props.value === void 0) {
+      this._value = newValue;
+      this.updateTree();
     }
     this.events.emit("change", newValue);
   }
   setValue(value) {
+    if (this.props.value) {
+      throw new Error("Cannot set value on controlled input");
+    }
     const newValue = this.sanitizeNumber(value);
-    if (newValue === this.props.value) return;
-    this.updateProps({ value });
+    if (this._value === newValue) return;
+    this._value = newValue;
     this.updateTree();
   }
   sanitizeNumber(value) {
@@ -52,6 +64,13 @@ var SliderButton = class extends Base {
     const clampedValue = Math.max(this.props.min, Math.min(this.props.max, v));
     return clampedValue;
   }
+  onPropsUpdated = () => {
+    if (this.props.value !== void 0) {
+      this._value = this.props.value;
+    } else if (this._value === null && this.props.defaultValue) {
+      this._value = this.props.defaultValue;
+    }
+  };
 };
 
 export {

package/dist/frontend.js

@@ -1109,7 +1109,7 @@
             var dispatcher = resolveDispatcher();
             return dispatcher.useLayoutEffect(create, deps);
           }
-          function useCallback(callback, deps) {
+          function useCallback2(callback, deps) {
             var dispatcher = resolveDispatcher();
             return dispatcher.useCallback(callback, deps);
           }
@@ -1876,7 +1876,7 @@
           exports.memo = memo;
           exports.startTransition = startTransition;
           exports.unstable_act = act;
-          exports.useCallback = useCallback;
+          exports.useCallback = useCallback2;
           exports.useContext = useContext2;
           exports.useDebugValue = useDebugValue;
           exports.useDeferredValue = useDeferredValue;
@@ -26144,11 +26144,13 @@ body {
   transition: border-color 0s;
 `;
 
-  // ../toolkit-frontend/dist/chunk-3MWB6MZI.mjs
+  // ../toolkit-frontend/dist/chunk-UJVH3PQF.mjs
   var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
   var core_exports = {};
   __export(core_exports, {
-    Icon: () => Icon
+    Icon: () => Icon,
+    TRANSPARENCY_SVG: () => TRANSPARENCY_SVG,
+    TRANSPARENCY_SVG_URI: () => TRANSPARENCY_SVG_URI
   });
   var ICON_CLASS = "icon";
   var Span = dt.span`
@@ -26168,6 +26170,14 @@ body {
     'GRAD' -25;
 `;
   var Icon = ({ icon, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Span, { className: calculateClass(props.className, ICON_CLASS), ...props, children: icon });
+  var TRANSPARENCY_SVG = `
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
+  <rect width="10px" height="10px" fill="#333" />
+  <rect width="5px" height="5px" fill="#ddd" y="5"/>
+  <rect width="5px" height="5px" fill="#ddd" x="5"/>
+</svg>
+`;
+  var TRANSPARENCY_SVG_URI = `data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}`;
 
   // ../toolkit-frontend/dist/components/index.mjs
   var import_react3 = __toESM(require_react(), 1);
@@ -26493,29 +26503,30 @@ body {
   font-weight: ${(p2) => p2.info.bold ? "bold" : "normal"};
   white-space: nowrap;
 `;
-  var TRANSPARENCY_SVG = `
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10">
-  <rect width="10px" height="10px" fill="#333" />
-  <rect width="5px" height="5px" fill="#ddd" y="5"/>
-  <rect width="5px" height="5px" fill="#ddd" x="5"/>
-</svg>
-`;
+  var CLS_GROW = "grow";
   var Wrapper = dt.div`
-  width: 30px;
+  min-width: 30px;
   height: 30px;
   border-radius: 3px;
   overflow: hidden;
-  background: url('data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}');
+  background: url('${TRANSPARENCY_SVG_URI}');
   background-repeat: repeat;
   background-size: 10px;
+  border: 1px solid ${THEME.borderDark};
+
+  &.${CLS_GROW} {
+    flex-grow: 1;
+  }
 `;
   var Inner = dt.div`
   width: 100%;
   height: 100%;
 `;
-  var Rect = ({ className, info }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Wrapper, { className, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Inner, { style: { backgroundColor: info.color } }) });
+  var Rect = ({ className, info }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Wrapper, { className: calculateClass(className, info.grow && CLS_GROW), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Inner, { style: { backgroundColor: info.color } }) });
   var CLASS_SLIDER_DISPLAY = "slider-display";
   var CLASS_SLIDER_VALUE = "slider-value";
+  var CLASS_GRADIENT = "gradient";
+  var CLASS_GROW = "grow";
   var OPEN_SLIDER_WIDTH = 400;
   var SLIDER_PADDING = 15;
   var SLIDER_VALUE_WIDTH = 60;
@@ -26535,37 +26546,49 @@ body {
     const rect = elem.getBoundingClientRect();
     return pageX - rect.left;
   };
-  var SliderButton = (props) => {
+  var SliderButton = ({ info, sendMessage, className }) => {
     const [state, setState] = import_react7.default.useState({ state: "closed" });
     const input = import_react7.default.useRef(null);
     const displayValue = (value2) => {
-      if (props.info.max === 1 && props.info.min === 0) {
+      if (info.max === 1 && info.min === 0) {
         return `${Math.round(value2 * 100)}%`;
       }
       return NUMBER_FORMATTER.format(value2);
     };
-    const sendValue = (value2) => props.sendMessage?.({
-      type: "component-message",
-      componentKey: props.info.key,
-      component: "slider_button",
-      value: value2
-    });
-    const getNewValue = (startValue, diff) => {
-      return sanitizeValue((startValue || 0) + diff);
-    };
-    const sanitizeValue = (value2) => {
-      const i2 = Math.round((value2 - props.info.min) / props.info.step);
-      const v2 = i2 * props.info.step + props.info.min;
-      return Math.max(props.info.min, Math.min(props.info.max, v2));
-    };
-    const getCurrentInputValue = (e) => {
-      const float = parseFloat(e.currentTarget.value);
-      return sanitizeValue(isNaN(float) ? props.info.value || 0 : float);
-    };
+    const sendValue = (0, import_react7.useCallback)(
+      (value2) => sendMessage?.({
+        type: "component-message",
+        componentKey: info.key,
+        component: "slider_button",
+        value: value2
+      }),
+      [sendMessage, info.key]
+    );
+    const sanitizeValue = (0, import_react7.useCallback)(
+      (value2) => {
+        const i2 = Math.round((value2 - info.min) / info.step);
+        const v2 = i2 * info.step + info.min;
+        return Math.max(info.min, Math.min(info.max, v2));
+      },
+      [info.min, info.max, info.step]
+    );
+    const getNewValue = (0, import_react7.useCallback)(
+      (startValue, diff) => {
+        return sanitizeValue((startValue || 0) + diff);
+      },
+      [sanitizeValue]
+    );
+    const getCurrentInputValue = (0, import_react7.useCallback)(
+      (e) => {
+        const float = parseFloat(e.currentTarget.value);
+        return sanitizeValue(isNaN(float) ? info.value || 0 : float);
+      },
+      [info.value, sanitizeValue]
+    );
     const onKeyDown = (e) => {
       if (e.key === KEYS.ArrowDown || e.key === KEYS.ArrowUp) {
         const currentValue = getCurrentInputValue(e);
-        const diff = e.key === KEYS.ArrowUp ? props.info.step : -props.info.step;
+        const diff = e.key === KEYS.ArrowUp ? info.step : -info.step;
         const newValue = sanitizeValue(currentValue + diff);
         e.currentTarget.value = NUMBER_FORMATTER.format(newValue);
         sendValue(newValue);
@@ -26579,7 +26602,7 @@ body {
     };
     const onFocus = (e) => {
       setState({ state: "focused" });
-      e.currentTarget.value = `${props.info.value || 0}`;
+      e.currentTarget.value = `${info.value || 0}`;
     };
     const onBlur = () => {
       setState({ state: "closed" });
@@ -26596,13 +26619,13 @@ body {
           touch,
           (p2) => {
             const amntDiff = (p2.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
-            const newValueDiff = (props.info.max - props.info.min) * amntDiff;
+            const newValueDiff = (info.max - info.min) * amntDiff;
             sendValue(getNewValue(start.startValue, newValueDiff));
             setState({ ...start, diff: newValueDiff });
           },
           (p2) => {
             const amntDiff = (p2.pageX - originalPageX) / OPEN_SLIDER_INNER_WIDTH;
-            const newValueDiff = (props.info.max - props.info.min) * amntDiff;
+            const newValueDiff = (info.max - info.min) * amntDiff;
             sendValue(getNewValue(start.startValue, newValueDiff));
             setState({ state: "closed" });
           }
@@ -26611,12 +26634,12 @@ body {
       }
     };
     const onDown = (cursorStartPosition) => {
-      const value2 = props.info.value === null ? 0 : props.info.value;
-      const amnt = (value2 - props.info.min) / (props.info.max - props.info.min);
+      const value2 = info.value === null ? 0 : info.value;
+      const amnt = (value2 - info.min) / (info.max - info.min);
       const innerLeft = cursorStartPosition - amnt * OPEN_SLIDER_INNER_WIDTH - SLIDER_PADDING * 2 - SLIDER_VALUE_WIDTH + "px";
       const start = {
         state: "touching",
-        startValue: props.info.value,
+        startValue: info.value,
         startX: cursorStartPosition,
         innerLeft,
         diff: 0
@@ -26624,42 +26647,66 @@ body {
       setState(start);
       return start;
     };
-    const value = state.state === "touching" ? getNewValue(state.startValue, state.diff) : props.info.value;
+    const value = state.state === "touching" ? getNewValue(state.startValue, state.diff) : info.value;
     const valueDisplay = value !== null ? displayValue(value) : "";
-    const valueCSSPercent = value ? (value - props.info.min) / (props.info.max - props.info.min) * 100 + "%" : "0";
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: [props.className, `state-${state.state}`].join(" "), children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    const valueCSSPercent = value ? (value - info.min) / (info.max - info.min) * 100 + "%" : "0";
+    const gradientStops = info.gradient && info.gradient.map((g2) => `${g2.color} ${g2.position * 100}%`);
+    const sliderGradient = gradientStops ? {
+      background: `linear-gradient(90deg, ${gradientStops.join(", ")}), url(${TRANSPARENCY_SVG_URI})`
+    } : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       "div",
       {
-        className: "inner",
-        onMouseDown: () => setState({ state: "mouse-down" }),
-        onMouseUp: () => input.current?.focus(),
-        onTouchStart,
-        style: state.state === "touching" ? { left: state.innerLeft } : {},
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            "input",
-            {
-              type: "text",
-              ref: input,
-              onFocus,
-              onBlur,
-              onKeyDown
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: CLASS_SLIDER_DISPLAY, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "inner", style: { width: valueCSSPercent } }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay })
-        ]
+        className: calculateClass(
+          className,
+          `state-${state.state}`,
+          info.grow && CLASS_GROW
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            className: "inner",
+            onMouseDown: () => setState({ state: "mouse-down" }),
+            onMouseUp: () => input.current?.focus(),
+            onTouchStart,
+            style: state.state === "touching" ? { left: state.innerLeft } : {},
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "input",
+                {
+                  type: "text",
+                  ref: input,
+                  onFocus,
+                  onBlur,
+                  onKeyDown
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "div",
+                {
+                  className: calculateClass(
+                    CLASS_SLIDER_DISPLAY,
+                    sliderGradient && CLASS_GRADIENT
+                  ),
+                  style: sliderGradient,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "inner", style: { width: valueCSSPercent } })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: CLASS_SLIDER_VALUE, children: valueDisplay })
+            ]
+          }
+        )
       }
-    ) });
+    );
   };
   var StyledSliderButton = dt(SliderButton)`
   position: relative;
-  width: 100px;
-  height: 30px;
+  min-width: 100px;
+  min-height: 30px;
 
-  @media (max-width: 500px) {
-    flex-basis: 100%;
+  &.${CLASS_GROW} {
+    flex-grow: 1;
   }
 
   > .inner {
@@ -26703,6 +26750,36 @@ body {
         height: 100%;
         background: ${THEME.hint};
       }
+
+      &.${CLASS_GRADIENT} {
+        height: 10px;
+
+        > .inner {
+          position: relative;
+          background: none;
+          border-right: 2px solid ${THEME.borderDark};
+
+          &::before {
+            content: '';
+            position: absolute;
+            width: 4px;
+            top: -5px;
+            bottom: -5px;
+            right: -3px;
+            background: ${THEME.borderDark};
+          }
+
+          &::after {
+            content: '';
+            position: absolute;
+            width: 2px;
+            top: -4px;
+            bottom: -4px;
+            right: -2px;
+            background: ${THEME.textNormal};
+          }
+        }
+      }
     }
 
     > .${CLASS_SLIDER_VALUE} {