Artifact Panel Layout

Implementation
ArtifactPanelLayout API

Common Examples

Basic Usage

Wrap the chat content and any nested ArtifactPanel components in ArtifactPanelLayout. The layout establishes the positioning context and decides whether each registered panel sits inline or overlays the chat:

import {
  ArtifactPanel,
  ArtifactPanelLayout,
} from "@servicetitan/anvil2-ext-atlas";

function ChatLayout({ messages, panelOpen, setPanelOpen }) {
  return (
    <ArtifactPanelLayout>
      <Content itemsLength={messages.length}>{messages}</Content>
      <ArtifactPanel
        isOpen={panelOpen}
        onOpenChange={setPanelOpen}
        title="Supplemental info"
      >
        {/* artifact content */}
      </ArtifactPanel>
    </ArtifactPanelLayout>
  );
}

Responsive Behavior

The layout observes its own width and decides per-panel whether enough room is available to sit inline alongside the chat. Inline mode kicks in only when the chat content would still have at least 20rem of room; otherwise the panel switches to overlay mode and floats over the chat anchored to the appropriate edge.Mode is read from a context internal to ArtifactPanelLayout — consumers do not need to compute or pass it. When an ArtifactPanel is rendered outside ArtifactPanelLayout, it falls back to inline mode.

React Accessibility

The layout itself is a presentational <div> with no semantics — accessibility is handled by the components nested inside (chat content, ArtifactPanel aside landmark, etc.).
The layout establishes a positioning context (position: relative) so absolutely-positioned overlay panels anchor correctly without consumers needing to wire that up themselves.

<ArtifactPanelLayout>
  <ChatContent />
  <ArtifactPanel ... />
</ArtifactPanelLayout>