@beehexa/vue-components 0.0.0-stage → 2611.5.1

package/README.md

@@ -1,3 +1,151 @@
-# Temporary Holding Version
+# @beehexa/vue-components
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Source-owned Vue 3 components from beehexa.design, independent of Ant Design Vue or
+any other UI framework. `ResizablePanel` is the first component. The private
+`0.0.0` source package is for local development; staging does not authorize a
+release or substitution of an invented registry version.
+
+## Install and use
+
+Use the actual local workspace/package reference until an authorized version is
+published. Vue 3.5 or newer is a peer dependency. The only package dependency is
+`@beehexa/design-tokens` at the matching local `0.0.0` version.
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue';
+import { ResizablePanel, type ResizablePanelResizeEvent } from '@beehexa/vue-components';
+import '@beehexa/vue-components/css';
+
+const ratio = ref(0.6);
+function onResize(event: ResizablePanelResizeEvent) {
+  // DOM layout is complete: ask an editor/chart/canvas to measure its retained host.
+  // event.first and event.second contain actual rendered width and height.
+}
+</script>
+
+<template>
+  <div style="height: 32rem; min-height: 0; min-width: 0">
+    <ResizablePanel v-model:ratio="ratio" separator-label="Resize source and preview" @resize="onResize">
+      <template #first><SourceEditor /></template>
+      <template #second><PreviewCanvas /></template>
+    </ResizablePanel>
+  </div>
+</template>
+```
+
+The CSS entry has an export declaration for strict TypeScript side-effect imports
+and imports the source design-token CSS. Import it once. No app-owned AntD adapter,
+SFC compiler, global registration or global body style is required. Runtime imports
+are safe during SSR; observation, pointer capture and layout reads begin on mount.
+IDs use Vue's SSR-safe `useId` rather than a module-global instance counter.
+
+## Public exports
+
+- `ResizablePanel`: Vue component, slots `first` and `second`.
+- `ResizablePanelDirection = 'horizontal' | 'vertical'`.
+- `ResizablePanelResizeEvent`: the event contract below.
+- `@beehexa/vue-components/css`: typed side-effect CSS entry.
+
+### Props
+
+| Prop | Type | Default | Behavior |
+| --- | --- | --- | --- |
+| `direction` | `ResizablePanelDirection` | `'horizontal'` | Horizontal is left/right panes with a vertical separator. Vertical is top/bottom panes with a horizontal separator. |
+| `ratio` | `number` | `0.5` | Requested first-pane fraction, supports `v-model:ratio`. Pointer and keyboard changes emit a bounded ratio. |
+| `min` | `number` | `100` | Minimum CSS pixels for **each** pane on the split axis. Use `0` for real endpoint collapse. |
+| `max` | `number` | `Infinity` | First-pane maximum in CSS pixels. |
+| `minRatio` | `number` | `0` | Lower first-pane fraction, constrained to `[0, 1]`. |
+| `maxRatio` | `number` | `1` | Upper first-pane fraction, constrained to `[0, 1]`. |
+| `secondVisible` | `boolean` | `true` | Hides the second pane without unmounting either slot. First fills the host; separator is hidden. Restores the requested ratio when shown. |
+| `resizerSize` | `string` | `'90%'` | Reactive CSS length/percentage for the visible divider **line**, centered on the cross axis and capped at host length. The centered handle remains visible; the hit target spans the cross axis. |
+| `separatorLabel` | `string` | `'Resize panels'` | Accessible name. Consumer supplies the translated/contextual label. |
+
+Both panes stay mounted when one reaches zero or the second is hidden. Child
+state, Monaco models, diagram zoom and fullscreen state are not reset by ratio,
+direction or visibility changes. Pane wrappers clip ordinary overflowing content;
+the physical gutter keeps the complete handle clear of their scroll targets.
+At rest root and panes do not create stacking contexts: nested fixed overlays share
+their actual overlay owner's stack above the outer divider. Root isolation and
+pane stacking apply only during a pointer gesture, beneath its local iframe shield.
+The component adds no heading, chrome, app breakpoint or global overlay layer.
+The consumer computes `direction` from its existing breakpoint policy and provides
+a bounded host (`min-width: 0`, `min-height: 0` in surrounding flex/grid layouts).
+
+Pane wrappers are shrinkable column flex containers. Fill-layout Cards, editors
+and canvases can consume the available pane height without relying on an
+intrinsic content height or a consumer patch to the wrapper.
+
+Pixel minima yield symmetrically when a host is too small to fit both, never
+forcing overflow. Explicit ratio/first-pane maximums take precedence over
+contradictory minima. A temporarily small host clamps **effective layout**, not the
+stored requested ratio; growing the host restores it. External model updates also
+request a ratio subject to current bounds. `resize.ratio` reports that effective
+split fraction (retained while the second pane is hidden); pane dimensions report
+the actual visible layout. A fixed interval (`minRatio === maxRatio`, including
+`0` or `1` with `min=0`) hides/disables the separator and cancels an active gesture.
+
+### Events
+
+`update:ratio` supplies the new numeric first-pane fraction for user resizing.
+`resize-start`, `resize` and `resize-end` carry:
+
+```ts
+interface ResizablePanelResizeEvent {
+  ratio: number;
+  direction: 'horizontal' | 'vertical';
+  first: { width: number; height: number };
+  second: { width: number; height: number };
+  source: 'pointer' | 'keyboard' | 'container' | 'programmatic';
+}
+```
+
+Dimensions are actual `getBoundingClientRect()` sizes, read after Vue's DOM update
+and the next animation frame. A hidden second pane reports zero dimensions.
+Movement notifications coalesce within a frame; lifecycle ordering is retained.
+Parents should use `resize` to update editor/chart/canvas host layout, not change a
+child key, replace its model, reset zoom or toggle it out of the render tree.
+A parent's normal `v-model` echo retains the original pointer/keyboard source.
+
+- Pointer down starts; movement resizes; up/cancel/lost capture/window blur ends.
+- Keyboard changes start on the first supported keydown; repeats resize; keyup or
+  focus loss ends. Pointer cancellation keeps the last valid ratio.
+- ResizeObserver changes emit `resize` with `source: 'container'` after initial
+  mount and whenever the host's dimensions change.
+- Model, constraints, visibility and direction changes emit `resize` with
+  `source: 'programmatic'`; they do not fabricate an interactive start/end.
+- Active gestures end before a direction/visibility/constraint change is reported.
+  Listeners, capture, observers and pending animation work are removed on unmount.
+
+### Keyboard and accessibility
+
+The focusable separator has a localized name, `role="separator"`, the actual
+separator's `aria-orientation`, `aria-controls` referencing the first pane, and
+percentage `aria-valuemin`, `aria-valuemax`, `aria-valuenow`. Hidden or fixed-bound
+separators are neither visible nor keyboard reachable.
+
+- Left/Right change a horizontal split; Up/Down change a vertical split.
+- Arrow changes are 1 percentage point; Shift+Arrow changes 10.
+- Home/End move to live lower/upper bounds.
+- Enter or separator double-click resets to the **initial** ratio, within live
+  bounds, with a complete keyboard/pointer resize lifecycle. Programmatic model,
+  direction and container changes do not redefine this reset point.
+- Pointer/touch uses a source-token target, expanded for coarse pointers. Pointer
+  capture, a pane-local drag shield and gesture-scoped selection prevention avoid
+  iframe/editor interception or accidental text selection without mutating body
+  styles or arbitrary framework controls.
+
+### Theme and presentation
+
+Resize geometry, colors, grip, active background and focus use the `resize.*` and
+border/spacing source tokens. The default line is centered at 90% cross-axis
+length (5% inset at either end), with a handle centered at 50%. Both orientations
+keep that handle outside the panes' overflow and above positioned pane children;
+only local stacking levels are used. Native rem token values respect reader text
+scaling. Source `data-theme="dark"` changes apply live; no component theme or
+locale singleton is introduced. Geometry does not animate; reduced-motion and
+forced-colors behavior retain usable focus/contrast.
+
+Complete active usage, code, examples, accessibility and changelog rules live at
+`src/content/components/resizable-panel/` in beehexa.design and are distributed by
+`@beehexa/design-rules` under stable `en/components/resizable-panel/*` IDs.

package/dist/ResizablePanel.d.ts

@@ -0,0 +1,122 @@
+import { type PropType } from 'vue';
+export type ResizablePanelDirection = 'horizontal' | 'vertical';
+export interface ResizablePanelResizeEvent {
+    ratio: number;
+    direction: ResizablePanelDirection;
+    first: {
+        width: number;
+        height: number;
+    };
+    second: {
+        width: number;
+        height: number;
+    };
+    source: 'pointer' | 'keyboard' | 'container' | 'programmatic';
+}
+/** A bounded two-pane layout. Children stay mounted when a pane is hidden. */
+export declare const ResizablePanel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    direction: {
+        type: PropType<ResizablePanelDirection>;
+        default: string;
+    };
+    ratio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    preserveMinimum: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    secondVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resizerSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    separatorLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'update:ratio': (ratio: number) => boolean;
+    'resize-start': (_event: ResizablePanelResizeEvent) => true;
+    resize: (_event: ResizablePanelResizeEvent) => true;
+    'resize-end': (_event: ResizablePanelResizeEvent) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    direction: {
+        type: PropType<ResizablePanelDirection>;
+        default: string;
+    };
+    ratio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    min: {
+        type: NumberConstructor;
+        default: number;
+    };
+    max: {
+        type: NumberConstructor;
+        default: number;
+    };
+    preserveMinimum: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    minRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    maxRatio: {
+        type: NumberConstructor;
+        default: number;
+    };
+    secondVisible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resizerSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    separatorLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onResize-start"?: ((_event: ResizablePanelResizeEvent) => any) | undefined;
+    onResize?: ((_event: ResizablePanelResizeEvent) => any) | undefined;
+    "onResize-end"?: ((_event: ResizablePanelResizeEvent) => any) | undefined;
+    "onUpdate:ratio"?: ((ratio: number) => any) | undefined;
+}>, {
+    direction: ResizablePanelDirection;
+    ratio: number;
+    min: number;
+    max: number;
+    preserveMinimum: boolean;
+    minRatio: number;
+    maxRatio: number;
+    secondVisible: boolean;
+    resizerSize: string;
+    separatorLabel: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/ResizablePanel.js

@@ -0,0 +1,359 @@
+import { computed, defineComponent, h, nextTick, onBeforeUnmount, onMounted, ref, useId, watch, } from 'vue';
+import { clampRatio, panelBounds } from './geometry.js';
+/** A bounded two-pane layout. Children stay mounted when a pane is hidden. */
+export const ResizablePanel = defineComponent({
+    name: 'ResizablePanel',
+    props: {
+        direction: {
+            type: String,
+            default: 'horizontal',
+        },
+        ratio: { type: Number, default: 0.5 },
+        min: { type: Number, default: 100 },
+        max: { type: Number, default: Number.POSITIVE_INFINITY },
+        preserveMinimum: { type: Boolean, default: false },
+        minRatio: { type: Number, default: 0 },
+        maxRatio: { type: Number, default: 1 },
+        secondVisible: { type: Boolean, default: true },
+        resizerSize: { type: String, default: '90%' },
+        separatorLabel: { type: String, default: 'Resize panels' },
+    },
+    emits: {
+        'update:ratio': (ratio) => Number.isFinite(ratio),
+        'resize-start': (_event) => true,
+        resize: (_event) => true,
+        'resize-end': (_event) => true,
+    },
+    setup(props, { slots, emit }) {
+        const id = useId();
+        const firstId = `bh-panel-${id}-first`;
+        const secondId = `bh-panel-${id}-second`;
+        const root = ref();
+        const first = ref();
+        const second = ref();
+        const separator = ref();
+        const width = ref(0);
+        const height = ref(0);
+        const gutter = ref(0);
+        // Requested ratio is retained while hidden or temporarily constrained by a small host.
+        const initialRatio = clampRatio(props.ratio);
+        const requestedRatio = ref(initialRatio);
+        const dragging = ref(false);
+        const horizontal = computed(() => props.direction === 'horizontal');
+        const bounds = computed(() => panelBounds(horizontal.value ? width.value : height.value, gutter.value, props.min, props.max, props.minRatio, props.maxRatio));
+        const actualRatio = computed(() => clampRatio(requestedRatio.value, bounds.value.min, bounds.value.max));
+        const gutterHidden = computed(() => !props.secondVisible ||
+            (bounds.value.min === bounds.value.max && (bounds.value.min === 0 || bounds.value.min === 1)));
+        const disabled = computed(() => !props.secondVisible || bounds.value.min === bounds.value.max ||
+            (horizontal.value ? width.value : height.value) <= gutter.value);
+        const minimumAllocation = computed(() => {
+            if (!props.preserveMinimum)
+                return undefined;
+            const minimum = Math.max(0, Number.isFinite(props.min) ? props.min : 100);
+            return gutterHidden.value
+                ? `${minimum}px`
+                : `calc(${minimum * 2}px + var(--bh-panel-hit-target))`;
+        });
+        let mounted = false;
+        let disposed = false;
+        let frame;
+        let observer;
+        let ownerWindow;
+        let activePointer;
+        let dragOffset = 0;
+        let dragDocument;
+        let keyboardActive = false;
+        let pending = [];
+        function queueResize(source, phase = 'resize') {
+            if (!mounted || disposed)
+                return;
+            // Keep lifecycle order while coalescing repeated moves/observer notifications.
+            const previous = pending[pending.length - 1];
+            if (phase === 'resize' && previous?.phase === 'resize') {
+                if (source !== 'container')
+                    previous.source = source;
+            }
+            else {
+                pending.push({ phase, source });
+            }
+            if (frame !== undefined)
+                return;
+            void nextTick(() => {
+                if (disposed || frame !== undefined || !ownerWindow)
+                    return;
+                frame = ownerWindow.requestAnimationFrame(() => {
+                    frame = undefined;
+                    if (!first.value || !second.value || disposed)
+                        return;
+                    const firstRect = first.value.getBoundingClientRect();
+                    const secondRect = second.value.getBoundingClientRect();
+                    const measured = {
+                        ratio: actualRatio.value,
+                        direction: props.direction,
+                        first: { width: firstRect.width, height: firstRect.height },
+                        second: { width: secondRect.width, height: secondRect.height },
+                    };
+                    const events = pending;
+                    pending = [];
+                    for (const event of events) {
+                        const payload = { ...measured, source: event.source };
+                        switch (event.phase) {
+                            case 'resize-start':
+                                emit('resize-start', payload);
+                                break;
+                            case 'resize':
+                                emit('resize', payload);
+                                break;
+                            case 'resize-end':
+                                emit('resize-end', payload);
+                                break;
+                        }
+                    }
+                });
+            });
+        }
+        function measureContainer() {
+            const element = root.value;
+            if (!element)
+                return;
+            const nextWidth = element.clientWidth;
+            const nextHeight = element.clientHeight;
+            const nextGutter = separator.value
+                ? horizontal.value ? separator.value.offsetWidth : separator.value.offsetHeight
+                : 0;
+            if (width.value !== nextWidth || height.value !== nextHeight || gutter.value !== nextGutter) {
+                width.value = nextWidth;
+                height.value = nextHeight;
+                gutter.value = nextGutter;
+                queueResize('container');
+            }
+        }
+        function setRatio(value, source) {
+            const next = clampRatio(value, bounds.value.min, bounds.value.max);
+            if (next !== requestedRatio.value) {
+                requestedRatio.value = next;
+                emit('update:ratio', next);
+                queueResize(source);
+            }
+        }
+        function preventSelection(event) {
+            event.preventDefault();
+        }
+        function finishPointer() {
+            if (activePointer === undefined)
+                return;
+            const pointer = activePointer;
+            activePointer = undefined;
+            dragging.value = false;
+            dragDocument?.removeEventListener('pointermove', movePointer, true);
+            dragDocument?.removeEventListener('pointerup', endPointer, true);
+            dragDocument?.removeEventListener('pointercancel', endPointer, true);
+            dragDocument?.removeEventListener('selectstart', preventSelection, true);
+            dragDocument = undefined;
+            ownerWindow?.removeEventListener('blur', finishPointer);
+            if (separator.value?.hasPointerCapture(pointer))
+                separator.value.releasePointerCapture(pointer);
+            queueResize('pointer', 'resize-end');
+        }
+        function ratioAtPointer(event) {
+            if (!root.value)
+                return undefined;
+            const rect = root.value.getBoundingClientRect();
+            const size = horizontal.value ? rect.width : rect.height;
+            const layoutSize = horizontal.value ? width.value : height.value;
+            const visibleGutter = layoutSize > 0 ? gutter.value * size / layoutSize : 0;
+            const available = size - visibleGutter;
+            if (available <= 0)
+                return undefined;
+            const position = horizontal.value ? event.clientX - rect.left : event.clientY - rect.top;
+            return (position - visibleGutter / 2) / available;
+        }
+        function movePointer(event) {
+            if (event.pointerId !== activePointer)
+                return;
+            const ratio = ratioAtPointer(event);
+            if (ratio === undefined)
+                return;
+            event.preventDefault();
+            setRatio(ratio - dragOffset, 'pointer');
+        }
+        function endPointer(event) {
+            if (event.pointerId !== activePointer)
+                return;
+            if (event.type === 'pointerup')
+                movePointer(event);
+            finishPointer();
+        }
+        function beginPointer(event) {
+            if (disabled.value || activePointer !== undefined || event.button !== 0 || !root.value)
+                return;
+            event.preventDefault();
+            finishKeyboard();
+            measureContainer();
+            const ratio = ratioAtPointer(event);
+            if (ratio === undefined || disabled.value)
+                return;
+            dragOffset = ratio - actualRatio.value;
+            activePointer = event.pointerId;
+            dragging.value = true;
+            separator.value?.focus({ preventScroll: true });
+            separator.value?.setPointerCapture(event.pointerId);
+            dragDocument = root.value.ownerDocument;
+            dragDocument.addEventListener('pointermove', movePointer, { capture: true, passive: false });
+            dragDocument.addEventListener('pointerup', endPointer, true);
+            dragDocument.addEventListener('pointercancel', endPointer, true);
+            dragDocument.addEventListener('selectstart', preventSelection, true);
+            ownerWindow?.addEventListener('blur', finishPointer);
+            queueResize('pointer', 'resize-start');
+        }
+        function finishKeyboard() {
+            if (!keyboardActive)
+                return;
+            keyboardActive = false;
+            queueResize('keyboard', 'resize-end');
+        }
+        function resetRatio(source) {
+            if (disabled.value || activePointer !== undefined)
+                return;
+            finishKeyboard();
+            queueResize(source, 'resize-start');
+            setRatio(initialRatio, source);
+            queueResize(source, 'resize-end');
+        }
+        function keydown(event) {
+            if (disabled.value || activePointer !== undefined || event.altKey || event.ctrlKey || event.metaKey)
+                return;
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                if (!event.repeat)
+                    resetRatio('keyboard');
+                return;
+            }
+            const decrease = horizontal.value ? 'ArrowLeft' : 'ArrowUp';
+            const increase = horizontal.value ? 'ArrowRight' : 'ArrowDown';
+            if (![decrease, increase, 'Home', 'End'].includes(event.key))
+                return;
+            event.preventDefault();
+            if (!keyboardActive) {
+                keyboardActive = true;
+                queueResize('keyboard', 'resize-start');
+            }
+            const step = event.shiftKey ? 0.1 : 0.01;
+            const value = event.key === 'Home' ? bounds.value.min
+                : event.key === 'End' ? bounds.value.max
+                    : actualRatio.value + (event.key === increase ? step : -step);
+            setRatio(value, 'keyboard');
+        }
+        function keyup(event) {
+            if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key))
+                finishKeyboard();
+        }
+        watch(() => props.ratio, value => {
+            const next = clampRatio(value);
+            // A parent's v-model echo must not relabel a pointer/keyboard resize.
+            if (next === requestedRatio.value)
+                return;
+            requestedRatio.value = next;
+            queueResize('programmatic');
+        });
+        watch(disabled, value => {
+            if (value) {
+                finishPointer();
+                finishKeyboard();
+            }
+        });
+        watch(() => [props.direction, props.min, props.max, props.minRatio, props.maxRatio, props.secondVisible, props.preserveMinimum], () => {
+            finishPointer();
+            finishKeyboard();
+            queueResize('programmatic');
+        });
+        onMounted(() => {
+            mounted = true;
+            ownerWindow = root.value?.ownerDocument.defaultView ?? undefined;
+            measureContainer();
+            const Observer = typeof ResizeObserver === 'undefined' ? undefined : ResizeObserver;
+            if (Observer && root.value) {
+                observer = new Observer(measureContainer);
+                observer.observe(root.value);
+                if (separator.value)
+                    observer.observe(separator.value);
+            }
+            else {
+                ownerWindow?.addEventListener('resize', measureContainer);
+            }
+            queueResize('container');
+        });
+        onBeforeUnmount(() => {
+            disposed = true;
+            finishPointer();
+            finishKeyboard();
+            observer?.disconnect();
+            ownerWindow?.removeEventListener('resize', measureContainer);
+            if (frame !== undefined)
+                ownerWindow?.cancelAnimationFrame(frame);
+            pending = [];
+        });
+        return () => h('div', {
+            ref: root,
+            class: ['bh-resizable-panel', `bh-resizable-panel--${props.direction}`],
+            'data-resizing': dragging.value ? 'true' : undefined,
+            style: {
+                '--bh-panel-resizer-size': props.resizerSize,
+                '--bh-panel-gutter': gutterHidden.value ? '0px' : undefined,
+                minWidth: horizontal.value ? minimumAllocation.value : undefined,
+                minHeight: horizontal.value ? undefined : minimumAllocation.value,
+            },
+        }, [
+            h('div', {
+                ref: first,
+                id: firstId,
+                class: 'bh-resizable-panel__pane bh-resizable-panel__pane--first',
+                inert: props.secondVisible && actualRatio.value === 0,
+                'aria-hidden': props.secondVisible && actualRatio.value === 0 ? 'true' : undefined,
+                style: {
+                    flexBasis: props.secondVisible
+                        ? `calc((100% - var(--bh-panel-gutter)) * ${actualRatio.value})`
+                        : '100%',
+                },
+            }, slots.first?.()),
+            h('div', {
+                ref: separator,
+                class: 'bh-resizable-panel__separator nokey',
+                role: 'separator',
+                tabindex: disabled.value ? -1 : 0,
+                'aria-label': props.separatorLabel,
+                'aria-orientation': horizontal.value ? 'vertical' : 'horizontal',
+                'aria-controls': firstId,
+                'aria-valuemin': Math.round(bounds.value.min * 100),
+                'aria-valuemax': Math.round(bounds.value.max * 100),
+                'aria-valuenow': Math.round(actualRatio.value * 100),
+                'aria-disabled': disabled.value ? 'true' : undefined,
+                style: { display: gutterHidden.value ? 'none' : undefined },
+                onPointerdown: beginPointer,
+                onDblclick: (event) => {
+                    if (disabled.value)
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    resetRatio('pointer');
+                },
+                onLostpointercapture: finishPointer,
+                onKeydown: keydown,
+                onKeyup: keyup,
+                onBlur: finishKeyboard,
+            }, [
+                h('span', { class: 'bh-resizable-panel__line', 'aria-hidden': 'true' }),
+                h('span', { class: 'bh-resizable-panel__handle', 'aria-hidden': 'true' }),
+            ]),
+            h('div', {
+                ref: second,
+                id: secondId,
+                class: 'bh-resizable-panel__pane bh-resizable-panel__pane--second',
+                style: { display: props.secondVisible ? undefined : 'none' },
+                inert: !props.secondVisible || actualRatio.value === 1,
+                'aria-hidden': !props.secondVisible || actualRatio.value === 1 ? 'true' : undefined,
+            }, slots.second?.()),
+            dragging.value ? h('div', { class: 'bh-resizable-panel__drag-shield', 'aria-hidden': 'true' }) : null,
+        ]);
+    },
+});

package/dist/css.d.ts

@@ -0,0 +1,2 @@
+// CSS is imported for side effects only.
+export {};

package/dist/geometry.d.ts

@@ -0,0 +1,9 @@
+export interface PanelBounds {
+    min: number;
+    max: number;
+}
+export declare function clampRatio(value: number, min?: number, max?: number): number;
+/** Pixel constraints apply to pane space after reserving the divider gutter.
+ * Minima yield symmetrically in undersized hosts; explicit maximums win conflicts.
+ */
+export declare function panelBounds(size: number, gutter: number, min: number, max: number, minRatio: number, maxRatio: number): PanelBounds;

package/dist/geometry.js

@@ -0,0 +1,18 @@
+export function clampRatio(value, min = 0, max = 1) {
+    return Math.min(max, Math.max(min, Number.isFinite(value) ? value : 0.5));
+}
+/** Pixel constraints apply to pane space after reserving the divider gutter.
+ * Minima yield symmetrically in undersized hosts; explicit maximums win conflicts.
+ */
+export function panelBounds(size, gutter, min, max, minRatio, maxRatio) {
+    const available = Math.max(0, size - gutter);
+    const ratioMax = clampRatio(maxRatio);
+    const ratioMin = Math.min(ratioMax, clampRatio(minRatio));
+    if (available <= 0)
+        return { min: ratioMin, max: ratioMax };
+    const minimum = Math.min(Math.max(0, Number.isFinite(min) ? min : 100), available / 2) / available;
+    const maximum = Number.isFinite(max) ? Math.max(0, max) / available : 1;
+    const upper = Math.min(ratioMax, maximum, 1);
+    const lower = Math.min(upper, Math.max(ratioMin, minimum));
+    return { min: lower, max: Math.max(lower, Math.min(upper, 1 - minimum)) };
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { ResizablePanel } from './ResizablePanel.js';
+export type { ResizablePanelDirection, ResizablePanelResizeEvent } from './ResizablePanel.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { ResizablePanel } from './ResizablePanel.js';

package/dist/styles.css

@@ -0,0 +1,272 @@
+@import '@beehexa/design-tokens/css';
+
+.bh-resizable-panel {
+  --bh-panel-hit-target: var(--bh-resize-target);
+  --bh-panel-gutter: min(100%, var(--bh-panel-hit-target));
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  max-width: 100%;
+  max-height: 100%;
+  gap: 0;
+  overflow: visible;
+}
+
+.bh-resizable-panel--vertical {
+  flex-direction: column;
+}
+
+.bh-resizable-panel__pane {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.bh-resizable-panel__pane--first {
+  flex: 0 0 auto;
+}
+
+.bh-resizable-panel__pane--second {
+  flex: 1 1 0%;
+}
+
+.bh-resizable-panel__separator {
+  position: relative;
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 0;
+  z-index: 1;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  outline: none;
+  overflow: visible;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+  color: var(--bh-resize-grip);
+}
+
+.bh-resizable-panel--horizontal > .bh-resizable-panel__separator {
+  width: var(--bh-panel-gutter);
+  cursor: col-resize;
+}
+
+.bh-resizable-panel--vertical > .bh-resizable-panel__separator {
+  height: var(--bh-panel-gutter);
+  cursor: row-resize;
+}
+
+.bh-resizable-panel__separator[aria-disabled='true'] {
+  cursor: default;
+}
+
+.bh-resizable-panel__line,
+.bh-resizable-panel__handle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  box-sizing: border-box;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.bh-resizable-panel__line {
+  background: var(--bh-resize-color);
+}
+
+.bh-resizable-panel--horizontal > .bh-resizable-panel__separator > .bh-resizable-panel__line {
+  width: var(--bh-resize-divider);
+  height: clamp(0px, var(--bh-panel-resizer-size, 90%), 100%);
+}
+
+.bh-resizable-panel--vertical > .bh-resizable-panel__separator > .bh-resizable-panel__line {
+  width: clamp(0px, var(--bh-panel-resizer-size, 90%), 100%);
+  height: var(--bh-resize-divider);
+}
+
+.bh-resizable-panel__handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--bh-resize-handle-width);
+  height: var(--bh-resize-handle-height);
+  border: var(--bh-border-width-default) solid var(--bh-resize-color);
+  border-radius: var(--bh-resize-handle-radius);
+  background: var(--bh-resize-handle-background);
+}
+
+.bh-resizable-panel__handle::after {
+  content: '';
+  width: var(--bh-resize-dot-size);
+  height: var(--bh-resize-dot-size);
+  border-radius: var(--bh-radius-full);
+  background: currentColor;
+  box-shadow:
+    0 calc(-1 * var(--bh-resize-dot-pitch)) 0 currentColor,
+    0 var(--bh-resize-dot-pitch) 0 currentColor;
+}
+
+.bh-resizable-panel--vertical > .bh-resizable-panel__separator > .bh-resizable-panel__handle {
+  width: var(--bh-resize-handle-height);
+  height: var(--bh-resize-handle-width);
+}
+
+.bh-resizable-panel--vertical > .bh-resizable-panel__separator > .bh-resizable-panel__handle::after {
+  transform: rotate(90deg);
+}
+
+.bh-resizable-panel__separator:not([aria-disabled='true']):is(:hover, :focus-visible) > .bh-resizable-panel__line,
+.bh-resizable-panel[data-resizing='true'] > .bh-resizable-panel__separator > .bh-resizable-panel__line {
+  background: var(--bh-resize-active);
+}
+
+.bh-resizable-panel__separator:not([aria-disabled='true']):is(:hover, :focus-visible) > .bh-resizable-panel__handle,
+.bh-resizable-panel[data-resizing='true'] > .bh-resizable-panel__separator > .bh-resizable-panel__handle {
+  color: var(--bh-resize-activeGrip);
+  background: var(--bh-resize-handle-activeBackground);
+  border-color: var(--bh-resize-active);
+}
+
+.bh-resizable-panel__separator:focus-visible > .bh-resizable-panel__handle {
+  outline: var(--bh-border-width-focused) solid var(--bh-resize-active);
+  outline-offset: var(--bh-border-width-focused);
+}
+
+/* The physical gutter keeps the complete handle off pane content. At rest neither
+   root nor panes create stacking contexts: a nested fixed overlay must participate
+   in its actual overlay owner's stack, above this panel's local separator.
+   Only an active pointer gesture isolates panes beneath its local iframe shield. */
+.bh-resizable-panel[data-resizing='true'] {
+  isolation: isolate;
+}
+
+.bh-resizable-panel[data-resizing='true'] > .bh-resizable-panel__pane {
+  z-index: 0;
+}
+
+/* Pointer capture and document listeners retain the gesture outside the host;
+   no permanent pane stack, global cursor, body style or high-z overlay. */
+.bh-resizable-panel__drag-shield {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.bh-resizable-panel--horizontal > .bh-resizable-panel__drag-shield {
+  cursor: col-resize;
+}
+
+.bh-resizable-panel--vertical > .bh-resizable-panel__drag-shield {
+  cursor: row-resize;
+}
+
+@media (pointer: coarse) {
+  .bh-resizable-panel {
+    --bh-panel-hit-target: var(--bh-resize-touchTarget);
+  }
+}
+
+/* Resize geometry never animates, including when reduced motion is requested. */
+@media (prefers-reduced-motion: reduce) {
+  .bh-resizable-panel > .bh-resizable-panel__pane,
+  .bh-resizable-panel > .bh-resizable-panel__separator {
+    transition: none;
+    animation: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .bh-resizable-panel__line {
+    background: CanvasText;
+  }
+
+  .bh-resizable-panel__handle {
+    color: CanvasText;
+    background: Canvas;
+    border-color: CanvasText;
+  }
+
+  .bh-resizable-panel__separator:focus-visible > .bh-resizable-panel__handle {
+    outline-color: Highlight;
+  }
+}
+
+/* Opt in on existing interactive renderer hosts, not on panes or static content.
+   The outer allocation can shrink; only its readable surface retains a minimum. */
+.bh-renderer-frame,
+.bh-renderer-viewport {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+}
+
+/* A usable outer interaction strip, not the readable SDK surface minimum.
+   Reserve a native toolbar row, one interaction row and their source gap when
+   surrounding page chrome would otherwise reduce the allocation to zero. */
+:root {
+  --bh-renderer-access-minimum-block-size: calc(var(--bh-size-control-default) * 2 + var(--bh-space-100));
+}
+
+.bh-renderer-access {
+  min-block-size: var(--bh-renderer-access-minimum-block-size);
+}
+
+@media (pointer: coarse) {
+  :root {
+    --bh-renderer-access-minimum-block-size: calc(var(--bh-size-target-touch) * 2 + var(--bh-space-100));
+  }
+}
+
+.bh-renderer-viewport__surface {
+  display: flex;
+  flex-direction: column;
+  /* A definite readable flex basis also resolves SDK percentage-height children
+     in Firefox. It still grows with the allocation, never caps the renderer. */
+  flex: 1 0 var(--bh-layout-renderer-minimum-block-size);
+  box-sizing: border-box;
+  min-inline-size: var(--bh-layout-renderer-minimum-inline-size);
+  min-block-size: var(--bh-layout-renderer-minimum-block-size);
+}
+
+/* Chrome remains outside the actual viewport. Below its readable minimum,
+   the existing frame owns the one access scroller across chrome and surface. */
+.bh-renderer-frame > .bh-renderer-viewport {
+  flex: 1 0 auto;
+  block-size: auto;
+  overflow: visible;
+}
+
+/* A retained renderer inside an already scrolling document delegates access to
+   that document; it must not create another clipped, independently scrolling box. */
+.bh-renderer-frame.bh-renderer-frame--document:not(:fullscreen):not([data-bh-overlay-owner]) {
+  flex: 1 0 auto;
+  block-size: auto;
+  overflow: visible;
+}
+
+.bh-renderer-frame > .bh-renderer-viewport > .bh-renderer-viewport__surface,
+.bh-renderer-frame > .bh-renderer-viewport__surface {
+  contain: size;
+}

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "@beehexa/vue-components",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "2611.5.1",
+  "description": "Accessible, source-token-backed Vue components independent of a UI framework",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/beehexacorp/beehexa.design.git",
+    "directory": "packages/vue-components"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./css": {
+      "types": "./dist/css.d.ts",
+      "default": "./dist/styles.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@beehexa/design-tokens": "2611.5.1"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-runtime-packages.mjs vue-components",
+    "check": "node ../../scripts/build-runtime-packages.mjs vue-components --check",
+    "prepack": "npm run build"
+  },
+  "engines": {
+    "node": ">=22.22.0"
+  }
+}