@dbcdk/react-components 0.0.3 → 0.0.5

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

@@ -0,0 +1,123 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./SplitPane.module.css');
+var SplitPaneContext = require('./provider/SplitPaneContext');
+
+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 = 8,
+  storageKey
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SplitPaneContext.SplitPaneProvider,
+    {
+      direction,
+      initialPrimarySize,
+      minPrimarySize,
+      minSecondarySize,
+      storageKey,
+      children: /* @__PURE__ */ jsxRuntime.jsx(SplitPaneContainer, { showDivider, gutterSize, children })
+    }
+  );
+}
+function SplitPaneContainer({
+  children,
+  showDivider,
+  gutterSize
+}) {
+  const { direction, primarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: styles__default.default.container,
+      "data-direction": direction,
+      "data-divider": showDivider,
+      style: {
+        "--split-pane-primary-size": `${primarySize}px`,
+        "--split-pane-gutter": `${gutterSize}px`
+      },
+      children
+    }
+  );
+}
+function SplitPanePrimary({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.primary, children });
+}
+function SplitPaneGutter() {
+  const { direction, primarySize, setPrimarySize, minPrimarySize, minSecondarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
+  const isDraggingRef = react.useRef(false);
+  const startPosRef = react.useRef(0);
+  const startSizeRef = react.useRef(primarySize);
+  react.useEffect(() => {
+    if (!window) {
+      return;
+    }
+    const onMove = (e) => {
+      if (!isDraggingRef.current) return;
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const total = direction === "horizontal" ? rect.width : rect.height;
+      const clientPos = direction === "horizontal" ? e.clientX : e.clientY;
+      const delta = clientPos - startPosRef.current;
+      const next = startSizeRef.current + delta;
+      const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary));
+    };
+    const onUp = () => {
+      if (!isDraggingRef.current) return;
+      isDraggingRef.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      if (window) {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      }
+    };
+  }, [containerRef, direction, minPrimarySize, minSecondarySize, setPrimarySize]);
+  const handleMouseDown = (event) => {
+    isDraggingRef.current = true;
+    startPosRef.current = direction === "horizontal" ? event.clientX : event.clientY;
+    startSizeRef.current = primarySize;
+    document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.gutter, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: styles__default.default.resizer,
+      onMouseDown: handleMouseDown,
+      role: "separator",
+      "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+      "aria-valuenow": Math.round(primarySize),
+      tabIndex: 0
+    }
+  ) });
+}
+function SplitPaneSecondary({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.secondary, children });
+}
+
+exports.SplitPane = SplitPane;
+exports.SplitPaneGutter = SplitPaneGutter;
+exports.SplitPanePrimary = SplitPanePrimary;
+exports.SplitPaneSecondary = SplitPaneSecondary;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { SplitDirection } from './provider/SplitPaneContext';
+interface SplitPaneProps {
+    children: React.ReactNode;
+    initialPrimarySize?: number;
+    minPrimarySize?: number;
+    minSecondarySize?: number;
+    direction?: SplitDirection;
+    showDivider?: 'hover' | 'always' | 'never';
+    /**
+     * Gutter size (px). This is the space between panes and contains the resizer hit area.
+     * Example: 8 => 4px breathing room on each side if the divider line is centered.
+     */
+    gutterSize?: number;
+    /**
+     * If provided, primary size is persisted per key in localStorage.
+     * Only SplitPanes sharing the same key will share size.
+     */
+    storageKey?: string;
+}
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): React.ReactNode;
+/**
+ * IMPORTANT:
+ * This component now renders ONLY the primary content (scrollable).
+ * The resizer lives in a dedicated <SplitPaneGutter /> so it never overlaps scrollbars.
+ */
+export declare function SplitPanePrimary({ children }: {
+    children: React.ReactNode;
+}): React.ReactNode;
+export declare function SplitPaneGutter(): React.ReactNode;
+export declare function SplitPaneSecondary({ children }: {
+    children: React.ReactNode;
+}): React.ReactNode;
+export {};

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

@@ -0,0 +1,114 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+import styles from './SplitPane.module.css';
+import { SplitPaneProvider, useSplitPaneContext } from './provider/SplitPaneContext';
+
+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 = 8,
+  storageKey
+}) {
+  return /* @__PURE__ */ jsx(
+    SplitPaneProvider,
+    {
+      direction,
+      initialPrimarySize,
+      minPrimarySize,
+      minSecondarySize,
+      storageKey,
+      children: /* @__PURE__ */ jsx(SplitPaneContainer, { showDivider, gutterSize, children })
+    }
+  );
+}
+function SplitPaneContainer({
+  children,
+  showDivider,
+  gutterSize
+}) {
+  const { direction, primarySize, containerRef } = useSplitPaneContext();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: styles.container,
+      "data-direction": direction,
+      "data-divider": showDivider,
+      style: {
+        "--split-pane-primary-size": `${primarySize}px`,
+        "--split-pane-gutter": `${gutterSize}px`
+      },
+      children
+    }
+  );
+}
+function SplitPanePrimary({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: styles.primary, children });
+}
+function SplitPaneGutter() {
+  const { direction, primarySize, setPrimarySize, minPrimarySize, minSecondarySize, containerRef } = useSplitPaneContext();
+  const isDraggingRef = useRef(false);
+  const startPosRef = useRef(0);
+  const startSizeRef = useRef(primarySize);
+  useEffect(() => {
+    if (!window) {
+      return;
+    }
+    const onMove = (e) => {
+      if (!isDraggingRef.current) return;
+      const el = containerRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const total = direction === "horizontal" ? rect.width : rect.height;
+      const clientPos = direction === "horizontal" ? e.clientX : e.clientY;
+      const delta = clientPos - startPosRef.current;
+      const next = startSizeRef.current + delta;
+      const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary));
+    };
+    const onUp = () => {
+      if (!isDraggingRef.current) return;
+      isDraggingRef.current = false;
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return () => {
+      if (window) {
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      }
+    };
+  }, [containerRef, direction, minPrimarySize, minSecondarySize, setPrimarySize]);
+  const handleMouseDown = (event) => {
+    isDraggingRef.current = true;
+    startPosRef.current = direction === "horizontal" ? event.clientX : event.clientY;
+    startSizeRef.current = primarySize;
+    document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
+    document.body.style.userSelect = "none";
+  };
+  return /* @__PURE__ */ jsx("div", { className: styles.gutter, "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: styles.resizer,
+      onMouseDown: handleMouseDown,
+      role: "separator",
+      "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+      "aria-valuenow": Math.round(primarySize),
+      tabIndex: 0
+    }
+  ) });
+}
+function SplitPaneSecondary({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: styles.secondary, children });
+}
+
+export { SplitPane, SplitPaneGutter, SplitPanePrimary, SplitPaneSecondary };

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

@@ -0,0 +1,106 @@
+.container {
+  display: flex;
+  inline-size: 100%;
+  overflow: hidden;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.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;
+  flex-direction: column;
+  display: flex;
+}
+
+/* ===== 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) ===== */
+.gutter {
+  position: relative;
+  flex: 0 0 var(--split-pane-gutter, 8px);
+  background: transparent;
+  z-index: 1;
+}
+
+/* Vertical mode gutter */
+.container[data-direction='vertical'] .gutter {
+  inline-size: 100%;
+  block-size: var(--split-pane-gutter, 8px);
+}
+
+/* ===== Resizer (interaction only) ===== */
+.resizer {
+  position: absolute;
+  inset: 0;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+}
+
+.container[data-direction='vertical'] .resizer {
+  cursor: row-resize;
+}
+
+/* ===== Divider line ===== */
+.resizer::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline: 50%;
+  inline-size: var(--border-width-hairline);
+  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-hairline);
+  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,87 @@
+'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 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);
+  React.useEffect(() => {
+    if (!storageKey) return;
+    const stored = readStoredSize(storageKey);
+    if (stored === null) return;
+    setPrimarySize(stored);
+  }, [storageKey]);
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const clampToContainer = () => {
+      const rect = el.getBoundingClientRect();
+      const total = direction === "horizontal" ? rect.width : rect.height;
+      if (!Number.isFinite(total) || total <= 0) return;
+      const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
+      setPrimarySize((prev) => clamp(prev, minPrimarySize, maxPrimary));
+    };
+    clampToContainer();
+    const ro = new ResizeObserver(() => clampToContainer());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [direction, minPrimarySize, minSecondarySize]);
+  React.useEffect(() => {
+    if (!storageKey) return;
+    writeStoredSize(storageKey, primarySize);
+  }, [storageKey, primarySize]);
+  const value = React.useMemo(
+    () => ({
+      direction,
+      primarySize,
+      setPrimarySize,
+      minPrimarySize,
+      minSecondarySize,
+      containerRef,
+      storageKey
+    }),
+    [direction, primarySize, minPrimarySize, minSecondarySize, storageKey]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SplitPaneContext.Provider, { value, children });
+}
+
+exports.SplitPaneContext = SplitPaneContext;
+exports.SplitPaneProvider = SplitPaneProvider;
+exports.useSplitPaneContext = useSplitPaneContext;

package/dist/components/split-pane/provider/SplitPaneContext.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export type SplitDirection = 'horizontal' | 'vertical';
+export interface SplitPaneContextValue {
+    direction: SplitDirection;
+    primarySize: number;
+    setPrimarySize: React.Dispatch<React.SetStateAction<number>>;
+    minPrimarySize: number;
+    minSecondarySize: number;
+    containerRef: React.RefObject<HTMLDivElement>;
+    storageKey?: string;
+}
+export declare const SplitPaneContext: React.Context<SplitPaneContextValue | null>;
+export declare function useSplitPaneContext(): SplitPaneContextValue;
+type SplitPaneProviderProps = {
+    children: React.ReactNode;
+    direction: SplitDirection;
+    initialPrimarySize: number;
+    minPrimarySize: number;
+    minSecondarySize: number;
+    storageKey?: string;
+};
+export declare function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, storageKey, }: SplitPaneProviderProps): React.ReactNode;
+export {};

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

@@ -0,0 +1,79 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useState, useEffect, useMemo } from 'react';
+
+const SplitPaneContext = React.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 useSplitPaneContext() {
+  const ctx = React.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 = useRef(null);
+  const [primarySize, setPrimarySize] = useState(initialPrimarySize);
+  useEffect(() => {
+    if (!storageKey) return;
+    const stored = readStoredSize(storageKey);
+    if (stored === null) return;
+    setPrimarySize(stored);
+  }, [storageKey]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const clampToContainer = () => {
+      const rect = el.getBoundingClientRect();
+      const total = direction === "horizontal" ? rect.width : rect.height;
+      if (!Number.isFinite(total) || total <= 0) return;
+      const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
+      setPrimarySize((prev) => clamp(prev, minPrimarySize, maxPrimary));
+    };
+    clampToContainer();
+    const ro = new ResizeObserver(() => clampToContainer());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [direction, minPrimarySize, minSecondarySize]);
+  useEffect(() => {
+    if (!storageKey) return;
+    writeStoredSize(storageKey, primarySize);
+  }, [storageKey, primarySize]);
+  const value = useMemo(
+    () => ({
+      direction,
+      primarySize,
+      setPrimarySize,
+      minPrimarySize,
+      minSecondarySize,
+      containerRef,
+      storageKey
+    }),
+    [direction, primarySize, minPrimarySize, minSecondarySize, storageKey]
+  );
+  return /* @__PURE__ */ jsx(SplitPaneContext.Provider, { value, children });
+}
+
+export { SplitPaneContext, SplitPaneProvider, useSplitPaneContext };