@tomorrowevening/theatre-studio 1.0.4 → 1.0.5

package/dist/uiComponents/colorPicker/utils/compare.d.ts

@@ -0,0 +1,5 @@
+import type { ObjectColor } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/types';
+export declare const equalColorObjects: (first: ObjectColor, second: ObjectColor) => boolean;
+export declare const equalColorString: (first: string, second: string) => boolean;
+export declare const equalHex: (first: string, second: string) => boolean;
+//# sourceMappingURL=compare.d.ts.map

package/dist/uiComponents/colorPicker/utils/compare.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"compare.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/utils/compare.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gEAAgE,CAAA;AAE/F,eAAO,MAAM,iBAAiB,UACrB,WAAW,UACV,WAAW,KAClB,OAiBF,CAAA;AAED,eAAO,MAAM,gBAAgB,UAAW,MAAM,UAAU,MAAM,KAAG,OAEhE,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,MAAM,UAAU,MAAM,KAAG,OAKxD,CAAA"}

package/dist/uiComponents/colorPicker/utils/compare.js

@@ -0,0 +1,25 @@
+import { hexToRgba } from './convert';
+export const equalColorObjects = (first, second) => {
+    if (first === second)
+        return true;
+    for (const prop in first) {
+        // The following allows for a type-safe calling of this function (first & second have to be HSL, HSV, or RGB)
+        // with type-unsafe iterating over object keys. TS does not allow this without an index (`[key: string]: number`)
+        // on an object to define how iteration is normally done. To ensure extra keys are not allowed on our types,
+        // we must cast our object to unknown (as RGB demands `r` be a key, while `Record<string, x>` does not care if
+        // there is or not), and then as a type TS can iterate over.
+        if (first[prop] !==
+            second[prop])
+            return false;
+    }
+    return true;
+};
+export const equalColorString = (first, second) => {
+    return first.replace(/\s/g, '') === second.replace(/\s/g, '');
+};
+export const equalHex = (first, second) => {
+    if (first.toLowerCase() === second.toLowerCase())
+        return true;
+    // To compare colors like `#FFF` and `ffffff` we convert them into RGB objects
+    return equalColorObjects(hexToRgba(first), hexToRgba(second));
+};

package/dist/uiComponents/colorPicker/utils/convert.d.ts

@@ -0,0 +1,27 @@
+import type { RgbaColor, RgbColor, HslaColor, HslColor, HsvaColor, HsvColor } from '@tomorrowevening/theatre-studio/uiComponents/colorPicker/types';
+export declare const hexToHsva: (hex: string) => HsvaColor;
+export declare const hexToRgba: (hex: string) => RgbaColor;
+export declare const parseHue: (value: string, unit?: string) => number;
+export declare const hslaStringToHsva: (hslString: string) => HsvaColor;
+export declare const hslStringToHsva: (hslString: string) => HsvaColor;
+export declare const hslaToHsva: ({ h, s, l, a }: HslaColor) => HsvaColor;
+export declare const hsvaToHex: (hsva: HsvaColor) => string;
+export declare const hsvaToHsla: ({ h, s, v, a }: HsvaColor) => HslaColor;
+export declare const hsvaToHslString: (hsva: HsvaColor) => string;
+export declare const hsvaToHsvString: (hsva: HsvaColor) => string;
+export declare const hsvaToHsvaString: (hsva: HsvaColor) => string;
+export declare const hsvaToHslaString: (hsva: HsvaColor) => string;
+export declare const hsvaToRgba: ({ h, s, v, a }: HsvaColor) => RgbaColor;
+export declare const hsvaToRgbString: (hsva: HsvaColor) => string;
+export declare const hsvaToRgbaString: (hsva: HsvaColor) => string;
+export declare const hsvaStringToHsva: (hsvString: string) => HsvaColor;
+export declare const hsvStringToHsva: (hsvString: string) => HsvaColor;
+export declare const rgbaStringToHsva: (rgbaString: string) => HsvaColor;
+export declare const rgbStringToHsva: (rgbaString: string) => HsvaColor;
+export declare const rgbaToHex: ({ r, g, b }: RgbaColor) => string;
+export declare const rgbaToHsva: ({ r, g, b, a }: RgbaColor) => HsvaColor;
+export declare const roundHsva: (hsva: HsvaColor) => HsvaColor;
+export declare const rgbaToRgb: ({ r, g, b }: RgbaColor) => RgbColor;
+export declare const hslaToHsl: ({ h, s, l }: HslaColor) => HslColor;
+export declare const hsvaToHsv: (hsva: HsvaColor) => HsvColor;
+//# sourceMappingURL=convert.d.ts.map

package/dist/uiComponents/colorPicker/utils/convert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"convert.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/utils/convert.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,MAAM,gEAAgE,CAAA;AAYvE,eAAO,MAAM,SAAS,QAAS,MAAM,KAAG,SAAuC,CAAA;AAE/E,eAAO,MAAM,SAAS,QAAS,MAAM,KAAG,SAkBvC,CAAA;AAED,eAAO,MAAM,QAAQ,UAAW,MAAM,oBAAiB,MAEtD,CAAA;AAED,eAAO,MAAM,gBAAgB,cAAe,MAAM,KAAG,SAapD,CAAA;AAED,eAAO,MAAM,eAAe,cAfgB,MAAM,KAAG,SAeN,CAAA;AAE/C,eAAO,MAAM,UAAU,mBAAkB,SAAS,KAAG,SASpD,CAAA;AAED,eAAO,MAAM,SAAS,SAAU,SAAS,KAAG,MACf,CAAA;AAE7B,eAAO,MAAM,UAAU,mBAAkB,SAAS,KAAG,SAapD,CAAA;AAED,eAAO,MAAM,eAAe,SAAU,SAAS,KAAG,MAGjD,CAAA;AAED,eAAO,MAAM,eAAe,SAAU,SAAS,KAAG,MAGjD,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAU,SAAS,KAAG,MAGlD,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAU,SAAS,KAAG,MAGlD,CAAA;AAED,eAAO,MAAM,UAAU,mBAAkB,SAAS,KAAG,SAiBpD,CAAA;AAED,eAAO,MAAM,eAAe,SAAU,SAAS,KAAG,MAGjD,CAAA;AAED,eAAO,MAAM,gBAAgB,SAAU,SAAS,KAAG,MAGlD,CAAA;AAED,eAAO,MAAM,gBAAgB,cAAe,MAAM,KAAG,SAapD,CAAA;AAED,eAAO,MAAM,eAAe,cAfgB,MAAM,KAAG,SAeN,CAAA;AAE/C,eAAO,MAAM,gBAAgB,eAAgB,MAAM,KAAG,SAarD,CAAA;AAED,eAAO,MAAM,eAAe,eAfiB,MAAM,KAAG,SAeP,CAAA;AAO/C,eAAO,MAAM,SAAS,gBAAe,SAAS,KAAG,MAEhD,CAAA;AAED,eAAO,MAAM,UAAU,mBAAkB,SAAS,KAAG,SAmBpD,CAAA;AAED,eAAO,MAAM,SAAS,SAAU,SAAS,KAAG,SAK1C,CAAA;AAEF,eAAO,MAAM,SAAS,gBAAe,SAAS,KAAG,QAAuB,CAAA;AAExE,eAAO,MAAM,SAAS,gBAAe,SAAS,KAAG,QAAuB,CAAA;AAExE,eAAO,MAAM,SAAS,SAAU,SAAS,KAAG,QAG3C,CAAA"}

package/dist/uiComponents/colorPicker/utils/convert.js

@@ -0,0 +1,165 @@
+import { round } from './round';
+/**
+ * Valid CSS <angle> units.
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/angle
+ */
+const angleUnits = {
+    grad: 360 / 400,
+    turn: 360,
+    rad: 360 / (Math.PI * 2),
+};
+export const hexToHsva = (hex) => rgbaToHsva(hexToRgba(hex));
+export const hexToRgba = (hex) => {
+    if (hex[0] === '#')
+        hex = hex.substr(1);
+    if (hex.length < 6) {
+        return {
+            r: parseInt(hex[0] + hex[0], 16),
+            g: parseInt(hex[1] + hex[1], 16),
+            b: parseInt(hex[2] + hex[2], 16),
+            a: 1,
+        };
+    }
+    return {
+        r: parseInt(hex.substr(0, 2), 16),
+        g: parseInt(hex.substr(2, 2), 16),
+        b: parseInt(hex.substr(4, 2), 16),
+        a: 1,
+    };
+};
+export const parseHue = (value, unit = 'deg') => {
+    return Number(value) * (angleUnits[unit] || 1);
+};
+export const hslaStringToHsva = (hslString) => {
+    const matcher = /hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+    const match = matcher.exec(hslString);
+    if (!match)
+        return { h: 0, s: 0, v: 0, a: 1 };
+    return hslaToHsva({
+        h: parseHue(match[1], match[2]),
+        s: Number(match[3]),
+        l: Number(match[4]),
+        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+    });
+};
+export const hslStringToHsva = hslaStringToHsva;
+export const hslaToHsva = ({ h, s, l, a }) => {
+    s *= (l < 50 ? l : 100 - l) / 100;
+    return {
+        h: h,
+        s: s > 0 ? ((2 * s) / (l + s)) * 100 : 0,
+        v: l + s,
+        a,
+    };
+};
+export const hsvaToHex = (hsva) => rgbaToHex(hsvaToRgba(hsva));
+export const hsvaToHsla = ({ h, s, v, a }) => {
+    const hh = ((200 - s) * v) / 100;
+    return {
+        h: round(h),
+        s: round(hh > 0 && hh < 200
+            ? ((s * v) / 100 / (hh <= 100 ? hh : 200 - hh)) * 100
+            : 0),
+        l: round(hh / 2),
+        a: round(a, 2),
+    };
+};
+export const hsvaToHslString = (hsva) => {
+    const { h, s, l } = hsvaToHsla(hsva);
+    return `hsl(${h}, ${s}%, ${l}%)`;
+};
+export const hsvaToHsvString = (hsva) => {
+    const { h, s, v } = roundHsva(hsva);
+    return `hsv(${h}, ${s}%, ${v}%)`;
+};
+export const hsvaToHsvaString = (hsva) => {
+    const { h, s, v, a } = roundHsva(hsva);
+    return `hsva(${h}, ${s}%, ${v}%, ${a})`;
+};
+export const hsvaToHslaString = (hsva) => {
+    const { h, s, l, a } = hsvaToHsla(hsva);
+    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+};
+export const hsvaToRgba = ({ h, s, v, a }) => {
+    h = (h / 360) * 6;
+    s = s / 100;
+    v = v / 100;
+    const hh = Math.floor(h), b = v * (1 - s), c = v * (1 - (h - hh) * s), d = v * (1 - (1 - h + hh) * s), module = hh % 6;
+    return {
+        r: round([v, c, b, b, d, v][module] * 255),
+        g: round([d, v, v, c, b, b][module] * 255),
+        b: round([b, b, d, v, v, c][module] * 255),
+        a: round(a, 2),
+    };
+};
+export const hsvaToRgbString = (hsva) => {
+    const { r, g, b } = hsvaToRgba(hsva);
+    return `rgb(${r}, ${g}, ${b})`;
+};
+export const hsvaToRgbaString = (hsva) => {
+    const { r, g, b, a } = hsvaToRgba(hsva);
+    return `rgba(${r}, ${g}, ${b}, ${a})`;
+};
+export const hsvaStringToHsva = (hsvString) => {
+    const matcher = /hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+    const match = matcher.exec(hsvString);
+    if (!match)
+        return { h: 0, s: 0, v: 0, a: 1 };
+    return roundHsva({
+        h: parseHue(match[1], match[2]),
+        s: Number(match[3]),
+        v: Number(match[4]),
+        a: match[5] === undefined ? 1 : Number(match[5]) / (match[6] ? 100 : 1),
+    });
+};
+export const hsvStringToHsva = hsvaStringToHsva;
+export const rgbaStringToHsva = (rgbaString) => {
+    const matcher = /rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i;
+    const match = matcher.exec(rgbaString);
+    if (!match)
+        return { h: 0, s: 0, v: 0, a: 1 };
+    return rgbaToHsva({
+        r: Number(match[1]) / (match[2] ? 100 / 255 : 1),
+        g: Number(match[3]) / (match[4] ? 100 / 255 : 1),
+        b: Number(match[5]) / (match[6] ? 100 / 255 : 1),
+        a: match[7] === undefined ? 1 : Number(match[7]) / (match[8] ? 100 : 1),
+    });
+};
+export const rgbStringToHsva = rgbaStringToHsva;
+const format = (number) => {
+    const hex = number.toString(16);
+    return hex.length < 2 ? '0' + hex : hex;
+};
+export const rgbaToHex = ({ r, g, b }) => {
+    return '#' + format(r) + format(g) + format(b);
+};
+export const rgbaToHsva = ({ r, g, b, a }) => {
+    const max = Math.max(r, g, b);
+    const delta = max - Math.min(r, g, b);
+    // prettier-ignore
+    const hh = delta
+        ? max === r
+            ? (g - b) / delta
+            : max === g
+                ? 2 + (b - r) / delta
+                : 4 + (r - g) / delta
+        : 0;
+    return {
+        h: round(60 * (hh < 0 ? hh + 6 : hh)),
+        s: round(max ? (delta / max) * 100 : 0),
+        v: round((max / 255) * 100),
+        a,
+    };
+};
+export const roundHsva = (hsva) => ({
+    h: round(hsva.h),
+    s: round(hsva.s),
+    v: round(hsva.v),
+    a: round(hsva.a, 2),
+});
+export const rgbaToRgb = ({ r, g, b }) => ({ r, g, b });
+export const hslaToHsl = ({ h, s, l }) => ({ h, s, l });
+export const hsvaToHsv = (hsva) => {
+    const { h, s, v } = roundHsva(hsva);
+    return { h, s, v };
+};

package/dist/uiComponents/colorPicker/utils/round.d.ts

@@ -0,0 +1,2 @@
+export declare const round: (number: number, digits?: number, base?: number) => number;
+//# sourceMappingURL=round.d.ts.map

package/dist/uiComponents/colorPicker/utils/round.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"round.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/utils/round.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,KAAK,WACR,MAAM,qCAGb,MAEF,CAAA"}

package/dist/uiComponents/colorPicker/utils/round.js

@@ -0,0 +1,3 @@
+export const round = (number, digits = 0, base = Math.pow(10, digits)) => {
+    return Math.round(base * number) / base;
+};

package/dist/uiComponents/colorPicker/utils/validate.d.ts

@@ -0,0 +1,2 @@
+export declare const validHex: (value: string, alpha?: boolean) => boolean;
+//# sourceMappingURL=validate.d.ts.map

package/dist/uiComponents/colorPicker/utils/validate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate.d.ts","sourceRoot":"","sources":["../../../../../../../studio/src/uiComponents/colorPicker/utils/validate.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,UAAW,MAAM,UAAU,OAAO,KAAG,OAUzD,CAAA"}

package/dist/uiComponents/colorPicker/utils/validate.js

@@ -0,0 +1,10 @@
+const matcher = /^#?([0-9A-F]{3,8})$/i;
+export const validHex = (value, alpha) => {
+    const match = matcher.exec(value);
+    const length = match ? match[1].length : 0;
+    return (length === 3 || // '#rgb' format
+        length === 6 || // '#rrggbb' format
+        (!!alpha && length === 4) || // '#rgba' format
+        (!!alpha && length === 8) // '#rrggbbaa' format
+    );
+};

package/dist/uiComponents/createCursorLock.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=createCursorLock.d.ts.map

package/dist/uiComponents/createCursorLock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createCursorLock.d.ts","sourceRoot":"","sources":["../../../../../studio/src/uiComponents/createCursorLock.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAE,CAAA"}

package/dist/uiComponents/createCursorLock.js

@@ -0,0 +1,2 @@
+// import getStudio from '@tomorrowevening/theatre-studio/getStudio'
+export {};

package/dist/uiComponents/form/BasicCheckbox.d.ts

@@ -0,0 +1,5 @@
+declare const BasicCheckbox: import("styled-components").StyledComponent<"input", any, {
+    type: "checkbox";
+}, "type">;
+export default BasicCheckbox;
+//# sourceMappingURL=BasicCheckbox.d.ts.map

package/dist/uiComponents/form/BasicCheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicCheckbox.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/form/BasicCheckbox.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,aAAa;;UAElB,CAAA;AAED,eAAe,aAAa,CAAA"}

package/dist/uiComponents/form/BasicCheckbox.js

@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+const BasicCheckbox = styled.input.attrs({ type: 'checkbox' }) `
+  outline: none;
+`;
+export default BasicCheckbox;

package/dist/uiComponents/form/BasicNumberInput.d.ts

@@ -0,0 +1,26 @@
+import type { MutableRefObject } from 'react';
+import React from 'react';
+export type BasicNumberInputNudgeFn = (params: {
+    deltaX: number;
+    deltaFraction: number;
+    magnitude: number;
+}) => number;
+declare const BasicNumberInput: React.FC<{
+    value: number;
+    temporarilySetValue: (v: number) => void;
+    discardTemporaryValue: () => void;
+    permanentlySetValue: (v: number) => void;
+    className?: string;
+    range?: [min: number, max: number];
+    isValid?: (v: number) => boolean;
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
+    /**
+     * Called when the user hits Enter. One of the *SetValue() callbacks will be called
+     * before this, so use this for UI purposes such as closing a popover.
+     */
+    onBlur?: () => void;
+    nudge: BasicNumberInputNudgeFn;
+    autoFocus?: boolean;
+}>;
+export default BasicNumberInput;
+//# sourceMappingURL=BasicNumberInput.d.ts.map

package/dist/uiComponents/form/BasicNumberInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicNumberInput.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/form/BasicNumberInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,OAAO,CAAA;AAG3C,OAAO,KAAwB,MAAM,OAAO,CAAA;AA6F5C,MAAM,MAAM,uBAAuB,GAAG,CAAC,MAAM,EAAE;IAC7C,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;CAClB,KAAK,MAAM,CAAA;AAEZ,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC/B,KAAK,EAAE,MAAM,CAAA;IACb,mBAAmB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,qBAAqB,EAAE,MAAM,IAAI,CAAA;IACjC,mBAAmB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,CAAA;IAClC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,OAAO,CAAA;IAChC,QAAQ,CAAC,EAAE,gBAAgB,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IACpD;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,EAAE,uBAAuB,CAAA;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CA0OA,CAAA;AAMD,eAAe,gBAAgB,CAAA"}

package/dist/uiComponents/form/BasicNumberInput.js

@@ -0,0 +1,261 @@
+import { clamp, isInteger, round } from 'lodash-es';
+import { useEffect } from 'react';
+import { useState } from 'react';
+import React, { useMemo, useRef } from 'react';
+import styled from 'styled-components';
+import { mergeRefs } from 'react-merge-refs';
+import useRefAndState from '@tomorrowevening/theatre-studio/utils/useRefAndState';
+import useOnClickOutside from '@tomorrowevening/theatre-studio/uiComponents/useOnClickOutside';
+import useDrag from '@tomorrowevening/theatre-studio/uiComponents/useDrag';
+const Container = styled.div `
+  height: 100%;
+  width: 100%;
+  position: relative;
+  z-index: 0;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+
+  &:after {
+    position: absolute;
+    inset: 1px 0 2px;
+    display: block;
+    content: ' ';
+    background-color: transparent;
+    border: 1px solid transparent;
+    z-index: -2;
+    box-sizing: border-box;
+    border-radius: 1px;
+  }
+
+  &:hover,
+  &.dragging,
+  &.editingViaKeyboard {
+    &:after {
+      background-color: #10101042;
+      border-color: #00000059;
+    }
+  }
+`;
+const Input = styled.input `
+  background: transparent;
+  border: 1px solid transparent;
+  color: rgba(255, 255, 255, 0.9);
+  padding: 1px 6px;
+  font: inherit;
+  outline: none;
+  cursor: ew-resize;
+  text-align: left;
+  width: 100%;
+  height: calc(100% - 4px);
+  border-radius: 2px;
+
+  &:focus {
+    cursor: text;
+  }
+`;
+const FillIndicator = styled.div `
+  position: absolute;
+  inset: 3px 2px 4px;
+  transform: scale(var(--percentage), 1);
+  transform-origin: top left;
+  background-color: #2d5561;
+  z-index: -1;
+  border-radius: 2px;
+  pointer-events: none;
+
+  ${Container}.dragging &, ${Container}.noFocus:hover & {
+    background-color: #338198;
+  }
+`;
+const DragWrap = styled.div `
+  display: contents;
+`;
+const alwaysValid = (v) => true;
+const BasicNumberInput = (propsA) => {
+    const [stateRef] = useRefAndState({ mode: 'noFocus' });
+    const isValid = propsA.isValid ?? alwaysValid;
+    const propsRef = useRef(propsA);
+    propsRef.current = propsA;
+    const inputRef = useRef(null);
+    useOnClickOutside(inputRef.current, () => {
+        inputRef.current.blur();
+    }, stateRef.current.mode === 'editingViaKeyboard');
+    const bodyCursorBeforeDrag = useRef(null);
+    const callbacks = useMemo(() => {
+        const inputChange = (e) => {
+            const target = e.target;
+            const { value } = target;
+            const curState = stateRef.current;
+            stateRef.current = { ...curState, currentEditedValueInString: value };
+            const valInFloat = parseFloat(value);
+            if (!isFinite(valInFloat) || !isValid(valInFloat))
+                return;
+            propsRef.current.temporarilySetValue(valInFloat);
+        };
+        const onBlur = () => {
+            if (stateRef.current.mode === 'editingViaKeyboard') {
+                commitKeyboardInput();
+                stateRef.current = { mode: 'noFocus' };
+            }
+            if (propsA.onBlur)
+                propsA.onBlur();
+        };
+        const commitKeyboardInput = () => {
+            const curState = stateRef.current;
+            const value = parseFloat(curState.currentEditedValueInString);
+            if (!isFinite(value) || !isValid(value)) {
+                propsRef.current.discardTemporaryValue();
+            }
+            else {
+                if (curState.valueBeforeEditing === value) {
+                    propsRef.current.discardTemporaryValue();
+                }
+                else {
+                    propsRef.current.permanentlySetValue(value);
+                }
+            }
+        };
+        const onInputKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                propsRef.current.discardTemporaryValue();
+                stateRef.current = { mode: 'noFocus' };
+                inputRef.current.blur();
+            }
+            else if (e.key === 'Enter' || e.key === 'Tab') {
+                commitKeyboardInput();
+                inputRef.current.blur();
+            }
+        };
+        const onClick = (e) => {
+            if (stateRef.current.mode === 'noFocus') {
+                const c = inputRef.current;
+                c.focus();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+            else {
+                e.stopPropagation();
+            }
+        };
+        const onFocus = () => {
+            if (stateRef.current.mode === 'noFocus') {
+                transitionToEditingViaKeyboardMode();
+            }
+            else if (stateRef.current.mode === 'editingViaKeyboard') {
+            }
+        };
+        const transitionToEditingViaKeyboardMode = () => {
+            const curValue = propsRef.current.value;
+            stateRef.current = {
+                mode: 'editingViaKeyboard',
+                currentEditedValueInString: String(curValue),
+                valueBeforeEditing: curValue,
+            };
+            setTimeout(() => {
+                inputRef.current.focus();
+                inputRef.current.setSelectionRange(0, 100);
+            });
+        };
+        let inputWidth;
+        const transitionToDraggingMode = () => {
+            const curValue = propsRef.current.value;
+            inputWidth = inputRef.current?.getBoundingClientRect().width;
+            stateRef.current = {
+                mode: 'dragging',
+            };
+            let valueBeforeDragging = curValue;
+            let valueDuringDragging = curValue;
+            bodyCursorBeforeDrag.current = document.body.style.cursor;
+            return {
+                onDrag(_dx, _dy, e, mx) {
+                    // We use `mx` here because it allows us to offer better UX when dragging
+                    // a value beyond its range. If we were to use `_dx`, and the number had a range,
+                    // and the user nudged the number beyond its range, they would have to un-nudge all
+                    // the way back until the number's value is within its range. But with `mx`,
+                    // as soon as they reverse their mouse drag, the number will jump back to its range.
+                    const deltaX = e.altKey ? mx / 10 : mx;
+                    const newValue = valueDuringDragging +
+                        propsA.nudge({
+                            deltaX,
+                            deltaFraction: deltaX / inputWidth,
+                            magnitude: 1,
+                        });
+                    valueDuringDragging = propsA.range
+                        ? clamp(newValue, propsA.range[0], propsA.range[1])
+                        : newValue;
+                    propsRef.current.temporarilySetValue(valueDuringDragging);
+                },
+                onDragEnd(happened) {
+                    if (!happened) {
+                        propsRef.current.discardTemporaryValue();
+                        stateRef.current = { mode: 'noFocus' };
+                    }
+                    else {
+                        if (valueBeforeDragging === valueDuringDragging) {
+                            propsRef.current.discardTemporaryValue();
+                        }
+                        else {
+                            propsRef.current.permanentlySetValue(valueDuringDragging);
+                        }
+                        stateRef.current = { mode: 'noFocus' };
+                    }
+                },
+                onClick() {
+                    inputRef.current.focus();
+                    inputRef.current.setSelectionRange(0, 100);
+                },
+            };
+        };
+        return {
+            inputChange,
+            onBlur,
+            transitionToDraggingMode,
+            onInputKeyDown,
+            onClick,
+            onFocus,
+        };
+    }, []);
+    // Call onBlur on unmount. Because technically it _is_ a blur, but also, otherwise edits wouldn't be committed.
+    useEffect(() => {
+        return () => {
+            callbacks.onBlur();
+        };
+    }, []);
+    let value = stateRef.current.mode !== 'editingViaKeyboard'
+        ? format(propsA.value)
+        : stateRef.current.currentEditedValueInString;
+    if (typeof value === 'number' && isNaN(value)) {
+        value = 'NaN';
+    }
+    const _refs = [inputRef];
+    if (propsA.inputRef)
+        _refs.push(propsA.inputRef);
+    const theInput = (React.createElement(Input, { key: "input", type: "text", onChange: callbacks.inputChange, value: value, onBlur: callbacks.onBlur, onKeyDown: callbacks.onInputKeyDown, onClick: callbacks.onClick, onFocus: callbacks.onFocus, ref: mergeRefs(_refs), onMouseDown: (e) => {
+            e.stopPropagation();
+        }, onDoubleClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, autoFocus: propsA.autoFocus }));
+    const { range } = propsA;
+    const num = parseFloat(value);
+    const fillIndicator = range ? (React.createElement(FillIndicator, { style: {
+            // @ts-ignore
+            '--percentage': clamp((num - range[0]) / (range[1] - range[0]), 0, 1),
+        } })) : null;
+    const [dragNode, setDragNode] = useState(null);
+    useDrag(dragNode, {
+        debugName: 'form/BasicNumberInput',
+        onDragStart: callbacks.transitionToDraggingMode,
+        lockCSSCursorTo: 'ew-resize',
+        shouldPointerLock: true,
+        disabled: stateRef.current.mode === 'editingViaKeyboard',
+    });
+    return (React.createElement(Container, { className: propsA.className + ' ' + stateRef.current.mode },
+        React.createElement(DragWrap, { ref: setDragNode }, theInput),
+        fillIndicator));
+};
+function format(v) {
+    return isNaN(v) ? 'NaN' : isInteger(v) ? v.toFixed(0) : round(v, 3).toString();
+}
+export default BasicNumberInput;

package/dist/uiComponents/form/BasicSelect.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare function BasicSelect<TLiteralOptions extends string>({ value, onChange, options, className, autoFocus, }: {
+    value: TLiteralOptions;
+    onChange: (val: TLiteralOptions) => void;
+    options: Record<TLiteralOptions, string>;
+    className?: string;
+    autoFocus?: boolean;
+}): React.JSX.Element;
+export default BasicSelect;
+//# sourceMappingURL=BasicSelect.d.ts.map

package/dist/uiComponents/form/BasicSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BasicSelect.d.ts","sourceRoot":"","sources":["../../../../../../studio/src/uiComponents/form/BasicSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AAoDxC,iBAAS,WAAW,CAAC,eAAe,SAAS,MAAM,EAAE,EACnD,KAAK,EACL,QAAQ,EACR,OAAO,EACP,SAAS,EACT,SAAS,GACV,EAAE;IACD,KAAK,EAAE,eAAe,CAAA;IACtB,QAAQ,EAAE,CAAC,GAAG,EAAE,eAAe,KAAK,IAAI,CAAA;IACxC,OAAO,EAAE,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,qBA2BA;AAED,eAAe,WAAW,CAAA"}

package/dist/uiComponents/form/BasicSelect.js

@@ -0,0 +1,58 @@
+import React, { useCallback } from 'react';
+import styled from 'styled-components';
+import { CgSelect } from 'react-icons/all';
+const Container = styled.div `
+  width: 100%;
+  position: relative;
+`;
+const IconContainer = styled.div `
+  position: absolute;
+  right: 0px;
+  top: 0;
+  bottom: 0;
+  width: 1.5em;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  color: #6b7280;
+  pointer-events: none;
+`;
+const Select = styled.select `
+  appearance: none;
+  background-color: transparent;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  color: rgba(255, 255, 255, 0.85);
+  padding: 1px 6px;
+  font: inherit;
+  outline: none;
+  text-align: left;
+  width: 100%;
+  border-radius: 2px;
+  /*
+  looks like putting percentages in the height of a select box doesn't work in Firefox. Not sure why.
+  So we're hard-coding the height to 26px, unlike all other inputs that use a relative height.
+  */
+  height: 26px /* calc(100% - 4px); */;
+
+  @supports (-moz-appearance: none) {
+    /* Ugly hack to remove the extra left padding that shows up only in Firefox */
+    text-indent: -2px;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: #10101042;
+    border-color: #00000059;
+  }
+`;
+function BasicSelect({ value, onChange, options, className, autoFocus, }) {
+    const _onChange = useCallback((el) => {
+        onChange(String(el.target.value));
+    }, [onChange]);
+    return (React.createElement(Container, null,
+        React.createElement(Select, { className: className, value: value, onChange: _onChange, autoFocus: autoFocus }, Object.keys(options).map((key, i) => (React.createElement("option", { key: 'option-' + i, value: key }, options[key])))),
+        React.createElement(IconContainer, null,
+            React.createElement(CgSelect, null))));
+}
+export default BasicSelect;