@otfdashkit/ui 0.1.0

package/src/layouts/Sidebar/Sidebar.tsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+const SidebarCtx = React.createContext<{ collapsed: boolean }>({ collapsed: false })
+const useSidebarCtx = () => React.useContext(SidebarCtx)
+
+const makeSlot = (name: string, cls: string) => {
+  const C = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+    ({ className, ...p }, ref) => <div ref={ref} className={cn(cls, className)} {...p} />
+  )
+  C.displayName = name
+  return C
+}
+
+export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+  collapsed?: boolean
+  onCollapse?: () => void
+  width?: string
+}
+
+export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
+  ({ className, collapsed = false, onCollapse, width = '240px', style, children, ...props }, ref) => (
+    <SidebarCtx.Provider value={{ collapsed }}>
+      <div
+        ref={ref}
+        className={cn('flex flex-col h-full bg-[hsl(var(--card))] border-r border-[hsl(var(--border))] transition-all duration-200 overflow-hidden', className)}
+        style={{ width: collapsed ? '48px' : width, ...style }}
+        {...props}
+      >
+        <div className="flex-1 overflow-y-auto overflow-x-hidden">{children}</div>
+        {onCollapse && (
+          <button
+            onClick={onCollapse}
+            className="flex items-center justify-center h-10 w-full border-t border-[hsl(var(--border))] hover:bg-[hsl(var(--accent))] text-[hsl(var(--muted-foreground))] hover:text-[hsl(var(--foreground))] transition-colors shrink-0"
+          >
+            {collapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
+          </button>
+        )}
+      </div>
+    </SidebarCtx.Provider>
+  )
+)
+Sidebar.displayName = 'Sidebar'
+
+export const SidebarHeader = makeSlot('SidebarHeader', 'px-3 py-4 border-b border-[hsl(var(--border))] shrink-0')
+export const SidebarContent = makeSlot('SidebarContent', 'flex-1 overflow-y-auto py-2')
+export const SidebarFooter = makeSlot('SidebarFooter', 'px-3 py-3 border-t border-[hsl(var(--border))] shrink-0')
+export const SidebarGroup = makeSlot('SidebarGroup', 'mb-2')
+export const SidebarSeparator = makeSlot('SidebarSeparator', 'h-px bg-[hsl(var(--border))] mx-3 my-2')
+
+export const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { collapsed } = useSidebarCtx()
+    return (
+      <div
+        ref={ref}
+        className={cn('px-3 py-1 text-xs font-semibold text-[hsl(var(--muted-foreground))] uppercase tracking-wider', collapsed && 'sr-only', className)}
+        {...props}
+      />
+    )
+  }
+)
+SidebarGroupLabel.displayName = 'SidebarGroupLabel'
+
+export interface SidebarItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick'> {
+  icon?: React.ReactNode
+  label: string
+  active?: boolean
+  href?: string
+  badge?: string | number
+  onClick?: React.MouseEventHandler<HTMLElement>
+}
+
+export const SidebarItem = React.forwardRef<HTMLDivElement, SidebarItemProps>(
+  ({ className, icon, label, active, href, badge, onClick, ...props }, ref) => {
+    const { collapsed } = useSidebarCtx()
+    const cls = cn(
+      'flex items-center gap-2.5 px-3 py-2 rounded-md cursor-pointer transition-colors mx-1 text-sm',
+      active
+        ? 'bg-[hsl(var(--accent))] text-[hsl(var(--foreground))] font-medium'
+        : 'text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))]',
+      collapsed && 'justify-center px-0 mx-2',
+      className
+    )
+    const inner = (
+      <>
+        {icon && <span className="shrink-0 flex items-center justify-center w-4 h-4">{icon}</span>}
+        {!collapsed && <span className="flex-1 min-w-0 truncate">{label}</span>}
+        {!collapsed && badge !== undefined && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded-full bg-[hsl(var(--primary))] bg-opacity-10 text-[hsl(var(--primary))] shrink-0 font-medium">{badge}</span>
+        )}
+      </>
+    )
+    if (href) return <a href={href} className={cls} onClick={onClick}>{inner}</a>
+    return <div ref={ref} role="button" tabIndex={0} className={cls} onClick={onClick} {...props}>{inner}</div>
+  }
+)
+SidebarItem.displayName = 'SidebarItem'

package/src/layouts/Sidebar/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Sidebar'

package/src/layouts/SplitPage/SplitPage.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { SplitPage } from './SplitPage'
+
+// TODO: add all variants
+const meta: Meta<typeof SplitPage> = {
+  title: 'Layouts/SplitPage',
+  component: SplitPage,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SplitPage>
+
+export const Default: Story = {}

package/src/layouts/SplitPage/SplitPage.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { SplitPage } from './SplitPage'
+
+// TODO: add full a11y + variant tests
+describe('SplitPage', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<SplitPage />)).not.toThrow()
+  })
+})

package/src/layouts/SplitPage/SplitPage.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export const SplitPage = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex h-full w-full overflow-hidden', className)} {...props} />
+  )
+)
+SplitPage.displayName = 'SplitPage'
+
+export interface SplitPageListProps extends React.HTMLAttributes<HTMLDivElement> {
+  width?: string
+}
+
+export const SplitPageList = React.forwardRef<HTMLDivElement, SplitPageListProps>(
+  ({ className, width = '320px', style, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('shrink-0 h-full overflow-auto border-r border-[hsl(var(--border))]', className)}
+      style={{ width, ...style }}
+      {...props}
+    />
+  )
+)
+SplitPageList.displayName = 'SplitPageList'
+
+export const SplitPageDetail = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex-1 min-w-0 h-full overflow-auto', className)} {...props} />
+  )
+)
+SplitPageDetail.displayName = 'SplitPageDetail'

package/src/layouts/SplitPage/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './SplitPage'

package/src/layouts/Stack/Stack.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Stack } from './Stack'
+
+// TODO: add all variants
+const meta: Meta<typeof Stack> = {
+  title: 'Layouts/Stack',
+  component: Stack,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Stack>
+
+export const Default: Story = {}

package/src/layouts/Stack/Stack.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Stack } from './Stack'
+
+// TODO: add full a11y + variant tests
+describe('Stack', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Stack />)).not.toThrow()
+  })
+})

package/src/layouts/Stack/Stack.tsx

@@ -0,0 +1,56 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+type Direction = 'row' | 'col' | 'row-reverse' | 'col-reverse'
+type Align = 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+type Justify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
+
+const dirMap: Record<Direction, string> = {
+  row: 'flex-row', col: 'flex-col',
+  'row-reverse': 'flex-row-reverse', 'col-reverse': 'flex-col-reverse',
+}
+const alignMap: Record<Align, string> = {
+  start: 'items-start', center: 'items-center', end: 'items-end',
+  stretch: 'items-stretch', baseline: 'items-baseline',
+}
+const justifyMap: Record<Justify, string> = {
+  start: 'justify-start', center: 'justify-center', end: 'justify-end',
+  between: 'justify-between', around: 'justify-around', evenly: 'justify-evenly',
+}
+
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+  gap?: number
+  direction?: Direction
+  align?: Align
+  justify?: Justify
+  wrap?: boolean
+}
+
+export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
+  ({ className, gap, direction = 'col', align, justify, wrap, style, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'flex',
+        dirMap[direction],
+        align && alignMap[align],
+        justify && justifyMap[justify],
+        wrap && 'flex-wrap',
+        className
+      )}
+      style={{ ...(gap !== undefined ? { gap: `${gap * 4}px` } : {}), ...style }}
+      {...props}
+    />
+  )
+)
+Stack.displayName = 'Stack'
+
+export const HStack = React.forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
+  (props, ref) => <Stack ref={ref} direction="row" {...props} />
+)
+HStack.displayName = 'HStack'
+
+export const VStack = React.forwardRef<HTMLDivElement, Omit<StackProps, 'direction'>>(
+  (props, ref) => <Stack ref={ref} direction="col" {...props} />
+)
+VStack.displayName = 'VStack'

package/src/layouts/Stack/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Stack'

package/src/layouts/app-shell.tsx

@@ -0,0 +1,129 @@
+'use client'
+
+import React from 'react'
+import { Menu, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+interface AppShellCtxValue {
+  collapsed: boolean
+  setCollapsed: (v: boolean) => void
+  mobileOpen: boolean
+  setMobileOpen: (v: boolean) => void
+}
+
+const AppShellCtx = React.createContext<AppShellCtxValue>({
+  collapsed: false,
+  setCollapsed: () => {},
+  mobileOpen: false,
+  setMobileOpen: () => {},
+})
+
+export const useAppShell = () => React.useContext(AppShellCtx)
+
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultCollapsed?: boolean
+}
+
+export const AppShell = React.forwardRef<HTMLDivElement, AppShellProps>(
+  ({ className, defaultCollapsed = false, children, ...props }, ref) => {
+    const [collapsed, setCollapsed] = React.useState(defaultCollapsed)
+    const [mobileOpen, setMobileOpen] = React.useState(false)
+
+    // Close mobile sidebar on nav link clicks inside the shell
+    React.useEffect(() => {
+      const handleClick = (e: MouseEvent) => {
+        const target = e.target as HTMLElement
+        if (target.closest('a[href]') || target.closest('[data-mobile-close]')) {
+          setMobileOpen(false)
+        }
+      }
+      document.addEventListener('click', handleClick)
+      return () => document.removeEventListener('click', handleClick)
+    }, [])
+
+    return (
+      <AppShellCtx.Provider value={{ collapsed, setCollapsed, mobileOpen, setMobileOpen }}>
+        <div
+          ref={ref}
+          className={cn('flex h-screen w-full overflow-hidden bg-background', className)}
+          {...props}
+        >
+          {/* Mobile backdrop — rendered inside AppShell so it doesn't break SSR */}
+          {mobileOpen && (
+            <div
+              className="fixed inset-0 z-40 bg-black/50 md:hidden"
+              onClick={() => setMobileOpen(false)}
+            />
+          )}
+          {children}
+        </div>
+      </AppShellCtx.Provider>
+    )
+  }
+)
+AppShell.displayName = 'AppShell'
+
+/**
+ * Sidebar wrapper.
+ * On MOBILE  → hidden (display: none) by default; shown as a fixed overlay when mobileOpen=true.
+ * On DESKTOP → always visible as a normal flex child.
+ *
+ * ALWAYS wrap <Sidebar> in <AppShellSidebar> — never put <Sidebar> directly in <AppShell>.
+ * Without this wrapper the sidebar is visible on all screen sizes.
+ */
+export const AppShellSidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { mobileOpen } = useAppShell()
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'shrink-0 h-full',
+          // Mobile: hidden by default; shows as fixed overlay when open
+          mobileOpen
+            ? 'fixed inset-y-0 left-0 z-50 flex'
+            : 'hidden md:flex',
+          // Desktop: always visible as a normal relative element
+          'md:relative',
+          className
+        )}
+        {...props}
+      />
+    )
+  }
+)
+AppShellSidebar.displayName = 'AppShellSidebar'
+
+export const AppShellMain = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex-1 min-w-0 flex flex-col overflow-auto', className)} {...props} />
+  )
+)
+AppShellMain.displayName = 'AppShellMain'
+
+/**
+ * Hamburger/close button — place in your mobile header bar (md:hidden).
+ * Toggles the sidebar overlay on mobile.
+ */
+export const MobileSidebarTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, ...props }, ref) => {
+    const { mobileOpen, setMobileOpen } = useAppShell()
+    return (
+      <button
+        ref={ref}
+        onClick={() => setMobileOpen(!mobileOpen)}
+        aria-label={mobileOpen ? 'Close menu' : 'Open menu'}
+        className={cn(
+          'md:hidden inline-flex items-center justify-center rounded-md p-2',
+          'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          className
+        )}
+        {...props}
+      >
+        {mobileOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
+      </button>
+    )
+  }
+)
+MobileSidebarTrigger.displayName = 'MobileSidebarTrigger'

package/src/layouts/container.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'
+
+const sizeMap: Record<ContainerSize, string> = {
+  sm: 'max-w-screen-sm',
+  md: 'max-w-screen-md',
+  lg: 'max-w-screen-lg',
+  xl: 'max-w-screen-xl',
+  full: 'max-w-full',
+}
+
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: ContainerSize
+  noPadding?: boolean
+}
+
+export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, size = 'lg', noPadding = false, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'mx-auto w-full',
+        sizeMap[size],
+        !noPadding && 'px-4 sm:px-6 lg:px-8',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Container.displayName = 'Container'

package/src/layouts/navbar.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export interface NavbarProps extends React.HTMLAttributes<HTMLElement> {
+  sticky?: boolean
+  border?: boolean
+}
+
+export const Navbar = React.forwardRef<HTMLElement, NavbarProps>(
+  ({ className, sticky = false, border = true, ...props }, ref) => (
+    <nav
+      ref={ref}
+      className={cn(
+        'z-40 w-full h-14 flex items-center bg-[hsl(var(--background))]',
+        sticky && 'sticky top-0',
+        border && 'border-b border-[hsl(var(--border))]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Navbar.displayName = 'Navbar'
+
+export const NavbarBrand = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center gap-2 px-4 shrink-0', className)} {...props} />
+  )
+)
+NavbarBrand.displayName = 'NavbarBrand'
+
+type Align = 'start' | 'center' | 'end'
+
+const alignMap: Record<Align, string> = {
+  start: 'justify-start',
+  center: 'justify-center flex-1',
+  end: 'justify-end ml-auto',
+}
+
+export interface NavbarContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  align?: Align
+}
+
+export const NavbarContent = React.forwardRef<HTMLDivElement, NavbarContentProps>(
+  ({ className, align = 'start', ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-center gap-1 px-2', alignMap[align], className)}
+      {...props}
+    />
+  )
+)
+NavbarContent.displayName = 'NavbarContent'
+
+export const NavbarItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center', className)} {...props} />
+  )
+)
+NavbarItem.displayName = 'NavbarItem'

package/src/layouts/page.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
+  maxWidth?: string
+}
+
+export const Page = React.forwardRef<HTMLDivElement, PageProps>(
+  ({ className, maxWidth, style, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col min-h-full w-full', className)}
+      style={{ maxWidth, ...style }}
+      {...props}
+    />
+  )
+)
+Page.displayName = 'Page'
+
+export const PageHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex items-start justify-between gap-4 px-6 py-4 border-b border-[hsl(var(--border))]', className)}
+      {...props}
+    />
+  )
+)
+PageHeader.displayName = 'PageHeader'
+
+export const PageTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h1
+      ref={ref}
+      className={cn('text-2xl font-semibold tracking-tight text-[hsl(var(--foreground))]', className)}
+      {...props}
+    />
+  )
+)
+PageTitle.displayName = 'PageTitle'
+
+export const PageDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn('text-sm text-[hsl(var(--muted-foreground))] mt-1', className)} {...props} />
+  )
+)
+PageDescription.displayName = 'PageDescription'
+
+export const PageActions = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center gap-2 shrink-0', className)} {...props} />
+  )
+)
+PageActions.displayName = 'PageActions'
+
+export const PageBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex-1 p-6 flex flex-col gap-6', className)} {...props} />
+  )
+)
+PageBody.displayName = 'PageBody'

package/src/layouts/resize-box.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export interface ResizeBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  resize?: 'horizontal' | 'vertical' | 'both' | 'none'
+  minWidth?: number
+  minHeight?: number
+}
+
+export const ResizeBox = React.forwardRef<HTMLDivElement, ResizeBoxProps>(
+  ({ className, resize = 'both', minWidth = 100, minHeight = 100, style, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('overflow-auto relative', className)}
+      style={{ resize, minWidth, minHeight, ...style }}
+      {...props}
+    />
+  )
+)
+ResizeBox.displayName = 'ResizeBox'
+
+const HandleIcon = () => (
+  <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden>
+    <path d="M8 2L2 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M8 5L5 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+    <path d="M8 8L8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+  </svg>
+)
+
+export const ResizeHandle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        'absolute bottom-0 right-0 w-5 h-5 flex items-center justify-center',
+        'cursor-se-resize text-[hsl(var(--muted-foreground))] opacity-50 hover:opacity-100 transition-opacity',
+        className
+      )}
+      {...props}
+    >
+      <HandleIcon />
+    </div>
+  )
+)
+ResizeHandle.displayName = 'ResizeHandle'