Slots & UI

Plugins render into predefined slot regions within the editor workspace. This page details all available slots, visibility policies, Z-index conventions, and the contribution system.

Available Slots

Show Policies

The show property determines when a plugin's UI is rendered:

Most tools use 'frame-required' because they operate on layer data that doesn't exist without a document.

Z-Index Protocol

The workspace defines a strict Z-index map in EDITOR_Z_INDEX (@opengpex/editor/core/helpers/config) to prevent overlap conflicts:

Within each slot, plugins are ordered by the order property (lower = rendered first / further back).

Sidebar Drawer Behavior

For SIDE_BAR plugins:

• Clicking a sidebar icon toggles its drawer panel; double-clicking isolates the drawer (closes all others)
• Multiple drawers can be open concurrently across Left/Right columns
• The side property ('left' | 'right') determines default placement
• Users can drag-and-drop sidebar icons to reorder or swap between columns
• Drawer panel width is set via initialConfig.preferredWidth (in pixels); it defaults to 320 when unset

Drawer Auto-Reveal

SIDE_BAR plugins may declare an autoReveal rule to open automatically when editor state matches a condition:

export const plugin: EditorPlugin = {
  // ...
  autoReveal: {
    // Pure, O(1) predicate — expansion triggers only on the false → true edge
    when: (state) => !!state.activeFrameId,
    // What happens when `when` becomes false:
    // 'sticky' (default) — stay open until the user closes it
    // 'restore'          — restore the open state from before activation
    // 'collapse'         — always collapse
    collapseWhenFalse: 'restore',
    priority: 0, // higher wins when multiple drawers reveal simultaneously
  },
};

Contributions System

Contributions System

Plugins can donate additional UI to external slots via the contributions array:

export const plugin: EditorPlugin = {
  // ...
  contributions: [
    {
      slot: 'OPTION_BAR',
      component: MyOptionsBarWidget,
    },
  ],
};

This allows a SIDE_BAR plugin to also contribute an options strip to the top bar without creating a separate plugin.

Each UIContribution accepts slot, component, plus optional order, group, title, and icon. Rendering conventions handled automatically by PluginSlot:

• OPTION_BAR entries are wrapped in a pill-shaped container (h-[34px] px-3.5, panel background with backdrop blur, rounded on first/last siblings) — keep your component content-only and let the wrapper provide the chrome
• A divider is rendered automatically whenever order crosses a multiple of 100 (full-width line in SIDE_BAR, short centered line in TOOL_MENU, none in OPTION_BAR)

Next Steps

• Plugin System Overview — Architecture context
• Your First Plugin — See slots in practice
• Plugin API Reference — Hook documentation

Last updated: 2026-07-30