@7pmlabs/design-system 2.0.9 → 2.1.0

package/dist/design-system227.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system227.js","names":[],"sources":["../src/components/BTimePicker/types.ts"],"sourcesContent":["export enum BTimePickerSize {\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n}\n\nexport enum BTimePickerVariant {\n  Outlined = 'outlined',\n  Filled = 'filled',\n  Borderless = 'borderless',\n  Underlined = 'underlined',\n}\n\nexport enum BTimePickerStatus {\n  Error = 'error',\n  Warning = 'warning',\n}\n\nexport enum BTimePickerPlacement {\n  BottomLeft = 'bottom-left',\n  BottomRight = 'bottom-right',\n  TopLeft = 'top-left',\n  TopRight = 'top-right',\n}\n\nexport interface BTimePickerDisabledTime {\n  disabledHours?: () => number[];\n  disabledMinutes?: (hour: number) => number[];\n  disabledSeconds?: (hour: number, minute: number) => number[];\n}\n"],"mappings":";AAAA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,MACA,EAAA,SAAA,MACA,EAAA,QAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,aAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,QAAA,SACA,EAAA,UAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,aAAA,eACA,EAAA,cAAA,gBACA,EAAA,UAAA,YACA,EAAA,WAAA;KACD"}
+{"version":3,"file":"design-system227.js","names":[],"sources":["../src/components/BSplitter/BSplitter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n/**\n * BSplitter\n * ---------\n * A flex container that lets the user resize the size of its panels by\n * dragging the bars between them.\n *\n * Mirrors the AntD `<Splitter>` API. Children must be `<BSplitterPanel>`\n * components.\n */\nimport type { CSSProperties, PropType, VNode } from 'vue';\nimport { Fragment, camelize, computed, defineComponent, h, onBeforeUnmount, onMounted, provide, ref, useSlots, watch } from 'vue';\nimport { useComponentId } from '../../composables/useComponentId';\nimport BSplitterPanel from './BSplitterPanel.vue';\nimport {\n  BSplitterContextKey,\n  type BSplitterCollapsible,\n  type BSplitterOrientation,\n  type BSplitterPanelCollapsible,\n  type BSplitterPanelConfig,\n} from './types';\n\ndefineOptions({ name: 'BSplitter', inheritAttrs: false });\n\n/**\n * Internal helper component that renders an array of pre-built VNodes inside\n * a panel. Declared inline to keep the SFC self-contained.\n */\nconst VNodeRenderer = defineComponent({\n  name: 'BSplitterVNodeRenderer',\n  props: {\n    nodes: {\n      type: Array as PropType<VNode[] | undefined | null>,\n      default: () => [],\n    },\n  },\n  setup(props) {\n    return () => (props.nodes && props.nodes.length ? h(Fragment, null, props.nodes) : null);\n  },\n});\n\n//#region Props / Emits / Slots\nconst {\n  vertical = false,\n  orientation,\n  lazy = false,\n  collapsible: collapsibleConfig,\n} = defineProps<{\n  /** Convenience boolean for vertical orientation. @default false */\n  vertical?: boolean;\n  /** Layout orientation. Takes precedence over `vertical` when set. */\n  orientation?: BSplitterOrientation;\n  /** Whether resize is committed only on release (preview line during drag). @default false */\n  lazy?: boolean;\n  /** Splitter-level collapsible config (motion + custom icons). */\n  collapsible?: BSplitterCollapsible;\n}>();\n\nconst emit = defineEmits<{\n  /** Fires while the user drags. Reports current pixel sizes of every panel. */\n  resize: [sizes: number[]];\n  /** Fires when the user starts dragging. */\n  resizeStart: [sizes: number[]];\n  /** Fires when the user releases the dragger. */\n  resizeEnd: [sizes: number[]];\n  /** Fires when a panel is collapsed/uncollapsed via a collapse button. */\n  collapse: [collapsed: boolean[], sizes: number[]];\n  /** Fires when the user double-clicks a dragger. Receives the dragger index. */\n  draggerDoubleClick: [index: number];\n}>();\n\nconst slots = useSlots();\nconst { componentUID } = useComponentId();\n//#endregion\n\n//#region Orientation\nconst resolvedOrientation = computed<BSplitterOrientation>(() =>\n  orientation ?? (vertical ? 'vertical' : 'horizontal'),\n);\nconst isVertical = computed(() => resolvedOrientation.value === 'vertical');\n\nprovide(BSplitterContextKey, {\n  orientation: resolvedOrientation.value,\n});\n//#endregion\n\n//#region Slot inspection — extract panel configs from default slot\nfunction flattenChildren(children: VNode[]): VNode[] {\n  const out: VNode[] = [];\n  for (const vn of children) {\n    if (vn.type === Fragment && Array.isArray(vn.children)) {\n      out.push(...flattenChildren(vn.children as VNode[]));\n    } else {\n      out.push(vn);\n    }\n  }\n  return out;\n}\n\nconst panelConfigs = computed<BSplitterPanelConfig[]>(() => {\n  const raw = slots.default?.();\n  if (!raw) return [];\n  const flat = flattenChildren(raw);\n  const result: BSplitterPanelConfig[] = [];\n  let idx = 0;\n  for (const vnode of flat) {\n    if (vnode.type !== BSplitterPanel) continue;\n    // Normalize prop keys to camelCase — Vue keeps the original (often\n    // kebab-case) keys on the raw vnode.props.\n    const rawProps = (vnode.props ?? {}) as Record<string, unknown>;\n    const props: Record<string, unknown> = {};\n    for (const k in rawProps) props[camelize(k)] = rawProps[k];\n\n    const slotChildren = vnode.children as\n      | { default?: () => VNode | VNode[] }\n      | null\n      | undefined;\n    const rawDefault = slotChildren?.default?.();\n    const content: VNode[] | undefined = rawDefault\n      ? Array.isArray(rawDefault)\n        ? rawDefault\n        : [rawDefault]\n      : undefined;\n\n    let collapsible: BSplitterPanelCollapsible | false = false;\n    const c = props.collapsible;\n    if (c === true || c === '' || c === 'true') {\n      collapsible = { start: true, end: true };\n    } else if (c && typeof c === 'object') {\n      collapsible = c as BSplitterPanelCollapsible;\n    }\n\n    const resizableRaw = props.resizable;\n    const resizable =\n      resizableRaw === undefined\n        ? true\n        : resizableRaw === false || resizableRaw === 'false'\n          ? false\n          : true;\n\n    const destroyRaw = props.destroyOnHidden;\n    const destroyOnHidden =\n      destroyRaw === true || destroyRaw === '' || destroyRaw === 'true';\n\n    result.push({\n      index: idx++,\n      size: props.size as number | string | undefined,\n      defaultSize: props.defaultSize as number | string | undefined,\n      min: props.min as number | string | undefined,\n      max: props.max as number | string | undefined,\n      resizable,\n      collapsible,\n      destroyOnHidden,\n      content,\n    });\n  }\n  return result;\n});\n//#endregion\n\n//#region Sizing internals\nconst rootRef = ref<HTMLElement | null>(null);\nconst containerSize = ref(0);\nconst DRAGGER_PX = 6; // matches --b-splitter-dragger-size default\n\n/** Pixel sizes for each panel, kept in sync with container size + props. */\nconst sizesPx = ref<number[]>([]);\n/** Per-panel collapsed flag (true → forced size 0). */\nconst collapsedFlags = ref<boolean[]>([]);\n/** Per-panel sizes saved before collapsing (so we can restore). */\nconst savedSizes = ref<(number | null)[]>([]);\n/**\n * Per-panel record of how it was collapsed:\n * - 'start': collapsed via the `<` button on the dragger AFTER the panel\n *   (neighbor that absorbed = panel + 1)\n * - 'end':   collapsed via the `>` button on the dragger BEFORE the panel\n *   (neighbor that absorbed = panel - 1)\n * Used to decide which dragger should expose the restore button.\n */\nconst collapsedDirection = ref<('start' | 'end' | null)[]>([]);\n\nfunction parseLength(\n  value: number | string | undefined,\n  total: number,\n  fallback = NaN,\n): number {\n  if (value === undefined || value === null) return fallback;\n  if (typeof value === 'number') return value;\n  const s = value.trim();\n  if (s.endsWith('%')) {\n    const pct = parseFloat(s);\n    return isFinite(pct) ? (pct / 100) * total : fallback;\n  }\n  if (s.endsWith('px')) return parseFloat(s);\n  const n = parseFloat(s);\n  return isFinite(n) ? n : fallback;\n}\n\nfunction availableSize(): number {\n  const total = containerSize.value;\n  const dividers = Math.max(panelConfigs.value.length - 1, 0) * DRAGGER_PX;\n  return Math.max(total - dividers, 0);\n}\n\nfunction computeInitialSizes(): number[] {\n  const panels = panelConfigs.value;\n  const avail = availableSize();\n  if (panels.length === 0 || avail <= 0) return panels.map(() => 0);\n\n  const result: number[] = Array.from({ length: panels.length }, () => NaN);\n  let assigned = 0;\n  // First pass: explicit `size` and `defaultSize`.\n  panels.forEach((p, i) => {\n    const v = parseLength(p.size ?? p.defaultSize, avail);\n    if (!isNaN(v)) {\n      result[i] = v;\n      assigned += v;\n    }\n  });\n  // Distribute remainder evenly among the rest.\n  const remainingIdx = result.map((v, i) => (isNaN(v) ? i : -1)).filter((i) => i >= 0);\n  if (remainingIdx.length > 0) {\n    const remainder = Math.max(avail - assigned, 0);\n    const each = remainder / remainingIdx.length;\n    remainingIdx.forEach((i) => (result[i] = each));\n  }\n  // Clamp to min/max and re-normalize so they sum to avail.\n  return clampAndNormalize(result, avail);\n}\n\nfunction clampAndNormalize(input: number[], avail: number): number[] {\n  const panels = panelConfigs.value;\n  const out = input.map((v, i) => {\n    const min = parseLength(panels[i]?.min, avail, 0);\n    const max = parseLength(panels[i]?.max, avail, Infinity);\n    return Math.min(Math.max(v, min), max);\n  });\n  // Normalize to fit avail.\n  const sum = out.reduce((a, b) => a + b, 0);\n  if (sum === 0 || avail === 0) return out;\n  const scale = avail / sum;\n  return out.map((v) => v * scale);\n}\n\nfunction syncFromProps() {\n  const panels = panelConfigs.value;\n  // Ensure collapsedFlags / savedSizes have correct length.\n  if (collapsedFlags.value.length !== panels.length) {\n    collapsedFlags.value = panels.map(() => false);\n    savedSizes.value = panels.map(() => null);\n    collapsedDirection.value = panels.map(() => null);\n  }\n  // Re-derive sizes when container or panel configs change.\n  sizesPx.value = computeInitialSizes();\n}\n\n/**\n * Inspect controlled `size` props — when provided, reflect them into sizesPx.\n * AntD-style: when `size` is set, it acts as a controlled value.\n */\nwatch(\n  () => panelConfigs.value.map((p) => `${p.size ?? ''}`).join('|'),\n  () => {\n    if (containerSize.value > 0) syncFromProps();\n  },\n);\n\nwatch(\n  () => panelConfigs.value.length,\n  () => {\n    if (containerSize.value > 0) syncFromProps();\n  },\n);\n//#endregion\n\n//#region ResizeObserver — track container size\nlet resizeObserver: ResizeObserver | null = null;\n\nonMounted(() => {\n  if (!rootRef.value) return;\n  measureContainer();\n  syncFromProps();\n  if (typeof ResizeObserver !== 'undefined') {\n    resizeObserver = new ResizeObserver(() => {\n      const prev = containerSize.value;\n      measureContainer();\n      // Re-scale sizes proportionally on container resize.\n      if (prev > 0 && containerSize.value > 0 && sizesPx.value.length > 0) {\n        const ratio = availableSize() / Math.max(prev - DRAGGER_PX * (sizesPx.value.length - 1), 1);\n        sizesPx.value = clampAndNormalize(\n          sizesPx.value.map((v) => v * ratio),\n          availableSize(),\n        );\n      } else {\n        syncFromProps();\n      }\n    });\n    resizeObserver.observe(rootRef.value);\n  }\n});\n\nonBeforeUnmount(() => {\n  resizeObserver?.disconnect();\n  resizeObserver = null;\n  removeDragListeners();\n});\n\nfunction measureContainer() {\n  if (!rootRef.value) return;\n  containerSize.value = isVertical.value\n    ? rootRef.value.clientHeight\n    : rootRef.value.clientWidth;\n}\n//#endregion\n\n//#region Dragging\ninterface DragState {\n  draggerIndex: number;\n  startCoord: number;\n  startSizes: number[];\n  /** In lazy mode, the preview offset (pixels relative to original divider). */\n  previewDelta: number;\n}\nconst dragState = ref<DragState | null>(null);\nconst lazyPreviewDelta = ref<number | null>(null);\n\nfunction getCoord(e: MouseEvent | TouchEvent): number {\n  if ('touches' in e) {\n    const t = e.touches[0] ?? e.changedTouches[0];\n    return isVertical.value ? t.clientY : t.clientX;\n  }\n  return isVertical.value ? e.clientY : e.clientX;\n}\n\nfunction onDraggerPointerDown(index: number, e: MouseEvent | TouchEvent) {\n  if (!isResizable(index)) return;\n  e.preventDefault();\n  dragState.value = {\n    draggerIndex: index,\n    startCoord: getCoord(e),\n    startSizes: [...sizesPx.value],\n    previewDelta: 0,\n  };\n  lazyPreviewDelta.value = lazy ? 0 : null;\n  emit('resizeStart', [...sizesPx.value]);\n\n  document.addEventListener('mousemove', onDragMove);\n  document.addEventListener('mouseup', onDragEnd);\n  document.addEventListener('touchmove', onDragMove, { passive: false });\n  document.addEventListener('touchend', onDragEnd);\n}\n\nfunction applyDelta(startSizes: number[], index: number, delta: number): number[] {\n  const panels = panelConfigs.value;\n  const avail = availableSize();\n  const next = [...startSizes];\n  const a = index;\n  const b = index + 1;\n\n  const aMin = parseLength(panels[a]?.min, avail, 0);\n  const aMax = parseLength(panels[a]?.max, avail, Infinity);\n  const bMin = parseLength(panels[b]?.min, avail, 0);\n  const bMax = parseLength(panels[b]?.max, avail, Infinity);\n\n  let newA = next[a] + delta;\n  let newB = next[b] - delta;\n\n  // Clamp so neither side violates its constraints.\n  if (newA < aMin) {\n    newB -= aMin - newA;\n    newA = aMin;\n  }\n  if (newA > aMax) {\n    newB += newA - aMax;\n    newA = aMax;\n  }\n  if (newB < bMin) {\n    newA -= bMin - newB;\n    newB = bMin;\n  }\n  if (newB > bMax) {\n    newA += newB - bMax;\n    newB = bMax;\n  }\n  // Final clamp on `a` again in case `b` clamping pushed it out.\n  newA = Math.min(Math.max(newA, aMin), aMax);\n  newB = Math.min(Math.max(newB, bMin), bMax);\n  next[a] = newA;\n  next[b] = newB;\n  return next;\n}\n\nfunction onDragMove(e: MouseEvent | TouchEvent) {\n  if (!dragState.value) return;\n  if ('touches' in e) e.preventDefault();\n  const coord = getCoord(e);\n  const delta = coord - dragState.value.startCoord;\n\n  if (lazy) {\n    // Update preview indicator only.\n    lazyPreviewDelta.value = delta;\n    return;\n  }\n  const next = applyDelta(dragState.value.startSizes, dragState.value.draggerIndex, delta);\n  sizesPx.value = next;\n  emit('resize', [...next]);\n}\n\nfunction onDragEnd(e: MouseEvent | TouchEvent) {\n  if (!dragState.value) return;\n  const coord = 'changedTouches' in e ? getCoord(e) : getCoord(e);\n  const delta = coord - dragState.value.startCoord;\n\n  if (lazy) {\n    const next = applyDelta(dragState.value.startSizes, dragState.value.draggerIndex, delta);\n    sizesPx.value = next;\n    emit('resize', [...next]);\n  }\n  emit('resizeEnd', [...sizesPx.value]);\n  dragState.value = null;\n  lazyPreviewDelta.value = null;\n  removeDragListeners();\n}\n\nfunction removeDragListeners() {\n  document.removeEventListener('mousemove', onDragMove);\n  document.removeEventListener('mouseup', onDragEnd);\n  document.removeEventListener('touchmove', onDragMove);\n  document.removeEventListener('touchend', onDragEnd);\n}\n\nfunction isResizable(draggerIndex: number): boolean {\n  const a = panelConfigs.value[draggerIndex];\n  const b = panelConfigs.value[draggerIndex + 1];\n  return !!(a?.resizable && b?.resizable);\n}\n\nfunction onDraggerDoubleClick(i: number) {\n  emit('draggerDoubleClick', i);\n}\n//#endregion\n\n//#region Keyboard\nconst KEY_STEP = 10;\n\nfunction onDraggerKeyDown(index: number, e: KeyboardEvent) {\n  if (!isResizable(index)) return;\n  let delta = 0;\n  switch (e.key) {\n    case 'ArrowLeft':\n      delta = isVertical.value ? 0 : -KEY_STEP;\n      break;\n    case 'ArrowRight':\n      delta = isVertical.value ? 0 : KEY_STEP;\n      break;\n    case 'ArrowUp':\n      delta = isVertical.value ? -KEY_STEP : 0;\n      break;\n    case 'ArrowDown':\n      delta = isVertical.value ? KEY_STEP : 0;\n      break;\n    case 'Home': {\n      // collapse the panel before the dragger to its minimum.\n      const avail = availableSize();\n      const a = panelConfigs.value[index];\n      delta = -(sizesPx.value[index] - parseLength(a?.min, avail, 0));\n      break;\n    }\n    case 'End': {\n      const avail = availableSize();\n      const b = panelConfigs.value[index + 1];\n      delta = sizesPx.value[index + 1] - parseLength(b?.min, avail, 0);\n      break;\n    }\n    case 'Enter':\n    case ' ':\n      // Toggle: collapse the smaller adjacent panel toward the larger one.\n      e.preventDefault();\n      toggleCollapseAtDragger(index);\n      return;\n    default:\n      return;\n  }\n  if (delta === 0) return;\n  e.preventDefault();\n  emit('resizeStart', [...sizesPx.value]);\n  const next = applyDelta(sizesPx.value, index, delta);\n  sizesPx.value = next;\n  emit('resize', [...next]);\n  emit('resizeEnd', [...next]);\n}\n//#endregion\n\n//#region Collapse / Expand\nfunction toggleCollapseAtDragger(index: number) {\n  // Default keyboard behaviour: collapse the start side if it has more room than 0.\n  const a = panelConfigs.value[index];\n  const b = panelConfigs.value[index + 1];\n  if (a?.collapsible) collapsePanel(index, 'start');\n  else if (b?.collapsible) collapsePanel(index + 1, 'end');\n}\n\n/**\n * Collapse a panel toward the previous (`'start'`) or next (`'end'`) panel.\n * If already collapsed, restore the saved size.\n */\nfunction collapsePanel(panelIndex: number, direction: 'start' | 'end') {\n  const panel = panelConfigs.value[panelIndex];\n  if (!panel) return;\n  const avail = availableSize();\n  const sizes = [...sizesPx.value];\n\n  // The neighbor that absorbs / returns the collapsed panel's space.\n  // - direction='start': panel collapses toward start ⇒ space goes to panelIndex + 1\n  // - direction='end':   panel collapses toward end   ⇒ space goes to panelIndex - 1\n  const neighbor = direction === 'start' ? panelIndex + 1 : panelIndex - 1;\n\n  if (collapsedFlags.value[panelIndex]) {\n    // Restore: take saved size back from the same neighbor that absorbed it.\n    const saved = savedSizes.value[panelIndex] ?? avail / panelConfigs.value.length;\n    if (neighbor >= 0 && neighbor < sizes.length) {\n      const give = Math.min(saved, sizes[neighbor]);\n      sizes[panelIndex] = give;\n      sizes[neighbor] -= give;\n    } else {\n      sizes[panelIndex] = saved;\n    }\n    collapsedFlags.value = collapsedFlags.value.map((v, i) => (i === panelIndex ? false : v));\n    savedSizes.value = savedSizes.value.map((v, i) => (i === panelIndex ? null : v));\n    collapsedDirection.value = collapsedDirection.value.map((v, i) =>\n      i === panelIndex ? null : v,\n    );\n  } else {\n    // Collapse: dump current size into the neighbor.\n    savedSizes.value = savedSizes.value.map((v, i) =>\n      i === panelIndex ? sizes[panelIndex] : v,\n    );\n    if (neighbor >= 0 && neighbor < sizes.length) {\n      sizes[neighbor] += sizes[panelIndex];\n    }\n    sizes[panelIndex] = 0;\n    collapsedFlags.value = collapsedFlags.value.map((v, i) => (i === panelIndex ? true : v));\n    collapsedDirection.value = collapsedDirection.value.map((v, i) =>\n      i === panelIndex ? direction : v,\n    );\n  }\n  sizesPx.value = sizes;\n  emit('resize', [...sizes]);\n  emit('resizeEnd', [...sizes]);\n  emit('collapse', [...collapsedFlags.value], [...sizes]);\n}\n\n/**\n * Helpers for the two collapse buttons rendered on each dragger between\n * panel `i` (prev) and panel `i + 1` (next). Mirrors AntD's logic:\n * the START (`<`) button can either collapse prev or expand a previously-\n * collapsed next; the END (`>`) button is symmetric.\n */\nfunction startBtnPanelCfg(i: number) {\n  return panelConfigs.value[i]?.collapsible\n    ? (panelConfigs.value[i].collapsible as BSplitterPanelCollapsible)\n    : null;\n}\nfunction endBtnPanelCfg(i: number) {\n  return panelConfigs.value[i + 1]?.collapsible\n    ? (panelConfigs.value[i + 1].collapsible as BSplitterPanelCollapsible)\n    : null;\n}\nfunction canShowStartBtn(i: number): boolean {\n  const sizes = sizesPx.value;\n  const prevSize = sizes[i] ?? 0;\n  const nextSize = sizes[i + 1] ?? 0;\n  // Mode A — collapse prev (panel i).\n  const prevCfg = startBtnPanelCfg(i);\n  const collapsePrev = !!prevCfg?.start && prevSize > 0 && nextSize > 0;\n  // Mode B — restore next (panel i + 1) if it was collapsed via THIS dragger.\n  const restoreNext =\n    !!collapsedFlags.value[i + 1] &&\n    collapsedDirection.value[i + 1] === 'end' &&\n    prevSize > 0;\n  return collapsePrev || restoreNext;\n}\nfunction canShowEndBtn(i: number): boolean {\n  const sizes = sizesPx.value;\n  const prevSize = sizes[i] ?? 0;\n  const nextSize = sizes[i + 1] ?? 0;\n  // Mode A — collapse next (panel i + 1).\n  const nextCfg = endBtnPanelCfg(i);\n  const collapseNext = !!nextCfg?.end && nextSize > 0 && prevSize > 0;\n  // Mode B — restore prev (panel i) if it was collapsed via THIS dragger.\n  const restorePrev =\n    !!collapsedFlags.value[i] &&\n    collapsedDirection.value[i] === 'start' &&\n    nextSize > 0;\n  return collapseNext || restorePrev;\n}\nfunction onClickStartBtn(i: number) {\n  if (\n    collapsedFlags.value[i + 1] &&\n    collapsedDirection.value[i + 1] === 'end'\n  ) {\n    // Restore next, taking space back from prev.\n    collapsePanel(i + 1, 'end');\n  } else {\n    collapsePanel(i, 'start');\n  }\n}\nfunction onClickEndBtn(i: number) {\n  if (collapsedFlags.value[i] && collapsedDirection.value[i] === 'start') {\n    // Restore prev, taking space back from next.\n    collapsePanel(i, 'start');\n  } else {\n    collapsePanel(i + 1, 'end');\n  }\n}\nfunction startBtnAriaLabel(i: number): string {\n  if (\n    collapsedFlags.value[i + 1] &&\n    collapsedDirection.value[i + 1] === 'end'\n  ) {\n    return `Expand panel ${i + 2}`;\n  }\n  return `Collapse panel ${i + 1}`;\n}\nfunction endBtnAriaLabel(i: number): string {\n  if (collapsedFlags.value[i] && collapsedDirection.value[i] === 'start') {\n    return `Expand panel ${i + 1}`;\n  }\n  return `Collapse panel ${i + 2}`;\n}\n//#endregion\n\n//#region Style helpers\nconst motion = computed(() => collapsibleConfig?.motion !== false);\n\nfunction panelStyle(i: number): CSSProperties {\n  const sz = sizesPx.value[i] ?? 0;\n  const sizeStr = `${sz}px`;\n  return isVertical.value\n    ? { height: sizeStr, flex: `0 0 ${sizeStr}` }\n    : { width: sizeStr, flex: `0 0 ${sizeStr}` };\n}\n\nfunction draggerAriaValueNow(i: number): number {\n  const avail = availableSize();\n  if (avail === 0) return 0;\n  const accumulated = sizesPx.value.slice(0, i + 1).reduce((a, b) => a + b, 0);\n  return Math.round((accumulated / avail) * 100);\n}\n\nconst lazyIndicatorStyle = computed<CSSProperties | undefined>(() => {\n  if (!lazy || !dragState.value || lazyPreviewDelta.value === null) return undefined;\n  const idx = dragState.value.draggerIndex;\n  const before = dragState.value.startSizes.slice(0, idx + 1).reduce((a, b) => a + b, 0);\n  const offset = before + idx * DRAGGER_PX + lazyPreviewDelta.value;\n  return isVertical.value ? { top: `${offset}px` } : { left: `${offset}px` };\n});\n//#endregion\n\n//#region Expose\nfunction getSizes(): number[] {\n  return [...sizesPx.value];\n}\nfunction setSizes(next: number[]) {\n  if (next.length !== sizesPx.value.length) return;\n  sizesPx.value = clampAndNormalize(next, availableSize());\n  emit('resize', [...sizesPx.value]);\n}\ndefineExpose({ getSizes, setSizes });\n//#endregion\n\n//#region Render-time per-panel render helper\n/**\n * Returns the panel's slot content as VNodes, honoring `destroyOnHidden`.\n */\nfunction panelContent(panel: BSplitterPanelConfig, i: number): VNode[] | null {\n  const collapsed = (sizesPx.value[i] ?? 0) <= 0;\n  if (panel.destroyOnHidden && collapsed) return null;\n  return panel.content ?? null;\n}\n//#endregion\n</script>\n\n<template>\n  <div\n    ref=\"rootRef\"\n    class=\"b-splitter\"\n    :class=\"{\n      'b-splitter--horizontal': !isVertical,\n      'b-splitter--vertical': isVertical,\n      'b-splitter--lazy': lazy,\n      'b-splitter--motion': motion,\n      'b-splitter--dragging': dragState !== null,\n    }\"\n    :data-orientation=\"resolvedOrientation\"\n  >\n    <template v-for=\"(panel, i) in panelConfigs\" :key=\"`panel-${componentUID}-${i}`\">\n      <div\n        :id=\"`b-splitter-${componentUID}-panel-${i}`\"\n        class=\"b-splitter__panel\"\n        :class=\"{ 'b-splitter__panel--collapsed': (sizesPx[i] ?? 0) <= 0 }\"\n        :style=\"panelStyle(i)\"\n        role=\"group\"\n      >\n        <component :is=\"VNodeRenderer\" :nodes=\"panelContent(panel, i)\" />\n      </div>\n\n      <!-- Divider wrapper holds the dragger + collapse buttons as siblings\n           so we don't nest interactive controls (a11y: nested-interactive). -->\n      <div\n        v-if=\"i < panelConfigs.length - 1\"\n        class=\"b-splitter__divider\"\n        :class=\"{ 'b-splitter__divider--disabled': !isResizable(i) }\"\n      >\n        <div\n          class=\"b-splitter__dragger\"\n          :class=\"{\n            'b-splitter__dragger--disabled': !isResizable(i),\n            'b-splitter__dragger--active': dragState && dragState.draggerIndex === i,\n          }\"\n          role=\"separator\"\n          :tabindex=\"isResizable(i) ? 0 : -1\"\n          :aria-orientation=\"isVertical ? 'horizontal' : 'vertical'\"\n          :aria-controls=\"`b-splitter-${componentUID}-panel-${i} b-splitter-${componentUID}-panel-${i + 1}`\"\n          :aria-valuenow=\"draggerAriaValueNow(i)\"\n          aria-valuemin=\"0\"\n          aria-valuemax=\"100\"\n          :aria-disabled=\"!isResizable(i) || undefined\"\n          :aria-label=\"`Resize panel ${i + 1}`\"\n          @mousedown=\"onDraggerPointerDown(i, $event)\"\n          @touchstart=\"onDraggerPointerDown(i, $event)\"\n          @keydown=\"onDraggerKeyDown(i, $event)\"\n          @dblclick=\"onDraggerDoubleClick(i)\"\n        >\n          <span aria-hidden=\"true\" class=\"b-splitter__handle\">\n            <slot name=\"draggerIcon\" />\n          </span>\n        </div>\n\n        <!--\n          Collapse \"start\" button (LEFT half of dragger). Two modes:\n          - Collapse prev (panel i)        when prev is visible.\n          - Restore next  (panel i + 1)    when next was collapsed via the `>`\n                                           button on THIS dragger.\n        -->\n        <button\n          v-if=\"canShowStartBtn(i)\"\n          type=\"button\"\n          class=\"b-splitter__collapse-btn b-splitter__collapse-btn--start\"\n          :aria-label=\"startBtnAriaLabel(i)\"\n          :aria-expanded=\"\n            collapsedFlags[i + 1] && collapsedDirection[i + 1] === 'end'\n              ? false\n              : true\n          \"\n          @mousedown.stop\n          @touchstart.stop\n          @click.stop=\"onClickStartBtn(i)\"\n        >\n          <slot name=\"collapseIconStart\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"b-splitter__chevron b-splitter__chevron--start\"\n              viewBox=\"0 0 8 8\"\n              width=\"8\"\n              height=\"8\"\n            >\n              <polyline\n                points=\"5,1 2,4 5,7\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </slot>\n        </button>\n\n        <!--\n          Collapse \"end\" button (RIGHT half of dragger). Two modes:\n          - Collapse next (panel i + 1)    when next is visible.\n          - Restore prev  (panel i)        when prev was collapsed via the `<`\n                                           button on THIS dragger.\n        -->\n        <button\n          v-if=\"canShowEndBtn(i)\"\n          type=\"button\"\n          class=\"b-splitter__collapse-btn b-splitter__collapse-btn--end\"\n          :aria-label=\"endBtnAriaLabel(i)\"\n          :aria-expanded=\"\n            collapsedFlags[i] && collapsedDirection[i] === 'start'\n              ? false\n              : true\n          \"\n          @mousedown.stop\n          @touchstart.stop\n          @click.stop=\"onClickEndBtn(i)\"\n        >\n          <slot name=\"collapseIconEnd\">\n            <svg\n              aria-hidden=\"true\"\n              class=\"b-splitter__chevron b-splitter__chevron--end\"\n              viewBox=\"0 0 8 8\"\n              width=\"8\"\n              height=\"8\"\n            >\n              <polyline\n                points=\"3,1 6,4 3,7\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                stroke-width=\"1.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </slot>\n        </button>\n      </div>\n    </template>\n\n    <!-- Lazy preview indicator -->\n    <div\n      v-if=\"lazy && dragState && lazyPreviewDelta !== null\"\n      class=\"b-splitter__lazy-indicator\"\n      :style=\"lazyIndicatorStyle\"\n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n\n<style>\n.b-splitter {\n  /* Component design tokens (AntD parity) */\n  --b-splitter-split-bar-size: 2px;\n  --b-splitter-dragger-size: 6px;\n  --b-splitter-dragger-draggable-size: 20px;\n  --b-splitter-bg: oklch(94% 0 0); /* colorFill */\n  --b-splitter-bg-hover: oklch(85% 0 0); /* colorFillSecondary */\n  --b-splitter-bg-active: oklch(60% 0.18 264); /* colorPrimary */\n  --b-splitter-text-color: oklch(40% 0 0);\n  --b-splitter-color-bg-elevated: #fff;\n  --b-splitter-collapse-bar-bg: oklch(94% 0 0);\n  --b-splitter-collapse-bar-bg-hover: oklch(60% 0.18 264);\n  --b-splitter-collapse-icon-color: oklch(60% 0 0);\n  --b-splitter-collapse-icon-color-hover: #fff;\n  --b-splitter-motion-duration: 0.2s;\n  --b-splitter-z-index-base: 1;\n\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  min-width: 0;\n}\n\n.b-splitter--horizontal {\n  flex-direction: row;\n}\n.b-splitter--vertical {\n  flex-direction: column;\n}\n\n/* Panel */\n.b-splitter__panel {\n  position: relative;\n  overflow: auto;\n  min-width: 0;\n  min-height: 0;\n  box-sizing: border-box;\n}\n.b-splitter--motion .b-splitter__panel {\n  transition:\n    width var(--b-splitter-motion-duration) ease,\n    height var(--b-splitter-motion-duration) ease,\n    flex-basis var(--b-splitter-motion-duration) ease;\n}\n.b-splitter--dragging .b-splitter__panel {\n  transition: none;\n}\n.b-splitter__panel--collapsed {\n  overflow: hidden;\n}\n\n/* Divider — non-interactive wrapper holding the dragger + collapse buttons.\n   It is the flex item that occupies the dragger size; the dragger and the\n   collapse buttons sit inside as siblings (avoids nested-interactive a11y\n   violation). */\n.b-splitter__divider {\n  position: relative;\n  flex: 0 0 var(--b-splitter-dragger-size);\n  align-self: stretch;\n  box-sizing: border-box;\n  z-index: var(--b-splitter-z-index-base);\n}\n.b-splitter--horizontal .b-splitter__divider {\n  width: var(--b-splitter-dragger-size);\n  height: 100%;\n}\n.b-splitter--vertical .b-splitter__divider {\n  width: 100%;\n  height: var(--b-splitter-dragger-size);\n}\n\n/* Dragger — fills the divider and is the focusable separator. */\n.b-splitter__dragger {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: transparent;\n  outline: none;\n  box-sizing: border-box;\n  user-select: none;\n  touch-action: none;\n}\n.b-splitter--horizontal .b-splitter__dragger {\n  cursor: col-resize;\n}\n.b-splitter--vertical .b-splitter__dragger {\n  cursor: row-resize;\n}\n.b-splitter__dragger--disabled {\n  cursor: default;\n}\n\n/* Visible bar via ::before — sits in centre of dragger */\n.b-splitter__dragger::before {\n  content: '';\n  position: absolute;\n  background: var(--b-splitter-bg);\n  border-radius: 2px;\n  transition: background var(--b-splitter-motion-duration) ease;\n}\n.b-splitter--horizontal .b-splitter__dragger::before {\n  top: 0;\n  bottom: 0;\n  left: calc(50% - var(--b-splitter-split-bar-size) / 2);\n  width: var(--b-splitter-split-bar-size);\n}\n.b-splitter--vertical .b-splitter__dragger::before {\n  left: 0;\n  right: 0;\n  top: calc(50% - var(--b-splitter-split-bar-size) / 2);\n  height: var(--b-splitter-split-bar-size);\n}\n.b-splitter__dragger:not(.b-splitter__dragger--disabled):hover::before,\n.b-splitter__dragger:focus-visible::before,\n.b-splitter__dragger--active::before {\n  background: var(--b-splitter-bg-active);\n}\n\n/* Visible draggable indicator (grip) — `splitBarDraggableSize` long, slightly\n   thicker than the split bar to give the user a clear hit-target hint. */\n.b-splitter__dragger::after {\n  content: '';\n  position: absolute;\n  background: var(--b-splitter-bg);\n  border-radius: 2px;\n  pointer-events: none;\n  transition: background var(--b-splitter-motion-duration) ease;\n}\n.b-splitter--horizontal .b-splitter__dragger::after {\n  width: 4px;\n  height: var(--b-splitter-dragger-draggable-size);\n  top: calc(50% - var(--b-splitter-dragger-draggable-size) / 2);\n  left: calc(50% - 2px);\n}\n.b-splitter--vertical .b-splitter__dragger::after {\n  width: var(--b-splitter-dragger-draggable-size);\n  height: 4px;\n  left: calc(50% - var(--b-splitter-dragger-draggable-size) / 2);\n  top: calc(50% - 2px);\n}\n.b-splitter__dragger--disabled::after {\n  display: none;\n}\n.b-splitter__dragger:not(.b-splitter__dragger--disabled):hover::after,\n.b-splitter__dragger:focus-visible::after,\n.b-splitter__dragger--active::after {\n  background: var(--b-splitter-bg-active);\n}\n\n.b-splitter__dragger:focus-visible {\n  outline: 2px solid var(--b-splitter-bg-active);\n  outline-offset: -2px;\n}\n\n/* Drag handle (decorative) */\n.b-splitter__handle {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n/* Collapse button */\n.b-splitter__collapse-btn {\n  position: absolute;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 18px;\n  padding: 0;\n  border: none;\n  border-radius: 2px;\n  background: var(--b-splitter-collapse-bar-bg);\n  color: var(--b-splitter-collapse-icon-color);\n  cursor: pointer;\n  transition:\n    background var(--b-splitter-motion-duration) ease,\n    color var(--b-splitter-motion-duration) ease;\n  z-index: calc(var(--b-splitter-z-index-base) + 1);\n}\n.b-splitter__collapse-btn:hover,\n.b-splitter__collapse-btn:focus-visible {\n  background: var(--b-splitter-collapse-bar-bg-hover);\n  color: var(--b-splitter-collapse-icon-color-hover);\n}\n.b-splitter__collapse-btn:focus-visible {\n  outline: 2px solid var(--b-splitter-bg-active);\n  outline-offset: 1px;\n}\n.b-splitter--horizontal .b-splitter__collapse-btn--start,\n.b-splitter--horizontal .b-splitter__collapse-btn--end {\n  top: 50%;\n  transform: translateY(-50%);\n}\n.b-splitter--horizontal .b-splitter__collapse-btn--start {\n  right: calc(50% + 2px);\n}\n.b-splitter--horizontal .b-splitter__collapse-btn--end {\n  left: calc(50% + 2px);\n}\n.b-splitter--vertical .b-splitter__collapse-btn {\n  width: 18px;\n  height: 14px;\n}\n.b-splitter--vertical .b-splitter__collapse-btn--start,\n.b-splitter--vertical .b-splitter__collapse-btn--end {\n  left: 50%;\n  transform: translateX(-50%);\n}\n.b-splitter--vertical .b-splitter__collapse-btn--start {\n  bottom: calc(50% + 2px);\n}\n.b-splitter--vertical .b-splitter__collapse-btn--end {\n  top: calc(50% + 2px);\n}\n\n/* Chevron icon (SVG) */\n.b-splitter__chevron {\n  display: block;\n  width: 8px;\n  height: 8px;\n}\n.b-splitter--vertical .b-splitter__chevron--start {\n  transform: rotate(90deg);\n}\n.b-splitter--vertical .b-splitter__chevron--end {\n  transform: rotate(-90deg);\n}\n\n/* Lazy preview indicator */\n.b-splitter__lazy-indicator {\n  position: absolute;\n  background: var(--b-splitter-bg-active);\n  pointer-events: none;\n  z-index: calc(var(--b-splitter-z-index-base) + 2);\n}\n.b-splitter--horizontal .b-splitter__lazy-indicator {\n  top: 0;\n  bottom: 0;\n  width: var(--b-splitter-split-bar-size);\n}\n.b-splitter--vertical .b-splitter__lazy-indicator {\n  left: 0;\n  right: 0;\n  height: var(--b-splitter-split-bar-size);\n}\n\n/* Dark mode — reassign tokens, no new vars */\n[data-prefers-color='dark'] .b-splitter {\n  --b-splitter-bg: oklch(30% 0 0);\n  --b-splitter-bg-hover: oklch(40% 0 0);\n  --b-splitter-bg-active: oklch(70% 0.18 264);\n  --b-splitter-text-color: oklch(85% 0 0);\n  --b-splitter-color-bg-elevated: oklch(20% 0 0);\n  --b-splitter-collapse-bar-bg: oklch(30% 0 0);\n  --b-splitter-collapse-bar-bg-hover: oklch(70% 0.18 264);\n  --b-splitter-collapse-icon-color: oklch(70% 0 0);\n  --b-splitter-collapse-icon-color-hover: oklch(15% 0 0);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-splitter {\n    --b-splitter-bg: oklch(30% 0 0);\n    --b-splitter-bg-hover: oklch(40% 0 0);\n    --b-splitter-bg-active: oklch(70% 0.18 264);\n    --b-splitter-text-color: oklch(85% 0 0);\n    --b-splitter-color-bg-elevated: oklch(20% 0 0);\n    --b-splitter-collapse-bar-bg: oklch(30% 0 0);\n    --b-splitter-collapse-bar-bg-hover: oklch(70% 0.18 264);\n    --b-splitter-collapse-icon-color: oklch(70% 0 0);\n    --b-splitter-collapse-icon-color-hover: oklch(15% 0 0);\n  }\n}\n\n/* Reduced motion */\n@media (prefers-reduced-motion: reduce) {\n  .b-splitter__panel,\n  .b-splitter__dragger::before,\n  .b-splitter__collapse-btn {\n    transition: none !important;\n  }\n}\n</style>\n"],"mappings":""}