@octanejs/resizable-panels 0.0.1

package/src/vendor/stacking-order.ts

@@ -0,0 +1,133 @@
+// Forked from NPM stacking-order@2.0.0
+// - github.com/Rich-Harris/stacking-order/issues/3
+// - github.com/Rich-Harris/stacking-order/issues/6
+
+import { assert } from '../utils/assert';
+import { isShadowRoot } from '../utils/isShadowRoot';
+
+/**
+ * Determine which of two nodes appears in front of the other —
+ * if `a` is in front, returns 1, otherwise returns -1
+ * @param {HTMLElement | SVGElement} a
+ * @param {HTMLElement | SVGElement} b
+ */
+export function compare(a: HTMLElement | SVGElement, b: HTMLElement | SVGElement): number {
+	if (a === b) throw new Error('Cannot compare node with itself');
+
+	const ancestors = {
+		a: get_ancestors(a),
+		b: get_ancestors(b),
+	};
+
+	let common_ancestor;
+
+	// remove shared ancestors
+	while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+		common_ancestor = ancestors.a.pop() as HTMLElement;
+		ancestors.b.pop();
+	}
+
+	assert(
+		common_ancestor,
+		'Stacking order can only be calculated for elements with a common ancestor',
+	);
+
+	const z_indexes = {
+		a: get_z_index(find_stacking_context(ancestors.a)),
+		b: get_z_index(find_stacking_context(ancestors.b)),
+	};
+
+	if (z_indexes.a === z_indexes.b) {
+		const children = common_ancestor.childNodes;
+
+		const furthest_ancestors = {
+			a: ancestors.a.at(-1),
+			b: ancestors.b.at(-1),
+		};
+
+		let i = children.length;
+		while (i--) {
+			const child = children[i];
+			if (child === furthest_ancestors.a) return 1;
+			if (child === furthest_ancestors.b) return -1;
+		}
+	}
+
+	return Math.sign(z_indexes.a - z_indexes.b);
+}
+
+const props =
+	/\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/;
+
+/** @param {HTMLElement | SVGElement} node */
+function is_flex_item(node: HTMLElement | SVGElement) {
+	// @ts-expect-error ParentNode vs Element
+	const display = getComputedStyle(get_parent(node) ?? node).display;
+	return display === 'flex' || display === 'inline-flex';
+}
+
+/** @param {HTMLElement | SVGElement} node */
+function creates_stacking_context(node: HTMLElement | SVGElement) {
+	const style = getComputedStyle(node);
+
+	// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+	if (style.position === 'fixed') return true;
+	// Forked to fix upstream bug https://github.com/Rich-Harris/stacking-order/issues/3
+	// if (
+	//   (style.zIndex !== "auto" && style.position !== "static") ||
+	//   is_flex_item(node)
+	// )
+	if (style.zIndex !== 'auto' && (style.position !== 'static' || is_flex_item(node))) return true;
+	if (+style.opacity < 1) return true;
+	if ('transform' in style && style.transform !== 'none') return true;
+	if ('webkitTransform' in style && style.webkitTransform !== 'none') return true;
+	if ('mixBlendMode' in style && style.mixBlendMode !== 'normal') return true;
+	if ('filter' in style && style.filter !== 'none') return true;
+	if ('webkitFilter' in style && style.webkitFilter !== 'none') return true;
+	if ('isolation' in style && style.isolation === 'isolate') return true;
+	if (props.test(style.willChange)) return true;
+	// @ts-expect-error Unrecognized prop
+	if (style.webkitOverflowScrolling === 'touch') return true;
+
+	return false;
+}
+
+/** @param {(HTMLElement| SVGElement)[]} nodes */
+function find_stacking_context(nodes: (HTMLElement | SVGElement)[]) {
+	let i = nodes.length;
+
+	while (i--) {
+		const node = nodes[i];
+		assert(node, 'Missing node');
+		if (creates_stacking_context(node)) return node;
+	}
+
+	return null;
+}
+
+/** @param {HTMLElement | SVGElement} node */
+function get_z_index(node: HTMLElement | SVGElement | null) {
+	return (node && Number(getComputedStyle(node).zIndex)) || 0;
+}
+
+/** @param {HTMLElement} node */
+function get_ancestors(node: HTMLElement | SVGElement | null) {
+	const ancestors = [];
+
+	while (node) {
+		ancestors.push(node);
+		// @ts-expect-error ParentNode vs Element
+		node = get_parent(node);
+	}
+
+	return ancestors; // [ node, ... <body>, <html>, document ]
+}
+
+/** @param {HTMLElement} node */
+function get_parent(node: HTMLElement) {
+	const { parentNode } = node;
+	if (isShadowRoot(parentNode)) {
+		return parentNode.host;
+	}
+	return parentNode;
+}

package/status.json

@@ -0,0 +1,11 @@
+{
+  "upstream": { "package": "react-resizable-panels", "version": "4.12.2" },
+  "surface": "Group, Panel, Separator, persistence hooks, refs, imperative APIs, layout constraints, pointer and keyboard interaction, ARIA, cursor handling, and ResizeObserver behavior are implemented against react-resizable-panels 4.12.2.",
+  "divergences": [
+    "useId(undefined) fallback cannot reproduce React's mocked ':r123:' seam; adapted upstream case asserts a non-empty Octane id and is recorded as react-resizable-panels-useId-fallback."
+  ],
+  "ssr": "Deterministic server rendering and live hydration adoption are covered by dedicated executable projects.",
+  "verified": "2026-08-02",
+  "parityEvidence": "packages/resizable-panels/audit/react-parity.json",
+  "docs": ["docs/plans/2026-08-02-004-feat-react-resizable-panels-binding-plan.md"]
+}