@gorilla-engine-sdk/create-gorilla-engine-plugin 1.0.0

package/generator-gorilla-engine-plugin/app/templates/.agents/skills/gorilla-engine-dsp/references/time-tempo.md

@@ -0,0 +1,209 @@
+# Time & Tempo Reference
+
+## Delay Functions
+
+### delay(microseconds)
+
+Pause the current callback. The callback resumes after the delay. Other callbacks can run during the wait.
+
+```
+on note
+  ' trigger note, wait 500ms, then change pitch
+  delay(500000)
+  set_tune(EVENT_ID, 100000, 1)  ' pitch up 1 semitone
+end on
+```
+
+### delay_msec(milliseconds)
+
+Approximate delay (~1-2ms accuracy). More CPU efficient than `delay()`.
+
+```
+delay_msec(100)  ' approximately 100ms
+```
+
+### delay_ppq(ppq)
+
+Delay by musical time. 960 ppq = quarter note. Follows tempo changes.
+
+| PPQ Value | Musical Duration |
+|-----------|-----------------|
+| 3840 | Whole note |
+| 2880 | Dotted half |
+| 1920 | Half note |
+| 1440 | Dotted quarter |
+| 960 | Quarter note |
+| 720 | Dotted 8th |
+| 480 | 8th note |
+| 360 | Dotted 16th |
+| 240 | 16th note |
+| 120 | 32nd note |
+
+Triplets: divide by 3 (e.g., quarter triplet = 640 ppq, 8th triplet = 320 ppq).
+
+```
+delay_ppq(480)   ' wait one 8th note
+delay_ppq(240)   ' wait one 16th note
+```
+
+### end_delay(callbackID, andFutureDelays)
+
+Cancel a delay in a specific callback. If `andFutureDelays` ≠ 0, future delays in that callback are also skipped.
+
+```
+' Store callback ID for later cancellation
+seqCallback = CALLBACK_ID
+while seqCallback = CALLBACK_ID
+  ' do sequencer step...
+  delay_ppq(480)
+end while
+
+' To stop the sequence from another callback:
+var temp = seqCallback
+seqCallback = 0
+end_delay(temp, 0)
+```
+
+## Time Variables
+
+| Variable | Description |
+|----------|-------------|
+| `TIME_MSEC` | Elapsed time in milliseconds since audio started (always increasing) |
+| `TIME_USEC` | Elapsed time in microseconds, sample-accurate. Reset with `reset_time_usec()` |
+| `BEAT_USEC` | Duration of one quarter note in microseconds at current tempo |
+| `BAR_USEC` | Duration of one bar in microseconds |
+| `BAR_POS_PPQ` | Position within current bar in ppq |
+| `BAR_POS_USEC` | Position within current bar in μs |
+| `SONG_POS_PPQ` | Transport position in ppq (960 per quarter) |
+| `SONG_PLAYING` | 0 = stopped, 1 = playing |
+| `TIME_SIG_NUM` | Time signature numerator (beat type: 4=quarter, 8=eighth) |
+| `TIME_SIG_DEN` | Time signature denominator (beats per bar) |
+
+## Tempo Sync Pattern
+
+Common pattern for switchable free/synced rate:
+
+```
+on init
+  prop_boolean LFO_Sync
+  prop_linear LFO_Rate(0, 1000, 10) = 500
+
+  prop_stepped LFO_Beats = 6
+    add_step(LFO_Beats, "1/1")
+    add_step(LFO_Beats, "1/2 D")
+    add_step(LFO_Beats, "1/1 T")
+    add_step(LFO_Beats, "1/2")
+    add_step(LFO_Beats, "1/4 D")
+    add_step(LFO_Beats, "1/2 T")
+    add_step(LFO_Beats, "1/4")
+    add_step(LFO_Beats, "1/8 D")
+    add_step(LFO_Beats, "1/4 T")
+    add_step(LFO_Beats, "1/8")
+    add_step(LFO_Beats, "1/16 D")
+    add_step(LFO_Beats, "1/8 T")
+    add_step(LFO_Beats, "1/16")
+
+  ' Precomputed LFO rate values for each beat division at module param scale
+  var lfoLookup[13] = (650515, 619280, 606492, 575257, 544023, 531235, 500000,
+                        468765, 455977, 424743, 393508, 380720, 349485)
+end on
+
+function SetLfoRate
+  if LFO_Sync
+    set_module_param(M_GROUP+0, M_MOD_SRC+1, 0, 3, lfoLookup[LFO_Beats])
+  else
+    set_module_param(M_GROUP+0, M_MOD_SRC+1, 0, 3, 1000 * LFO_Rate)
+  end if
+end function
+
+on LFO_Sync
+  set_module_param(M_GROUP+0, M_MOD_SRC+1, 0, 4, LFO_Sync)  ' LFO Sync param
+  SetLfoRate()
+end on
+
+on LFO_Rate;   SetLfoRate();  end on
+on LFO_Beats;  SetLfoRate();  end on
+```
+
+## Time Conversion
+
+| Function | Description |
+|----------|-------------|
+| `usec_to_ppq(usec)` | Convert microseconds to ppq at current tempo |
+| `ppq_to_usec(ppq)` | Convert ppq to microseconds at current tempo |
+| `usec_to_samples(usec)` | Convert microseconds to sample frames |
+| `reset_time_usec()` | Reset TIME_USEC to zero |
+| `set_bar_start(ppq)` | Set custom position for beat-synced effects |
+
+## Transport Callback
+
+```
+on transport
+  if SONG_PLAYING
+    ' transport started
+  else
+    ' transport stopped
+    release_note(ALL_EVENTS)
+  end if
+end on
+```
+
+Also available via `on listener` (periodic polling):
+
+```
+on listener
+  if SONG_PLAYING
+    ' playing
+  else
+    ' stopped
+  end if
+end on
+```
+
+## CC 123 — All Notes Off / Audio Restart
+
+CC 123 is sent when the audio engine starts or restarts. Use it to initialize state:
+
+```
+on controller
+  if EVENT_CC = 123
+    numHeldNotes = 0
+    release_note(ALL_EVENTS)
+    ' Also good place to report latency:
+    declare_latency(value)
+  end if
+end on
+```
+
+## Seconds to Envelope Time Conversion
+
+Envelope times are exponentially scaled. To convert seconds to parameter values, use a lookup table:
+
+```
+on init
+  prop_linear Attack(0, 10000, 1000)
+    set_prop_param(Attack, PROP_UNITS, "sec")
+
+  ' Lookup table: 0.00 to 16.00 seconds in 0.01 steps → parameter values
+  const sec_to_envTime[1601] = (0, 10000, 103012, 157420, ...)
+
+  var value
+  var temp
+end on
+
+function convertToEnvTime
+  if value >= 16000000
+    value = 1000000
+  else
+    temp = value / 10000
+    value = sec_to_envTime[temp] + ...
+      ((value mod 10000) * (sec_to_envTime[temp + 1] - sec_to_envTime[temp])) / 10000
+  end if
+end function
+
+on Attack
+  value = 1000 * Attack  ' time in microseconds
+  convertToEnvTime()
+  set_module_param(M_GROUP+0, M_MOD_SRC+1, 0, 2, value)  ' ADSR Attack
+end on
+```

package/generator-gorilla-engine-plugin/app/templates/.agents/skills/gorilla-engine-ui/SKILL.md

@@ -0,0 +1,104 @@
+---
+name: gorilla-engine-ui
+description: 'Write UI using the Gorilla Engine React implementation. Use when: building plugin UIs, creating GE components, using geKnob/geSlider/geButton/geToggle/geLabel/geComboBox, binding instrument properties, discovering concrete instrument parameters from .inst files, loadUI/createUI, useInstrument/useInstrumentProperty hooks, Gorilla React for native audio plugins.'
+---
+
+# Gorilla Engine React UI
+
+Build native audio plugin UIs using a custom React reconciler that bridges React components to Gorilla Engine's C++ UI framework.
+
+**Environment Constraints:**
+
+- There is **NO browser DOM**. Do NOT use `div`, `span`, `input`, `html`, etc.
+- There is **NO React Native**. Do NOT use `View`, `Text`, `TouchableOpacity`, etc.
+- You may ONLY use the primitive components defined in this skill and component libraries that build on top of them.
+
+## Architecture
+
+- **Custom React Reconciler** — maps React lifecycle to native GE components
+- **JSX intrinsic elements** — lowercase tags: `<geKnob />`, `<geSlider />`, `<geLabel />`
+- **27 native components** wrapped as React elements
+- **Declarative bindings** — bind UI to instrument parameters via `bindings` prop
+- **Standard React** — hooks, state, conditionals, fragments all work normally
+
+## Quick Start
+
+```tsx
+import { createUI, useInstrument, useInstrumentProperty } from 'gorilla-engine-react';
+
+function App() {
+  const [instrument] = useInstrument();
+  if (!instrument) return null;
+  return <PluginUI instrument={instrument} />;
+}
+
+function PluginUI({ instrument }) {
+  const [volume, setVolume] = useInstrumentProperty(instrument, 'Volume');
+  return (
+    <geLabel x={0} y={0} width={400} height={300} backgroundColor="FF222222">
+      <geKnob
+        x={50}
+        y={50}
+        width={80}
+        height={80}
+        min={0}
+        max={100}
+        value={volume.value}
+        onChange={(v) => setVolume(v)}
+        filmstrip={{ path: 'knob.png', count: 128 }}
+      />
+      <geLabel x={50} y={140} width={80} height={20} text={volume.text} textColor="FFFFFF" />
+    </geLabel>
+  );
+}
+
+createUI(<App />, 400, 300);
+```
+
+## Concrete Instrument Parameters
+
+When you need the actual parameter names for a specific instrument, do not guess them from the script or UI code. Query the compiled instrument directly:
+
+```bash
+blob-export --parameter-info <INST_FILE>
+```
+
+This returns JSON describing the parameters exposed by that `.inst` file. Use that output as the source of truth for control bindings, `useInstrumentProperty(...)`, and any parameter-specific UI generation.
+
+Preferred `blob-export` locations:
+
+- macOS: `/Applications/Gorilla Engine SDK/Tools/blob-export`
+- Windows: `%SystemDrive%\\Program Files\\Gorilla Engine SDK\\Tools\\blob-export.exe`
+- Fallback: `blob-export` from `PATH`
+
+When binding by name, remember that instrument parameter identifiers in bindings are lowercase even if the instrument script declared them with uppercase letters.
+
+## Reference Files
+
+Load these as needed for detailed information:
+
+| Topic             | File                                                            | When to load                                                               |
+| ----------------- | --------------------------------------------------------------- | -------------------------------------------------------------------------- |
+| Getting Started   | [getting-started.md](./references/getting-started.md)           | Entry points, hooks, app structure                                         |
+| Base Props        | [base-props.md](./references/base-props.md)                     | Common, Bounds, Background, Font, Clickable interfaces                     |
+| Event Handlers    | [event-handlers.md](./references/event-handlers.md)             | onClick, onChange, onMouseDrag, etc.                                       |
+| Bindings          | [bindings.md](./references/bindings.md)                         | Data binding syntax and view model integration                             |
+| Basic Controls    | [basic-controls.md](./references/basic-controls.md)             | geLabel, geButton, geKnob, geSlider, geToggle, geTextBox                   |
+| Advanced Controls | [advanced-controls.md](./references/advanced-controls.md)       | geComboBox, geXYPad, geMidiKeyboard, gePad                                 |
+| Visualization     | [visualization.md](./references/visualization.md)               | geLevelMeter, geWaveform, geCurve, geAmpEnv, geLottieAnimation             |
+| Editors           | [editors.md](./references/editors.md)                           | geSliceEditor, geListBox, geStepEditor, geBarStepEditor, geMappingEditor   |
+| Containers        | [containers.md](./references/containers.md)                     | geScrollView, geDragContainer, geDragTarget, geDropZone, geRubberband      |
+| Tags & Composite  | [composite-components.md](./references/composite-components.md) | geTagBrowser, geTagEditor, RadioGroup, LabelledKnob, LabelledSlider        |
+| GorillaEngine API | [gorilla-engine-api.md](./references/gorilla-engine-api.md)     | GorillaEngine global namespace, UI utilities, File I/O, Preset, Licensing  |
+| Instrument API    | [instrument-api.md](./references/instrument-api.md)             | Blob, Instrument, InstrumentProperty, MIDI, path accessors, dynamic params |
+
+## Key Rules
+
+1. **All components use `Partial<Props>`** — every prop is optional
+2. **JSX tag names are lowercase** — `geKnob`, not `GEKnob`
+3. **Position is absolute** — use `x`, `y`, `width`, `height` (no CSS layout). Children are clipped to parent bounds.
+4. **Colors are hex strings** — `"FF0000"` for red, prefix with alpha `"80FF0000"` for 50% opacity
+5. **Assets are file paths** — relative to the plugin's resource path
+6. **`geLabel` doubles as a container** — it has Background, so use it for panels/groups
+7. **`createUI()`** for pure React entry, **`loadUI()`** when using a YAML layout
+8. **Bindings** connect props to instrument parameters: `bindings={{ value: instrument.volume }}` (object preferred) or `bindings={{ value: 'instrument.volume' }}` (string). Be aware that the instrument parameters are always lowercase in both cases, even if defined in uppercase in the instrument script.

package/generator-gorilla-engine-plugin/app/templates/.agents/skills/gorilla-engine-ui/references/advanced-controls.md

@@ -0,0 +1,194 @@
+# Advanced Controls
+
+## geComboBox
+
+Dropdown selection list.
+
+**JSX tag:** `<geComboBox />`
+**Interfaces:** Common, Bounds, Background, Clickable, Font, Highlight
+**Handlers:** ClickableHandlers, `onChange`
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `number` | Selected index |
+| `items` | `string[]` | List of options |
+| `levelSeperator` | `string` | Character for nested submenus (e.g. `"/"`) |
+| `stretchText` | `boolean` | Stretch text to fit width |
+| `scrollWheelEnabled` | `boolean` | Navigate items with scroll wheel |
+| `styleSubmenu` | `boolean` | Apply distinct submenu styling |
+| `backgroundColorClicked` | `string` | Color when popup is open |
+| `backgroundColorHover` | `string` | Color on hover |
+| `itemReselectedAction` | `string` | ViewModel action when same item is reselected |
+| `padding` | `number \| object` | `{ left, top, right, bottom }` |
+| `images` | `object` | Arrow/checkmark/submenu images (see below) |
+| `popup` | `object` | Popup styling (see below) |
+| `subPopup` | `object` | Sub-popup styling |
+
+**Images object:**
+```tsx
+images={{
+  arrowIcon: 'arrow.png',
+  arrowIconPressed: 'arrow_pressed.png',
+  popupCheckmarkImage: 'check.png',
+  popupCheckmarkHighlightedImage: 'check_hl.png',
+}}
+```
+
+**Popup styling object:**
+```tsx
+popup={{
+  backgroundColor: 'FF333333',
+  itemTextColor: 'FFFFFF',
+  itemSelectedTextColor: 'FFFF00',
+  itemSelectedBackgroundColor: 'FF555555',
+  itemHighlightedTextColor: 'FFFFFF',
+  itemHighlightedBackgroundColor: 'FF4444FF',
+  checkmarkFloat: 'left',
+  cornerRadius: 4,
+  padding: { left: 5, top: 5, right: 5, bottom: 5 },
+}}
+```
+
+```tsx
+<geComboBox x={10} y={10} width={150} height={30}
+  items={['Sine', 'Saw', 'Square', 'Triangle']}
+  value={waveform}
+  backgroundColor="FF333333" textColor="FFFFFF"
+  onChange={(index) => setWaveform(index)}
+/>
+```
+
+**With submenus:**
+```tsx
+<geComboBox x={10} y={10} width={200} height={30}
+  items={['Oscillators/Sine', 'Oscillators/Saw', 'Filters/LowPass', 'Filters/HighPass']}
+  levelSeperator="/"
+  value={0}
+  onChange={(index) => setType(index)}
+/>
+```
+
+---
+
+## geXYPad
+
+2D control surface for adjusting two parameters simultaneously.
+
+**JSX tag:** `<geXYPad />`
+**Interfaces:** Common, Bounds, Clickable, Background
+**Handlers:** ClickableHandlers
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `valueX` | `number` | Current X value |
+| `valueY` | `number` | Current Y value |
+| `minX` / `maxX` | `number` | X axis range |
+| `minY` / `maxY` | `number` | Y axis range |
+| `stepSizeX` / `stepSizeY` | `number` | Step sizes |
+| `snapsToMousePosition` | `boolean` | Snap thumb to click position |
+| `thumbImage` | `string` | Path to thumb image |
+
+```tsx
+<geXYPad x={10} y={10} width={200} height={200}
+  valueX={64} valueY={64}
+  minX={0} maxX={127} minY={0} maxY={127}
+  backgroundColor="FF222222"
+  thumbImage="assets/xy_thumb.png"
+  bindings={{ valueX: 'Scripts/0/PanX', valueY: 'Scripts/0/PanY' }}
+/>
+```
+
+---
+
+## geMidiKeyboard
+
+On-screen MIDI keyboard.
+
+**JSX tag:** `<geMidiKeyboard />`
+**Interfaces:** Common, Bounds, Background
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `lowKey` | `number` | First MIDI note to display |
+| `highKey` | `number` | Last MIDI note to display |
+| `disableNKSColors` | `boolean` | Disable NKS color mapping |
+| `keys` | `object` | Key appearance configuration (see below) |
+
+**Keys configuration:**
+```tsx
+keys={{
+  blackColor: 'FF333333',
+  blackHoverColor: 'FF555555',
+  blackPressedColor: 'FF777777',
+  blackOutlineColor: 'FF000000',
+  whiteColor: 'FFEEEEEE',
+  whiteHoverColor: 'FFCCCCCC',
+  whitePressedColor: 'FFAAAAAA',
+  whiteOutlineColor: 'FF888888',
+  whiteHeight: 80,
+  blackHeight: 50,
+  spacing: 1,
+  outlineWidth: 1,
+  cornerRadius: 2,
+}}
+```
+
+```tsx
+<geMidiKeyboard x={0} y={400} width={800} height={100}
+  lowKey={36} highKey={84}
+  backgroundColor="FF111111"
+  keys={{
+    whiteColor: 'FFEEEEEE',
+    blackColor: 'FF333333',
+    whitePressedColor: 'FF4488FF',
+    blackPressedColor: 'FF4488FF',
+  }}
+/>
+```
+
+---
+
+## gePad
+
+MIDI trigger pad — fires note on/off events on click.
+
+**JSX tag:** `<gePad />`
+**Interfaces:** Common, Bounds, Background, KeyboardFocus, Clickable, Skinnable, Font
+**Handlers:** ClickableHandlers
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `midiNote` | `number` | MIDI note number (0-127) |
+| `velocity` | `number` | Velocity when pressed (0-127) |
+| `padState` | `boolean` | Visual pressed/playing state |
+| `images` | `object` | `{ normal?, hover?, down? }` — image paths |
+
+**Note:** gePad gets a default `keyboardFocus.color` of `"00000000"` (transparent).
+
+```tsx
+<gePad x={10} y={10} width={60} height={60}
+  midiNote={60} velocity={100}
+  backgroundColor="FF444444"
+  images={{
+    normal: 'pad.png',
+    hover: 'pad_hover.png',
+    down: 'pad_down.png',
+  }}
+  onClick={() => console.log('pad hit')}
+/>
+```
+
+**Pad grid example:**
+```tsx
+{[0, 1, 2, 3].map(row =>
+  [0, 1, 2, 3].map(col => (
+    <gePad key={`${row}-${col}`}
+      x={col * 70} y={row * 70}
+      width={60} height={60}
+      midiNote={36 + row * 4 + col}
+      velocity={100}
+      backgroundColor="FF444444"
+    />
+  ))
+)}
+```

package/generator-gorilla-engine-plugin/app/templates/.agents/skills/gorilla-engine-ui/references/base-props.md

@@ -0,0 +1,167 @@
+# Base Props (Shared Interfaces)
+
+All GE components compose their props from these base interfaces. Every property in every interface is optional (`Partial<T>`).
+
+## Common
+
+Shared by all components.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `id` | `string` | Unique identifier |
+| `visible` | `boolean` | Show/hide the component |
+| `enabled` | `boolean` | Enable/disable user input |
+| `wantsKeyboardFocus` | `boolean` | Request keyboard focus on activation |
+| `clickGrabsKeyboardFocus` | `boolean` | Click transfers keyboard focus |
+| `alpha` | `number` | Opacity 0.0 (transparent) to 1.0 (opaque) |
+| `alwaysOnTop` | `boolean` | Render above siblings |
+
+## Bounds
+
+Position and size. Used by virtually all components.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `x` | `number` | X position (from parent's left edge) |
+| `y` | `number` | Y position (from parent's top edge) |
+| `width` | `number` | Width in pixels |
+| `height` | `number` | Height in pixels |
+
+## Background
+
+Visual background properties.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `backgroundImage` | `string` | Image path (takes precedence over color) |
+| `backgroundColor` | `string` | Solid color hex string |
+| `cornerRadius` | `number` | Rounded corner radius |
+| `border` | `object` | `{ width?, color?, focusColor? }` |
+
+## Font
+
+Text rendering properties.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `font` | `string` | Font family name |
+| `fontSize` | `number` | Font size |
+| `fontKerning` | `number` | Character spacing adjustment |
+| `textColor` | `string` | Hex color, e.g. `"FFFFFF"`. RGBA prefix: `"80FF0000"` |
+| `textAlign` | `string` | One of: `'left'`, `'right'`, `'center'`, `'centered left'`, `'centered right'`, `'top left'`, `'top right'`, `'top center'`, `'bottom left'`, `'bottom right'`, `'bottom center'` |
+
+## Clickable
+
+Mouse interaction properties.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `interceptsMouseClicks` | `boolean` | Process mouse events directly |
+| `allowClicksOnChildren` | `boolean` | Let children process mouse events |
+| `modifiedClickAction` | `string` | Action on Shift/Ctrl+click |
+| `doubleClickAction` | `string` | Action on double-click (ViewModel) |
+| `mouseEnterAction` | `string` | Action on mouse enter |
+| `mouseExitAction` | `string` | Action on mouse exit |
+| `clickMask` | `string` | Bitmask for clickable region |
+| `mouseCursorType` | `string` | Cursor style: `'normal'`, `'pointing hand'`, `'IBeam'`, `'cross hair'`, `'wait'`, `'dragging hand'`, `'left right resize'`, etc. |
+
+## Skinnable
+
+Filmstrip animation/visual properties (used by knobs, sliders, toggles, pads, etc.).
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `filmstrip` | `object` | `{ path: string, count: number, direction?: string }` |
+| `animation` | `LottieAnimation` | Reference to a linked Lottie animation |
+
+## Margin
+
+Text positioning within a component's container.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `margin` | `number \| object` | Uniform number, or `{ left, top, right, bottom, other }` |
+
+## KeyboardFocus
+
+Visual appearance when a component has keyboard focus.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `keyboardFocus` | `object` | `{ color?, lineWidth?, cornerRadius? }` |
+
+## Scrollable
+
+Scrollbar styling.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `scrollbar` | `object` | `{ background?, track?, thumb? }` — hex color strings |
+
+## MIDILearn
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `midiLearn` | `object` | `{ enabled: boolean }` |
+
+## Highlight
+
+Automation highlight (AAX only).
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `highlight` | `object` | `{ drawFilledCircle, lineWidth, x, y, width, height }` |
+
+## Keyable
+
+Keyboard event properties.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `keyPressAction` | `string` | ViewModel action on key press |
+| `consumeEvent` | `boolean` | Prevent event propagation |
+
+## ReactElementProps
+
+Added by the React reconciler to all components.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `key` | `string \| number` | React list reconciliation key |
+| `children` | `any` | Nested React child elements |
+| `ref` | `RefObject` | Access the underlying `GEComponent` wrapper |
+| `bindings` | `object` | `{ [nativePropName]: 'viewModelPath' }` — see [bindings.md](./bindings.md) |
+
+## Interface Composition per Component
+
+Each component type combines a subset of these interfaces:
+
+| Component | Interfaces |
+|-----------|-----------|
+| geKnob | Common, Bounds, Clickable, Background, Skinnable, MIDILearn, Highlight |
+| geSlider | Same as geKnob + `direction`, `thumbImage` |
+| geLabel | Common, Bounds, Background, Font, Clickable, Margin, Keyable |
+| geButton | Common, Bounds, Font, Clickable, Background, KeyboardFocus, Keyable |
+| geToggle | Common, Bounds, Font, Clickable, Background, Highlight, MIDILearn, Margin |
+| geTextBox | Font, Clickable, Bounds, Background, Margin, Keyable |
+| geComboBox | Common, Bounds, Background, Clickable, Font, Highlight |
+| gePad | Common, Bounds, Background, KeyboardFocus, Clickable, Skinnable, Font |
+| geScrollView | Common, Bounds, Scrollable |
+| geMidiKeyboard | Common, Bounds, Background |
+| geLevelMeter | Common, Bounds, Background, Skinnable |
+| geWaveform | Common, Bounds, Background, Font, Clickable, Margin |
+| geCurve | Common, Bounds, Background, Font, Clickable |
+| geAmpEnv | Common, Bounds, Background, Font |
+| geListBox | Common, Bounds, Font, Clickable, Background, Scrollable, Highlight, MIDILearn |
+| geLottieAnimation | Common, Bounds |
+| geXYPad | Common, Bounds, Clickable, Background |
+| geRubberband | Common, Bounds |
+| geMappingEditor | Common, Bounds, Background, Clickable |
+| geSliceEditor | Common, Bounds, Background, Clickable |
+| geStepEditor | Common, Background, Bounds, Clickable |
+| geBarStepEditor | Common, Bounds, Background, Clickable |
+| geDragContainer | Common, Bounds, Clickable |
+| geDragTarget | Common, Bounds, Clickable |
+| geDropZone | Common, Bounds, Clickable |
+| geTagBrowser | Common, Bounds, Background, Font |
+| geTagEditor | Common, Bounds, Background, Font |