# Panel System — Examples

## Example 1: Create the Edge Panel

```js
import { PanelSystem } from '@fvcms/system/panel-system';

const edge = PanelSystem.createPanel({
  id: 'fvcms-edge-panel',
  type: 'edge',
  dockEdge: 'right',
  size: { width: 320, height: '100%' },
  tabs: [
    { id: 'structure', module: 'cms.structure' },
    { id: 'insert', module: 'cms.insert' },
    { id: 'style', module: 'cms.style' },
    { id: 'bind', module: 'cms.bind' },
    { id: 'history', module: 'cms.history' },
  ],
});
```

## Example 2: Open, minimize, restore

```js
// Open
PanelSystem.maximize('fvcms-edge-panel');

// Minimize to pill
const result = PanelSystem.minimize('fvcms-edge-panel');
// { ok: true, state: 'minimized' }

// Restore from pill
PanelSystem.maximize('fvcms-edge-panel');
```

## Example 3: Pro Mode lock

```js
// User enters Pro Mode
window.__fvcmsSetOperatingMode('pro');

// Now minimize is locked
const result = PanelSystem.minimize('fvcms-edge-panel');
// { ok: false, reason: 'pro_mode_locked' }

// User exits Pro Mode
window.__fvcmsSetOperatingMode('normal');

// Minimize works again
const result = PanelSystem.minimize('fvcms-edge-panel');
// { ok: true, state: 'minimized' }
```

## Example 4: Listen for state changes

```js
PanelSystem.on('panel:state-change', (event) => {
  console.log(`Panel ${event.panelId} changed from ${event.from} to ${event.to}`);
});
```

## Example 5: Mobile 45% rule

```js
// On a mobile viewport (width < 600px), a pinned panel reveals at 45% width
// Automatically applied by PanelSystem.pin()
PanelSystem.pin('fvcms-edge-panel', 'right');
// state: 'pinned-R', size: { width: Math.min(window.innerWidth * 0.45, 600) }
```