feat(tours): add non-motorized day tour planning

client/src/components/shared/DetailShell.test.tsx

@@ -0,0 +1,29 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, expect, it, vi } from 'vitest'
+import DetailShell from './DetailShell'
+
+describe('DetailShell', () => {
+  it('centers between planner panels and owns header, scrolling, footer and close behavior', () => {
+    const onClose = vi.fn()
+    const { container } = render(
+      <DetailShell
+        header={<h2>Detail title</h2>}
+        footer={<button type="button">Action</button>}
+        onClose={onClose}
+        closeLabel="Close"
+        leftWidth={240}
+        rightWidth={320}
+        testId="detail-scroll"
+      >
+        <p>Detail content</p>
+      </DetailShell>,
+    )
+
+    const shell = container.firstElementChild as HTMLElement
+    expect(shell.style.left).toBe('calc(240px + 0.5 * (100% - 240px - 320px))')
+    expect(screen.getByTestId('detail-scroll')).toHaveTextContent('Detail content')
+    expect(screen.getByRole('button', { name: 'Action' })).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: 'Close' }))
+    expect(onClose).toHaveBeenCalledOnce()
+  })
+})