Defaults & Constants

Export	Description
`DEFAULT_THEME`	`ThemeInput` — the full default token set the SDK ships with. Read it to inspect defaults, or spread it into `updateSidenetStyledConfig({ theme })` as a starting point.
`SIDENET_EVENTS`	`{ OPEN, CLOSE, RESIZE, READY }` — typed event-name constants. Prefer these over raw `'sidenet:open'` strings for type safety.

import { DEFAULT_THEME, SIDENET_EVENTS, updateSidenetStyledConfig } from 'sidenetai-sdk';

// Start from defaults and tweak one token
updateSidenetStyledConfig({
  theme: { ...DEFAULT_THEME, accentColor: { light: '#ff5722', dark: '#ff8a65' } },
});

window.addEventListener(SIDENET_EVENTS.OPEN, (e) => {
  console.log('Opened at', e.detail.width);
});

Events

Three ways to respond to sidebar state changes:

1. Callbacks (Simplest)

initSidenet({
  orgId: 'org-123',
  onOpen: (detail) => console.log('Opened', detail.width),
  onClose: (detail) => console.log('Closed'),
  onResize: (detail) => console.log('Resized to', detail.width),
  onReady: (detail) => console.log('Ready'),
});

2. CSS Custom Properties (Zero-code layout)

.my-content {
  margin-right: var(--sidenet-width, 0);
  transition: margin 0.3s ease;
}

Available properties (set on the host page’s <html> element):

--sidenet-width — Current width (e.g., 400px) or 0 when closed
--sidenet-open — 1 when open, 0 when closed
--sidenet-position — left or right

Theme token variables (--background, --aui-accent-color, etc.) live inside the Shadow DOM and are not exposed to the host page. To customize them, use updateSidenetStyledConfig({ theme }) rather than CSS overrides.

3. Window Events (Decoupled)

import { SIDENET_EVENTS } from 'sidenetai-sdk';

window.addEventListener(SIDENET_EVENTS.OPEN, (e) => {
  console.log('Opened', e.detail.width, e.detail.position);
});

window.addEventListener(SIDENET_EVENTS.CLOSE, (e) => {
  console.log('Closed');
});

window.addEventListener(SIDENET_EVENTS.RESIZE, (e) => {
  console.log('Resized', e.detail.width);
});

window.addEventListener(SIDENET_EVENTS.READY, (e) => {
  console.log('Ready');
});

Raw event-name strings ('sidenet:open', 'sidenet:close', 'sidenet:resize', 'sidenet:ready') also work — the constants exist for type safety and refactor resilience. Event detail shape:

interface SidenetEventDetail {
  width: string;           // e.g., '400px'
  position: 'left' | 'right';
  layout: 'sidebar' | 'modal' | 'drawer';
}