@stanko/ctrls 0.1.8 → 0.3.0

package/README.md

@@ -332,6 +332,40 @@ Example:
 
 </div>
 
+### Group
+
+Collapsible group of controls. All values are going to be nested in an object using the group's name.
+
+```ts
+{
+  // Mandatory
+  controls: ConfigItem[]
+}
+```
+
+Example:
+
+<div class="example">
+
+```json
+{
+  "type": "group",
+  "name": "color",
+  "controls": [
+    {
+      "type": "boolean",
+      "name": "monochrome"
+    },
+    {
+      "type": "easing",
+      "name": "distribution"
+    }
+  ]
+}
+```
+
+</div>
+
 ## Theming
 
 Ctrls uses CSS variables for theming. There are many you can adjust, but I recommend starting with these four:

package/dist/ctrls/ctrl-boolean.d.ts

@@ -1,6 +1,8 @@
 import type { Ctrl, CtrlType, CtrlChangeHandler, CtrlConfig } from ".";
 export declare class BooleanCtrl implements Ctrl<boolean> {
     type: CtrlType;
+    id: string;
+    group?: string;
     name: string;
     label: string;
     value: boolean;

package/dist/ctrls/ctrl-boolean.js

@@ -56,6 +56,8 @@ export class BooleanCtrl {
         };
         this.type = "boolean";
         this.name = config.name;
+        this.id = config.id || config.name;
+        this.group = config.group || "";
         this.label = config.label || config.name;
         this.value =
             config.defaultValue === undefined

package/dist/ctrls/ctrl-dual-range.d.ts

@@ -1,5 +1,5 @@
 import DualRangeInput from "@stanko/dual-range-input";
-import type { Ctrl, CtrlChangeHandler, CtrlType, CtrlTypeRegistry } from ".";
+import type { Ctrl, CtrlChangeHandler, CtrlType, ConfigFor } from ".";
 export type DualRangeControlOptions = {
     min: number;
     max: number;
@@ -11,6 +11,8 @@ export type DualRangeValue = {
 };
 export declare class DualRangeCtrl implements Ctrl<DualRangeValue> {
     type: CtrlType;
+    id: string;
+    group?: string;
     name: string;
     label: string;
     value: DualRangeValue;
@@ -25,7 +27,7 @@ export declare class DualRangeCtrl implements Ctrl<DualRangeValue> {
     maxInput: HTMLInputElement;
     dualRange: DualRangeInput;
     valueSpan: HTMLSpanElement;
-    constructor(config: CtrlTypeRegistry["dual-range"]["config"], onChange: CtrlChangeHandler<DualRangeValue>, onInput: CtrlChangeHandler<DualRangeValue>);
+    constructor(config: ConfigFor<"dual-range">, onChange: CtrlChangeHandler<DualRangeValue>, onInput: CtrlChangeHandler<DualRangeValue>);
     parse: (string: string) => {
         min: number;
         max: number;

package/dist/ctrls/ctrl-dual-range.js

@@ -101,6 +101,8 @@ export class DualRangeCtrl {
             this.dualRange.update();
         };
         this.name = config.name;
+        this.id = config.id || config.name;
+        this.group = config.group || "";
         this.label = config.label || config.name;
         this.min = config.min;
         this.max = config.max;

package/dist/ctrls/ctrl-easing.d.ts

@@ -1,7 +1,9 @@
-import type { Ctrl, CtrlChangeHandler, CtrlType, CtrlTypeRegistry } from ".";
+import type { Ctrl, CtrlChangeHandler, CtrlType, ConfigFor } from ".";
 export type Easing = [number, number, number, number];
 export declare class EasingCtrl implements Ctrl<Easing> {
     type: CtrlType;
+    id: string;
+    group?: string;
     name: string;
     label: string;
     value: Easing;
@@ -15,7 +17,7 @@ export declare class EasingCtrl implements Ctrl<Easing> {
     lines: SVGLineElement[];
     path: SVGPathElement;
     presets: Record<string, Easing>;
-    constructor(config: CtrlTypeRegistry["easing"]["config"], onChange: CtrlChangeHandler<Easing>, onInput: CtrlChangeHandler<Easing>);
+    constructor(config: ConfigFor<"easing">, onChange: CtrlChangeHandler<Easing>, onInput: CtrlChangeHandler<Easing>);
     parse: (string: string) => Easing;
     getRandomValue: () => Easing;
     getDefaultValue: () => Easing;

package/dist/ctrls/ctrl-easing.js

@@ -270,6 +270,8 @@ export class EasingCtrl {
             this.element.setAttribute("data-value", value.join(","));
         };
         this.name = config.name;
+        this.id = config.id || config.name;
+        this.group = config.group || "";
         this.label = config.label || config.name;
         this.value =
             config.defaultValue === undefined

package/dist/ctrls/ctrl-radio.d.ts

@@ -1,4 +1,4 @@
-import type { Ctrl, CtrlChangeHandler, CtrlType, CtrlTypeRegistry } from ".";
+import type { Ctrl, CtrlChangeHandler, CtrlType, ConfigFor } from ".";
 type Option = {
     label: string;
     value: string;
@@ -8,6 +8,9 @@ export type RadioControlOptions = {
 };
 export declare class RadioCtrl implements Ctrl<string> {
     type: CtrlType;
+    htmlId: string;
+    id: string;
+    group?: string;
     name: string;
     label: string;
     value: string;
@@ -17,8 +20,7 @@ export declare class RadioCtrl implements Ctrl<string> {
     items: Option[];
     element: HTMLElement;
     columns: 1 | 2 | 3 | 4 | 5;
-    id: string;
-    constructor(config: CtrlTypeRegistry["radio"]["config"], onChange: CtrlChangeHandler<string>, onInput: CtrlChangeHandler<string>);
+    constructor(config: ConfigFor<"radio">, onChange: CtrlChangeHandler<string>, onInput: CtrlChangeHandler<string>);
     parse: (string: string) => string;
     getRandomValue: () => string;
     getDefaultValue: () => string;

package/dist/ctrls/ctrl-radio.js

@@ -23,8 +23,8 @@ export class RadioCtrl {
             const inputs = items.map((item) => {
                 const input = document.createElement("input");
                 input.setAttribute("type", "radio");
-                input.setAttribute("name", this.id);
-                input.setAttribute("id", `${this.id}-${toKebabCase(item.value)}`);
+                input.setAttribute("name", this.htmlId);
+                input.setAttribute("id", `${this.htmlId}-${toKebabCase(item.value)}`);
                 input.setAttribute("value", item.value);
                 input.checked = item.value === value;
                 input.addEventListener("change", () => {
@@ -77,8 +77,10 @@ export class RadioCtrl {
         });
         this.columns = config.columns || 3;
         this.name = config.name;
+        this.id = config.id || config.name;
+        this.group = config.group || "";
         this.label = config.label || config.name;
-        this.id = `ctrls__${toKebabCase(config.name)}-${getRandomString()}`;
+        this.htmlId = `ctrls__${toKebabCase(config.name)}-${getRandomString()}`;
         const defaultValue = this.items.find((item) => item.value === config.defaultValue);
         this.value = defaultValue?.value || this.getDefaultValue();
         this.isRandomizationDisabled = config.isRandomizationDisabled || false;

package/dist/ctrls/ctrl-range.d.ts

@@ -1,6 +1,8 @@
-import type { Ctrl, CtrlChangeHandler, CtrlType, CtrlTypeRegistry } from ".";
+import type { Ctrl, CtrlChangeHandler, CtrlType, ConfigFor } from ".";
 export declare class RangeCtrl implements Ctrl<number> {
     type: CtrlType;
+    id: string;
+    group?: string;
     name: string;
     label: string;
     value: number;
@@ -13,7 +15,7 @@ export declare class RangeCtrl implements Ctrl<number> {
     element: HTMLElement;
     input: HTMLInputElement;
     valueSpan: HTMLSpanElement;
-    constructor(config: CtrlTypeRegistry["range"]["config"], onChange: CtrlChangeHandler<number>, onInput: CtrlChangeHandler<number>);
+    constructor(config: ConfigFor<"range">, onChange: CtrlChangeHandler<number>, onInput: CtrlChangeHandler<number>);
     parse: (string: string) => number;
     getRandomValue: () => number;
     getDefaultValue: () => number;

package/dist/ctrls/ctrl-range.js

@@ -73,6 +73,8 @@ export class RangeCtrl {
             this.element.style.setProperty("--gradient-position", `${percentage.toFixed(2)}%`);
         };
         this.name = config.name;
+        this.id = config.id || config.name;
+        this.group = config.group || "";
         this.label = config.label || config.name;
         this.isRandomizationDisabled = config.isRandomizationDisabled || false;
         this.onChange = onChange;

package/dist/ctrls/ctrl-seed.d.ts

@@ -1,6 +1,8 @@
 import type { Ctrl, CtrlChangeHandler, CtrlConfig, CtrlType } from ".";
 export declare class SeedCtrl implements Ctrl<string> {
     type: CtrlType;
+    id: string;
+    group?: string;
     name: string;
     label: string;
     value: string;

package/dist/ctrls/ctrl-seed.js

@@ -66,6 +66,8 @@ export class SeedCtrl {
             this.input.value = value;
         };
         this.name = config.name;
+        this.id = config.id || config.name;
+        this.group = config.group || "";
         this.label = config.label || config.name;
         this.value =
             config.defaultValue === undefined

package/dist/ctrls/index.d.ts

@@ -8,16 +8,20 @@ import { SeedCtrl } from "./ctrl-seed";
 export interface PRNG {
     (): number;
 }
-export type CtrlType = "boolean" | "range" | "radio" | "seed" | "easing" | "dual-range";
+export type CtrlType = "boolean" | "range" | "radio" | "seed" | "easing" | "dual-range" | "group";
 export type CtrlChangeHandler<T> = (name: string, value: T) => void;
 export type CtrlConfig<T = unknown> = {
     type: CtrlType;
+    id?: string;
     name: string;
+    group?: string;
     label?: string;
     defaultValue?: T;
     isRandomizationDisabled?: boolean;
 };
 export interface Ctrl<T> {
+    id: string;
+    group?: string;
     name: string;
     label: string;
     type: CtrlType;
@@ -31,57 +35,72 @@ export interface Ctrl<T> {
     update: (value: T) => void;
     element: HTMLElement;
 }
-export type CtrlComponent = BooleanCtrl | RangeCtrl | RadioCtrl | SeedCtrl | EasingCtrl | DualRangeCtrl;
-export type ControlConstructor<T> = new (...args: any[]) => T;
-export interface CtrlTypeRegistry {
+export interface CtrlTypeMap {
     boolean: {
-        config: CtrlConfig<boolean>;
-        instance: BooleanCtrl;
         value: boolean;
     };
     range: {
-        config: CtrlConfig<number> & {
-            min: number;
-            max: number;
-            step?: number;
-        };
-        instance: RangeCtrl;
         value: number;
+        min: number;
+        max: number;
+        step?: number;
     };
     radio: {
-        config: CtrlConfig<string> & {
-            items: Record<string, string>;
-            columns?: 1 | 2 | 3 | 4 | 5;
-        };
-        instance: RadioCtrl;
         value: string;
+        items: Record<string, string>;
+        columns?: 1 | 2 | 3 | 4 | 5;
     };
     seed: {
-        config: CtrlConfig<string>;
-        instance: SeedCtrl;
         value: string;
     };
     easing: {
-        config: CtrlConfig<Easing> & {
-            presets?: Record<string, Easing>;
-        };
-        instance: EasingCtrl;
         value: Easing;
+        presets?: Record<string, Easing>;
     };
     "dual-range": {
-        config: CtrlConfig<DualRangeValue> & {
-            min: number;
-            max: number;
-            step?: number;
-        };
-        instance: DualRangeCtrl;
         value: DualRangeValue;
+        min: number;
+        max: number;
+        step?: number;
+    };
+    group: {
+        value: Record<string, unknown>;
+        controls: readonly ConfigItem[];
+        isRandomizationDisabled?: boolean;
     };
 }
-export type TypedControlConfig = CtrlTypeRegistry[keyof CtrlTypeRegistry]["config"];
-type OptionsMap<Configs extends readonly TypedControlConfig[]> = {
-    [C in Configs[number] as C["name"]]: CtrlTypeRegistry[C["type"]]["value"];
+export type TypedControlConfig = {
+    [K in CtrlType]: {
+        type: K;
+        id?: string;
+        name: string;
+        group?: string;
+        label?: string;
+        defaultValue?: CtrlTypeMap[K]["value"];
+        isRandomizationDisabled?: boolean;
+    } & Omit<CtrlTypeMap[K], "value">;
+}[CtrlType];
+export type GroupConfig = {
+    type: "group";
+    name: string;
+    label?: string;
+    controls: readonly TypedControlConfig[];
+    isRandomizationDisabled?: boolean;
+};
+export type ConfigItem = TypedControlConfig | GroupConfig;
+export type ConfigFor<T extends CtrlType> = Extract<TypedControlConfig, {
+    type: T;
+}>;
+type ExtractValues<Configs extends readonly ConfigItem[]> = {
+    [C in Extract<Configs[number], {
+        type: Exclude<CtrlType, "group">;
+    }> as C["name"]]: CtrlTypeMap[C["type"]]["value"];
 } & {
+    [C in Extract<Configs[number], {
+        type: "group";
+    }> as C["name"]]: OptionsMap<C["controls"]>;
+};
+type DerivedProps<Configs extends readonly ConfigItem[]> = {
     [C in Extract<Configs[number], {
         type: "easing";
     }> as `${C["name"]}Easing`]: ReturnType<typeof BezierEasing>;
@@ -89,7 +108,12 @@ type OptionsMap<Configs extends readonly TypedControlConfig[]> = {
     [C in Extract<Configs[number], {
         type: "seed";
     }> as `${C["name"]}Rng`]: PRNG;
+} & {
+    [C in Extract<Configs[number], {
+        type: "group";
+    }> as C["name"]]: DerivedProps<C["controls"]>;
 };
+type OptionsMap<Configs extends readonly ConfigItem[]> = ExtractValues<Configs> & DerivedProps<Configs>;
 type ControlsOptions = {
     showRandomizeButton?: boolean;
     storage?: "hash" | "none";
@@ -97,20 +121,23 @@ type ControlsOptions = {
     parent?: Element;
     title?: string;
 };
-export declare class Ctrls<Configs extends readonly TypedControlConfig[]> {
+type CtrlComponent = BooleanCtrl | RangeCtrl | RadioCtrl | SeedCtrl | EasingCtrl | DualRangeCtrl;
+export declare class Ctrls<Configs extends readonly ConfigItem[]> {
     options: ControlsOptions;
-    controls: CtrlTypeRegistry[keyof CtrlTypeRegistry]["instance"][];
-    controlsMap: Record<string, CtrlTypeRegistry[keyof CtrlTypeRegistry]["instance"]>;
+    controls: CtrlComponent[];
+    controlsMap: Record<string, CtrlComponent>;
     element: HTMLDivElement;
     onChange?: (updatedValues: Partial<ReturnType<typeof this.getValues>>) => void;
     onInput?: (updatedValues: Partial<ReturnType<typeof this.getValues>>) => void;
-    constructor(controls: Configs, options?: ControlsOptions);
+    constructor(configs: Configs, options?: ControlsOptions);
+    registerControl: (config: TypedControlConfig, onChangeControlHandler: (name: string, value: unknown) => void, onInputControlHandler: (name: string, value: unknown) => void, group?: string) => void;
     buildUI: () => HTMLDivElement;
     toggleVisibility: () => void;
     addHashListeners: () => void;
     getHash: () => string;
     setHash: () => void;
     updateFromHash: () => void;
+    updateValuesObject(options: any, control: CtrlComponent): void;
     getValues(): OptionsMap<Configs>;
     randomize: () => void;
 }

package/dist/ctrls/index.js

@@ -17,16 +17,65 @@ const controlMap = {
     "dual-range": DualRangeCtrl,
 };
 export class Ctrls {
-    constructor(controls, options) {
+    constructor(configs, options) {
+        this.controls = [];
         this.controlsMap = {};
+        this.registerControl = (config, onChangeControlHandler, onInputControlHandler, group = "") => {
+            // To make typescript happy
+            if (config.type === "group") {
+                return;
+            }
+            // TODO
+            // Again, document as it is my personal preference
+            if (!config.label) {
+                config.label = toSpaceCase(config.name);
+            }
+            // TODO
+            // Document this behaviour
+            // This might counter-intuitive for some people,
+            // but it is my personal preference to have properties named in camel case
+            // when using them in code
+            //
+            // However, they are going to be converted to kebab case when used in the hash,
+            // because it is nicer that URL be all lowercase
+            config.name = toCamelCase(config.name);
+            if (group) {
+                config.id = toCamelCase(`${group}-${config.name}`);
+            }
+            const ControlComponent = controlMap[config.type];
+            const control = new ControlComponent(config, onChangeControlHandler, onInputControlHandler);
+            control.group = group;
+            this.controlsMap[control.id] = control;
+            this.controls.push(control);
+        };
         this.buildUI = () => {
             const element = document.createElement("div");
             element.classList.add("ctrls");
             element.classList.add(`ctrls--${this.options.theme}-theme`);
             const controlsContainer = document.createElement("div");
             controlsContainer.classList.add("ctrls__controls");
+            let group = "";
+            let groupElement;
             this.controls.forEach((control) => {
-                controlsContainer.appendChild(control.element);
+                if (control.group) {
+                    if (control.group !== group) {
+                        group = control.group;
+                        groupElement = document.createElement("div");
+                        groupElement.classList.add("ctrls__group");
+                        const groupTitle = document.createElement("button");
+                        groupTitle.classList.add("ctrls__group-title");
+                        groupTitle.innerText = control.group;
+                        groupTitle.addEventListener("click", () => {
+                            groupTitle.parentElement?.classList.toggle("ctrls__group--hidden");
+                        });
+                        groupElement.append(groupTitle);
+                        controlsContainer.appendChild(groupElement);
+                    }
+                    groupElement.append(control.element);
+                }
+                else {
+                    controlsContainer.appendChild(control.element);
+                }
             });
             if (this.options.showRandomizeButton) {
                 const randomizeButton = document.createElement("button");
@@ -59,7 +108,7 @@ export class Ctrls {
         this.getHash = () => {
             const values = this.controls
                 .map((control) => {
-                return `${toKebabCase(control.name)}:${control.valueToString()}`;
+                return `${toKebabCase(control.id)}:${control.valueToString()}`;
             })
                 .join("/");
             return `#/${values}`;
@@ -130,25 +179,15 @@ export class Ctrls {
         const onInputControlHandler = (name, value) => {
             this.onInput?.({ [name]: value });
         };
-        this.controls = controls.map((config) => {
-            // TODO
-            // Document this behaviour
-            // This might counter-intuitive for some people,
-            // but it is my personal preference to have properties named in camel case
-            // when using them in code
-            //
-            // However, they are going to be converted to kebab case when used in the hash,
-            // because it is nicer that URL be all lowercase
-            config.name = toCamelCase(config.name);
-            // TODO
-            // Again, document as it is my personal preference
-            if (!config.label) {
-                config.label = toSpaceCase(config.name);
+        configs.map((config) => {
+            if (config.type === "group") {
+                config.controls.forEach((groupConfig) => {
+                    this.registerControl(groupConfig, onChangeControlHandler, onInputControlHandler, toCamelCase(config.name));
+                });
+            }
+            else {
+                this.registerControl(config, onChangeControlHandler, onInputControlHandler);
             }
-            const ControlComponent = controlMap[config.type];
-            const control = new ControlComponent(config, onChangeControlHandler, onInputControlHandler);
-            this.controlsMap[control.name] = control;
-            return control;
         });
         this.element = this.buildUI();
         if (this.options.storage === "hash") {
@@ -158,15 +197,26 @@ export class Ctrls {
             this.options.parent.appendChild(this.element);
         }
     }
+    updateValuesObject(options, control) {
+        options[control.name] = control.value;
+        if (control.type === "easing") {
+            options[control.name + "Easing"] = BezierEasing(...control.value);
+        }
+        else if (control.type === "seed") {
+            options[control.name + "Rng"] = Alea(...control.value.split("-"));
+        }
+    }
     getValues() {
         const options = {};
         this.controls.forEach((control) => {
-            options[control.name] = control.value;
-            if (control.type === "easing") {
-                options[control.name + "Easing"] = BezierEasing(...control.value);
+            if (control.group) {
+                if (!options[control.group]) {
+                    options[control.group] = {};
+                }
+                this.updateValuesObject(options[control.group], control);
             }
-            else if (control.type === "seed") {
-                options[control.name + "Rng"] = Alea(control.value);
+            else {
+                this.updateValuesObject(options, control);
             }
         });
         return options;

package/dist/ctrls.css

@@ -170,8 +170,8 @@
     ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
     "DejaVu Sans Mono", monospace;
   --ctrls-radius: 4px;
-  --ctrls-label-width: 5rem;
-  --ctrls-width: 22rem;
+  --ctrls-label-width: 7rem;
+  --ctrls-width: 24rem;
   --ctrls-font-size: 0.75rem;
   --ctrls-value-font-size: 0.6875rem;
   --ctrls-c: 0.25;
@@ -301,6 +301,7 @@
   overflow: visible;
 }
 
+.ctrls__group-title,
 .ctrls__title {
   background: none;
   border: none;
@@ -312,24 +313,37 @@
   cursor: pointer;
   transition: color 300ms, background-color 300ms;
 }
-.ctrls__title:focus-visible, .ctrls__title:hover {
+.ctrls__group-title:focus-visible, .ctrls__group-title:hover,
+.ctrls__title:focus-visible,
+.ctrls__title:hover {
   color: var(--ctrls-theme);
   background: var(--ctrls-btn-hover-bg);
 }
 
+.ctrls__title {
+  border-block-end: 1px solid var(--ctrls-border);
+}
+
 .ctrls__controls {
   display: grid;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  padding-top: 0.5rem;
   overflow: auto;
   scrollbar-width: thin;
   scrollbar-color: var(--ctrls-scrollbar-thumb-bg) transparent;
 }
 
+.ctrls__controls > * {
+  margin-bottom: 0.5rem;
+}
+
 .ctrls--hidden .ctrls__controls {
   display: none;
 }
 
+.ctrls--hidden .ctrls__title {
+  border-block-end: none;
+}
+
 /* ----- Buttons ----- */
 .ctrls__btn {
   background: none;
@@ -355,7 +369,8 @@
 }
 
 .ctrls__btn--lg {
-  margin-left: var(--ctrls-label-width);
+  margin-inline-start: calc(var(--ctrls-label-width) + 0.5rem);
+  margin-inline-end: 0.5rem;
   padding: 0.5rem 1rem;
   background: var(--ctrls-btn-bg);
   border: 1px solid var(--ctrls-input-border);
@@ -375,8 +390,39 @@
   opacity: 0;
 }
 
-/* ----- General ----- */
+/* ----- Groups ----- */
+.ctrls__group {
+  display: grid;
+  gap: 0.5rem;
+  padding-block-end: 0.5rem;
+  border-block: 1px solid var(--ctrls-border);
+}
+
+.ctrls__group .ctrls__control {
+  padding-inline-start: 1rem;
+  grid-template-columns: calc(var(--ctrls-label-width) - 0.5rem) minmax(0, 1fr);
+}
+
+.ctrls__group:has(+ .ctrls__group) {
+  border-block-end: none;
+  margin-block-end: 0;
+}
+
+.ctrls__group-title {
+  text-align: left;
+}
+
+.ctrls__group--hidden {
+  padding-block-end: 0;
+}
+
+.ctrls__group--hidden .ctrls__control {
+  display: none;
+}
+
+/* ----- Controls ----- */
 .ctrls__control {
+  padding-inline: 0.5rem;
   display: grid;
   grid-template-columns: var(--ctrls-label-width) minmax(0, 1fr);
   align-items: center;

package/dist/ctrls.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}
+{"version":3,"sourceRoot":"","sources":["../node_modules/@stanko/dual-range-input/dist/index.css","../src/scss/_ctrls.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;;;;AC3IF;EACE;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EAGA;EACA;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EACA;EAEA;EACA;EAGA;EAGA;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;EAGA;EACA;EAEA;EAEA;EACA;EAEA;EAGA;EAEA;EACA;;;AA+CF;EACE;IA3CA;IAEA;IACA;IAGA;IACA;IACA;IACA;IACA;IACA;IAGA;IAGA;IACA;IACA;IAGA;IACA;IAGA;IAGA;IAEA;IAGA;IAGA;AAAA;AAAA;;;AAWF;EAhDE;EAEA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;EAGA;EACA;EACA;EAGA;EACA;EAGA;EAGA;EAEA;EAGA;EAGA;AAAA;AAAA;;;AAiBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;EAGE;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;AAAA;AAAA;EAEE;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;;AAGF;EACE;EACA;EACA,YACE;;AAIJ;EACE;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;;;AAOA;EACE;;AAGF;AAAA;AAAA;EAEE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKA;AAAA;EACE;EACA;EACA;;;AAIJ;AAEA;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAIF;EACE;;;AAIF;EACE;;;AAIF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAmCJ;EA5BE;EACA;EACA;EACA;EACA;EAEA;;;AA0BF;EAhCE;EACA;EACA;EACA;EACA;EAEA;;;AA8BF;EAtBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAkBA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAKF;EAvDE;EACA;EACA;EACA;EACA;EAEA;;;AAqDF;EA7CE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAwCA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EAGE;;AAEA;EACE;;AANJ;EASE;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;;AAIJ;AAEA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;EAEF;EACA;EACA;;AAEA;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAEA;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;;AAIE;EACE;;;AAKN;AAEA;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;AAEA;AAAA;EAEE;EACA;EACA;;;AAIJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACE;;AAGF;EAEE;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EAEE;;AAEA;EACE;EACA","file":"ctrls.css"}

package/dist/utils/alea.d.ts

@@ -1,2 +1,2 @@
-declare const Alea: (seed?: string) => (() => number);
+declare const Alea: (...seeds: string[]) => (() => number);
 export default Alea;

package/dist/utils/alea.js

@@ -18,19 +18,21 @@ const getMash = () => {
     };
     return mash;
 };
-const Alea = (seed = Date.now().toString()) => {
-    let s = [0, 0, 0];
+const Alea = (...seeds) => {
+    const mash = getMash();
+    const s = [mash(" "), mash(" "), mash(" ")];
     let c = 1;
-    let mash = getMash();
-    s.forEach((_, i) => {
-        s[i] = mash(" ") - mash(seed);
-        if (s[i] < 0) {
-            s[i] += 1;
-        }
+    seeds.forEach((seed) => {
+        s.forEach((_, i) => {
+            s[i] -= mash(seed);
+            if (s[i] < 0) {
+                s[i] += 1;
+            }
+        });
     });
     const random = () => {
         const t = 2091639 * s[0] + c * 2.3283064365386963e-10; // 2^-32
-        c = t | 0;
+        c = t | 0; // quicker floor
         s[0] = s[1];
         s[1] = s[2];
         s[2] = t - c;

package/dist/utils/generate-seed.js

@@ -1,9 +1,11 @@
+import Alea from "./alea";
 import random from "./random";
 import { words } from "./words";
+const rng = Alea();
 export default function generateSeed() {
     return [1, 2, 3]
         .map(() => {
-        const index = random(0, words.length - 1, Math.random, 0);
+        const index = random(0, words.length - 1, rng, 0);
         return words[index];
     })
         .join("-");

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@stanko/ctrls",
-  "version": "0.1.8",
+  "version": "0.3.0",
   "type": "module",
   "scripts": {
+    "test": "vitest",
     "start": "npm run parse-markdown && vite",
     "build": "npm run parse-markdown && tsc && rm -rf ./docs && vite build && touch ./docs/.nojekyll",
     "build-css": "sass ./src/scss/index.scss ./dist/ctrls.css",
@@ -24,7 +25,8 @@
     "sass": "^1.92.1",
     "simplex-noise": "^4.0.3",
     "typescript": "~5.9.2",
-    "vite": "^7.1.5"
+    "vite": "^7.1.5",
+    "vitest": "^4.0.9"
   },
   "dependencies": {
     "@stanko/dual-range-input": "^1.0.1",