"use client";

import { DragSplitPanels, type SplitOrientation } from "./index";

export interface DemoProps {
  orientation?: SplitOrientation;
  showHandleGrip?: boolean;
  defaultSplit?: number;
  accentColor?: string;
}

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({
  orientation = "horizontal",
  showHandleGrip = true,
  defaultSplit = 50,
  accentColor = "#38BDF8",
}: DemoProps) {
  return (
    <div className="flex h-[360px] w-full items-stretch p-4">
      <DragSplitPanels orientation={orientation} showHandleGrip={showHandleGrip} defaultSplit={defaultSplit} accentColor={accentColor} />
    </div>
  );
}

1d:T2566, 1e:T1ab9c,

<script setup lang="ts">
import { computed, ref, watch } from "vue";

type Orientation = "horizontal" | "vertical";

const props = withDefaults(
  defineProps<{
    orientation?: Orientation;
    showHandleGrip?: boolean;
    defaultSplit?: number;
    accentColor?: string;
  }>(),
  { orientation: "horizontal", showHandleGrip: true, defaultSplit: 50, accentColor: "#38BDF8" },
);

const nestedOrientation = computed<Orientation>(() => (props.orientation === "horizontal" ? "vertical" : "horizontal"));
const outerHorizontal = computed(() => props.orientation === "horizontal");
const innerHorizontal = computed(() => nestedOrientation.value === "horizontal");

const outerMin = 18;
const innerMin = 20;
const outerSplit = ref(props.defaultSplit);
const innerSplit = ref(62);
const outerRef = ref<HTMLElement | null>(null);
const innerRef = ref<HTMLElement | null>(null);
const outerDragging = ref(false);
const innerDragging = ref(false);

watch(
  () => props.defaultSplit,
  (value) => {
    outerSplit.value = value;
  },
);
watch(
  () => props.orientation,
  () => {
    innerSplit.value = 62;
  },
);

function clamp(value: number, min: number) {
  return Math.min(100 - min, Math.max(min, value));
}

function updateOuter(clientX: number, clientY: number) {
  const rect = outerRef.value?.getBoundingClientRect();
  if (!rect) return;
  const raw = outerHorizontal.value ? ((clientX - rect.left) / rect.width) * 100 : ((clientY - rect.top) / rect.height) * 100;
  outerSplit.value = clamp(raw, outerMin);
}

function updateInner(clientX: number, clientY: number) {
  const rect = innerRef.value?.getBoundingClientRect();
  if (!rect) return;
  const raw = innerHorizontal.value ? ((clientX - rect.left) / rect.width) * 100 : ((clientY - rect.top) / rect.height) * 100;
  innerSplit.value = clamp(raw, innerMin);
}

function onOuterPointerDown(event: PointerEvent) {
  outerDragging.value = true;
  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
  updateOuter(event.clientX, event.clientY);
}
function onOuterPointerMove(event: PointerEvent) {
  if (!outerDragging.value) return;
  updateOuter(event.clientX, event.clientY);
}
function onOuterPointerUp(event: PointerEvent) {
  if (!outerDragging.value) return;
  outerDragging.value = false;
  const el = event.currentTarget as HTMLElement;
  if (el.hasPointerCapture(event.pointerId)) el.releasePointerCapture(event.pointerId);
}
function onOuterKeyDown(event: KeyboardEvent) {
  const step = event.shiftKey ? 8 : 2;
  const decreaseKey = outerHorizontal.value ? "ArrowLeft" : "ArrowUp";
  const increaseKey = outerHorizontal.value ? "ArrowRight" : "ArrowDown";
  if (event.key === decreaseKey) {
    event.preventDefault();
    outerSplit.value = clamp(outerSplit.value - step, outerMin);
  } else if (event.key === increaseKey) {
    event.preventDefault();
    outerSplit.value = clamp(outerSplit.value + step, outerMin);
  } else if (event.key === "Home") {
    event.preventDefault();
    outerSplit.value = outerMin;
  } else if (event.key === "End") {
    event.preventDefault();
    outerSplit.value = 100 - outerMin;
  }
}

function onInnerPointerDown(event: PointerEvent) {
  innerDragging.value = true;
  (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
  updateInner(event.clientX, event.clientY);
}
function onInnerPointerMove(event: PointerEvent) {
  if (!innerDragging.value) return;
  updateInner(event.clientX, event.clientY);
}
function onInnerPointerUp(event: PointerEvent) {
  if (!innerDragging.value) return;
  innerDragging.value = false;
  const el = event.currentTarget as HTMLElement;
  if (el.hasPointerCapture(event.pointerId)) el.releasePointerCapture(event.pointerId);
}
function onInnerKeyDown(event: KeyboardEvent) {
  const step = event.shiftKey ? 8 : 2;
  const decreaseKey = innerHorizontal.value ? "ArrowLeft" : "ArrowUp";
  const increaseKey = innerHorizontal.value ? "ArrowRight" : "ArrowDown";
  if (event.key === decreaseKey) {
    event.preventDefault();
    innerSplit.value = clamp(innerSplit.value - step, innerMin);
  } else if (event.key === increaseKey) {
    event.preventDefault();
    innerSplit.value = clamp(innerSplit.value + step, innerMin);
  } else if (event.key === "Home") {
    event.preventDefault();
    innerSplit.value = innerMin;
  } else if (event.key === "End") {
    event.preventDefault();
    innerSplit.value = 100 - innerMin;
  }
}
</script>

<template>
  <div class="drag-split-panels" :style="{ '--split-accent': accentColor }">
    <div ref="outerRef" class="split-group" :class="outerHorizontal ? 'split-group--row' : 'split-group--col'">
      <div class="pane" :style="{ flexBasis: outerSplit + '%' }">
        <div class="pane__content">
          <span class="pane__label">Sidebar</span>
          <span class="pane__sublabel">Navigation and filters</span>
        </div>
      </div>
      <div
        class="handle"
        :class="outerHorizontal ? 'handle--row' : 'handle--col'"
        role="separator"
        :aria-orientation="outerHorizontal ? 'vertical' : 'horizontal'"
        aria-label="Resize sidebar"
        :aria-valuenow="Math.round(outerSplit)"
        :aria-valuemin="outerMin"
        :aria-valuemax="100 - outerMin"
        tabindex="0"
        @pointerdown="onOuterPointerDown"
        @pointermove="onOuterPointerMove"
        @pointerup="onOuterPointerUp"
        @pointercancel="onOuterPointerUp"
        @keydown="onOuterKeyDown"
      >
        <div class="handle__line"></div>
        <div v-if="showHandleGrip" class="handle__grip" :class="outerHorizontal ? 'handle__grip--row' : 'handle__grip--col'" aria-hidden="true"></div>
      </div>
      <div class="pane pane--fill">
        <div ref="innerRef" class="split-group" :class="innerHorizontal ? 'split-group--row' : 'split-group--col'">
          <div class="pane" :style="{ flexBasis: innerSplit + '%' }">
            <div class="pane__content">
              <span class="pane__label">Preview</span>
              <span class="pane__sublabel">Live canvas</span>
            </div>
          </div>
          <div
            class="handle"
            :class="innerHorizontal ? 'handle--row' : 'handle--col'"
            role="separator"
            :aria-orientation="innerHorizontal ? 'vertical' : 'horizontal'"
            aria-label="Resize content panes"
            :aria-valuenow="Math.round(innerSplit)"
            :aria-valuemin="innerMin"
            :aria-valuemax="100 - innerMin"
            tabindex="0"
            @pointerdown="onInnerPointerDown"
            @pointermove="onInnerPointerMove"
            @pointerup="onInnerPointerUp"
            @pointercancel="onInnerPointerUp"
            @keydown="onInnerKeyDown"
          >
            <div class="handle__line"></div>
            <div v-if="showHandleGrip" class="handle__grip" :class="innerHorizontal ? 'handle__grip--row' : 'handle__grip--col'" aria-hidden="true"></div>
          </div>
          <div class="pane pane--fill">
            <div class="pane__content">
              <span class="pane__label">Inspector</span>
              <span class="pane__sublabel">Selected element properties</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.drag-split-panels {
  position: relative;
  height: 100%;
  min-height: 320px;
  width: 100%;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgb(128 128 128 / 0.18);
  background: rgb(128 128 128 / 0.03);
  color: inherit;
}
.split-group {
  position: relative;
  display: flex;
  height: 100%;
  width: 100%;
  min-height: 0;
  min-width: 0;
}
.split-group--row {
  flex-direction: row;
}
.split-group--col {
  flex-direction: column;
}
.pane {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  flex-grow: 0;
  flex-shrink: 0;
}
.pane--fill {
  flex: 1 1 auto;
}
.pane__content {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding: 2rem;
  text-align: center;
}
.pane__label {
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.85;
}
.pane__sublabel {
  font-size: 0.75rem;
  opacity: 0.45;
}
.handle {
  position: relative;
  flex-shrink: 0;
  touch-action: none;
  user-select: none;
  outline: none;
}
.handle--row {
  width: 0.75rem;
  cursor: col-resize;
}
.handle--col {
  height: 0.75rem;
  cursor: row-resize;
}
.handle__line {
  position: absolute;
  border-radius: 9999px;
  background: rgb(128 128 128 / 0.2);
  transition: background-color 150ms ease, width 150ms ease, height 150ms ease;
}
.handle--row .handle__line {
  top: 0.25rem;
  bottom: 0.25rem;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}
.handle--col .handle__line {
  left: 0.25rem;
  right: 0.25rem;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}
.handle:hover .handle__line,
.handle:focus-visible .handle__line {
  background: var(--split-accent);
}
.handle--row:hover .handle__line,
.handle--row:focus-visible .handle__line {
  width: 2px;
}
.handle--col:hover .handle__line,
.handle--col:focus-visible .handle__line {
  height: 2px;
}
.handle__grip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  border: 1px solid rgb(128 128 128 / 0.25);
  background: rgb(128 128 128 / 0.12);
  opacity: 0.7;
  transition: opacity 150ms ease;
}
.handle__grip--row {
  height: 2rem;
  width: 0.375rem;
}
.handle__grip--col {
  height: 0.375rem;
  width: 2rem;
}
.handle:hover .handle__grip {
  opacity: 1;
}
</style>

Nearby