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 {
  enabled?: boolean;
  position?: PanelPosition;
  /** Panel mode: 'overlay' slides over content, 'push' shifts content aside */
  mode?: PanelMode;
  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;
}

Properties

enabled
boolean
No description.
position
PanelPosition
No description.
mode
PanelMode
Panel mode: 'overlay' slides over content, 'push' shifts content aside
width
number
No description.
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.

PanelPosition

type
typescript
type PanelPosition = 'left' | 'right'

PanelMode

type
typescript
type PanelMode = 'overlay' | 'push'