@digitalmeadow/control-panel 1.0.19 → 1.0.20

package/README.md

@@ -1,100 +1,69 @@
 # @digitalmeadow/control-panel
 
-GUI control panel for creative coding.
+Minimal GUI control panel for creative coding.
 
 ## Installation
+
 ```bash
 npm install @digitalmeadow/control-panel
 ```
 
 ## Features
 
-- Dependency free
+- Dependency-free
 - Minimal API
 - Audio and MIDI input signals
 
-## Controllers
-
-- Number
-- Range
-- Select
-- Boolean
-- Button
-- Radio
-- Color
-- Gradient
-- Array
-
 ## Usage
 
 ```typescript
 import { ControlPanel } from "@digitalmeadow/control-panel";
 
-const state = { number: 50, color: "#3498db", enabled: true };
-const controlPanel = new ControlPanel();
+const state = {
+  number: 50,
+  range: 0.5,
+  select: "option-a",
+  enabled: true,
+  color: "#3498db",
+  gradient: [
+    { color: "#ff0000", position: 0 },
+    { color: "#0000ff", position: 1 },
+  ],
+  array: ["item-1", "item-2"],
+  radio: "option-a",
+};
 
-controlPanel.addRange(state, "number", { min: 0, max: 100, step: 1 });
-controlPanel.addColor(state, "color");
-controlPanel.addBoolean(state, "enabled");
-controlPanel.addButton("Reset", () => controlPanel.reset());
+const panel = new ControlPanel();
 
-controlPanel.saveDefaultPreset();
-```
+panel
+  .addNumber(state, "number", { min: 0, max: 100, step: 1, label: "Number" })
+  .onChange((value) => console.log("number changed:", value));
 
-## Folders
+panel.addRange(state, "range", { min: 0, max: 1, step: 0.01 });
 
-```typescript
-const folder = controlPanel.addFolder("Settings");
-folder.addNumber(state, "value", { min: 0, max: 100 });
+panel.addSelect(state, "select", {
+  label: "Dropdown",
+  options: ["option-a", "option-b", "option-c"],
+});
 
-const nested = folder.addFolder("Advanced");
-nested.addNumber(state, "other", { min: 0, max: 100 });
-```
+panel.addBoolean(state, "enabled", { label: "Enabled" });
 
-## Development
+panel.addRadio(state, "radio", {
+  label: "Radio",
+  options: ["option-a", "option-b"],
+});
 
-```bash
-pnpm dev
-pnpm build
-```
+panel.addColor(state, "color", { label: "Color" });
 
-## API
+panel.addGradient(state, "gradient", { label: "Gradient" });
 
-```typescript
-controlPanel.addNumber(object, property, options?)
-controlPanel.addRange(object, property, options?)
-controlPanel.addSelect(object, property, options?)
-controlPanel.addBoolean(object, property, options?)
-controlPanel.addButton(label, fn, options?)
-controlPanel.addRadio(object, property, options?)
-controlPanel.addColor(object, property, options?)
-controlPanel.addGradient(object, property, options?)
-controlPanel.addArray(object, property, options?)
-controlPanel.addFolder(title)
-
-controlPanel.save()
-controlPanel.load(state)
-controlPanel.reset()
-controlPanel.saveDefaultPreset()
-```
-
-## Options
-
-All controllers:
-- `label?: string`
-- `disabled?: boolean`
-- `id?: string`
+panel.addArray(state, "array", {
+  label: "Array",
+  itemType: "string",
+});
 
-Number:
-- `min?: number`
-- `max?: number`
-- `step?: number`
+panel.addButton("Reset", () => panel.reset());
 
-Select/Radio:
-- `options?: T[]`
-
-Gradient:
-- `stops?: ColorStop[]`
-
-Array:
-- `itemType?: "color" | "number" | "string"`
+const folder = panel.addFolder("Settings");
+folder.addNumber(state, "number", { min: 0, max: 100 });
+```

package/dist/ControlPanel.d.ts

@@ -8,7 +8,7 @@ import { RadioController, type RadioControllerOptions } from "./controllers/Radi
 import { ColorController, type ColorControllerOptions } from "./controllers/ColorController";
 import { GradientController, type GradientControllerOptions } from "./controllers/GradientController";
 import { ArrayController, type ArrayControllerOptions } from "./controllers/ArrayController";
-import { Stats } from "./stats";
+import { Stats } from "./Stats";
 export interface ControlPanelOptions {
     title?: string;
     presetsPrefix?: string;

package/dist/{stats.d.ts → Stats.d.ts}

@@ -8,4 +8,4 @@ export declare class Stats {
     render: () => void;
     destroy(): void;
 }
-//# sourceMappingURL=stats.d.ts.map
+//# sourceMappingURL=Stats.d.ts.map

package/dist/Stats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stats.d.ts","sourceRoot":"","sources":["../src/Stats.ts"],"names":[],"mappings":"AAEA,qBAAa,KAAK;IAChB,UAAU,EAAE,WAAW,CAAC;IACxB,MAAM,SAAK;IACX,eAAe,SAAQ;IACvB,QAAQ,SAAqB;IAC7B,KAAK,EAAE,MAAM,CAAC;;IAOd,MAAM,aAoBJ;IAEF,OAAO;CAGR"}