Search documentation

Search documentation

Core SDK@pillar-ai/sdk

Panel

Open, close, and control the help panel.

typescript
import Pillar from '@pillar-ai/sdk'

Methods

Pillar.open()

Open the help panel

typescript
open(options?: {
    view?: string;
    article?: string;
    search?: string;
    focusInput?: boolean;
  }): void

Parameters

options
{ view?: string; article?: string; search?: string; focusInput?: boolean; }
No description.

Pillar.close()

Close the help panel

typescript
close(): void

Pillar.toggle()

Toggle the help panel

typescript
toggle(): void

Properties

Pillar.isPanelOpen

Whether the panel is currently open

typescript
get isPanelOpen: boolean

Type

boolean

Types

PanelConfig

interface
typescript
interface PanelConfig {
  /**
   * Whether the panel is enabled.
   * @default true
   */
  enabled?: boolean;
  /**
   * Which side of the screen the panel appears on.
   * @default 'right'
   */
  position?: PanelPosition;
  /**
   * Panel mode: 'overlay' slides over content, 'push' shifts content aside.
   * @default 'push'
   */
  mode?: PanelMode;
  /**
   * Panel width in pixels.
   * @default 380
   */
  width?: number;
  /** 
   * Custom mount point for the panel.
   * - CSS selector string (e.g., '#pillar-panel')
   * - HTMLElement reference
   * - 'manual' for React component-based mounting
   * - undefined (default) mounts to document.body
   */
  container?: string | HTMLElement | 'manual';
  /**
   * Whether to use Shadow DOM for style isolation.
   * - false (default): Panel renders in regular DOM, inherits host app CSS.
   *   Custom cards can use the host app's design system (Tailwind, etc.)
   * - true: Panel renders in Shadow DOM, fully isolated from host CSS.
   *   Use this if you need style isolation on third-party sites.
   * @default false
   */
  useShadowDOM?: boolean;
  /**
   * Viewport width below which the panel switches from 'push' mode to 'hover' mode.
   * In hover mode, the panel floats over content instead of pushing it aside.
   * - number: The breakpoint in pixels (default: 1200)
   * - false: Disable responsive behavior, always use push mode
   * @default 1200
   */
  hoverBreakpoint?: number | false;
  /**
   * Whether to show a backdrop overlay when the panel is in hover mode.
   * Only applies when viewport is below hoverBreakpoint.
   * @default true
   */
  hoverBackdrop?: boolean;
  /**
   * Viewport width below which the panel takes full screen width.
   * @default 500
   */
  fullWidthBreakpoint?: number;
  /**
   * Whether to open the panel automatically on initialization.
   * Takes priority over localStorage persisted state.
   * @default false
   */
  initialOpen?: boolean;
  /**
   * Whether the panel can be resized by dragging its edge.
   * A drag handle appears on the content-facing edge of the panel when enabled.
   * The resized width is persisted to localStorage.
   * @default true
   */
  resizable?: boolean;
  /**
   * Target element for push mode padding.
   * In push mode, padding is applied to this element to make room for the panel.
   * - CSS selector string (e.g., '#main-content', 'body')
   * - HTMLElement reference
   * - undefined (default) applies padding to document.documentElement (html)
   * @default undefined (document.documentElement)
   */
  pushTarget?: string | HTMLElement;
}

Properties

enabled
boolean
Whether the panel is enabled.Defaults to true.
position
PanelPosition
Which side of the screen the panel appears on.Defaults to 'right'.
mode
PanelMode
Panel mode: 'overlay' slides over content, 'push' shifts content aside.Defaults to 'push'.
width
number
Panel width in pixels.Defaults to 380.
container
string | HTMLElement | 'manual'
Custom mount point for the panel. - CSS selector string (e.g., '#pillar-panel') - HTMLElement reference - 'manual' for React component-based mounting - undefined (default) mounts to document.body
useShadowDOM
boolean
Whether to use Shadow DOM for style isolation. - false (default): Panel renders in regular DOM, inherits host app CSS. Custom cards can use the host app's design system (Tailwind, etc.) - true: Panel renders in Shadow DOM, fully isolated from host CSS. Use this if you need style isolation on third-party sites.Defaults to false.
hoverBreakpoint
number | false
Viewport width below which the panel switches from 'push' mode to 'hover' mode. In hover mode, the panel floats over content instead of pushing it aside. - number: The breakpoint in pixels (default: 1200) - false: Disable responsive behavior, always use push modeDefaults to 1200.
hoverBackdrop
boolean
Whether to show a backdrop overlay when the panel is in hover mode. Only applies when viewport is below hoverBreakpoint.Defaults to true.
fullWidthBreakpoint
number
Viewport width below which the panel takes full screen width.Defaults to 500.
initialOpen
boolean
Whether to open the panel automatically on initialization. Takes priority over localStorage persisted state.Defaults to false.
resizable
boolean
Whether the panel can be resized by dragging its edge. A drag handle appears on the content-facing edge of the panel when enabled. The resized width is persisted to localStorage.Defaults to true.
pushTarget
string | HTMLElement
Target element for push mode padding. In push mode, padding is applied to this element to make room for the panel. - CSS selector string (e.g., '#main-content', 'body') - HTMLElement reference - undefined (default) applies padding to document.documentElement (html)Defaults to undefined (document.documentElement).

PanelPosition

type

Which side of the screen the panel appears on.

typescript
type PanelPosition = 'left' | 'right'

PanelMode

type

How the panel interacts with page content: 'overlay' floats over it, 'push' shifts it aside.

typescript
type PanelMode = 'overlay' | 'push'