@startsimpli/ui 0.4.14 → 0.4.15

package/src/components/workspace/DualPaneWorkspace.tsx

@@ -0,0 +1,187 @@
+'use client'
+
+import * as React from 'react'
+import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen } from 'lucide-react'
+import { cn } from '../../lib/utils'
+import { SplitPane } from './SplitPane'
+
+export type WorkspaceLayout = 'split' | 'stack' | 'auto'
+
+export interface DualPaneWorkspaceProps {
+  left: React.ReactNode
+  right: React.ReactNode
+  /** Optional toolbar rendered above both panes (full width). */
+  toolbar?: React.ReactNode
+  leftLabel?: string
+  rightLabel?: string
+  /** Initial size of the left pane as a percentage. Default 42. */
+  initialLeftSize?: number
+  minLeftSize?: number
+  maxLeftSize?: number
+  /** Persist the split position under this key. */
+  storageKey?: string
+  /**
+   * `split` = resizable side-by-side, `stack` = vertically stacked,
+   * `auto` = stack below `stackBreakpoint`, split above. Default `auto`.
+   */
+  layout?: WorkspaceLayout
+  /** Pixel width below which `auto` stacks. Default 768. */
+  stackBreakpoint?: number
+  /** Show collapse/expand controls for each pane (split layout only). */
+  collapsible?: boolean
+  className?: string
+}
+
+function useResolvedLayout(layout: WorkspaceLayout, stackBreakpoint: number): 'split' | 'stack' {
+  const [isNarrow, setIsNarrow] = React.useState(false)
+  React.useEffect(() => {
+    if (layout !== 'auto' || typeof window === 'undefined') return
+    const mql = window.matchMedia(`(max-width: ${stackBreakpoint - 1}px)`)
+    const update = () => setIsNarrow(mql.matches)
+    update()
+    mql.addEventListener?.('change', update)
+    return () => mql.removeEventListener?.('change', update)
+  }, [layout, stackBreakpoint])
+
+  if (layout === 'split') return 'split'
+  if (layout === 'stack') return 'stack'
+  return isNarrow ? 'stack' : 'split'
+}
+
+interface PaneHeaderProps {
+  label?: string
+  side: 'left' | 'right'
+  collapsible?: boolean
+  collapsed: boolean
+  onToggle: () => void
+}
+
+function PaneHeader({ label, side, collapsible, collapsed, onToggle }: PaneHeaderProps) {
+  if (!label && !collapsible) return null
+  const CollapseIcon = side === 'left' ? PanelLeftClose : PanelRightClose
+  const ExpandIcon = side === 'left' ? PanelLeftOpen : PanelRightOpen
+  const Icon = collapsed ? ExpandIcon : CollapseIcon
+  const verb = collapsed ? 'Expand' : 'Collapse'
+  return (
+    <div className="flex h-9 shrink-0 items-center justify-between border-b border-border bg-muted/30 px-3">
+      {label ? (
+        <span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{label}</span>
+      ) : (
+        <span />
+      )}
+      {collapsible && (
+        <button
+          type="button"
+          onClick={onToggle}
+          aria-label={`${verb} ${label ?? side} pane`}
+          className="rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
+        >
+          <Icon className="h-4 w-4" aria-hidden="true" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Opinionated two-pane workspace shell built on {@link SplitPane}: an optional
+ * full-width toolbar, two labelled/collapsible panes side-by-side, and
+ * automatic vertical stacking on narrow viewports. Fully app-agnostic — used by
+ * present-web for chat | slides, but free of any presentation-specific logic.
+ */
+export function DualPaneWorkspace({
+  left,
+  right,
+  toolbar,
+  leftLabel,
+  rightLabel,
+  initialLeftSize = 42,
+  minLeftSize = 24,
+  maxLeftSize = 72,
+  storageKey,
+  layout = 'auto',
+  stackBreakpoint = 768,
+  collapsible = false,
+  className,
+}: DualPaneWorkspaceProps) {
+  const resolved = useResolvedLayout(layout, stackBreakpoint)
+  const [collapsed, setCollapsed] = React.useState<null | 'left' | 'right'>(null)
+
+  const leftHeader = (
+    <PaneHeader
+      label={leftLabel}
+      side="left"
+      collapsible={collapsible}
+      collapsed={collapsed === 'left'}
+      onToggle={() => setCollapsed((c) => (c === 'left' ? null : 'left'))}
+    />
+  )
+  const rightHeader = (
+    <PaneHeader
+      label={rightLabel}
+      side="right"
+      collapsible={collapsible}
+      collapsed={collapsed === 'right'}
+      onToggle={() => setCollapsed((c) => (c === 'right' ? null : 'right'))}
+    />
+  )
+
+  const leftPane = (
+    <section className="flex h-full min-h-0 flex-col" aria-label={leftLabel}>
+      {leftHeader}
+      {collapsed !== 'left' && <div className="min-h-0 flex-1 overflow-hidden">{left}</div>}
+    </section>
+  )
+  const rightPane = (
+    <section className="flex h-full min-h-0 flex-col" aria-label={rightLabel}>
+      {rightHeader}
+      {collapsed !== 'right' && <div className="min-h-0 flex-1 overflow-hidden">{right}</div>}
+    </section>
+  )
+
+  // When one pane is collapsed, the other takes the full width (no resizer).
+  let body: React.ReactNode
+  if (resolved === 'stack') {
+    body = (
+      <div className="flex min-h-0 flex-1 flex-col divide-y divide-border" data-layout="stack">
+        <div className="min-h-0 flex-1 overflow-hidden">{leftPane}</div>
+        <div className="min-h-0 flex-1 overflow-hidden">{rightPane}</div>
+      </div>
+    )
+  } else if (collapsed === 'left') {
+    body = (
+      <div className="flex min-h-0 flex-1 flex-row" data-layout="split" data-collapsed="left">
+        <div className="shrink-0">{leftHeader}</div>
+        <div className="min-h-0 flex-1 overflow-hidden">{rightPane}</div>
+      </div>
+    )
+  } else if (collapsed === 'right') {
+    body = (
+      <div className="flex min-h-0 flex-1 flex-row" data-layout="split" data-collapsed="right">
+        <div className="min-h-0 flex-1 overflow-hidden">{leftPane}</div>
+        <div className="shrink-0">{rightHeader}</div>
+      </div>
+    )
+  } else {
+    body = (
+      <div className="min-h-0 flex-1" data-layout="split">
+        <SplitPane
+          first={leftPane}
+          second={rightPane}
+          initialSize={initialLeftSize}
+          minSize={minLeftSize}
+          maxSize={maxLeftSize}
+          storageKey={storageKey}
+          aria-label="Resize workspace panes"
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('flex h-full min-h-0 w-full flex-col', className)}>
+      {toolbar && <div className="shrink-0 border-b border-border">{toolbar}</div>}
+      {body}
+    </div>
+  )
+}

package/src/components/workspace/SplitPane.tsx

@@ -0,0 +1,174 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../lib/utils'
+
+export interface SplitPaneProps {
+  /** Content of the first (left / top) pane. */
+  first: React.ReactNode
+  /** Content of the second (right / bottom) pane. */
+  second: React.ReactNode
+  /** Split direction. `vertical` = side-by-side (a vertical divider). Default `vertical`. */
+  orientation?: 'vertical' | 'horizontal'
+  /** Initial size of the first pane, as a percentage (0-100). Default 50. */
+  initialSize?: number
+  /** Minimum size of the first pane as a percentage. Default 20. */
+  minSize?: number
+  /** Maximum size of the first pane as a percentage. Default 80. */
+  maxSize?: number
+  /** Keyboard nudge / step size in percentage points. Default 3. */
+  step?: number
+  /** Persist the size under this key in localStorage. */
+  storageKey?: string
+  /** Notified with the new first-pane percentage whenever it changes. */
+  onResize?: (size: number) => void
+  className?: string
+  'aria-label'?: string
+}
+
+function clamp(v: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, v))
+}
+
+/**
+ * Generic, app-agnostic resizable two-pane split. Drag the divider with a
+ * pointer or nudge it with the arrow keys. Nothing domain-specific lives here.
+ */
+export function SplitPane({
+  first,
+  second,
+  orientation = 'vertical',
+  initialSize = 50,
+  minSize = 20,
+  maxSize = 80,
+  step = 3,
+  storageKey,
+  onResize,
+  className,
+  'aria-label': ariaLabel = 'Resize panes',
+}: SplitPaneProps) {
+  const isVertical = orientation === 'vertical'
+  const containerRef = React.useRef<HTMLDivElement>(null)
+  const draggingRef = React.useRef(false)
+
+  const [size, setSizeState] = React.useState<number>(() => {
+    if (typeof window !== 'undefined' && storageKey) {
+      const saved = window.localStorage.getItem(storageKey)
+      if (saved != null) {
+        const n = Number(saved)
+        if (!Number.isNaN(n)) return clamp(n, minSize, maxSize)
+      }
+    }
+    return clamp(initialSize, minSize, maxSize)
+  })
+
+  const setSize = React.useCallback(
+    (next: number) => {
+      const clamped = clamp(next, minSize, maxSize)
+      setSizeState(clamped)
+      onResize?.(clamped)
+      if (typeof window !== 'undefined' && storageKey) {
+        window.localStorage.setItem(storageKey, String(clamped))
+      }
+    },
+    [minSize, maxSize, onResize, storageKey]
+  )
+
+  const onKeyDown = (e: React.KeyboardEvent) => {
+    const grow = isVertical ? 'ArrowRight' : 'ArrowDown'
+    const shrink = isVertical ? 'ArrowLeft' : 'ArrowUp'
+    if (e.key === grow) {
+      e.preventDefault()
+      setSize(size + step)
+    } else if (e.key === shrink) {
+      e.preventDefault()
+      setSize(size - step)
+    } else if (e.key === 'Home') {
+      e.preventDefault()
+      setSize(minSize)
+    } else if (e.key === 'End') {
+      e.preventDefault()
+      setSize(maxSize)
+    }
+  }
+
+  const onPointerMove = React.useCallback(
+    (e: PointerEvent) => {
+      if (!draggingRef.current || !containerRef.current) return
+      const rect = containerRef.current.getBoundingClientRect()
+      const pct = isVertical
+        ? ((e.clientX - rect.left) / rect.width) * 100
+        : ((e.clientY - rect.top) / rect.height) * 100
+      setSize(pct)
+    },
+    [isVertical, setSize]
+  )
+
+  const stopDragging = React.useCallback(() => {
+    draggingRef.current = false
+    document.body.style.cursor = ''
+    document.body.style.userSelect = ''
+  }, [])
+
+  React.useEffect(() => {
+    window.addEventListener('pointermove', onPointerMove)
+    window.addEventListener('pointerup', stopDragging)
+    return () => {
+      window.removeEventListener('pointermove', onPointerMove)
+      window.removeEventListener('pointerup', stopDragging)
+    }
+  }, [onPointerMove, stopDragging])
+
+  const startDragging = () => {
+    draggingRef.current = true
+    document.body.style.cursor = isVertical ? 'col-resize' : 'row-resize'
+    document.body.style.userSelect = 'none'
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        'flex h-full w-full overflow-hidden',
+        isVertical ? 'flex-row' : 'flex-col',
+        className
+      )}
+      data-orientation={orientation}
+    >
+      <div
+        className="min-h-0 min-w-0 overflow-hidden"
+        style={isVertical ? { width: `${size}%` } : { height: `${size}%` }}
+        data-pane="first"
+      >
+        {first}
+      </div>
+      <div
+        role="separator"
+        aria-label={ariaLabel}
+        aria-orientation={orientation}
+        aria-valuenow={Math.round(size)}
+        aria-valuemin={minSize}
+        aria-valuemax={maxSize}
+        tabIndex={0}
+        onKeyDown={onKeyDown}
+        onPointerDown={startDragging}
+        className={cn(
+          'group relative shrink-0 bg-border transition-colors hover:bg-primary/40 focus-visible:bg-primary/60 focus:outline-none',
+          isVertical ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize'
+        )}
+        data-testid="split-pane-resizer"
+      >
+        <span
+          aria-hidden="true"
+          className={cn(
+            'absolute bg-transparent',
+            isVertical ? '-inset-x-1.5 inset-y-0' : '-inset-y-1.5 inset-x-0'
+          )}
+        />
+      </div>
+      <div className="min-h-0 min-w-0 flex-1 overflow-hidden" data-pane="second">
+        {second}
+      </div>
+    </div>
+  )
+}

package/src/components/workspace/index.ts

@@ -0,0 +1,4 @@
+export { SplitPane } from './SplitPane'
+export type { SplitPaneProps } from './SplitPane'
+export { DualPaneWorkspace } from './DualPaneWorkspace'
+export type { DualPaneWorkspaceProps, WorkspaceLayout } from './DualPaneWorkspace'