Resizable split pane
List and record side by side (tickets inbox, orders peek pinned to split). Drag the handle or use the keyboard; the width is remembered per person; collapse the list with ⌘\.
Covers: M06. Exports: SplitPane.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
States
5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
default 400px
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
dragging the handle
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
nothing selected
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
record loading
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
list collapsed
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
Density
The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.
comfortable · phone default
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
en
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
中文 · lang=zh-Hans
手机不分栏：列表 → 详情，右滑返回。
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · 订单 4503待零售商回复High
#918 · Order arrived damagedKestrel Tailoring · 订单 4511待处理High
#915 · Fabric Out of StockHarrow & Vale待客服回复Medium
#912 · Web App loginBrightwater Bespoke已解决Low
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
long string
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve Length on the second fitting jacket, customer flies out on 24 OctAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
permission denied
No split on phone: list → record, swipe back.
#877 · Measurement Issue | Missing Sleeve LengthAtelier North · Order 4503Pending Retailer ResponseHigh
#918 · Order arrived damagedKestrel Tailoring · Order 4511OpenHigh
#915 · Fabric Out of StockHarrow & ValePending Support ResponseMedium
#912 · Web App loginBrightwater BespokeResolvedLow
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
SplitPane·@rj/admin-kit- Props
left·right·defaultSize·minSize320px ·collapsible·storageKey- States
- default · dragging · collapsed · empty · loading
- shadcn / Radix
- Resizable (shadcn)
- Package underneath
- react-resizable-panels · zustand persist (width)
- Accessibility
- handle is role=separator with aria-valuenow; ←→ resize by 16px, Home/End collapse/expand
- API operations
- admin.tickets.index + admin.tickets.show · admin.orders.index + admin.orders.show
- Phone variant
- none: list → record