@dbcdk/react-components 0.0.103 → 0.0.105

package/dist/components/split-pane/SplitPane.cjs

@@ -0,0 +1,188 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var SplitPaneContext = require('./provider/SplitPaneContext');
+var styles = require('./SplitPane.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function SplitPane({
+  children,
+  initialPrimarySize = 300,
+  minPrimarySize = 160,
+  minSecondarySize = 160,
+  direction = "horizontal",
+  showDivider = "hover",
+  gutterSize = 16,
+  storageKey,
+  fillViewport = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SplitPaneContext.SplitPaneProvider,
+    {
+      direction,
+      initialPrimarySize,
+      minPrimarySize,
+      minSecondarySize,
+      storageKey,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SplitPaneContainer,
+        {
+          showDivider,
+          gutterSize,
+          fillViewport,
+          children
+        }
+      )
+    }
+  );
+}
+function SplitPaneContainer({
+  children,
+  showDivider,
+  gutterSize,
+  fillViewport
+}) {
+  const { direction, primarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
+  const style = react.useMemo(
+    () => ({
+      "--split-pane-primary-size": `${primarySize}px`,
+      "--split-pane-gutter": `${gutterSize}px`
+    }),
+    [primarySize, gutterSize]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: styles__default.default.container,
+      "data-direction": direction,
+      "data-divider": showDivider,
+      "data-fill-viewport": fillViewport,
+      style,
+      children
+    }
+  );
+}
+function SplitPanePrimary({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.primary, children });
+}
+function SplitPaneSecondary({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.secondary, children });
+}
+function SplitPaneGutter() {
+  const {
+    direction,
+    primarySize,
+    setPrimarySize,
+    minPrimarySize,
+    minSecondarySize,
+    containerRef,
+    resetDefault
+  } = SplitPaneContext.useSplitPaneContext();
+  const draggingRef = react.useRef(false);
+  const pointerIdRef = react.useRef(null);
+  const startPosRef = react.useRef(0);
+  const startSizeRef = react.useRef(primarySize);
+  const maxPrimaryRef = react.useRef(Infinity);
+  const getClientPos = react.useCallback(
+    (e) => direction === "horizontal" ? e.clientX : e.clientY,
+    [direction]
+  );
+  const computeClamp = react.useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return { maxPrimary: Infinity, total: 0 };
+    const rect = el.getBoundingClientRect();
+    const total = direction === "horizontal" ? rect.width : rect.height;
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    return { maxPrimary: maxPrimary2, total };
+  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  const onPointerDown = react.useCallback(
+    (e) => {
+      const el = containerRef.current;
+      if (!el) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const { maxPrimary: maxPrimary2 } = computeClamp();
+      maxPrimaryRef.current = maxPrimary2;
+      draggingRef.current = true;
+      pointerIdRef.current = e.pointerId;
+      startPosRef.current = getClientPos(e);
+      startSizeRef.current = primarySize;
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
+    },
+    [computeClamp, containerRef, direction, getClientPos, primarySize]
+  );
+  const onPointerMove = react.useCallback(
+    (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
+      const delta = getClientPos(e) - startPosRef.current;
+      const next = startSizeRef.current + delta;
+      const maxPrimary2 = maxPrimaryRef.current;
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary2));
+    },
+    [getClientPos, minPrimarySize, setPrimarySize]
+  );
+  const endDrag = react.useCallback(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    pointerIdRef.current = null;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const onPointerUp = react.useCallback(() => endDrag(), [endDrag]);
+  const onPointerCancel = react.useCallback(() => endDrag(), [endDrag]);
+  const onKeyDown = react.useCallback(
+    (e) => {
+      const { maxPrimary: maxPrimary2 } = computeClamp();
+      const step = e.shiftKey ? 32 : 8;
+      let next = null;
+      if (direction === "horizontal") {
+        if (e.key === "ArrowLeft") next = primarySize - step;
+        if (e.key === "ArrowRight") next = primarySize + step;
+      } else {
+        if (e.key === "ArrowUp") next = primarySize - step;
+        if (e.key === "ArrowDown") next = primarySize + step;
+      }
+      if (e.key === "Home") next = minPrimarySize;
+      if (e.key === "End") next = maxPrimary2;
+      if (next === null) return;
+      e.preventDefault();
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary2));
+    },
+    [computeClamp, direction, minPrimarySize, primarySize, setPrimarySize]
+  );
+  const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
+  const { maxPrimary } = computeClamp();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.gutter, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: styles__default.default.resizer,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      "aria-valuemin": Math.round(minPrimarySize),
+      "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,
+      "aria-valuenow": Math.round(primarySize),
+      tabIndex: 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      onDoubleClick: resetDefault,
+      onKeyDown
+    }
+  ) });
+}
+
+exports.SplitPane = SplitPane;
+exports.SplitPaneGutter = SplitPaneGutter;
+exports.SplitPanePrimary = SplitPanePrimary;
+exports.SplitPaneSecondary = SplitPaneSecondary;

package/dist/components/split-pane/SplitPane.d.ts

@@ -9,8 +9,9 @@ export interface SplitPaneProps {
     showDivider?: 'hover' | 'always' | 'never';
     gutterSize?: number;
     storageKey?: string;
+    fillViewport?: boolean;
 }
-export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): JSX.Element;
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, fillViewport, }: SplitPaneProps): JSX.Element;
 export declare function SplitPanePrimary({ children }: {
     children: ReactNode;
 }): JSX.Element;

package/dist/components/split-pane/SplitPane.js

@@ -0,0 +1,179 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useRef, useCallback } from 'react';
+import { SplitPaneProvider, useSplitPaneContext } from './provider/SplitPaneContext';
+import styles from './SplitPane.module.css';
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function SplitPane({
+  children,
+  initialPrimarySize = 300,
+  minPrimarySize = 160,
+  minSecondarySize = 160,
+  direction = "horizontal",
+  showDivider = "hover",
+  gutterSize = 16,
+  storageKey,
+  fillViewport = false
+}) {
+  return /* @__PURE__ */ jsx(
+    SplitPaneProvider,
+    {
+      direction,
+      initialPrimarySize,
+      minPrimarySize,
+      minSecondarySize,
+      storageKey,
+      children: /* @__PURE__ */ jsx(
+        SplitPaneContainer,
+        {
+          showDivider,
+          gutterSize,
+          fillViewport,
+          children
+        }
+      )
+    }
+  );
+}
+function SplitPaneContainer({
+  children,
+  showDivider,
+  gutterSize,
+  fillViewport
+}) {
+  const { direction, primarySize, containerRef } = useSplitPaneContext();
+  const style = useMemo(
+    () => ({
+      "--split-pane-primary-size": `${primarySize}px`,
+      "--split-pane-gutter": `${gutterSize}px`
+    }),
+    [primarySize, gutterSize]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: styles.container,
+      "data-direction": direction,
+      "data-divider": showDivider,
+      "data-fill-viewport": fillViewport,
+      style,
+      children
+    }
+  );
+}
+function SplitPanePrimary({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: styles.primary, children });
+}
+function SplitPaneSecondary({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: styles.secondary, children });
+}
+function SplitPaneGutter() {
+  const {
+    direction,
+    primarySize,
+    setPrimarySize,
+    minPrimarySize,
+    minSecondarySize,
+    containerRef,
+    resetDefault
+  } = useSplitPaneContext();
+  const draggingRef = useRef(false);
+  const pointerIdRef = useRef(null);
+  const startPosRef = useRef(0);
+  const startSizeRef = useRef(primarySize);
+  const maxPrimaryRef = useRef(Infinity);
+  const getClientPos = useCallback(
+    (e) => direction === "horizontal" ? e.clientX : e.clientY,
+    [direction]
+  );
+  const computeClamp = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return { maxPrimary: Infinity, total: 0 };
+    const rect = el.getBoundingClientRect();
+    const total = direction === "horizontal" ? rect.width : rect.height;
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    return { maxPrimary: maxPrimary2, total };
+  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  const onPointerDown = useCallback(
+    (e) => {
+      const el = containerRef.current;
+      if (!el) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const { maxPrimary: maxPrimary2 } = computeClamp();
+      maxPrimaryRef.current = maxPrimary2;
+      draggingRef.current = true;
+      pointerIdRef.current = e.pointerId;
+      startPosRef.current = getClientPos(e);
+      startSizeRef.current = primarySize;
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
+    },
+    [computeClamp, containerRef, direction, getClientPos, primarySize]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
+      const delta = getClientPos(e) - startPosRef.current;
+      const next = startSizeRef.current + delta;
+      const maxPrimary2 = maxPrimaryRef.current;
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary2));
+    },
+    [getClientPos, minPrimarySize, setPrimarySize]
+  );
+  const endDrag = useCallback(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    pointerIdRef.current = null;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const onPointerUp = useCallback(() => endDrag(), [endDrag]);
+  const onPointerCancel = useCallback(() => endDrag(), [endDrag]);
+  const onKeyDown = useCallback(
+    (e) => {
+      const { maxPrimary: maxPrimary2 } = computeClamp();
+      const step = e.shiftKey ? 32 : 8;
+      let next = null;
+      if (direction === "horizontal") {
+        if (e.key === "ArrowLeft") next = primarySize - step;
+        if (e.key === "ArrowRight") next = primarySize + step;
+      } else {
+        if (e.key === "ArrowUp") next = primarySize - step;
+        if (e.key === "ArrowDown") next = primarySize + step;
+      }
+      if (e.key === "Home") next = minPrimarySize;
+      if (e.key === "End") next = maxPrimary2;
+      if (next === null) return;
+      e.preventDefault();
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary2));
+    },
+    [computeClamp, direction, minPrimarySize, primarySize, setPrimarySize]
+  );
+  const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
+  const { maxPrimary } = computeClamp();
+  return /* @__PURE__ */ jsx("div", { className: styles.gutter, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles.resizer,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      "aria-valuemin": Math.round(minPrimarySize),
+      "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,
+      "aria-valuenow": Math.round(primarySize),
+      tabIndex: 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      onDoubleClick: resetDefault,
+      onKeyDown
+    }
+  ) });
+}
+
+export { SplitPane, SplitPaneGutter, SplitPanePrimary, SplitPaneSecondary };

package/dist/components/split-pane/SplitPane.module.css

@@ -0,0 +1,118 @@
+.container {
+  display: flex;
+  inline-size: 100%;
+  overflow: hidden;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.container[data-fill-viewport='true'] {
+  block-size: 100%;
+  max-block-size: 100%;
+  height: 100%;
+  max-height: 100%;
+}
+
+.container[data-direction='horizontal'] {
+  flex-direction: row;
+}
+
+.container[data-direction='vertical'] {
+  flex-direction: column;
+}
+
+/* ===== Primary pane ===== */
+.primary {
+  flex: 0 0 var(--split-pane-primary-size, 300px);
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== Secondary pane ===== */
+.secondary {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== Gutter (spacing + hit area wrapper) ===== */
+.gutter {
+  position: relative;
+  flex: 0 0 var(--split-pane-gutter, 8px);
+  background: transparent;
+  z-index: 1;
+}
+
+.container[data-direction='vertical'] .gutter {
+  inline-size: 100%;
+  block-size: var(--split-pane-gutter, 8px);
+}
+
+/* ===== Resizer (interaction element) ===== */
+.resizer {
+  position: absolute;
+  inset: 0;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  outline: none;
+}
+
+.container[data-direction='vertical'] .resizer {
+  cursor: row-resize;
+}
+
+/* Focus ring for keyboard resizing */
+.resizer:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
+/* ===== Divider line ===== */
+.resizer::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline: 50%;
+  inline-size: var(--border-width-thin);
+  background-color: var(--color-border-subtle);
+  opacity: 0;
+  transform: translateX(-50%);
+  transition:
+    opacity var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+/* Vertical divider */
+.container[data-direction='vertical'] .resizer::after {
+  inset-inline: 0;
+  inset-block: 50%;
+  inline-size: 100%;
+  block-size: var(--border-width-thin);
+  transform: translateY(-50%);
+}
+
+/* ===== Divider visibility modes ===== */
+.container[data-divider='hover'] .resizer:hover::after,
+.container[data-divider='hover'] .resizer:active::after {
+  opacity: 1;
+  background-color: var(--color-border-strong);
+}
+
+.container[data-divider='always'] .resizer::after {
+  opacity: 1;
+}
+
+.container[data-divider='never'] .resizer::after {
+  display: none;
+}
+
+.container[data-divider='hover'] .resizer:active::after,
+.container[data-divider='always'] .resizer:active::after {
+  background-color: var(--color-brand);
+}

package/dist/components/split-pane/provider/SplitPaneContext.cjs

@@ -0,0 +1,129 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const SplitPaneContext = React__default.default.createContext(null);
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function readStoredSize(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    const num = Number(raw);
+    return Number.isFinite(num) ? num : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredSize(key, value) {
+  try {
+    localStorage.setItem(key, String(Math.round(value)));
+  } catch {
+  }
+}
+function removeStoredSize(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch {
+  }
+}
+function useSplitPaneContext() {
+  const ctx = React__default.default.useContext(SplitPaneContext);
+  if (!ctx) throw new Error("SplitPane components must be used within <SplitPane />");
+  return ctx;
+}
+function SplitPaneProvider({
+  children,
+  direction,
+  initialPrimarySize,
+  minPrimarySize,
+  minSecondarySize,
+  storageKey
+}) {
+  const containerRef = React.useRef(null);
+  const [primarySize, setPrimarySize] = React.useState(initialPrimarySize);
+  const [manualPrimarySize, setManualPrimarySize] = React.useState(null);
+  const getMaxPrimary = React.useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return null;
+    const rect = el.getBoundingClientRect();
+    const total = direction === "horizontal" ? rect.width : rect.height;
+    if (!Number.isFinite(total) || total <= 0) return null;
+    return Math.max(minPrimarySize, total - minSecondarySize);
+  }, [direction, minPrimarySize, minSecondarySize]);
+  React.useEffect(() => {
+    if (!storageKey) return;
+    const stored = readStoredSize(storageKey);
+    if (stored === null) return;
+    setManualPrimarySize(stored);
+    setPrimarySize(stored);
+  }, [storageKey]);
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const clampToContainer = () => {
+      const maxPrimary = getMaxPrimary();
+      if (maxPrimary === null) return;
+      const targetSize = manualPrimarySize != null ? manualPrimarySize : initialPrimarySize;
+      setPrimarySize(clamp(targetSize, minPrimarySize, maxPrimary));
+    };
+    clampToContainer();
+    const ro = new ResizeObserver(clampToContainer);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [getMaxPrimary, initialPrimarySize, manualPrimarySize]);
+  React.useEffect(() => {
+    if (!storageKey) return;
+    if (manualPrimarySize === null) {
+      removeStoredSize(storageKey);
+      return;
+    }
+    writeStoredSize(storageKey, manualPrimarySize);
+  }, [manualPrimarySize, storageKey]);
+  const handleSizeChange = React.useCallback((newSize) => {
+    setManualPrimarySize(newSize);
+    setPrimarySize(newSize);
+  }, []);
+  const resetDefault = React.useCallback(() => {
+    setManualPrimarySize(null);
+    const maxPrimary = getMaxPrimary();
+    if (maxPrimary === null) {
+      setPrimarySize(initialPrimarySize);
+      return;
+    }
+    setPrimarySize(clamp(initialPrimarySize, minPrimarySize, maxPrimary));
+  }, [getMaxPrimary, initialPrimarySize, minPrimarySize]);
+  const value = React.useMemo(
+    () => ({
+      direction,
+      primarySize,
+      setPrimarySize: handleSizeChange,
+      resetDefault,
+      minPrimarySize,
+      minSecondarySize,
+      containerRef,
+      storageKey
+    }),
+    [
+      direction,
+      primarySize,
+      handleSizeChange,
+      resetDefault,
+      minPrimarySize,
+      minSecondarySize,
+      storageKey
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SplitPaneContext.Provider, { value, children });
+}
+
+exports.SplitPaneContext = SplitPaneContext;
+exports.SplitPaneProvider = SplitPaneProvider;
+exports.useSplitPaneContext = useSplitPaneContext;