feat: add reusable resizable split panes

packages/ui/app-shell.css

@@ -343,6 +343,55 @@ p {
   padding: 28px;
 }
 
+.split-handle {
+  position: relative;
+  z-index: 12;
+  width: 12px;
+  min-width: 12px;
+  align-self: stretch;
+  border: 0;
+  cursor: col-resize;
+  touch-action: none;
+}
+
+.split-handle::before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 2px;
+  background: var(--line);
+  content: "";
+  transform: translateX(-50%);
+  transition:
+    width 140ms ease,
+    background 140ms ease,
+    box-shadow 140ms ease;
+}
+
+.split-handle:hover::before,
+.split-handle:focus-visible::before,
+[data-split-pane-dragging="true"] > .split-handle::before {
+  width: 4px;
+  background: var(--mint);
+  box-shadow: 0 0 18px rgb(101 242 191 / 34%);
+}
+
+.split-handle:focus-visible {
+  outline: 2px solid var(--mint);
+  outline-offset: -2px;
+}
+
+.split-handle[aria-disabled="true"] {
+  cursor: default;
+}
+
+body.is-resizing-pane,
+body.is-resizing-pane * {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
 .empty-state {
   width: min(680px, 100%);
   padding: clamp(28px, 6vw, 56px);