@devalok/shilp-sutra-karm 0.18.0 → 0.19.0

package/docs/components/admin/admin-utils.md

@@ -0,0 +1,165 @@
+# Admin Utilities
+
+- Import: @devalok/shilp-sutra-karm/admin
+- Server-safe: Partial (date/emoji utils are server-safe; renderAdjustmentType and renderStatus return JSX)
+- Category: admin
+
+Utility functions for date formatting, status rendering, and emoji handling.
+
+Exports: AdjustmentType, renderAdjustmentType, renderStatus, formatDate, formatDateIST, formatTimeIST, formatDateWithWeekday, formatOptionalDate, getDaySuffix, isSameDay, getWeekDays, getMonthDays, getStartOfDay, getEndOfDay, removeAllEmojis, removeEmojiAtStart
+
+## Functions
+
+### renderAdjustmentType
+```ts
+function renderAdjustmentType(type: keyof typeof AdjustmentType): JSX.Element
+```
+Maps an adjustment type key to a human-readable label wrapped in a `<div>`.
+
+### AdjustmentType (constant)
+```ts
+const AdjustmentType = {
+  YEARLY_BALANCE: 'YEARLY_BALANCE',
+  CARRY_FORWARD: 'CARRY_FORWARD',
+  CASHOUT: 'CASHOUT',
+  OTHER: 'OTHER',
+} as const
+```
+
+### renderStatus
+```ts
+function renderStatus(status: string, correction?: boolean): ReactNode
+```
+Returns a `<Badge>` with color and label based on status. When `correction=true`, uses correction-specific labels (e.g. "Corrected" instead of "Approved", "Denied" instead of "Rejected").
+
+Status map (default): APPROVED=success "Approved", PENDING=warning "Pending", REJECTED=error "Denied", CANCELLED=error "Redacted", MISSING=error "Missed"
+
+Status map (correction): APPROVED=accent "Corrected", PENDING=warning "Pending", REJECTED=error "Denied", MISSING=error "Missed"
+
+### formatDate
+```ts
+function formatDate(date: Date | string): string
+```
+Formats to IST locale short date, e.g. `"14 Mar '26"`. Uses `en-IN` locale with `Asia/Kolkata` timezone.
+
+### formatDateIST
+```ts
+function formatDateIST(date: Date | string, options?: Intl.DateTimeFormatOptions): string
+```
+Formats date to IST locale string with custom options. Defaults to `Asia/Kolkata` timezone.
+
+### formatTimeIST
+```ts
+function formatTimeIST(date: Date | string, options?: Intl.DateTimeFormatOptions): string
+```
+Formats time to IST locale string with custom options. Defaults to `Asia/Kolkata` timezone.
+
+### formatDateWithWeekday
+```ts
+function formatDateWithWeekday(date: Date): string
+```
+Returns formatted date with weekday, e.g. `"14 Mar '26, Thursday"`.
+
+### formatOptionalDate
+```ts
+function formatOptionalDate(date: Date | string | '-'): string
+```
+Like `formatDate` but returns `"-"` if input is `"-"`.
+
+### getDaySuffix
+```ts
+function getDaySuffix(day: number): string
+```
+Returns day with ordinal suffix: `1` -> `"1st"`, `2` -> `"2nd"`, `11` -> `"11th"`, etc.
+
+### isSameDay
+```ts
+function isSameDay(date1: Date, date2: Date): boolean
+```
+Checks if two dates are the same calendar day. Returns `false` if either argument is not a valid Date.
+
+### getWeekDays
+```ts
+function getWeekDays(currentDate: string | Date, selectedDate: string | Date): WeekDay[]
+```
+Returns 7-day array (Sun-Sat) for the week containing `currentDate`. Each entry has `{ day, date, fullDate, isToday, isActive, hasBreak?, isAbsent? }`.
+
+### getMonthDays
+```ts
+function getMonthDays(currentDate: Date | string, selectedDate: Date | string): MonthDay[]
+```
+Returns full month grid including padding days from adjacent months. Each entry has `{ day, date, fullDate, isToday, isActive, isPadding }`.
+
+### getStartOfDay
+```ts
+function getStartOfDay(date?: Date): Date
+```
+Returns start of day (00:00:00.000). Defaults to current date.
+
+### getEndOfDay
+```ts
+function getEndOfDay(date?: Date): Date
+```
+Returns end of day (23:59:59.999). Defaults to current date.
+
+### removeAllEmojis
+```ts
+function removeAllEmojis(text?: string): string
+```
+Strips all emoji characters from a string. Returns `""` if input is undefined.
+
+### removeEmojiAtStart
+```ts
+function removeEmojiAtStart(text: string): string
+```
+Strips emoji characters only from the beginning of a string.
+
+### ApprovedAdjustments (ApprovedAdjustmentsProps) — component
+    adjustments: Adjustment[] (REQUIRED)
+    adminId: string (REQUIRED)
+    ...HTMLDivElement attributes
+
+Renders a table of approved adjustments showing user, date, days, type, reason, and approver. Displays "You" for self-approved items.
+
+## Example
+```jsx
+import {
+  renderStatus,
+  renderAdjustmentType,
+  formatDate,
+  formatDateIST,
+  removeAllEmojis,
+  ApprovedAdjustments,
+} from '@devalok/shilp-sutra-karm/admin'
+
+// Render a status badge
+{renderStatus('APPROVED')}           // -> <Badge color="success">Approved</Badge>
+{renderStatus('PENDING', true)}      // -> <Badge color="warning">Pending</Badge>
+
+// Render adjustment type
+{renderAdjustmentType('CASHOUT')}    // -> <div>Cashout</div>
+
+// Format dates
+formatDate(new Date())               // "14 Mar '26"
+formatDateIST(new Date(), { weekday: 'long' }) // "Thursday"
+formatDateWithWeekday(new Date())    // "14 Mar '26, Thursday"
+getDaySuffix(3)                      // "3rd"
+
+// Clean emoji text
+removeAllEmojis("Hello World")    // "Hello World"
+removeEmojiAtStart("Hello")       // "Hello"
+
+// Approved adjustments table
+<ApprovedAdjustments adjustments={approvedList} adminId="admin-1" />
+```
+
+## Gotchas
+- All date functions use `Asia/Kolkata` timezone and `en-IN` locale by default
+- `renderAdjustmentType` and `renderStatus` return JSX — call them as functions, not as components
+- `renderStatus` falls back to the REJECTED config for unknown status values
+- `getWeekDays` starts weeks on Sunday (weekStartsOn: 0)
+- `getMonthDays` includes padding days from previous/next months with `isPadding: true`
+
+## Changes
+### v0.9.0
+- **Added** Initial release with all admin utility functions

package/docs/components/admin/break-admin.md

@@ -0,0 +1,167 @@
+# BreakAdmin
+
+- Import: @devalok/shilp-sutra-karm/admin
+- Server-safe: No
+- Category: admin
+
+Compound component for break/leave management admin page. Uses React Context internally.
+Supports both compound usage (with children) and default layout (without children).
+
+Exports: BreakAdmin (compound), BreakAdminHeader, Breaks, LeaveRequest, BreakBalance, EditBreak, EditBreakBalance, DeleteBreak, BreakAdminSkeleton
+
+## Props
+
+### BreakAdmin.Root / BreakAdmin (BreakAdminProps)
+    currentUser: Pick<AdminUser, "id" | "name" | "role"> (REQUIRED)
+    breaks: BreakRequest[] (REQUIRED)
+    pendingRequests: BreakRequest[] (REQUIRED)
+    cashoutRequests: BreakRequest[] (default: [])
+    breakBalanceData: BreakBalanceData[] (REQUIRED)
+    breakBalance: { remainingDays: number; breakBalance: number } | null
+    userImages: Record<string, string> (REQUIRED)
+    users: AdminUser[] (REQUIRED)
+    isLoading: boolean (default: false)
+    isLoadingBreaks: boolean (default: false)
+    isLoadingRequests: boolean (default: false)
+    isLoadingBalance: boolean (default: false)
+    existingBreaks?: BreakRequest[]
+    filters?: BreakAdminFilters
+    onFilterChange?: (filters: BreakAdminFilters) => void
+    onApproveRequest?: (requestId: string, comment?: string, isCorrection?: boolean, request?: BreakRequest) => void
+    onRejectRequest?: (requestId: string, comment?: string, isCorrection?: boolean, request?: BreakRequest) => void
+    onApproveCashout?: (requestId: string) => void
+    onRejectCashout?: (requestId: string) => void
+    onRefresh?: () => void
+    onSaveBreak?: (data: { requestId: string; userId: string; status: string; adminComment: string; startDate: string; endDate: string; isEditing: boolean }) => void
+    onDeleteBreak?: () => void
+    onSaveBalance?: (data: { userId: string; cashOutDays: number; carryForward: number; year: number }) => void
+    onFetchMonthBreaks?: (month: number, year: number) => Promise<BreakRequest[]>
+    realtimeCallbacks?: RealtimeCallbacks
+    children?: ReactNode
+    ...HTMLDivElement attributes
+
+### BreakAdmin.Header
+    ...HTMLDivElement attributes (className, etc.)
+    Reads from context: filters, breakBalance, userImages, users
+
+### BreakAdmin.TabBar
+    ...HTMLDivElement attributes
+    Reads from context: activeTab, pendingRequests, breakBalanceData
+
+### BreakAdmin.BreaksPanel
+    ...HTMLDivElement attributes
+    Reads from context: breaks, userImages, existingBreaks, onFetchMonthBreaks, onSaveBreak, onDeleteBreak, onRefresh
+
+### BreakAdmin.RequestsPanel
+    ...HTMLDivElement attributes
+    Reads from context: pendingRequests, userImages, approve/reject handlers
+
+### BreakAdmin.BalancePanel
+    ...HTMLDivElement attributes
+    Reads from context: breakBalanceData, userImages, onSaveBalance
+
+### BreakAdminHeader (BreakAdminHeaderProps) — standalone
+    filters: BreakAdminFilters (REQUIRED)
+    onFilterChange: (filters: BreakAdminFilters) => void (REQUIRED)
+    breakBalance: { remainingDays: number; breakBalance: number } | null
+    userImages: Record<string, string> (REQUIRED)
+    users: AdminUser[] (REQUIRED)
+    ...HTMLDivElement attributes
+
+### Breaks (BreaksProps) — standalone
+    breaks: BreakRequest[] (REQUIRED)
+    userImages: Record<string, string> (REQUIRED)
+    existingBreaks: BreakRequest[]
+    onFetchMonthBreaks: (month: number, year: number) => Promise<BreakRequest[]>
+    onSave: (data: { requestId: string; userId: string; status: string; adminComment: string; startDate: string; endDate: string; isEditing: boolean }) => void
+    onDelete: () => void
+    onRefresh: () => void
+    ...HTMLDivElement attributes
+
+### LeaveRequest (LeaveRequestProps) — standalone
+    request: BreakRequest (REQUIRED)
+    userImages: Record<string, string> (REQUIRED)
+    handleRejectRequest: (event: MouseEvent | undefined, id: string, comment?: string) => void (REQUIRED)
+    handleApproveRequest: (event: MouseEvent | undefined, id: string, comment?: string) => void (REQUIRED)
+    commentBoxOpen: boolean (REQUIRED)
+    onCommentBoxClose: () => void (REQUIRED)
+    clickedAction: "approve" | "reject" | null (REQUIRED)
+    userId: string (REQUIRED)
+    ...HTMLDivElement attributes
+
+### BreakBalance (BreakBalanceProps) — standalone
+    breakBalanceData: BreakBalanceData[] (REQUIRED)
+    userImages: Record<string, string> (REQUIRED)
+    onSaveBalance: (data: { userId: string; cashOutDays: number; carryForward: number; year: number }) => void
+    ...HTMLDivElement attributes
+
+### EditBreak (EditBreakProps) — standalone
+    selectedLeave: BreakRequest & { numberOfDays: number } (REQUIRED)
+    existingBreaks: BreakRequest[]
+    onFetchMonthBreaks: (month: number, year: number) => Promise<BreakRequest[]>
+    onSave: (data: { requestId: string; userId: string; status: string; adminComment: string; startDate: string; endDate: string; isEditing: boolean }) => void
+    onDelete: () => void
+    ...HTMLDivElement attributes
+
+### EditBreakBalance (EditBreakBalanceProps) — standalone
+    selectedLeave: BreakBalanceData (REQUIRED)
+    onSave: (data: { userId: string; cashOutDays: number; carryForward: number; year: number }) => void
+    ...HTMLDivElement attributes
+
+### DeleteBreak (DeleteBreakProps) — standalone
+    id: string (REQUIRED)
+    userId: string (REQUIRED)
+    onDelete: () => void
+    ...HTMLDivElement attributes
+
+### BreakAdminSkeleton
+    ...HTMLDivElement attributes (className, etc.)
+
+## Supporting Types
+    BreakAdminFilters: { selectedAssociate: AdminUser | null; dateFilterStart: string | Date | null; dateFilterEnd: string | Date | null; currMonth: number; currYear: number; isOpen: boolean }
+
+## Defaults
+    isLoading=false, cashoutRequests=[], isLoadingBreaks=false, isLoadingRequests=false, isLoadingBalance=false
+
+## Example
+```jsx
+// Default layout (no children needed)
+<BreakAdmin
+  currentUser={{ id: "admin-1", name: "Admin", role: "Admin" }}
+  breaks={allBreaks}
+  pendingRequests={pending}
+  breakBalanceData={balanceData}
+  userImages={imageMap}
+  users={allUsers}
+  isLoading={isLoading}
+  onApproveRequest={handleApprove}
+  onRejectRequest={handleReject}
+  onSaveBreak={handleSaveBreak}
+  onSaveBalance={handleSaveBalance}
+/>
+
+// Compound layout (custom arrangement)
+<BreakAdmin.Root currentUser={user} breaks={b} pendingRequests={p} breakBalanceData={bd} userImages={ui} users={u}>
+  <BreakAdmin.Header />
+  <BreakAdmin.TabBar />
+  <BreakAdmin.BreaksPanel />
+  <BreakAdmin.RequestsPanel />
+  <BreakAdmin.BalancePanel />
+</BreakAdmin.Root>
+```
+
+## Gotchas
+- Without children, renders the default layout (Header + TabBar + all three panels)
+- With children, renders only the provided sub-components — you control the layout
+- Approve/reject with Cmd/Ctrl+click opens a comment box before confirming
+- `BreakAdmin.BreaksPanel` only renders when `activeTab === "breaks"`
+- `BreakAdmin.RequestsPanel` only renders when `activeTab === "requests"`
+- `BreakAdmin.BalancePanel` only renders when `activeTab === "balance"`
+- `isLoading=true` renders `BreakAdminSkeleton` instead of children
+- `onApproveRequest` receives `isCorrection` boolean and the full `request` object as 3rd/4th args
+- Toast notifications fire automatically on approve/reject success or error
+
+## Changes
+### v0.9.0
+- **Added** Compound component API replacing monolith
+- **Added** Standalone exports for BreakAdminHeader, Breaks, LeaveRequest, BreakBalance, EditBreak, EditBreakBalance, DeleteBreak

package/docs/components/board/board-column.md

@@ -0,0 +1,35 @@
+# BoardColumn
+
+- Import: @devalok/shilp-sutra-karm/board
+- Server-safe: No
+- Category: board
+
+## Props
+    column: BoardColumn (REQUIRED)
+    index: number (REQUIRED)
+    isOverlay: boolean
+    dragPreview: { taskId: string; columnId: string; index: number }
+    draggedTask: BoardTask | null
+    ...HTMLAttributes<HTMLDivElement>
+
+## Defaults
+    isOverlay=undefined, dragPreview=undefined, draggedTask=undefined
+
+## Example
+```jsx
+<BoardColumn column={column} index={0} />
+```
+
+## Gotchas
+- Must be rendered inside a BoardProvider context.
+- Reads viewMode from context to switch between TaskCard and TaskCardCompact.
+- Renders ColumnHeader, TaskContextMenu wrappers, and ColumnEmpty automatically.
+- When column.wipLimit is set and exceeded, the column background turns error-colored.
+- Fixed width defined by COLUMN_WIDTH constant.
+- Forwards ref to outer div.
+- Uses @dnd-kit useDroppable for drop target and SortableContext for task reordering.
+- Ghost silhouette (TaskGhost) is rendered at the dragPreview position during cross-column drags.
+
+## Changes
+### v0.18.0
+- **Added** Initial release

package/docs/components/board/board-provider.md

@@ -0,0 +1,89 @@
+# BoardProvider
+
+- Import: @devalok/shilp-sutra-karm/board
+- Server-safe: No
+- Category: board
+
+## Props
+    initialData: BoardData (REQUIRED)
+    currentUserId: string | null (default: null)
+    members: BoardMember[] (explicit member list for assignment dropdowns; falls back to deriving from task assignees)
+    children: ReactNode (REQUIRED)
+    onTaskMove: (taskId: string, toColumnId: string, newOrder: number) => void
+    onTaskAdd: (columnId: string, options: NewTaskOptions) => void
+    onBulkAction: (action: BulkAction) => void
+    onColumnReorder: (columnId: string, newIndex: number) => void
+    onColumnRename: (columnId: string, name: string) => void
+    onColumnDelete: (columnId: string) => void
+    onColumnToggleVisibility: (columnId: string, visible: boolean) => void
+    onColumnWipLimitChange: (columnId: string, limit: number | null) => void
+    onClickTask: (taskId: string) => void
+    onAddColumn: () => void
+    onQuickPriorityChange: (taskId: string, priority: string) => void
+    onQuickAssign: (taskId: string, userId: string) => void
+    onQuickDueDateChange: (taskId: string, date: string | null) => void
+    onQuickLabelAdd: (taskId: string, label: string) => void
+    onQuickVisibilityChange: (taskId: string, visibility: string) => void
+    onQuickDelete: (taskId: string) => void
+
+## Defaults
+    currentUserId=null
+
+## Context Value (useBoardContext)
+    columns: BoardColumn[] (filtered)
+    rawColumns: BoardColumn[] (unfiltered)
+    members: BoardMember[]
+    viewMode: BoardViewMode
+    setViewMode: (mode: BoardViewMode) => void
+    filters: BoardFilters
+    setFilters: (updates: Partial<BoardFilters>) => void
+    clearFilters: () => void
+    hasActiveFilters: boolean
+    selectedTaskIds: Set<string>
+    toggleTaskSelection: (taskId: string) => void
+    selectRange: (fromId: string, toId: string) => void
+    selectAll: () => void
+    clearSelection: () => void
+    focusedTaskId: string | null
+    setFocusedTaskId: (id: string | null) => void
+    currentUserId: string | null
+    highlightMyTasks: boolean
+    setHighlightMyTasks: (on: boolean) => void
+    activeTask: BoardTask | null
+    setActiveTask: (task: BoardTask | null) => void
+    onTaskMove: (taskId: string, toColumnId: string, newOrder: number) => void
+    onTaskAdd: (columnId: string, options: NewTaskOptions) => void
+    onBulkAction: (action: BulkAction) => void
+    onColumnReorder: (columnId: string, newIndex: number) => void
+    onColumnRename: (columnId: string, name: string) => void
+    onColumnDelete: (columnId: string) => void
+    onColumnToggleVisibility: (columnId: string, visible: boolean) => void
+    onColumnWipLimitChange: (columnId: string, limit: number | null) => void
+    onClickTask: (taskId: string) => void
+    onAddColumn: () => void
+    onQuickPriorityChange: (taskId: string, priority: string) => void
+    onQuickAssign: (taskId: string, userId: string) => void
+    onQuickDueDateChange: (taskId: string, date: string | null) => void
+    onQuickLabelAdd: (taskId: string, label: string) => void
+    onQuickVisibilityChange: (taskId: string, visibility: string) => void
+    onQuickDelete: (taskId: string) => void
+
+## Example
+```jsx
+<BoardProvider initialData={data} currentUserId="user-1" onTaskMove={handleMove}>
+  <BoardToolbar />
+  <BulkActionBar />
+  {/* custom layout */}
+</BoardProvider>
+```
+
+## Gotchas
+- Must wrap all board sub-components (BoardColumn, BoardToolbar, BulkActionBar, etc.).
+- useBoardContext() throws if used outside BoardProvider.
+- All callback props default to no-op internally.
+- columns in context are filtered; use rawColumns for unfiltered data.
+- Syncs with initialData changes via useEffect.
+
+## Changes
+### v0.18.0
+- **Added** Initial release

package/docs/components/board/board-toolbar.md

@@ -0,0 +1,36 @@
+# BoardToolbar
+
+- Import: @devalok/shilp-sutra-karm/board
+- Server-safe: No
+- Category: board
+
+## Props
+    ...HTMLAttributes<HTMLDivElement>
+
+## Features
+- Debounced search input (200ms)
+- Priority filter (multi-select checkbox dropdown: LOW, MEDIUM, HIGH, URGENT)
+- Assignee filter (multi-select checkbox dropdown, derived from board members)
+- Label filter (multi-select checkbox dropdown, derived from task labels)
+- Due date filter (radio: overdue, today, this-week)
+- "Highlight my tasks" toggle button
+- View mode toggle (SegmentedControl: Board / Compact)
+- Active filter chips with individual dismiss and "Clear all" button
+
+## Example
+```jsx
+{/* Rendered automatically by KanbanBoard, or manually inside BoardProvider */}
+<BoardProvider initialData={data}>
+  <BoardToolbar />
+</BoardProvider>
+```
+
+## Gotchas
+- Must be rendered inside a BoardProvider context.
+- No props needed — all state comes from context.
+- Assignee and Label filter dropdowns only render when members/labels exist.
+- Forwards ref to outer div.
+
+## Changes
+### v0.18.0
+- **Added** Initial release

package/docs/components/board/board-types.md

@@ -0,0 +1,62 @@
+# Board Types
+
+- Import: @devalok/shilp-sutra-karm/board
+- Category: board
+
+## BoardTask
+    id: string
+    taskId: string (display ID, e.g. "KRM-42")
+    title: string
+    priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT'
+    labels: string[]
+    dueDate: string | null
+    isBlocked: boolean
+    visibility: 'INTERNAL' | 'EVERYONE'
+    owner: BoardMember | null
+    assignees: BoardMember[]
+    subtaskCount: number
+    subtasksDone: number
+
+## BoardMember
+    id: string
+    name: string
+    image: string | null
+
+## BoardColumn
+    id: string
+    name: string
+    isClientVisible: boolean (optional)
+    wipLimit: number (optional)
+    tasks: BoardTask[]
+
+## BoardData
+    columns: BoardColumn[]
+
+## BoardFilters
+    search: string
+    assignees: string[]
+    priorities: string[]
+    labels: string[]
+    dueDateRange: 'overdue' | 'today' | 'this-week' | 'none' | null
+
+## BoardViewMode
+    'default' | 'compact'
+
+## NewTaskOptions
+    title: string
+    ownerId: string | null (optional)
+    dueDate: string | null (optional)
+
+## BulkAction
+    type: 'move' | 'priority' | 'assign' | 'label' | 'dueDate' | 'delete' | 'visibility'
+    taskIds: string[]
+    value: string | null (optional)
+
+## Gotchas
+- BoardTask.taskId is the human-readable display ID (e.g. "KRM-42"), not the same as BoardTask.id (database UUID).
+- BoardColumn.wipLimit is optional; when set and exceeded, the column renders in error state.
+- BoardFilters.dueDateRange can be null or 'none' to indicate no filter.
+
+## Changes
+### v0.18.0
+- **Added** Initial release

package/docs/components/board/bulk-action-bar.md

@@ -0,0 +1,38 @@
+# BulkActionBar
+
+- Import: @devalok/shilp-sutra-karm/board
+- Server-safe: No
+- Category: board
+
+## Props
+    ...HTMLAttributes<HTMLDivElement>
+
+## Features
+- Animates in/out when tasks are selected (AnimatePresence)
+- Shows selection count with clear button
+- Dropdown actions: Move to column, Set priority, Assign, Set visibility
+- Delete button (right-aligned, error-colored)
+- All actions trigger onBulkAction from context then clear selection
+
+## Bulk Action Shape
+    { type: 'move' | 'priority' | 'assign' | 'label' | 'dueDate' | 'delete' | 'visibility', taskIds: string[], value?: string | null }
+
+## Example
+```jsx
+{/* Rendered automatically by KanbanBoard, or manually inside BoardProvider */}
+<BoardProvider initialData={data} onBulkAction={handleBulk}>
+  <BulkActionBar />
+</BoardProvider>
+```
+
+## Gotchas
+- Must be rendered inside a BoardProvider context.
+- No props needed — all state comes from context.
+- Only visible when selectedTaskIds.size > 0.
+- Assign dropdown only renders when members exist.
+- Forwards ref to outer div.
+- Uses aria-live="polite" for screen reader announcements.
+
+## Changes
+### v0.18.0
+- **Added** Initial release

package/docs/components/board/column-empty.md

@@ -0,0 +1,33 @@
+# ColumnEmpty
+
+- Import: @devalok/shilp-sutra-karm/board
+- Server-safe: No
+- Category: board
+
+## Props
+    index: number (REQUIRED) — used to cycle through 4 illustration variants
+    onAddTask: () => void
+    isDropTarget: boolean (default: false)
+    ...HTMLAttributes<HTMLDivElement>
+
+## Defaults
+    isDropTarget=false
+
+## Illustrations
+Cycles through 4 SVG illustrations by column index:
+0: Clipboard, 1: Stacked Cards, 2: Checkmark Circle, 3: Inbox
+
+## Example
+```jsx
+<ColumnEmpty index={0} onAddTask={() => addTask(columnId)} />
+<ColumnEmpty index={1} isDropTarget />
+```
+
+## Gotchas
+- When isDropTarget=true, shows "Drop tasks here" text instead of the default empty state ("No tasks yet" + "Add a task" button).
+- Illustrations use currentColor (inherits text-surface-fg-subtle).
+- Forwards ref to outer div.
+
+## Changes
+### v0.18.0
+- **Added** Initial release

package/docs/components/board/column-header.md

@@ -0,0 +1,36 @@
+# ColumnHeader
+
+- Import: @devalok/shilp-sutra-karm/board
+- Server-safe: No
+- Category: board
+
+## Props
+    column: BoardColumn (REQUIRED)
+    index: number (REQUIRED)
+    ...HTMLAttributes<HTMLDivElement>
+
+## Features
+- Color-coded accent dot (cycles through COLUMN_ACCENT_COLORS by index)
+- Column name with task count badge
+- Double-click to rename (inline Input)
+- WIP limit display with exceeded state (error color)
+- Inline WIP limit editor
+- Quick-add task form (title, owner picker, due date picker)
+- Column options dropdown: Rename, Set WIP Limit, Show/Hide from client, Delete column
+- Avatar stack of unique members in the column (AvatarGroup, max 3)
+
+## Example
+```jsx
+{/* Rendered automatically by BoardColumn */}
+<ColumnHeader column={column} index={0} />
+```
+
+## Gotchas
+- Must be rendered inside a BoardProvider context.
+- Reads members, onColumnRename, onColumnDelete, onColumnToggleVisibility, onTaskAdd from context.
+- Quick-add form expands with animation (AnimatePresence + framer-motion).
+- Forwards ref to outer div.
+
+## Changes
+### v0.18.0
+- **Added** Initial release