@7pmlabs/design-system 1.0.9 → 1.0.11

package/dist/design-system210.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system210.js","names":[],"sources":["../src/components/BTooltip/BTooltip.vue?vue&type=script&setup=true&lang.ts"],"sourcesContent":["import { defineComponent as _defineComponent } from 'vue'\nimport { unref as _unref, renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, Fragment as _Fragment } from \"vue\"\n\nconst _hoisted_1 = [\"aria-describedby\"]\nconst _hoisted_2 = [\"id\"]\nconst _hoisted_3 = {\n  key: 0,\n  class: \"b-tooltip__arrow\",\n  \"aria-hidden\": \"true\"\n}\n\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BTooltipPlacement, BTooltipTrigger } from '@/types.ts';\nimport { computed, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\n\nexport default /*@__PURE__*/_defineComponent({\n  __name: 'BTooltip',\n  props: {\n    title: {},\n    trigger: { default: () => (BTooltipTrigger.Hover) },\n    placement: { default: () => (BTooltipPlacement.TopCenter) },\n    arrow: { type: Boolean, default: true },\n    color: {},\n    mouseEnterDelay: { default: 100 },\n    mouseLeaveDelay: { default: 100 },\n    destroyTooltipOnHide: { type: Boolean, default: false },\n    zIndex: { default: 1070 },\n    fresh: { type: Boolean, default: false },\n    autoAdjustOverflow: { type: Boolean },\n    modelValue: { type: Boolean, default: () => (undefined) },\n    toggleClass: {},\n    tooltipClass: {},\n    tooltipInnerClass: {}\n  },\n  emits: [\"openChange\", \"update:modelValue\"],\n  setup(__props: any, { expose: __expose, emit: __emit }) {\n\n\n\nconst emit = __emit;\n\n\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst tooltipId = useId();\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (__props.modelValue !== undefined ? __props.modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (__props.fresh) return isOpen.value;\n  if (__props.destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  tooltipRef.value?.showPopover();\n}\n\nfunction doClose() {\n  tooltipRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (__props.modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst tooltipRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  requestOpen(__props.mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(__props.mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n    toggleRef.value?.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Tooltip hover (keep tooltip open when hovering it)\n// ─────────────────────────────────────────────\nfunction onTooltipMouseEnter() {\n  if (__props.trigger === BTooltipTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onTooltipMouseLeave() {\n  if (__props.trigger === BTooltipTrigger.Hover) {\n    requestClose(__props.mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  // Keyboard always attached\n  el.addEventListener('keydown', onKeydown);\n\n  switch (__props.trigger) {\n    case BTooltipTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BTooltipTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BTooltipTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => __props.trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => __props.modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      tooltipRef.value?.showPopover();\n    } else {\n      tooltipRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-tooltip-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BTooltipPlacement.TopLeft]: 'top-left',\n    [BTooltipPlacement.TopCenter]: 'top-center',\n    [BTooltipPlacement.TopRight]: 'top-right',\n    [BTooltipPlacement.RightTop]: 'right-top',\n    [BTooltipPlacement.RightCenter]: 'right-center',\n    [BTooltipPlacement.RightBottom]: 'right-bottom',\n    [BTooltipPlacement.BottomRight]: 'bottom-right',\n    [BTooltipPlacement.BottomCenter]: 'bottom-center',\n    [BTooltipPlacement.BottomLeft]: 'bottom-left',\n    [BTooltipPlacement.LeftBottom]: 'left-bottom',\n    [BTooltipPlacement.LeftCenter]: 'left-center',\n    [BTooltipPlacement.LeftTop]: 'left-top',\n  };\n  return map[__props.placement] ?? 'top-center';\n});\n\nconst customColorStyle = computed(() => {\n  if (!__props.color) return undefined;\n  return {\n    '--b-tooltip-bg': __props.color,\n    '--b-tooltip-arrow-color': __props.color,\n  } as Record<string, string>;\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\n__expose({ open: doOpen, close: doClose });\n\nreturn (_ctx: any,_cache: any) => {\n  return (_openBlock(), _createElementBlock(_Fragment, null, [\n    _createElementVNode(\"div\", {\n      ref_key: \"toggleRef\",\n      ref: toggleRef,\n      class: _normalizeClass(['b-tooltip__toggle', __props.toggleClass]),\n      style: _normalizeStyle({ anchorName: anchorName.value }),\n      \"aria-describedby\": isOpen.value ? _unref(tooltipId) : undefined\n    }, [\n      _renderSlot(_ctx.$slots, \"default\")\n    ], 14, _hoisted_1),\n    _createElementVNode(\"div\", {\n      ref_key: \"tooltipRef\",\n      ref: tooltipRef,\n      popover: \"manual\",\n      class: _normalizeClass([\n      'b-tooltip__content',\n      placementClass.value,\n      { 'b-tooltip__content--no-arrow': !__props.arrow },\n      __props.tooltipClass,\n    ]),\n      style: _normalizeStyle([{ zIndex: __props.zIndex, positionAnchor: anchorName.value }, customColorStyle.value]),\n      role: \"tooltip\",\n      id: _unref(tooltipId),\n      onToggle: onPopoverToggle,\n      onMouseenter: onTooltipMouseEnter,\n      onMouseleave: onTooltipMouseLeave\n    }, [\n      (shouldRender.value || !__props.destroyTooltipOnHide)\n        ? (_openBlock(), _createElementBlock(_Fragment, { key: 0 }, [\n            (__props.arrow)\n              ? (_openBlock(), _createElementBlock(\"div\", _hoisted_3))\n              : _createCommentVNode(\"\", true),\n            _createElementVNode(\"div\", {\n              class: _normalizeClass(['b-tooltip__inner', __props.tooltipInnerClass])\n            }, [\n              _renderSlot(_ctx.$slots, \"title\", {}, () => [\n                _createTextVNode(_toDisplayString(__props.title), 1)\n              ])\n            ], 2)\n          ], 64))\n        : _createCommentVNode(\"\", true)\n    ], 46, _hoisted_2)\n  ], 64))\n}\n}\n\n})"],"mappings":"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"}
+{"version":3,"file":"design-system210.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":"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"}

package/dist/design-system212.js

@@ -1,6 +1,6 @@
 import e from "./design-system210.js";
 /* empty css                 */
-//#region src/components/BTooltip/BTooltip.vue
+//#region src/components/BSplitter/BSplitter.vue
 var t = e;
 //#endregion
 export { t as default };

package/dist/design-system212.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system212.js","names":[],"sources":["../src/components/BTooltip/BTooltip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useComponentId } from '@/composables/useComponentId.ts';\nimport { BTooltipPlacement, BTooltipTrigger } from '@/types.ts';\nimport { computed, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue';\n\n// ─────────────────────────────────────────────\n// Props & emits\n// ─────────────────────────────────────────────\nconst {\n  title,\n  trigger = BTooltipTrigger.Hover,\n  placement = BTooltipPlacement.TopCenter,\n  arrow = true,\n  color,\n  mouseEnterDelay = 100,\n  mouseLeaveDelay = 100,\n  destroyTooltipOnHide = false,\n  zIndex = 1070,\n  fresh = false,\n  modelValue = undefined,\n} = defineProps<{\n  /** The text shown inside the tooltip. Also accepts the `title` slot. */\n  title?: string;\n  /** The event that triggers the tooltip to open. */\n  trigger?: `${BTooltipTrigger}`;\n  /** Placement of the tooltip relative to the target element. */\n  placement?: `${BTooltipPlacement}`;\n  /** Whether the tooltip has an arrow pointing to the target. */\n  arrow?: boolean;\n  /** Custom background color of the tooltip. */\n  color?: string;\n  /** Delay in ms before showing on mouseenter. */\n  mouseEnterDelay?: number;\n  /** Delay in ms before hiding on mouseleave. */\n  mouseLeaveDelay?: number;\n  /** Whether to destroy the tooltip DOM when hidden. */\n  destroyTooltipOnHide?: boolean;\n  /** z-index of the tooltip. */\n  zIndex?: number;\n  /** Force re-render when tooltip is shown. */\n  fresh?: boolean;\n  /** Whether to auto-adjust placement when tooltip overflows viewport. */\n  autoAdjustOverflow?: boolean;\n  /** Controlled visibility - bind with `v-model`. */\n  modelValue?: boolean;\n  /** Additional classes to apply to the toggle wrapper. */\n  toggleClass?: string;\n  /** Additional classes to apply to the tooltip content container. */\n  tooltipClass?: string;\n  /** Additional classes to apply to the tooltip inner element. */\n  tooltipInnerClass?: string;\n}>();\n\nconst emit = defineEmits<{\n  /** Emitted when the tooltip visibility changes. */\n  (e: 'openChange', open: boolean): void;\n  /** v-model support. */\n  (e: 'update:modelValue', value: boolean): void;\n}>();\n\ndefineSlots<{\n  /** The target element that triggers the tooltip. */\n  default?(): unknown;\n  /** Overrides the `title` prop. */\n  title?(): unknown;\n}>();\n\n// ─────────────────────────────────────────────\n// Internal state\n// ─────────────────────────────────────────────\nconst { componentUID } = useComponentId();\nconst tooltipId = useId();\n\nconst internalOpen = ref(false);\nconst isOpen = computed(() => (modelValue !== undefined ? modelValue : internalOpen.value));\n\nconst hasBeenOpened = ref(false);\nconst shouldRender = computed(() => {\n  if (fresh) return isOpen.value;\n  if (destroyTooltipOnHide) return isOpen.value;\n  return hasBeenOpened.value || isOpen.value;\n});\n\nwatch(isOpen, (val) => {\n  if (val) hasBeenOpened.value = true;\n});\n\n// ─────────────────────────────────────────────\n// Visibility control\n// ─────────────────────────────────────────────\nlet showTimer: ReturnType<typeof setTimeout> | null = null;\nlet hideTimer: ReturnType<typeof setTimeout> | null = null;\n\nfunction clearTimers() {\n  if (showTimer) {\n    clearTimeout(showTimer);\n    showTimer = null;\n  }\n  if (hideTimer) {\n    clearTimeout(hideTimer);\n    hideTimer = null;\n  }\n}\n\nfunction requestOpen(delay = 0) {\n  clearTimers();\n  if (isOpen.value) return;\n  if (delay > 0) {\n    showTimer = setTimeout(() => doOpen(), delay);\n  } else {\n    doOpen();\n  }\n}\n\nfunction requestClose(delay = 0) {\n  clearTimers();\n  if (!isOpen.value) return;\n  if (delay > 0) {\n    hideTimer = setTimeout(() => doClose(), delay);\n  } else {\n    doClose();\n  }\n}\n\nfunction doOpen() {\n  tooltipRef.value?.showPopover();\n}\n\nfunction doClose() {\n  tooltipRef.value?.hidePopover();\n}\n\nfunction setOpen(val: boolean) {\n  if (modelValue !== undefined) {\n    emit('update:modelValue', val);\n  } else {\n    internalOpen.value = val;\n  }\n  emit('openChange', val);\n}\n\n// ─────────────────────────────────────────────\n// Popover toggle event\n// ─────────────────────────────────────────────\nconst onPopoverToggle = ({ newState }: ToggleEvent) => {\n  setOpen(newState === 'open');\n};\n\n// ─────────────────────────────────────────────\n// Refs\n// ─────────────────────────────────────────────\nconst tooltipRef = ref<HTMLDivElement | null>(null);\nconst toggleRef = ref<HTMLDivElement | null>(null);\n\n// ─────────────────────────────────────────────\n// Event handlers\n// ─────────────────────────────────────────────\nfunction onClick() {\n  if (isOpen.value) {\n    requestClose();\n  } else {\n    requestOpen();\n  }\n}\n\nfunction onMouseEnter() {\n  requestOpen(mouseEnterDelay);\n}\n\nfunction onMouseLeave() {\n  requestClose(mouseLeaveDelay);\n}\n\nfunction onFocusIn() {\n  requestOpen();\n}\n\nfunction onFocusOut() {\n  requestClose();\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape' && isOpen.value) {\n    event.preventDefault();\n    requestClose();\n    toggleRef.value?.focus();\n  }\n}\n\n// ─────────────────────────────────────────────\n// Tooltip hover (keep tooltip open when hovering it)\n// ─────────────────────────────────────────────\nfunction onTooltipMouseEnter() {\n  if (trigger === BTooltipTrigger.Hover) {\n    clearTimers();\n  }\n}\n\nfunction onTooltipMouseLeave() {\n  if (trigger === BTooltipTrigger.Hover) {\n    requestClose(mouseLeaveDelay);\n  }\n}\n\n// ─────────────────────────────────────────────\n// Event listener management\n// ─────────────────────────────────────────────\nfunction attachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  // Keyboard always attached\n  el.addEventListener('keydown', onKeydown);\n\n  switch (trigger) {\n    case BTooltipTrigger.Click:\n      el.addEventListener('click', onClick);\n      break;\n    case BTooltipTrigger.Focus:\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n    case BTooltipTrigger.Hover:\n    default:\n      el.addEventListener('mouseenter', onMouseEnter);\n      el.addEventListener('mouseleave', onMouseLeave);\n      el.addEventListener('focusin', onFocusIn);\n      el.addEventListener('focusout', onFocusOut);\n      break;\n  }\n}\n\nfunction detachListeners() {\n  const el = toggleRef.value;\n  if (!el) return;\n\n  el.removeEventListener('keydown', onKeydown);\n  el.removeEventListener('click', onClick);\n  el.removeEventListener('focusin', onFocusIn);\n  el.removeEventListener('focusout', onFocusOut);\n  el.removeEventListener('mouseenter', onMouseEnter);\n  el.removeEventListener('mouseleave', onMouseLeave);\n}\n\nonMounted(() => {\n  attachListeners();\n});\n\nonBeforeUnmount(() => {\n  detachListeners();\n  clearTimers();\n});\n\nwatch(\n  () => trigger,\n  () => {\n    detachListeners();\n    attachListeners();\n  },\n);\n\n// Sync controlled v-model → popover state\nwatch(\n  () => modelValue,\n  (val) => {\n    if (val === undefined) return;\n    if (val) {\n      tooltipRef.value?.showPopover();\n    } else {\n      tooltipRef.value?.hidePopover();\n    }\n  },\n);\n\n// ─────────────────────────────────────────────\n// Computed styles\n// ─────────────────────────────────────────────\nconst anchorName = computed(() => `--b-tooltip-anchor-${componentUID.value}`);\n\nconst placementClass = computed(() => {\n  const map: Record<string, string> = {\n    [BTooltipPlacement.TopLeft]: 'top-left',\n    [BTooltipPlacement.TopCenter]: 'top-center',\n    [BTooltipPlacement.TopRight]: 'top-right',\n    [BTooltipPlacement.RightTop]: 'right-top',\n    [BTooltipPlacement.RightCenter]: 'right-center',\n    [BTooltipPlacement.RightBottom]: 'right-bottom',\n    [BTooltipPlacement.BottomRight]: 'bottom-right',\n    [BTooltipPlacement.BottomCenter]: 'bottom-center',\n    [BTooltipPlacement.BottomLeft]: 'bottom-left',\n    [BTooltipPlacement.LeftBottom]: 'left-bottom',\n    [BTooltipPlacement.LeftCenter]: 'left-center',\n    [BTooltipPlacement.LeftTop]: 'left-top',\n  };\n  return map[placement] ?? 'top-center';\n});\n\nconst customColorStyle = computed(() => {\n  if (!color) return undefined;\n  return {\n    '--b-tooltip-bg': color,\n    '--b-tooltip-arrow-color': color,\n  } as Record<string, string>;\n});\n\n// ─────────────────────────────────────────────\n// Public API\n// ─────────────────────────────────────────────\ndefineExpose({ open: doOpen, close: doClose });\n</script>\n\n<template>\n  <div\n    ref=\"toggleRef\"\n    :class=\"['b-tooltip__toggle', toggleClass]\"\n    :style=\"{ anchorName: anchorName }\"\n    :aria-describedby=\"isOpen ? tooltipId : undefined\"\n  >\n    <slot />\n  </div>\n\n  <div\n    ref=\"tooltipRef\"\n    popover=\"manual\"\n    :class=\"[\n      'b-tooltip__content',\n      placementClass,\n      { 'b-tooltip__content--no-arrow': !arrow },\n      tooltipClass,\n    ]\"\n    :style=\"[{ zIndex, positionAnchor: anchorName }, customColorStyle]\"\n    role=\"tooltip\"\n    :id=\"tooltipId\"\n    @toggle=\"onPopoverToggle\"\n    @mouseenter=\"onTooltipMouseEnter\"\n    @mouseleave=\"onTooltipMouseLeave\"\n  >\n    <template v-if=\"shouldRender || !destroyTooltipOnHide\">\n      <div v-if=\"arrow\" class=\"b-tooltip__arrow\" aria-hidden=\"true\" />\n      <div :class=\"['b-tooltip__inner', tooltipInnerClass]\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </template>\n  </div>\n</template>\n\n<style>\n/* ────────────────────────────────────────────\n   CSS Custom Properties (tokens)\n   ──────────────────────────────────────────── */\n:root {\n  --b-tooltip-bg: oklch(20% 0 0);\n  --b-tooltip-color: #fff;\n  --b-tooltip-font-size: 0.875rem;\n  --b-tooltip-line-height: 1.5;\n  --b-tooltip-padding-x: 0.5rem;\n  --b-tooltip-padding-y: 0.375rem;\n  --b-tooltip-border-radius: 0.375rem;\n  --b-tooltip-max-width: 250px;\n  --b-tooltip-arrow-size: 8px;\n  --b-tooltip-arrow-color: oklch(20% 0 0);\n  --b-tooltip-gap: 8px;\n  --b-tooltip-transition-duration: 200ms;\n  --b-tooltip-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),\n    0 9px 28px 8px rgba(0, 0, 0, 0.05);\n}\n\n/* ── Dark mode ── */\n[data-prefers-color='dark'] {\n  --b-tooltip-bg: oklch(35% 0 0);\n  --b-tooltip-arrow-color: oklch(35% 0 0);\n  --b-tooltip-shadow:\n    0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n    0 9px 28px 8px rgba(0, 0, 0, 0.2);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] {\n    --b-tooltip-bg: oklch(35% 0 0);\n    --b-tooltip-arrow-color: oklch(35% 0 0);\n    --b-tooltip-shadow:\n      0 6px 16px 0 rgba(0, 0, 0, 0.24), 0 3px 6px -4px rgba(0, 0, 0, 0.36),\n      0 9px 28px 8px rgba(0, 0, 0, 0.2);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Toggle wrapper\n   ───────────────────────────────────────────── */\n.b-tooltip__toggle {\n  display: inline-block;\n}\n\n/* ─────────────────────────────────────────────\n   Tooltip content (popover)\n   ───────────────────────────────────────────── */\n.b-tooltip__content {\n  /* Reset popover defaults */\n  position: absolute;\n  border: none;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  overflow: visible;\n  max-width: var(--b-tooltip-max-width);\n  box-sizing: border-box;\n  pointer-events: auto;\n\n  /* Animation and visibility */\n  transition:\n    display var(--b-tooltip-transition-duration),\n    opacity var(--b-tooltip-transition-duration);\n  transition-behavior: allow-discrete;\n  opacity: 0;\n\n  &:popover-open {\n    opacity: 1;\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  /* ── Placement: Top ── */\n  &.top-left {\n    inset: auto;\n    bottom: anchor(top);\n    left: anchor(left);\n    margin-bottom: var(--b-tooltip-gap);\n  }\n  &.top-center {\n    inset: auto;\n    bottom: anchor(top);\n    justify-self: anchor-center;\n    margin-bottom: var(--b-tooltip-gap);\n  }\n  &.top-right {\n    inset: auto;\n    bottom: anchor(top);\n    right: anchor(right);\n    margin-bottom: var(--b-tooltip-gap);\n  }\n\n  /* ── Placement: Right ── */\n  &.right-top {\n    inset: auto;\n    top: anchor(top);\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n  &.right-center {\n    inset: auto;\n    align-self: anchor-center;\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n  &.right-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    left: anchor(right);\n    margin-left: var(--b-tooltip-gap);\n  }\n\n  /* ── Placement: Bottom ── */\n  &.bottom-right {\n    inset: auto;\n    top: anchor(bottom);\n    right: anchor(right);\n    margin-top: var(--b-tooltip-gap);\n  }\n  &.bottom-center {\n    inset: auto;\n    top: anchor(bottom);\n    justify-self: anchor-center;\n    margin-top: var(--b-tooltip-gap);\n  }\n  &.bottom-left {\n    inset: auto;\n    top: anchor(bottom);\n    left: anchor(left);\n    margin-top: var(--b-tooltip-gap);\n  }\n\n  /* ── Placement: Left ── */\n  &.left-bottom {\n    inset: auto;\n    bottom: anchor(bottom);\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n  &.left-center {\n    inset: auto;\n    align-self: anchor-center;\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n  &.left-top {\n    inset: auto;\n    top: anchor(top);\n    right: anchor(left);\n    margin-right: var(--b-tooltip-gap);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Inner content\n   ───────────────────────────────────────────── */\n.b-tooltip__inner {\n  background: var(--b-tooltip-bg);\n  color: var(--b-tooltip-color);\n  font-size: var(--b-tooltip-font-size);\n  line-height: var(--b-tooltip-line-height);\n  padding: var(--b-tooltip-padding-y) var(--b-tooltip-padding-x);\n  border-radius: var(--b-tooltip-border-radius);\n  box-shadow: var(--b-tooltip-shadow);\n  word-wrap: break-word;\n}\n\n/* ─────────────────────────────────────────────\n   Arrow\n   ───────────────────────────────────────────── */\n.b-tooltip__arrow {\n  position: absolute;\n  width: var(--b-tooltip-arrow-size);\n  height: var(--b-tooltip-arrow-size);\n  background: var(--b-tooltip-arrow-color);\n  transform: rotate(45deg);\n  pointer-events: none;\n}\n\n/* Arrow positioning for top placements */\n.b-tooltip__content.top-left .b-tooltip__arrow,\n.b-tooltip__content.top-center .b-tooltip__arrow,\n.b-tooltip__content.top-right .b-tooltip__arrow {\n  bottom: calc(var(--b-tooltip-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for bottom placements */\n.b-tooltip__content.bottom-left .b-tooltip__arrow,\n.b-tooltip__content.bottom-center .b-tooltip__arrow,\n.b-tooltip__content.bottom-right .b-tooltip__arrow {\n  top: calc(var(--b-tooltip-arrow-size) / -2);\n  left: 50%;\n  margin-left: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for right placements */\n.b-tooltip__content.right-top .b-tooltip__arrow,\n.b-tooltip__content.right-center .b-tooltip__arrow,\n.b-tooltip__content.right-bottom .b-tooltip__arrow {\n  left: calc(var(--b-tooltip-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* Arrow positioning for left placements */\n.b-tooltip__content.left-top .b-tooltip__arrow,\n.b-tooltip__content.left-center .b-tooltip__arrow,\n.b-tooltip__content.left-bottom .b-tooltip__arrow {\n  right: calc(var(--b-tooltip-arrow-size) / -2);\n  top: 50%;\n  margin-top: calc(var(--b-tooltip-arrow-size) / -2);\n}\n\n/* ─────────────────────────────────────────────\n   Position fallbacks (auto-adjust overflow)\n   ───────────────────────────────────────────── */\n@position-try --b-tooltip-top-center {\n  inset: auto;\n  bottom: anchor(top);\n  justify-self: anchor-center;\n  margin-bottom: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-bottom-center {\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-right-center {\n  inset: auto;\n  align-self: anchor-center;\n  left: anchor(right);\n  margin-left: var(--b-tooltip-gap);\n}\n\n@position-try --b-tooltip-left-center {\n  inset: auto;\n  align-self: anchor-center;\n  right: anchor(left);\n  margin-right: var(--b-tooltip-gap);\n}\n\n/* ── Reduced motion ── */\n@media (prefers-reduced-motion: reduce) {\n  .b-tooltip__content {\n    transition-duration: 0ms;\n  }\n}\n</style>\n"],"mappings":""}
+{"version":3,"file":"design-system212.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":""}

package/dist/design-system213.js

@@ -1,10 +1,62 @@
-//#region src/components/BTour/types.ts
-var e = /* @__PURE__ */ function(e) {
-	return e.Center = "center", e.Top = "top", e.TopLeft = "topLeft", e.TopRight = "topRight", e.Bottom = "bottom", e.BottomLeft = "bottomLeft", e.BottomRight = "bottomRight", e.Left = "left", e.LeftTop = "leftTop", e.LeftBottom = "leftBottom", e.Right = "right", e.RightTop = "rightTop", e.RightBottom = "rightBottom", e;
-}({}), t = /* @__PURE__ */ function(e) {
-	return e.Default = "default", e.Primary = "primary", e;
-}({});
+import { Fragment as e, computed as t, createCommentVNode as n, createElementBlock as r, createElementVNode as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, renderSlot as u, toDisplayString as d, useSlots as f } from "vue";
+//#region src/components/BStatistic/BStatistic.vue?vue&type=script&setup=true&lang.ts
+var p = {
+	key: 0,
+	class: "b-statistic__title"
+}, m = {
+	key: 0,
+	class: "b-statistic__skeleton",
+	role: "status",
+	"aria-busy": "true",
+	"aria-label": "Loading"
+}, h = {
+	key: 0,
+	class: "b-statistic__prefix",
+	"aria-hidden": "true"
+}, g = { class: "b-statistic__value" }, _ = {
+	key: 1,
+	class: "b-statistic__suffix",
+	"aria-hidden": "true"
+}, v = /* @__PURE__ */ o({
+	__name: "BStatistic",
+	props: {
+		title: {},
+		value: {},
+		prefix: {},
+		suffix: {},
+		precision: {},
+		decimalSeparator: { default: "." },
+		groupSeparator: { default: "," },
+		loading: {
+			type: Boolean,
+			default: !1
+		},
+		valueStyle: {},
+		formatter: { type: Function }
+	},
+	setup(o) {
+		let v = f(), y = t(() => {
+			if (o.formatter) return String(o.formatter(o.value));
+			if (typeof o.value != "number") return String(o.value ?? "");
+			if (Number.isNaN(o.value)) return "NaN";
+			if (!Number.isFinite(o.value)) return String(o.value);
+			let e = o.value < 0, t = Math.abs(o.value), n;
+			n = o.precision != null && o.precision >= 0 ? t.toFixed(o.precision) : String(t);
+			let [r, i] = n.split("."), a = r.replace(/\B(?=(\d{3})+(?!\d))/g, o.groupSeparator), s = i == null ? a : `${a}${o.decimalSeparator}${i}`;
+			return e ? `-${s}` : s;
+		}), b = t(() => !!v.title || o.title != null && o.title !== ""), x = t(() => !!v.prefix || o.prefix != null && o.prefix !== ""), S = t(() => !!v.suffix || o.suffix != null && o.suffix !== "");
+		return (t, f) => (l(), r("div", { class: s(["b-statistic", { "b-statistic--loading": o.loading }]) }, [b.value ? (l(), r("div", p, [u(t.$slots, "title", {}, () => [a(d(o.title), 1)])])) : n("", !0), i("div", {
+			class: "b-statistic__content",
+			style: c(o.valueStyle),
+			"aria-live": "polite"
+		}, [o.loading ? (l(), r("span", m)) : (l(), r(e, { key: 1 }, [
+			x.value ? (l(), r("span", h, [u(t.$slots, "prefix", {}, () => [a(d(o.prefix), 1)])])) : n("", !0),
+			i("span", g, [u(t.$slots, "formatter", { value: o.value }, () => [a(d(y.value), 1)])]),
+			S.value ? (l(), r("span", _, [u(t.$slots, "suffix", {}, () => [a(d(o.suffix), 1)])])) : n("", !0)
+		], 64))], 4)], 2));
+	}
+});
 //#endregion
-export { e as BTourPlacement, t as BTourType };
+export { v as default };
 
 //# sourceMappingURL=design-system213.js.map

package/dist/design-system213.js.map

@@ -1 +1 @@
-{"version":3,"file":"design-system213.js","names":[],"sources":["../src/components/BTour/types.ts"],"sourcesContent":["import type { InjectionKey } from 'vue';\n\n// ─────────────────────────────────────────────\n// Enums\n// ─────────────────────────────────────────────\n\nexport enum BTourPlacement {\n  Center = 'center',\n  Top = 'top',\n  TopLeft = 'topLeft',\n  TopRight = 'topRight',\n  Bottom = 'bottom',\n  BottomLeft = 'bottomLeft',\n  BottomRight = 'bottomRight',\n  Left = 'left',\n  LeftTop = 'leftTop',\n  LeftBottom = 'leftBottom',\n  Right = 'right',\n  RightTop = 'rightTop',\n  RightBottom = 'rightBottom',\n}\n\nexport enum BTourType {\n  Default = 'default',\n  Primary = 'primary',\n}\n\n// ─────────────────────────────────────────────\n// Interfaces\n// ─────────────────────────────────────────────\n\nexport interface BTourArrowOptions {\n  /** Point the arrow at the center of the target element. */\n  pointAtCenter?: boolean;\n}\n\nexport interface BTourGapOptions {\n  /** Pixel offset between the highlight box and the target element. */\n  offset?: number | [number, number];\n  /** Border-radius of the highlight box (px). */\n  radius?: number;\n}\n\nexport interface BTourButtonProps {\n  children?: string;\n  onClick?: () => void;\n  className?: string;\n  style?: Record<string, string>;\n}\n\nexport interface BTourScrollIntoViewOptions {\n  behavior?: ScrollBehavior;\n  block?: ScrollLogicalPosition;\n  inline?: ScrollLogicalPosition;\n}\n\nexport interface BTourStep {\n  /** Title of the step. */\n  title: string;\n  /** Description text for the step. */\n  description?: string;\n  /** Cover image or video URL shown above title, or arbitrary HTML. */\n  cover?: string;\n  /**\n   * CSS selector string, HTMLElement reference, or getter function\n   * returning an element. Passing `null` centers the tour popup.\n   */\n  target?: string | HTMLElement | (() => HTMLElement | null) | null;\n  /** Arrow configuration for this step (overrides Tour-level). */\n  arrow?: boolean | BTourArrowOptions;\n  /** Placement for this step (overrides Tour-level). */\n  placement?: `${BTourPlacement}`;\n  /** Mask configuration for this step (overrides Tour-level). */\n  mask?: boolean | { style?: Record<string, string>; color?: string };\n  /** Type variant for this step (overrides Tour-level). */\n  type?: `${BTourType}`;\n  /** Custom next-button props. */\n  nextButtonProps?: BTourButtonProps;\n  /** Custom prev-button props. */\n  prevButtonProps?: BTourButtonProps;\n  /** Custom close icon for this step. */\n  closeIcon?: boolean | string;\n  /** Scroll-into-view options for this step. */\n  scrollIntoViewOptions?: boolean | BTourScrollIntoViewOptions;\n  /** Fired when this step's close button is clicked. */\n  onClose?: () => void;\n}\n\n// ─────────────────────────────────────────────\n// Internal computed step (resolved)\n// ─────────────────────────────────────────────\n\nexport interface BTourResolvedStep extends BTourStep {\n  resolvedTarget: HTMLElement | null;\n  index: number;\n}\n\n// ─────────────────────────────────────────────\n// Injection key (unused currently - kept for extensibility)\n// ─────────────────────────────────────────────\n\nexport const BTourContextKey: InjectionKey<null> = Symbol('BTourContext');\n"],"mappings":";AAMA,IAAY,IAAL,yBAAA,GAAA;QACL,EAAA,SAAA,UACA,EAAA,MAAA,OACA,EAAA,UAAA,WACA,EAAA,WAAA,YACA,EAAA,SAAA,UACA,EAAA,aAAA,cACA,EAAA,cAAA,eACA,EAAA,OAAA,QACA,EAAA,UAAA,WACA,EAAA,aAAA,cACA,EAAA,QAAA,SACA,EAAA,WAAA,YACA,EAAA,cAAA;KACD,EAEW,IAAL,yBAAA,GAAA;QACL,EAAA,UAAA,WACA,EAAA,UAAA;KACD"}
+{"version":3,"file":"design-system213.js","names":[],"sources":["../src/components/BStatistic/BStatistic.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue';\n\nimport type { BStatisticFormatter, BStatisticValue } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  title,\n  value,\n  prefix,\n  suffix,\n  precision,\n  decimalSeparator = '.',\n  groupSeparator = ',',\n  loading = false,\n  valueStyle,\n  formatter,\n} = defineProps<{\n  /** Display title shown above the value. Use `#title` slot for richer content. */\n  title?: string;\n  /** Display value. Numbers are formatted; strings render as-is. */\n  value: BStatisticValue;\n  /** Prefix text before the value. Use `#prefix` slot for richer content. */\n  prefix?: string;\n  /** Suffix text after the value. Use `#suffix` slot for richer content. */\n  suffix?: string;\n  /** Number of digits after the decimal point. Applied only to numeric values. */\n  precision?: number;\n  /** Character used as the decimal separator. @default '.' */\n  decimalSeparator?: string;\n  /** Character used as the thousands group separator. @default ',' */\n  groupSeparator?: string;\n  /** Show a skeleton placeholder instead of the value. @default false */\n  loading?: boolean;\n  /** Inline style applied to the value element. */\n  valueStyle?: string | Record<string, string | number>;\n  /** Function that returns a custom display string. Overridden by `#formatter` slot. */\n  formatter?: BStatisticFormatter;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom title content; overrides `title` prop. */\n  title?(): unknown;\n  /** Prefix content; overrides `prefix` prop. */\n  prefix?(): unknown;\n  /** Suffix content; overrides `suffix` prop. */\n  suffix?(): unknown;\n  /** Custom value renderer; receives `{ value }`. Overrides `formatter` prop. */\n  formatter?(payload: { value: BStatisticValue }): unknown;\n}>();\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Number formatting\n// ─────────────────────────────────────────────\nconst formattedValue = computed<string>(() => {\n  if (formatter) return String(formatter(value));\n  if (typeof value !== 'number') return String(value ?? '');\n  if (Number.isNaN(value)) return 'NaN';\n  if (!Number.isFinite(value)) return String(value);\n\n  const negative = value < 0;\n  const abs = Math.abs(value);\n\n  let str: string;\n  if (precision != null && precision >= 0) {\n    str = abs.toFixed(precision);\n  } else {\n    str = String(abs);\n  }\n\n  const [intPart, decPart] = str.split('.');\n  const intWithGroups = intPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, groupSeparator);\n  const result = decPart != null ? `${intWithGroups}${decimalSeparator}${decPart}` : intWithGroups;\n  return negative ? `-${result}` : result;\n});\n\nconst hasTitle = computed(() => !!slots.title || (title != null && title !== ''));\nconst hasPrefix = computed(() => !!slots.prefix || (prefix != null && prefix !== ''));\nconst hasSuffix = computed(() => !!slots.suffix || (suffix != null && suffix !== ''));\n</script>\n\n<template>\n  <div class=\"b-statistic\" :class=\"{ 'b-statistic--loading': loading }\">\n    <div v-if=\"hasTitle\" class=\"b-statistic__title\">\n      <slot name=\"title\">{{ title }}</slot>\n    </div>\n    <div class=\"b-statistic__content\" :style=\"valueStyle\" aria-live=\"polite\">\n      <span\n        v-if=\"loading\"\n        class=\"b-statistic__skeleton\"\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label=\"Loading\"\n      />\n      <template v-else>\n        <span v-if=\"hasPrefix\" class=\"b-statistic__prefix\" aria-hidden=\"true\">\n          <slot name=\"prefix\">{{ prefix }}</slot>\n        </span>\n        <span class=\"b-statistic__value\">\n          <slot name=\"formatter\" :value=\"value\">{{ formattedValue }}</slot>\n        </span>\n        <span v-if=\"hasSuffix\" class=\"b-statistic__suffix\" aria-hidden=\"true\">\n          <slot name=\"suffix\">{{ suffix }}</slot>\n        </span>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BStatistic - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-statistic {\n  /* ── Title ── */\n  --b-statistic-title-color: oklch(45% 0.02 260);\n  --b-statistic-title-font-size: 14px;\n  --b-statistic-title-line-height: 1.5715;\n  --b-statistic-title-margin-bottom: 4px;\n\n  /* ── Content (value) ── */\n  --b-statistic-content-color: oklch(20% 0.02 260);\n  --b-statistic-content-font-size: 24px;\n  --b-statistic-content-line-height: 1.5;\n  --b-statistic-content-font-family: inherit;\n  --b-statistic-content-font-weight: 400;\n\n  /* ── Prefix / Suffix ── */\n  --b-statistic-prefix-color: inherit;\n  --b-statistic-prefix-font-size: inherit;\n  --b-statistic-prefix-margin-end: 4px;\n  --b-statistic-suffix-color: inherit;\n  --b-statistic-suffix-font-size: inherit;\n  --b-statistic-suffix-margin-start: 4px;\n\n  /* ── Skeleton ── */\n  --b-statistic-skeleton-color: oklch(92% 0.005 260);\n  --b-statistic-skeleton-highlight: oklch(96% 0.003 260);\n  --b-statistic-skeleton-width: 96px;\n  --b-statistic-skeleton-height: 1em;\n  --b-statistic-skeleton-radius: 4px;\n  --b-statistic-skeleton-duration: 1.4s;\n\n  font-family: var(--b-statistic-content-font-family);\n  color: var(--b-statistic-content-color);\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-statistic__title {\n  margin-bottom: var(--b-statistic-title-margin-bottom);\n  color: var(--b-statistic-title-color);\n  font-size: var(--b-statistic-title-font-size);\n  line-height: var(--b-statistic-title-line-height);\n}\n\n/* ─────────────────────────────────────────────\n   Content / value\n   ───────────────────────────────────────────── */\n.b-statistic__content {\n  display: inline-flex;\n  align-items: baseline;\n  color: var(--b-statistic-content-color);\n  font-size: var(--b-statistic-content-font-size);\n  font-weight: var(--b-statistic-content-font-weight);\n  line-height: var(--b-statistic-content-line-height);\n  font-feature-settings: 'tnum';\n  font-variant-numeric: tabular-nums;\n  word-break: break-word;\n  max-width: 100%;\n}\n\n.b-statistic__value {\n  display: inline-block;\n}\n\n.b-statistic__prefix {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-end: var(--b-statistic-prefix-margin-end);\n  color: var(--b-statistic-prefix-color);\n  font-size: var(--b-statistic-prefix-font-size);\n}\n\n.b-statistic__suffix {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: var(--b-statistic-suffix-margin-start);\n  color: var(--b-statistic-suffix-color);\n  font-size: var(--b-statistic-suffix-font-size);\n}\n\n/* ─────────────────────────────────────────────\n   Loading skeleton\n   ───────────────────────────────────────────── */\n.b-statistic__skeleton {\n  display: inline-block;\n  width: var(--b-statistic-skeleton-width);\n  height: var(--b-statistic-skeleton-height);\n  border-radius: var(--b-statistic-skeleton-radius);\n  background: linear-gradient(\n    90deg,\n    var(--b-statistic-skeleton-color) 25%,\n    var(--b-statistic-skeleton-highlight) 37%,\n    var(--b-statistic-skeleton-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-statistic-shimmer var(--b-statistic-skeleton-duration) ease infinite;\n}\n\n@keyframes b-statistic-shimmer {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-statistic {\n  --b-statistic-title-color: oklch(70% 0.01 260);\n  --b-statistic-content-color: oklch(92% 0.01 260);\n  --b-statistic-skeleton-color: oklch(28% 0.01 260);\n  --b-statistic-skeleton-highlight: oklch(35% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-statistic {\n    --b-statistic-title-color: oklch(70% 0.01 260);\n    --b-statistic-content-color: oklch(92% 0.01 260);\n    --b-statistic-skeleton-color: oklch(28% 0.01 260);\n    --b-statistic-skeleton-highlight: oklch(35% 0.01 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-statistic {\n    --b-statistic-skeleton-duration: 0ms;\n  }\n  .b-statistic__skeleton {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwDA,IAAM,IAAQ,GAAU,EAKlB,IAAiB,QAAuB;AAC5C,OAAI,EAAA,UAAW,QAAO,OAAO,EAAA,UAAU,EAAA,MAAM,CAAC;AAC9C,OAAI,OAAO,EAAA,SAAU,SAAU,QAAO,OAAO,EAAA,SAAS,GAAG;AACzD,OAAI,OAAO,MAAM,EAAA,MAAM,CAAE,QAAO;AAChC,OAAI,CAAC,OAAO,SAAS,EAAA,MAAM,CAAE,QAAO,OAAO,EAAA,MAAM;GAEjD,IAAM,IAAW,EAAA,QAAQ,GACnB,IAAM,KAAK,IAAI,EAAA,MAAM,EAEvB;AACJ,GAGE,IAHE,EAAA,aAAa,QAAQ,EAAA,aAAa,IAC9B,EAAI,QAAQ,EAAA,UAAU,GAEtB,OAAO,EAAI;GAGnB,IAAM,CAAC,GAAS,KAAW,EAAI,MAAM,IAAI,EACnC,IAAgB,EAAQ,QAAQ,yBAAyB,EAAA,eAAe,EACxE,IAAS,KAAW,OAAyD,IAAlD,GAAG,IAAgB,EAAA,mBAAmB;AACvE,UAAO,IAAW,IAAI,MAAW;IACjC,EAEI,IAAW,QAAe,CAAC,CAAC,EAAM,SAAU,EAAA,SAAS,QAAQ,EAAA,UAAU,GAAI,EAC3E,IAAY,QAAe,CAAC,CAAC,EAAM,UAAW,EAAA,UAAU,QAAQ,EAAA,WAAW,GAAI,EAC/E,IAAY,QAAe,CAAC,CAAC,EAAM,UAAW,EAAA,UAAU,QAAQ,EAAA,WAAW,GAAI;yBAInF,EAwBM,OAAA,EAxBD,OAAK,EAAA,CAAC,eAAa,EAAA,wBAAmC,EAAA,SAAO,CAAA,CAAA,EAAA,EAAA,CACrD,EAAA,SAAA,GAAA,EAAX,EAEM,OAFN,GAEM,CADJ,EAAqC,EAAA,QAAA,SAAA,EAAA,QAAA,CAAA,EAAA,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA,EAE7B,EAmBM,OAAA;GAnBD,OAAM;GAAwB,OAAK,EAAE,EAAA,WAAU;GAAE,aAAU;MAEtD,EAAA,WAAA,GAAA,EADR,EAME,QANF,EAME,KAAA,GAAA,EACF,EAUW,GAAA,EAAA,KAAA,GAAA,EAAA;GATG,EAAA,SAAA,GAAA,EAAZ,EAEO,QAFP,GAEO,CADL,EAAuC,EAAA,QAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EAAhB,EAAA,OAAM,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAE/B,EAEO,QAFP,GAEO,CADL,EAAiE,EAAA,QAAA,aAAA,EAAzC,OAAO,EAAA,OAAK,QAA6B,CAAA,EAAA,EAAxB,EAAA,MAAc,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;GAE7C,EAAA,SAAA,GAAA,EAAZ,EAEO,QAFP,GAEO,CADL,EAAuC,EAAA,QAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EAAhB,EAAA,OAAM,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/design-system215.js

@@ -0,0 +1,8 @@
+import e from "./design-system213.js";
+/* empty css                 */
+//#region src/components/BStatistic/BStatistic.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=design-system215.js.map

package/dist/design-system215.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"design-system215.js","names":[],"sources":["../src/components/BStatistic/BStatistic.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue';\n\nimport type { BStatisticFormatter, BStatisticValue } from './types';\n\n// ─────────────────────────────────────────────\n// Props\n// ─────────────────────────────────────────────\nconst {\n  title,\n  value,\n  prefix,\n  suffix,\n  precision,\n  decimalSeparator = '.',\n  groupSeparator = ',',\n  loading = false,\n  valueStyle,\n  formatter,\n} = defineProps<{\n  /** Display title shown above the value. Use `#title` slot for richer content. */\n  title?: string;\n  /** Display value. Numbers are formatted; strings render as-is. */\n  value: BStatisticValue;\n  /** Prefix text before the value. Use `#prefix` slot for richer content. */\n  prefix?: string;\n  /** Suffix text after the value. Use `#suffix` slot for richer content. */\n  suffix?: string;\n  /** Number of digits after the decimal point. Applied only to numeric values. */\n  precision?: number;\n  /** Character used as the decimal separator. @default '.' */\n  decimalSeparator?: string;\n  /** Character used as the thousands group separator. @default ',' */\n  groupSeparator?: string;\n  /** Show a skeleton placeholder instead of the value. @default false */\n  loading?: boolean;\n  /** Inline style applied to the value element. */\n  valueStyle?: string | Record<string, string | number>;\n  /** Function that returns a custom display string. Overridden by `#formatter` slot. */\n  formatter?: BStatisticFormatter;\n}>();\n\n// ─────────────────────────────────────────────\n// Slots\n// ─────────────────────────────────────────────\ndefineSlots<{\n  /** Custom title content; overrides `title` prop. */\n  title?(): unknown;\n  /** Prefix content; overrides `prefix` prop. */\n  prefix?(): unknown;\n  /** Suffix content; overrides `suffix` prop. */\n  suffix?(): unknown;\n  /** Custom value renderer; receives `{ value }`. Overrides `formatter` prop. */\n  formatter?(payload: { value: BStatisticValue }): unknown;\n}>();\n\nconst slots = useSlots();\n\n// ─────────────────────────────────────────────\n// Number formatting\n// ─────────────────────────────────────────────\nconst formattedValue = computed<string>(() => {\n  if (formatter) return String(formatter(value));\n  if (typeof value !== 'number') return String(value ?? '');\n  if (Number.isNaN(value)) return 'NaN';\n  if (!Number.isFinite(value)) return String(value);\n\n  const negative = value < 0;\n  const abs = Math.abs(value);\n\n  let str: string;\n  if (precision != null && precision >= 0) {\n    str = abs.toFixed(precision);\n  } else {\n    str = String(abs);\n  }\n\n  const [intPart, decPart] = str.split('.');\n  const intWithGroups = intPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, groupSeparator);\n  const result = decPart != null ? `${intWithGroups}${decimalSeparator}${decPart}` : intWithGroups;\n  return negative ? `-${result}` : result;\n});\n\nconst hasTitle = computed(() => !!slots.title || (title != null && title !== ''));\nconst hasPrefix = computed(() => !!slots.prefix || (prefix != null && prefix !== ''));\nconst hasSuffix = computed(() => !!slots.suffix || (suffix != null && suffix !== ''));\n</script>\n\n<template>\n  <div class=\"b-statistic\" :class=\"{ 'b-statistic--loading': loading }\">\n    <div v-if=\"hasTitle\" class=\"b-statistic__title\">\n      <slot name=\"title\">{{ title }}</slot>\n    </div>\n    <div class=\"b-statistic__content\" :style=\"valueStyle\" aria-live=\"polite\">\n      <span\n        v-if=\"loading\"\n        class=\"b-statistic__skeleton\"\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label=\"Loading\"\n      />\n      <template v-else>\n        <span v-if=\"hasPrefix\" class=\"b-statistic__prefix\" aria-hidden=\"true\">\n          <slot name=\"prefix\">{{ prefix }}</slot>\n        </span>\n        <span class=\"b-statistic__value\">\n          <slot name=\"formatter\" :value=\"value\">{{ formattedValue }}</slot>\n        </span>\n        <span v-if=\"hasSuffix\" class=\"b-statistic__suffix\" aria-hidden=\"true\">\n          <slot name=\"suffix\">{{ suffix }}</slot>\n        </span>\n      </template>\n    </div>\n  </div>\n</template>\n\n<style>\n/* ─────────────────────────────────────────────\n   BStatistic - CSS custom properties (scoped to root)\n   ───────────────────────────────────────────── */\n.b-statistic {\n  /* ── Title ── */\n  --b-statistic-title-color: oklch(45% 0.02 260);\n  --b-statistic-title-font-size: 14px;\n  --b-statistic-title-line-height: 1.5715;\n  --b-statistic-title-margin-bottom: 4px;\n\n  /* ── Content (value) ── */\n  --b-statistic-content-color: oklch(20% 0.02 260);\n  --b-statistic-content-font-size: 24px;\n  --b-statistic-content-line-height: 1.5;\n  --b-statistic-content-font-family: inherit;\n  --b-statistic-content-font-weight: 400;\n\n  /* ── Prefix / Suffix ── */\n  --b-statistic-prefix-color: inherit;\n  --b-statistic-prefix-font-size: inherit;\n  --b-statistic-prefix-margin-end: 4px;\n  --b-statistic-suffix-color: inherit;\n  --b-statistic-suffix-font-size: inherit;\n  --b-statistic-suffix-margin-start: 4px;\n\n  /* ── Skeleton ── */\n  --b-statistic-skeleton-color: oklch(92% 0.005 260);\n  --b-statistic-skeleton-highlight: oklch(96% 0.003 260);\n  --b-statistic-skeleton-width: 96px;\n  --b-statistic-skeleton-height: 1em;\n  --b-statistic-skeleton-radius: 4px;\n  --b-statistic-skeleton-duration: 1.4s;\n\n  font-family: var(--b-statistic-content-font-family);\n  color: var(--b-statistic-content-color);\n}\n\n/* ─────────────────────────────────────────────\n   Title\n   ───────────────────────────────────────────── */\n.b-statistic__title {\n  margin-bottom: var(--b-statistic-title-margin-bottom);\n  color: var(--b-statistic-title-color);\n  font-size: var(--b-statistic-title-font-size);\n  line-height: var(--b-statistic-title-line-height);\n}\n\n/* ─────────────────────────────────────────────\n   Content / value\n   ───────────────────────────────────────────── */\n.b-statistic__content {\n  display: inline-flex;\n  align-items: baseline;\n  color: var(--b-statistic-content-color);\n  font-size: var(--b-statistic-content-font-size);\n  font-weight: var(--b-statistic-content-font-weight);\n  line-height: var(--b-statistic-content-line-height);\n  font-feature-settings: 'tnum';\n  font-variant-numeric: tabular-nums;\n  word-break: break-word;\n  max-width: 100%;\n}\n\n.b-statistic__value {\n  display: inline-block;\n}\n\n.b-statistic__prefix {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-end: var(--b-statistic-prefix-margin-end);\n  color: var(--b-statistic-prefix-color);\n  font-size: var(--b-statistic-prefix-font-size);\n}\n\n.b-statistic__suffix {\n  display: inline-flex;\n  align-items: center;\n  margin-inline-start: var(--b-statistic-suffix-margin-start);\n  color: var(--b-statistic-suffix-color);\n  font-size: var(--b-statistic-suffix-font-size);\n}\n\n/* ─────────────────────────────────────────────\n   Loading skeleton\n   ───────────────────────────────────────────── */\n.b-statistic__skeleton {\n  display: inline-block;\n  width: var(--b-statistic-skeleton-width);\n  height: var(--b-statistic-skeleton-height);\n  border-radius: var(--b-statistic-skeleton-radius);\n  background: linear-gradient(\n    90deg,\n    var(--b-statistic-skeleton-color) 25%,\n    var(--b-statistic-skeleton-highlight) 37%,\n    var(--b-statistic-skeleton-color) 63%\n  );\n  background-size: 400% 100%;\n  animation: b-statistic-shimmer var(--b-statistic-skeleton-duration) ease infinite;\n}\n\n@keyframes b-statistic-shimmer {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Dark mode\n   ───────────────────────────────────────────── */\n[data-prefers-color='dark'] .b-statistic {\n  --b-statistic-title-color: oklch(70% 0.01 260);\n  --b-statistic-content-color: oklch(92% 0.01 260);\n  --b-statistic-skeleton-color: oklch(28% 0.01 260);\n  --b-statistic-skeleton-highlight: oklch(35% 0.01 260);\n}\n\n@media (prefers-color-scheme: dark) {\n  [data-prefers-color='system'] .b-statistic {\n    --b-statistic-title-color: oklch(70% 0.01 260);\n    --b-statistic-content-color: oklch(92% 0.01 260);\n    --b-statistic-skeleton-color: oklch(28% 0.01 260);\n    --b-statistic-skeleton-highlight: oklch(35% 0.01 260);\n  }\n}\n\n/* ─────────────────────────────────────────────\n   Reduced motion\n   ───────────────────────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  .b-statistic {\n    --b-statistic-skeleton-duration: 0ms;\n  }\n  .b-statistic__skeleton {\n    animation: none;\n    opacity: 0.6;\n  }\n}\n</style>\n"],"mappings":""}

package/dist/design-system216.js

@@ -1,8 +1,91 @@
-import e from "./design-system214.js";
-/* empty css                 */
-//#region src/components/BTour/BTour.vue
-var t = e;
+import e from "./design-system215.js";
+import { computed as t, createBlock as n, createSlots as r, defineComponent as i, onBeforeUnmount as a, onMounted as o, openBlock as s, ref as c, renderSlot as l, withCtx as u } from "vue";
+//#region src/components/BStatistic/BStatisticTimer.vue?vue&type=script&setup=true&lang.ts
+var d = 1e3 / 30, f = /* @__PURE__ */ i({
+	__name: "BStatisticTimer",
+	props: {
+		type: { default: "countdown" },
+		value: {},
+		format: { default: "HH:mm:ss" },
+		title: {},
+		prefix: {},
+		suffix: {},
+		valueStyle: {}
+	},
+	emits: ["finish", "change"],
+	setup(i, { emit: f }) {
+		let p = f, m = c(0), h = null, g = !1;
+		function _(e) {
+			return i.type === "countdown" ? Math.max(0, i.value - e) : Math.max(0, e - i.value);
+		}
+		function v() {
+			let e = Date.now();
+			m.value = e;
+			let t = _(e);
+			p("change", t), i.type === "countdown" && t <= 0 && !g && (g = !0, h &&= (clearInterval(h), null), p("finish"));
+		}
+		o(() => {
+			g = !1, m.value = Date.now(), p("change", _(m.value)), h = setInterval(v, d);
+		}), a(() => {
+			h &&= (clearInterval(h), null);
+		});
+		let y = t(() => m.value ? _(m.value) : _(Date.now()));
+		function b(e, t) {
+			let n = Math.floor(e / 864e5), r = e - n * 864e5, i = Math.floor(r / 36e5);
+			r -= i * 36e5;
+			let a = Math.floor(r / 6e4);
+			r -= a * 6e4;
+			let o = Math.floor(r / 1e3), s = r - o * 1e3;
+			return t.replace(/\[([^\]]*)\]|SSS|HH|mm|ss|D|H|m|s|S/g, (e, t) => {
+				if (t !== void 0) return t;
+				switch (e) {
+					case "SSS": return String(s).padStart(3, "0");
+					case "HH": return String(i).padStart(2, "0");
+					case "mm": return String(a).padStart(2, "0");
+					case "ss": return String(o).padStart(2, "0");
+					case "D": return String(n);
+					case "H": return String(i);
+					case "m": return String(a);
+					case "s": return String(o);
+					case "S": return String(s);
+					default: return e;
+				}
+			});
+		}
+		let x = t(() => b(y.value, i.format));
+		return (t, a) => (s(), n(e, {
+			class: "b-statistic-timer",
+			title: i.title,
+			value: x.value,
+			prefix: i.prefix,
+			suffix: i.suffix,
+			"value-style": i.valueStyle
+		}, r({ _: 2 }, [
+			t.$slots.title ? {
+				name: "title",
+				fn: u(() => [l(t.$slots, "title")]),
+				key: "0"
+			} : void 0,
+			t.$slots.prefix ? {
+				name: "prefix",
+				fn: u(() => [l(t.$slots, "prefix")]),
+				key: "1"
+			} : void 0,
+			t.$slots.suffix ? {
+				name: "suffix",
+				fn: u(() => [l(t.$slots, "suffix")]),
+				key: "2"
+			} : void 0
+		]), 1032, [
+			"title",
+			"value",
+			"prefix",
+			"suffix",
+			"value-style"
+		]));
+	}
+});
 //#endregion
-export { t as default };
+export { f as default };
 
 //# sourceMappingURL=design-system216.js.map