{
  "name": "agent-shell",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "agent-shell.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport type { HTMLAttributes, ReactNode } from \"react\";\r\n\r\nconst shellClass = css({\r\n  display: \"grid\",\r\n  gridTemplateColumns: \"auto 1fr auto\",\r\n  gridTemplateRows: \"auto 1fr\",\r\n  gridTemplateAreas: `\r\n    \"sidebar header inspector\"\r\n    \"sidebar main   inspector\"\r\n  `,\r\n  height: \"100dvh\",\r\n  width: \"100%\",\r\n  overflow: \"hidden\",\r\n  backgroundColor: theme.color.background,\r\n  color: theme.color.foreground,\r\n  fontFamily: theme.fontFamily.sans,\r\n});\r\n\r\nconst sidebarClass = css({\r\n  gridArea: \"sidebar\",\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  minHeight: 0,\r\n  width: \"16rem\",\r\n  borderRight: `1px solid ${theme.color.border}`,\r\n  backgroundColor: theme.color.card,\r\n  overflowY: \"auto\",\r\n  transitionProperty: \"width, opacity\",\r\n  transitionDuration: theme.duration.base,\r\n  transitionTimingFunction: theme.easing.standard,\r\n  '&[data-collapsed=\"true\"]': {\r\n    width: 0,\r\n    opacity: 0,\r\n    overflow: \"hidden\",\r\n    borderRightWidth: 0,\r\n  },\r\n});\r\n\r\nconst headerClass = css({\r\n  gridArea: \"header\",\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  gap: theme.space[3],\r\n  minHeight: \"3.5rem\",\r\n  padding: `0 ${theme.space[4]}`,\r\n  borderBottom: `1px solid ${theme.color.border}`,\r\n  backgroundColor: theme.color.background,\r\n});\r\n\r\nconst mainClass = css({\r\n  gridArea: \"main\",\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  minHeight: 0,\r\n  minWidth: 0,\r\n  overflow: \"hidden\",\r\n});\r\n\r\nconst inspectorClass = css({\r\n  gridArea: \"inspector\",\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  minHeight: 0,\r\n  width: \"20rem\",\r\n  borderLeft: `1px solid ${theme.color.border}`,\r\n  backgroundColor: theme.color.card,\r\n  overflowY: \"auto\",\r\n  transitionProperty: \"width, opacity\",\r\n  transitionDuration: theme.duration.base,\r\n  transitionTimingFunction: theme.easing.standard,\r\n  '&[data-collapsed=\"true\"]': {\r\n    width: 0,\r\n    opacity: 0,\r\n    overflow: \"hidden\",\r\n    borderLeftWidth: 0,\r\n  },\r\n});\r\n\r\n/**\r\n * The frame an agent application sits in: a conversation sidebar, a header, the\r\n * main transcript area, and a right-hand inspector for traces, context, or\r\n * state.\r\n *\r\n * Built as a CSS grid with named areas so the sidebar and inspector can\r\n * collapse to zero width without the main column reflowing its children — the\r\n * transcript keeps its scroll position when a panel toggles. Every region owns\r\n * its own scroll, so only the transcript moves while the chrome stays put.\r\n */\r\nexport function AgentShell({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <div className={className ? `${shellClass} ${className}` : shellClass} {...props}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport interface AgentShellPanelProps extends HTMLAttributes<HTMLElement> {\r\n  collapsed?: boolean;\r\n  children: ReactNode;\r\n}\r\n\r\nexport function AgentSidebar({ collapsed, className, children, ...props }: AgentShellPanelProps) {\r\n  return (\r\n    <aside\r\n      data-collapsed={collapsed || undefined}\r\n      aria-hidden={collapsed || undefined}\r\n      className={className ? `${sidebarClass} ${className}` : sidebarClass}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </aside>\r\n  );\r\n}\r\n\r\nexport function AgentHeader({ className, children, ...props }: HTMLAttributes<HTMLElement>) {\r\n  return (\r\n    <header className={className ? `${headerClass} ${className}` : headerClass} {...props}>\r\n      {children}\r\n    </header>\r\n  );\r\n}\r\n\r\nexport function AgentMain({ className, children, ...props }: HTMLAttributes<HTMLElement>) {\r\n  return (\r\n    <main className={className ? `${mainClass} ${className}` : mainClass} {...props}>\r\n      {children}\r\n    </main>\r\n  );\r\n}\r\n\r\nexport function AgentInspector({ collapsed, className, children, ...props }: AgentShellPanelProps) {\r\n  return (\r\n    <aside\r\n      data-collapsed={collapsed || undefined}\r\n      aria-hidden={collapsed || undefined}\r\n      aria-label=\"Inspector\"\r\n      className={className ? `${inspectorClass} ${className}` : inspectorClass}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </aside>\r\n  );\r\n}\r\n\r\nconst scrollAreaClass = css({\r\n  flex: 1,\r\n  minHeight: 0,\r\n  overflowY: \"auto\",\r\n  padding: theme.space[4],\r\n});\r\n\r\n/** A scrollable region that fills the remaining height of its shell area. */\r\nexport function AgentScrollArea({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <div className={className ? `${scrollAreaClass} ${className}` : scrollAreaClass} {...props}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nconst composerClass = css({\r\n  flexShrink: 0,\r\n  padding: theme.space[4],\r\n  borderTop: `1px solid ${theme.color.border}`,\r\n  backgroundColor: theme.color.background,\r\n});\r\n\r\n/** A pinned footer region for the prompt composer, anchored below the transcript. */\r\nexport function AgentComposer({ className, children, ...props }: HTMLAttributes<HTMLDivElement>) {\r\n  return (\r\n    <div className={className ? `${composerClass} ${className}` : composerClass} {...props}>\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}