/**
 * B 端宽度拖拽 · 可见竖线统一规范。
 * 热区宽度由各场景定义（通常 8px：`w-2` / `w-3`）；可见分隔竖线统一 **2px**。
 */

export const TFDS_RESIZE_LINE_WIDTH_CLASS = 'w-[2px]';

export const TFDS_RESIZE_HANDLE_LINE_TRANSITION =
  'rounded-full bg-transparent transition-colors tfds-motion-ui-fast';

/**
 * @param {string} groupName - Tailwind group 名（如 `chat-artifact-resize`）
 * @param {{ sizeClass?: string }} [options] - 默认 `my-4`；栏内全高拖拽传 `h-full`
 */
export function tfdsResizeHandleLineClass(groupName, { sizeClass = 'my-4' } = {}) {
  return [
    TFDS_RESIZE_LINE_WIDTH_CLASS,
    TFDS_RESIZE_HANDLE_LINE_TRANSITION,
    sizeClass,
    `group-hover/${groupName}:bg-brand-400`,
    `group-focus-visible/${groupName}:bg-brand-500`,
    `group-active/${groupName}:bg-brand-500`,
  ].filter(Boolean).join(' ');
}
