react-panel-layout 0.5.2 → 0.6.1

package/dist/window.js

@@ -0,0 +1,160 @@
+import { D as A, b as G, F as K, P as T, S as W, d as q } from "./FloatingWindow-CUXnEtrb.js";
+import { jsx as m } from "react/jsx-runtime";
+import * as c from "react";
+import { u as p } from "./useDocumentPointerEvents-DXxw3qWj.js";
+import { u as x } from "./useIsomorphicLayoutEffect-DhmEnmZ_.js";
+import { D as z } from "./styles-NkjuMOVS.js";
+import { u as J } from "./useFloatingState-tEfA_wbc.js";
+const D = () => typeof window > "u" ? { width: 0, height: 0 } : {
+  width: window.innerWidth,
+  height: window.innerHeight
+}, O = (e, t, n, o, r) => {
+  const s = e + n > r.width ? Math.max(0, r.width - n) : e, i = t + o > r.height ? Math.max(0, r.height - o) : t;
+  return { x: s, y: i };
+}, b = /* @__PURE__ */ new Map(), R = (e) => {
+  const t = `resize-box:${e}`, n = b.get(t);
+  if (n)
+    return n;
+  const o = /* @__PURE__ */ new Map(), r = new ResizeObserver((i) => {
+    for (const a of i) {
+      const u = o.get(a.target);
+      u && u(a);
+    }
+  }), s = {
+    observe(i, a) {
+      return o.set(i, a), r.observe(i, { box: e }), () => {
+        o.delete(i), r.unobserve(i);
+      };
+    }
+  };
+  return b.set(t, s), s;
+}, E = (e) => {
+  const t = e.getBoundingClientRect();
+  return {
+    target: e,
+    contentRect: t,
+    borderBoxSize: [{ inlineSize: t.width, blockSize: t.height }],
+    contentBoxSize: [{ inlineSize: t.width, blockSize: t.height }],
+    devicePixelContentBoxSize: []
+  };
+}, M = (e) => {
+  if (e.borderBoxSize?.length > 0) {
+    const t = e.borderBoxSize[0];
+    return new DOMRect(0, 0, t.inlineSize, t.blockSize);
+  }
+  return e.contentRect;
+};
+function C(e, { box: t = "content-box" }) {
+  const [n, o] = c.useState(null);
+  x(() => {
+    const s = e.current;
+    if (!s) {
+      o(null);
+      return;
+    }
+    return o(E(s)), R(t).observe(s, o);
+  }, [e, t]);
+  const r = c.useMemo(() => n ? M(n) : null, [n]);
+  return { entry: n, rect: r };
+}
+const P = {
+  border: "none",
+  padding: 0,
+  background: "transparent"
+}, k = {
+  position: "fixed",
+  zIndex: z
+}, B = typeof window < "u" && typeof document < "u", L = ({
+  anchor: e,
+  onClose: t,
+  children: n,
+  contentClassName: o,
+  contentStyle: r,
+  dataAttributes: s,
+  onKeyDown: i,
+  onPositionChange: a
+}) => {
+  const u = c.useRef(null), { rect: d } = C(u, { box: "border-box" }), l = c.useMemo(() => {
+    const f = D(), g = d?.width ?? 0, w = d?.height ?? 0;
+    return O(e.x, e.y, g, w, f);
+  }, [e.x, e.y, d?.width, d?.height]), h = p(a);
+  c.useEffect(() => {
+    h?.(l);
+  }, [l]);
+  const y = p(t);
+  c.useEffect(() => {
+    const f = (g) => {
+      g.target instanceof Node && u.current && !u.current.contains(g.target) && y();
+    };
+    return document.addEventListener("pointerdown", f), () => document.removeEventListener("pointerdown", f);
+  }, []);
+  const v = c.useMemo(
+    () => ({
+      ...k,
+      ...r,
+      left: l.x,
+      top: l.y
+    }),
+    [r, l.x, l.y]
+  ), S = c.useMemo(() => s ? Object.entries(s).reduce((f, [g, w]) => (w == null || (f[`data-${g}`] = w), f), {}) : {}, [s]);
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: u,
+      className: o,
+      style: v,
+      onKeyDown: i,
+      ...S,
+      children: n
+    }
+  );
+}, I = ({
+  visible: e,
+  onClose: t,
+  anchor: n,
+  children: o,
+  contentClassName: r,
+  contentStyle: s,
+  dataAttributes: i,
+  onKeyDown: a,
+  onPositionChange: u
+}) => {
+  const d = c.useRef(null);
+  x(() => {
+    if (!d.current)
+      return;
+    const h = d.current;
+    e ? h.showModal() : h.open && h.close();
+  }, [e]);
+  const l = c.useCallback(
+    (h) => {
+      h.preventDefault(), t();
+    },
+    [t]
+  );
+  return /* @__PURE__ */ m("dialog", { ref: d, style: P, onCancel: l, children: /* @__PURE__ */ m(c.Activity, { mode: e ? "visible" : "hidden", children: /* @__PURE__ */ m(
+    L,
+    {
+      anchor: n,
+      onClose: t,
+      contentClassName: r,
+      contentStyle: s,
+      dataAttributes: i,
+      onKeyDown: a,
+      onPositionChange: u,
+      children: o
+    }
+  ) }) });
+}, N = (e) => B ? /* @__PURE__ */ m(I, { ...e }) : null;
+N.displayName = "DialogOverlay";
+export {
+  N as DialogOverlay,
+  A as Drawer,
+  G as DrawerLayers,
+  K as FloatingWindow,
+  T as PopupLayerPortal,
+  W as SwipeSafeZone,
+  q as useDrawerState,
+  J as useFloatingState
+};
+//# sourceMappingURL=window.js.map

package/dist/window.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"window.js","sources":["../src/utils/dialogUtils.ts","../src/hooks/useResizeObserver.tsx","../src/components/window/DialogOverlay.tsx"],"sourcesContent":["/**\n * @file Dialog positioning utilities\n */\n\nexport type ViewportInfo = {\n  width: number;\n  height: number;\n};\n\n/**\n * Get viewport dimensions\n */\nexport const getViewportInfo = (): ViewportInfo => {\n  if (typeof window === \"undefined\") {\n    return { width: 0, height: 0 };\n  }\n\n  return {\n    width: window.innerWidth,\n    height: window.innerHeight,\n  };\n};\n\n/**\n * Calculate context menu position to keep it within viewport\n */\nexport const calculateContextMenuPosition = (\n  anchorX: number,\n  anchorY: number,\n  menuWidth: number,\n  menuHeight: number,\n  viewport: ViewportInfo,\n): { x: number; y: number } => {\n  // Adjust horizontal position if menu would overflow\n  const x =\n    anchorX + menuWidth > viewport.width ? Math.max(0, viewport.width - menuWidth) : anchorX;\n\n  // Adjust vertical position if menu would overflow\n  const y =\n    anchorY + menuHeight > viewport.height ? Math.max(0, viewport.height - menuHeight) : anchorY;\n\n  return { x, y };\n};\n","/**\n * @file Shared useResizeObserver hook with cached observer instances.\n *\n * Provides element size observation with shared observers for memory efficiency.\n * Size becomes available after the first useLayoutEffect cycle completes.\n *\n * Note: Due to React's effect execution order (children before parents),\n * child components may see containerSize=0 on their first effect run.\n * This is a React constraint, not a bug. Consumers should check for\n * valid size before using it for calculations like animation positions.\n */\nimport * as React from \"react\";\nimport { useIsomorphicLayoutEffect } from \"./useIsomorphicLayoutEffect.js\";\n\n/**\n * Shared ResizeObserver that can observe multiple elements.\n */\ntype SharedObserver = {\n  observe: (target: Element, callback: (entry: ResizeObserverEntry) => void) => () => void;\n};\n\n/** Cache of shared observers per box option */\nconst observerCache = new Map<string, SharedObserver>();\n\n/**\n * Get or create a shared ResizeObserver for the given box option.\n */\nconst getSharedObserver = (box: ResizeObserverBoxOptions): SharedObserver => {\n  const observerKey = `resize-box:${box}`;\n  const cached = observerCache.get(observerKey);\n  if (cached) {\n    return cached;\n  }\n\n  const callbacks = new Map<Element, (entry: ResizeObserverEntry) => void>();\n\n  const resizeObserver = new ResizeObserver((entries) => {\n    for (const entry of entries) {\n      const callback = callbacks.get(entry.target);\n      if (callback) {\n        callback(entry);\n      }\n    }\n  });\n\n  const sharedObserver: SharedObserver = {\n    observe(target, callback) {\n      callbacks.set(target, callback);\n      resizeObserver.observe(target, { box });\n\n      return () => {\n        callbacks.delete(target);\n        resizeObserver.unobserve(target);\n      };\n    },\n  };\n\n  observerCache.set(observerKey, sharedObserver);\n  return sharedObserver;\n};\n\n/**\n * Create a ResizeObserverEntry from getBoundingClientRect.\n */\nconst measureElement = (target: Element): ResizeObserverEntry => {\n  const rect = target.getBoundingClientRect();\n  return {\n    target,\n    contentRect: rect,\n    borderBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],\n    contentBoxSize: [{ inlineSize: rect.width, blockSize: rect.height }],\n    devicePixelContentBoxSize: [],\n  };\n};\n\n/**\n * Extract DOMRect from ResizeObserverEntry.\n */\nconst entryToRect = (entry: ResizeObserverEntry): DOMRect => {\n  if (entry.borderBoxSize?.length > 0) {\n    const size = entry.borderBoxSize[0];\n    return new DOMRect(0, 0, size.inlineSize, size.blockSize);\n  }\n  return entry.contentRect;\n};\n\n/**\n * Clear observer cache. Exported for testing purposes.\n */\nexport function clearObserverCache(): void {\n  observerCache.clear();\n}\n\n/**\n * Observe size changes for a given element reference using shared resize observers.\n *\n * @param ref - Ref holding the element whose size to monitor.\n * @param options - Resize observer configuration.\n * @returns Latest resize entry and a derived DOMRect snapshot.\n *\n * @remarks\n * The `rect` will be `null` on the first render. After the initial\n * useLayoutEffect runs and triggers a re-render, `rect` will contain\n * the measured size.\n *\n * Due to React's effect execution order, child components' effects run\n * before parent effects. If you pass `rect.width` to a child as a prop,\n * the child's first effect will see `0` (or whatever default you use).\n * This is expected React behavior.\n *\n * @example\n * ```tsx\n * const containerRef = useRef<HTMLDivElement>(null);\n * const { rect } = useResizeObserver(containerRef, { box: \"border-box\" });\n * const width = rect?.width ?? 0;\n *\n * // Check if size is ready before using for calculations\n * const isReady = rect !== null;\n * ```\n */\nexport function useResizeObserver<T extends HTMLElement>(\n  ref: React.RefObject<T | null>,\n  { box = \"content-box\" }: ResizeObserverOptions,\n) {\n  const [entry, setEntry] = React.useState<ResizeObserverEntry | null>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    const target = ref.current;\n    if (!target) {\n      setEntry(null);\n      return;\n    }\n\n    // Measure immediately\n    setEntry(measureElement(target));\n\n    // Set up ResizeObserver for subsequent updates\n    const observer = getSharedObserver(box);\n    return observer.observe(target, setEntry);\n  }, [ref, box]);\n\n  const rect = React.useMemo(() => {\n    if (!entry) {\n      return null;\n    }\n    return entryToRect(entry);\n  }, [entry]);\n\n  return { entry, rect };\n}\n","/**\n * @file Dialog-based overlay component with automatic positioning\n */\nimport * as React from \"react\";\nimport type { Position } from \"../../types\";\nimport { calculateContextMenuPosition, getViewportInfo } from \"../../utils/dialogUtils\";\nimport { ensureDialogPolyfill } from \"../../utils/polyfills/createDialogPolyfill\";\nimport { useEffectEvent } from \"../../hooks/useEffectEvent\";\nimport { useIsomorphicLayoutEffect } from \"../../hooks/useIsomorphicLayoutEffect\";\nimport { useResizeObserver } from \"../../hooks/useResizeObserver\";\nimport { DIALOG_OVERLAY_Z_INDEX } from \"../../constants/styles\";\n\nconst contextDialogStyle: React.CSSProperties = {\n  border: \"none\",\n  padding: 0,\n  background: \"transparent\",\n};\n\nconst contextContentStyle: React.CSSProperties = {\n  position: \"fixed\",\n  zIndex: DIALOG_OVERLAY_Z_INDEX,\n};\n\ntype DataAttributes = Record<string, string | number | boolean>;\n\nexport type DialogOverlayProps = {\n  anchor: Position;\n  visible: boolean;\n  onClose: () => void;\n  children: React.ReactNode;\n  contentClassName?: string;\n  contentStyle?: React.CSSProperties;\n  dataAttributes?: Record<string, string | number | boolean | null | undefined>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\n  onPositionChange?: (position: Position) => void;\n};\n\nconst isBrowser = typeof window !== \"undefined\" && typeof document !== \"undefined\";\n\nensureDialogPolyfill();\n\nconst DialogOverlayContent: React.FC<Omit<DialogOverlayProps, \"visible\">> = ({\n  anchor,\n  onClose,\n  children,\n  contentClassName,\n  contentStyle,\n  dataAttributes,\n  onKeyDown,\n  onPositionChange,\n}) => {\n  const contentRef = React.useRef<HTMLDivElement>(null);\n  const { rect } = useResizeObserver(contentRef, { box: \"border-box\" });\n\n  const computedPosition = React.useMemo(() => {\n    const viewport = getViewportInfo();\n    const width = rect?.width ?? 0;\n    const height = rect?.height ?? 0;\n    return calculateContextMenuPosition(anchor.x, anchor.y, width, height, viewport);\n  }, [anchor.x, anchor.y, rect?.width, rect?.height]);\n\n  const handlePositionChange = useEffectEvent(onPositionChange);\n\n  React.useEffect(() => {\n    handlePositionChange?.(computedPosition);\n  }, [computedPosition]);\n\n  const handleClose = useEffectEvent(onClose);\n\n  React.useEffect(() => {\n    const handlePointerDown = (event: PointerEvent) => {\n      if (!(event.target instanceof Node)) {\n        return;\n      }\n      if (contentRef.current && !contentRef.current.contains(event.target)) {\n        handleClose();\n      }\n    };\n\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    return () => document.removeEventListener(\"pointerdown\", handlePointerDown);\n  }, []);\n\n  const mergedStyle: React.CSSProperties = React.useMemo(\n    () => ({\n      ...contextContentStyle,\n      ...contentStyle,\n      left: computedPosition.x,\n      top: computedPosition.y,\n    }),\n    [contentStyle, computedPosition.x, computedPosition.y],\n  );\n\n  const dataProps = React.useMemo<DataAttributes>(() => {\n    if (!dataAttributes) {\n      return {};\n    }\n    return Object.entries(dataAttributes).reduce<DataAttributes>((acc, [key, value]) => {\n      if (value === null || value === undefined) {\n        return acc;\n      }\n      acc[`data-${key}`] = value;\n      return acc;\n    }, {});\n  }, [dataAttributes]);\n\n  return (\n    <div\n      ref={contentRef}\n      className={contentClassName}\n      style={mergedStyle}\n      onKeyDown={onKeyDown}\n      {...dataProps}\n    >\n      {children}\n    </div>\n  );\n};\n\nconst DialogOverlayImpl: React.FC<DialogOverlayProps> = ({\n  visible,\n  onClose,\n  anchor,\n  children,\n  contentClassName,\n  contentStyle,\n  dataAttributes,\n  onKeyDown,\n  onPositionChange,\n}) => {\n  const dialogRef = React.useRef<HTMLDialogElement>(null);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!dialogRef.current) {\n      return;\n    }\n\n    const dialog = dialogRef.current;\n    if (visible) {\n      dialog.showModal();\n    } else if (dialog.open) {\n      dialog.close();\n    }\n  }, [visible]);\n\n  const handleCancel = React.useCallback(\n    (event: React.SyntheticEvent) => {\n      event.preventDefault();\n      onClose();\n    },\n    [onClose],\n  );\n\n  return (\n    <dialog ref={dialogRef} style={contextDialogStyle} onCancel={handleCancel}>\n      <React.Activity mode={visible ? \"visible\" : \"hidden\"}>\n        <DialogOverlayContent\n          anchor={anchor}\n          onClose={onClose}\n          contentClassName={contentClassName}\n          contentStyle={contentStyle}\n          dataAttributes={dataAttributes}\n          onKeyDown={onKeyDown}\n          onPositionChange={onPositionChange}\n        >\n          {children}\n        </DialogOverlayContent>\n      </React.Activity>\n    </dialog>\n  );\n};\n\nexport const DialogOverlay: React.FC<DialogOverlayProps> = (props) => {\n  if (!isBrowser) {\n    return null;\n  }\n  return <DialogOverlayImpl {...props} />;\n};\n\nDialogOverlay.displayName = \"DialogOverlay\";\n"],"names":["getViewportInfo","calculateContextMenuPosition","anchorX","anchorY","menuWidth","menuHeight","viewport","x","y","observerCache","getSharedObserver","box","observerKey","cached","callbacks","resizeObserver","entries","entry","callback","sharedObserver","target","measureElement","rect","entryToRect","size","useResizeObserver","ref","setEntry","React","useIsomorphicLayoutEffect","contextDialogStyle","contextContentStyle","DIALOG_OVERLAY_Z_INDEX","isBrowser","DialogOverlayContent","anchor","onClose","children","contentClassName","contentStyle","dataAttributes","onKeyDown","onPositionChange","contentRef","computedPosition","width","height","handlePositionChange","useEffectEvent","handleClose","handlePointerDown","event","mergedStyle","dataProps","acc","key","value","jsx","DialogOverlayImpl","visible","dialogRef","dialog","handleCancel","DialogOverlay","props"],"mappings":"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"}

package/docs/design-tokens.md

@@ -0,0 +1,405 @@
+# Design Tokens (CSS Variables)
+
+react-panel-layout uses CSS custom properties (CSS variables) for theming. All design tokens are prefixed with `--rpl-` to avoid conflicts with other libraries.
+
+## Overview
+
+The library provides a comprehensive set of CSS variables that control the appearance of panels, tabs, and interactive elements. You can customize these variables in your own stylesheet to match your application's design.
+
+**No JavaScript configuration needed** - all theming is done purely through CSS.
+
+## CSS Variables Reference
+
+### Colors
+
+#### Tab Colors
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-color-tab-fg` | `#d5d7de` | Tab text color |
+| `--rpl-color-tab-active-bg` | `#2b2d35` | Active tab background |
+| `--rpl-color-tabbar-bg` | `#1e1f24` | Tab bar background |
+
+#### Panel Colors
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-color-panel-border` | `rgba(0, 0, 0, 0.3)` | Panel border color |
+| `--rpl-color-panel-bg` | `#0b0b0c` | Panel content background |
+| `--rpl-color-primary` | `#2196f3` | Primary accent color (resize handles) |
+
+#### Resize Handle Colors
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-color-resize-handle-hover` | `rgba(33, 150, 243, 0.35)` | Divider color when hovered |
+| `--rpl-color-resize-handle-active` | `rgba(33, 150, 243, 0.55)` | Divider color while dragging |
+
+#### Drag & Drop Colors
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-color-drop-suggest-border` | `rgba(90, 150, 255, 0.9)` | Drop zone border color |
+| `--rpl-color-drop-suggest-bg` | `rgba(90, 150, 255, 0.15)` | Drop zone background |
+| `--rpl-color-tabdrag-bg` | `rgba(34, 36, 42, 0.95)` | Dragged tab background |
+| `--rpl-color-tabdrag-fg` | `#e9ebf0` | Dragged tab text color |
+| `--rpl-color-tabdrag-border` | `rgba(120, 160, 255, 0.6)` | Dragged tab border |
+| `--rpl-color-tabdrag-shadow` | `0 6px 20px rgba(0, 0, 0, 0.35)` | Dragged tab shadow |
+| `--rpl-color-insert-guide` | `rgba(120, 160, 255, 0.95)` | Tab insert guide color |
+| `--rpl-color-insert-guide-shadow` | `0 0 0 2px rgba(120, 160, 255, 0.2)` | Insert guide shadow |
+
+### Sizing & Spacing
+
+#### Tab Sizing
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-size-tab-font` | `12px` | Tab font size |
+| `--rpl-space-tab-padding-y` | `4px` | Tab vertical padding |
+| `--rpl-space-tab-padding-x` | `8px` | Tab horizontal padding |
+
+#### Tab Bar Spacing
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-space-tabbar-gap` | `6px` | Gap between tabs |
+| `--rpl-space-tabbar-padding-y` | `4px` | Tab bar vertical padding |
+| `--rpl-space-tabbar-padding-x` | `6px` | Tab bar horizontal padding |
+
+#### Border Radius
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-radius-tab` | `4px` | Tab corner radius |
+| `--rpl-radius-suggest` | `6px` | Drop suggestion corner radius |
+
+#### Border Widths
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-size-suggest-border` | `2px` | Drop suggestion border width |
+
+#### Handle Thicknesses
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-size-grid-handle-thickness` | `4px` | Grid track resize handle thickness |
+| `--rpl-size-resize-handle-thickness` | `4px` | Component resize handle thickness |
+| `--rpl-size-split-handle-thickness` | `6px` | Panel split handle thickness |
+
+#### Padding
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-space-drop-suggest-padding` | `6px` | Padding inside drop suggestion zone |
+
+### Z-Index
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-z-overlay` | `9998` | Drop suggestion overlay z-index |
+| `--rpl-z-tabdrag-overlay` | `9999` | Tab drag overlay z-index |
+
+### Pivot Animations
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--rpl-pivot-animation-enter` | `none` | Animation when content becomes active |
+| `--rpl-pivot-animation-leave` | `none` | Animation when content becomes inactive |
+
+User defines `@keyframes` in their CSS and references via these tokens:
+
+```css
+@keyframes pivotEnter {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pivotLeave {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+:root {
+  --rpl-pivot-animation-enter: pivotEnter 150ms ease-out forwards;
+  --rpl-pivot-animation-leave: pivotLeave 150ms ease-out forwards;
+}
+
+## Usage
+
+### Basic Import
+
+```tsx
+import 'react-panel-layout/style.css'
+```
+
+The CSS variables are automatically applied when you import the stylesheet.
+
+### Customizing Theme
+
+Override CSS variables in your own stylesheet:
+
+```css
+/* Override specific variables */
+:root {
+  --rpl-color-primary: #ff6b6b;
+  --rpl-color-tab-active-bg: #3a3f4b;
+  --rpl-radius-tab: 8px;
+}
+```
+
+### Scoped Theming
+
+Apply different themes to different parts of your app:
+
+```css
+/* Dark theme (default) */
+.dark-theme {
+  --rpl-color-tabbar-bg: #1e1f24;
+  --rpl-color-panel-bg: #0b0b0c;
+  --rpl-color-panel-border: rgba(0, 0, 0, 0.3);
+}
+
+/* Light theme */
+.light-theme {
+  --rpl-color-tabbar-bg: #f5f5f5;
+  --rpl-color-panel-bg: #ffffff;
+  --rpl-color-panel-border: rgba(0, 0, 0, 0.1);
+  --rpl-color-tab-fg: #1a1a1a;
+  --rpl-color-tab-active-bg: #e0e0e0;
+}
+```
+
+```tsx
+<div className="light-theme">
+  <PanelSystem {...props} />
+</div>
+```
+
+## Examples
+
+### Example 1: Brand Colors
+
+```css
+:root {
+  /* Use your brand primary color */
+  --rpl-color-primary: #7c3aed;
+  --rpl-color-tab-active-bg: #6d28d9;
+
+  /* Matching drop suggestions */
+  --rpl-color-drop-suggest-border: rgba(124, 58, 237, 0.9);
+  --rpl-color-drop-suggest-bg: rgba(124, 58, 237, 0.15);
+}
+```
+
+### Example 2: Larger UI
+
+```css
+:root {
+  /* Increase font size and spacing */
+  --rpl-size-tab-font: 14px;
+  --rpl-space-tab-padding-y: 6px;
+  --rpl-space-tab-padding-x: 12px;
+  --rpl-space-tabbar-gap: 8px;
+
+  /* Thicker handles for easier grabbing */
+  --rpl-size-split-handle-thickness: 8px;
+  --rpl-size-resize-handle-thickness: 6px;
+}
+```
+
+### Example 3: Minimal Style
+
+```css
+:root {
+  /* Remove rounded corners */
+  --rpl-radius-tab: 0;
+  --rpl-radius-suggest: 0;
+
+  /* Minimal spacing */
+  --rpl-space-tab-padding-y: 2px;
+  --rpl-space-tab-padding-x: 6px;
+  --rpl-space-tabbar-gap: 2px;
+
+  /* Subtle colors */
+  --rpl-color-panel-border: rgba(0, 0, 0, 0.1);
+  --rpl-color-primary: #666;
+}
+```
+
+### Example 4: High Contrast
+
+```css
+:root {
+  /* High contrast colors */
+  --rpl-color-tab-fg: #ffffff;
+  --rpl-color-tab-active-bg: #000000;
+  --rpl-color-tabbar-bg: #1a1a1a;
+  --rpl-color-panel-bg: #000000;
+  --rpl-color-panel-border: #ffffff;
+  --rpl-color-primary: #00ff00;
+
+  /* Thicker borders for visibility */
+  --rpl-size-suggest-border: 3px;
+}
+```
+
+### Example 5: VS Code Theme
+
+```css
+:root {
+  /* VS Code Dark+ colors */
+  --rpl-color-tabbar-bg: #2d2d30;
+  --rpl-color-tab-fg: #cccccc;
+  --rpl-color-tab-active-bg: #1e1e1e;
+  --rpl-color-panel-bg: #1e1e1e;
+  --rpl-color-panel-border: #3e3e42;
+  --rpl-color-primary: #007acc;
+
+  /* VS Code tab styling */
+  --rpl-size-tab-font: 13px;
+  --rpl-space-tab-padding-y: 8px;
+  --rpl-space-tab-padding-x: 10px;
+  --rpl-radius-tab: 0;
+}
+```
+
+## Best Practices
+
+### 1. Use CSS Custom Properties for Dynamic Themes
+
+```css
+/* Define theme tokens */
+.app {
+  --brand-primary: #3b82f6;
+  --surface-1: #1f2937;
+  --surface-2: #111827;
+}
+
+/* Map to panel tokens */
+:root {
+  --rpl-color-primary: var(--brand-primary);
+  --rpl-color-tabbar-bg: var(--surface-1);
+  --rpl-color-panel-bg: var(--surface-2);
+}
+```
+
+### 2. Respect User Preferences
+
+```css
+@media (prefers-color-scheme: light) {
+  :root {
+    --rpl-color-tabbar-bg: #f5f5f5;
+    --rpl-color-panel-bg: #ffffff;
+    --rpl-color-tab-fg: #1a1a1a;
+    /* ... other light theme colors */
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --rpl-color-tabbar-bg: #1e1f24;
+    --rpl-color-panel-bg: #0b0b0c;
+    --rpl-color-tab-fg: #d5d7de;
+    /* ... other dark theme colors */
+  }
+}
+```
+
+### 3. Layer Your Customizations
+
+```css
+/* Base layer - application defaults */
+:root {
+  --rpl-color-primary: #3b82f6;
+}
+
+/* Component layer - specific component overrides */
+.editor-panels {
+  --rpl-color-panel-bg: #1a1a1a;
+  --rpl-size-tab-font: 11px;
+}
+
+/* State layer - interactive states */
+.editor-panels[data-focus="true"] {
+  --rpl-color-panel-border: var(--rpl-color-primary);
+}
+```
+
+## Troubleshooting
+
+### Theme Not Applying
+
+Make sure you're importing the CSS:
+
+```tsx
+import 'react-panel-layout/style.css'
+```
+
+### Variables Not Working
+
+Check that your CSS variables are defined before the component mounts:
+
+```html
+<!-- ❌ Wrong - overrides loaded after component -->
+<PanelSystem />
+<link rel="stylesheet" href="custom-theme.css">
+
+<!-- ✅ Correct - overrides loaded before component -->
+<link rel="stylesheet" href="custom-theme.css">
+<PanelSystem />
+```
+
+### Specificity Issues
+
+If variables aren't applying, check CSS specificity:
+
+```css
+/* ❌ May not work if overridden */
+.my-theme {
+  --rpl-color-primary: red;
+}
+
+/* ✅ Higher specificity */
+.app .my-theme {
+  --rpl-color-primary: red;
+}
+
+/* ✅ Or use :root for global */
+:root {
+  --rpl-color-primary: red;
+}
+```
+
+## Migration from v0.0.x
+
+Previous versions used a `themeTokens` prop on `PanelThemeProvider`. This has been removed in favor of CSS variables.
+
+**Before:**
+```tsx
+<PanelThemeProvider tokens={{
+  colorPrimary: '#ff6b6b',
+  splitHandleThickness: 8
+}}>
+  <PanelSystem {...props} />
+</PanelThemeProvider>
+```
+
+**After:**
+```css
+:root {
+  --rpl-color-primary: #ff6b6b;
+  --rpl-size-split-handle-thickness: 8px;
+}
+```
+
+```tsx
+<PanelSystem {...props} />
+```
+
+Benefits:
+- ✅ No extra provider needed
+- ✅ Better performance (no React re-renders for theme changes)
+- ✅ Standard CSS - works with any CSS preprocessor
+- ✅ Easier to override with media queries
+- ✅ Smaller bundle size

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-panel-layout",
-  "version": "0.5.2",
+  "version": "0.6.1",
   "license": "Unlicense",
   "type": "module",
   "main": "dist/index.cjs",
@@ -11,9 +11,6 @@
     "type": "git",
     "url": "git+https://github.com/trkbt10/react-panel-layout.git"
   },
-  "sideEffects": [
-    "**/*.css"
-  ],
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -40,9 +37,41 @@
       "import": "./dist/sticky-header.js",
       "require": "./dist/sticky-header.cjs"
     },
+    "./stack": {
+      "types": "./dist/stack/index.d.ts",
+      "import": "./dist/stack.js",
+      "require": "./dist/stack.cjs"
+    },
+    "./resizer": {
+      "types": "./dist/resizer/index.d.ts",
+      "import": "./dist/resizer.js",
+      "require": "./dist/resizer.cjs"
+    },
+    "./grid": {
+      "types": "./dist/grid/index.d.ts",
+      "import": "./dist/grid.js",
+      "require": "./dist/grid.cjs"
+    },
+    "./window": {
+      "types": "./dist/window/index.d.ts",
+      "import": "./dist/window.js",
+      "require": "./dist/window.cjs"
+    },
+    "./panels": {
+      "types": "./dist/panels/index.d.ts",
+      "import": "./dist/panels.js",
+      "require": "./dist/panels.cjs"
+    },
+    "./dialog": {
+      "types": "./dist/dialog/index.d.ts",
+      "import": "./dist/dialog.js",
+      "require": "./dist/dialog.cjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [
+    "src",
+    "docs",
     "dist",
     "README.md"
   ],
@@ -80,6 +109,7 @@
     "react-icons": "^5.5.0",
     "react-router": "^7.9.4",
     "rimraf": "^6.0.1",
+    "shiki": "^3.20.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.46.2",
     "vite": "^7.1.12",