@devalok/shilp-sutra 0.34.1 → 0.36.1

package/docs/components/composed/file-preview.md

@@ -1,40 +1,40 @@
-# FilePreview
-
-- Import: @devalok/shilp-sutra/composed/file-preview
-- Server-safe: No
-- Category: composed
-
-## Props
-    url: string (file URL — required)
-    type: "image" | "pdf" | "video" | "audio" | "embed" (auto-detected from URL/mimeType)
-    mimeType: string (helps auto-detection)
-    alt: string (image alt text)
-    initialPage: number (PDF starting page, default 1)
-    fileName: string (displayed in file info bar)
-    fileSize: string (displayed as badge, e.g. "2.4 MB")
-    onError: (error: string) => void (called on load failures)
-
-## Defaults
-    initialPage={1}, type auto-detected
-
-## Features by Type
-
-**Image:** Pinch/scroll zoom (0.1x–8x), double-click toggle, floating toolbar (zoom %/reset/fullscreen), keyboard (+/-/0/F/Esc)
-**PDF:** react-pdf page nav (prev/next + direct input), keyboard (←→), crossfade between pages
-**Video:** Custom branded player, play overlay, auto-hiding controls, progress bar + scrub handle, mute, fullscreen
-**Audio:** Branded mini-player, full-width progress bar with hover tooltip + scrub handle, volume, file name display
-**Embed:** 16:9 aspect ratio, auto-converts YouTube/Vimeo/Figma/Loom URLs, 15s timeout
-
-## Example
-```jsx
-<FilePreview url="/uploads/mockup.png" fileName="mockup.png" fileSize="2.4 MB" />
-<FilePreview url="/docs/contract.pdf" initialPage={3} />
-<FilePreview url="https://youtube.com/watch?v=..." />
-```
-
-## Gotchas
-- Image/PDF lazy-loaded (Skeleton on first render)
-- PDF worker from unpkg CDN — configure workerSrc for offline apps
-- All types have error fallback with download link
-- Embed URLs auto-converted to embed format
-- Audio player doesn't show separate Download button (integrated in card)
+# FilePreview
+
+- Import: @devalok/shilp-sutra/composed/file-preview
+- Server-safe: No
+- Category: composed
+
+## Props
+    url: string (file URL — required)
+    type: "image" | "pdf" | "video" | "audio" | "embed" (auto-detected from URL/mimeType)
+    mimeType: string (helps auto-detection)
+    alt: string (image alt text)
+    initialPage: number (PDF starting page, default 1)
+    fileName: string (displayed in file info bar)
+    fileSize: string (displayed as badge, e.g. "2.4 MB")
+    onError: (error: string) => void (called on load failures)
+
+## Defaults
+    initialPage={1}, type auto-detected
+
+## Features by Type
+
+**Image:** Pinch/scroll zoom (0.1x–8x), double-click toggle, floating toolbar (zoom %/reset/fullscreen), keyboard (+/-/0/F/Esc)
+**PDF:** react-pdf page nav (prev/next + direct input), keyboard (←→), crossfade between pages
+**Video:** Custom branded player, play overlay, auto-hiding controls, progress bar + scrub handle, mute, fullscreen
+**Audio:** Branded mini-player, full-width progress bar with hover tooltip + scrub handle, volume, file name display
+**Embed:** 16:9 aspect ratio, auto-converts YouTube/Vimeo/Figma/Loom URLs, 15s timeout
+
+## Example
+```jsx
+<FilePreview url="/uploads/mockup.png" fileName="mockup.png" fileSize="2.4 MB" />
+<FilePreview url="/docs/contract.pdf" initialPage={3} />
+<FilePreview url="https://youtube.com/watch?v=..." />
+```
+
+## Gotchas
+- Image/PDF lazy-loaded (Skeleton on first render)
+- PDF worker from unpkg CDN — configure workerSrc for offline apps
+- All types have error fallback with download link
+- Embed URLs auto-converted to embed format
+- Audio player doesn't show separate Download button (integrated in card)

package/docs/components/composed/filter-bar.md

@@ -1,57 +1,57 @@
-# FilterBar
-
-- Import: @devalok/shilp-sutra/composed/filter-bar
-- Server-safe: No
-- Category: composed
-
-## Exports
-FilterBar, FilterSelect, FilterMultiSelect
-
-## Props
-
-### FilterBar
-    searchValue: string
-    onSearchChange: (value: string) => void (renders SearchInput when provided)
-    searchPlaceholder: string
-    onClearAll: () => void (renders "Clear all" button when provided)
-    size: "xs" | "sm" | "md" (propagated to all child controls via context)
-    children: ReactNode (FilterSelect / FilterMultiSelect controls)
-
-### FilterSelect
-    label: string
-    value: string
-    onValueChange: (value: string) => void
-    options: { value: string; label: string }[]
-    allLabel: string (label for the "all" option)
-
-### FilterMultiSelect
-    label: string
-    value: string[]
-    onValueChange: (values: string[]) => void
-    options: { value: string; label: string }[]
-
-## Defaults
-    size="sm", searchPlaceholder="Search...", allLabel="All"
-
-## Example
-```jsx
-<FilterBar searchValue={search} onSearchChange={setSearch} onClearAll={clearFilters}>
-  <FilterSelect
-    label="Status"
-    value={status}
-    onValueChange={setStatus}
-    options={[{ value: 'active', label: 'Active' }, { value: 'done', label: 'Done' }]}
-  />
-  <FilterMultiSelect
-    label="Assignees"
-    value={assignees}
-    onValueChange={setAssignees}
-    options={memberOptions}
-  />
-</FilterBar>
-```
-
-## Gotchas
-- FilterSelect and FilterMultiSelect must be direct children of FilterBar to inherit the size context
-- FilterSelect uses `"all"` as the sentinel value for "no filter" — do not use `"all"` as a real option value
-- Active filters get an accent border highlight automatically
+# FilterBar
+
+- Import: @devalok/shilp-sutra/composed/filter-bar
+- Server-safe: No
+- Category: composed
+
+## Exports
+FilterBar, FilterSelect, FilterMultiSelect
+
+## Props
+
+### FilterBar
+    searchValue: string
+    onSearchChange: (value: string) => void (renders SearchInput when provided)
+    searchPlaceholder: string
+    onClearAll: () => void (renders "Clear all" button when provided)
+    size: "xs" | "sm" | "md" (propagated to all child controls via context)
+    children: ReactNode (FilterSelect / FilterMultiSelect controls)
+
+### FilterSelect
+    label: string
+    value: string
+    onValueChange: (value: string) => void
+    options: { value: string; label: string }[]
+    allLabel: string (label for the "all" option)
+
+### FilterMultiSelect
+    label: string
+    value: string[]
+    onValueChange: (values: string[]) => void
+    options: { value: string; label: string }[]
+
+## Defaults
+    size="sm", searchPlaceholder="Search...", allLabel="All"
+
+## Example
+```jsx
+<FilterBar searchValue={search} onSearchChange={setSearch} onClearAll={clearFilters}>
+  <FilterSelect
+    label="Status"
+    value={status}
+    onValueChange={setStatus}
+    options={[{ value: 'active', label: 'Active' }, { value: 'done', label: 'Done' }]}
+  />
+  <FilterMultiSelect
+    label="Assignees"
+    value={assignees}
+    onValueChange={setAssignees}
+    options={memberOptions}
+  />
+</FilterBar>
+```
+
+## Gotchas
+- FilterSelect and FilterMultiSelect must be direct children of FilterBar to inherit the size context
+- FilterSelect uses `"all"` as the sentinel value for "no filter" — do not use `"all"` as a real option value
+- Active filters get an accent border highlight automatically

package/docs/components/composed/form-section.md

@@ -1,31 +1,31 @@
-# FormSection
-
-- Import: @devalok/shilp-sutra/composed/form-section
-- Server-safe: No
-- Category: composed
-
-## Props
-    title: string
-    description: string (subtitle text below the title)
-    collapsible: boolean (wraps content in a Collapsible)
-    defaultOpen: boolean (initial open state when collapsible)
-    children: ReactNode (form fields)
-
-## Defaults
-    collapsible={false}, defaultOpen={true}
-
-## Example
-```jsx
-<FormSection title="General" description="Basic project settings">
-  <FormField .../>
-  <FormField .../>
-</FormSection>
-
-<FormSection title="Advanced" collapsible defaultOpen={false}>
-  <FormField .../>
-</FormSection>
-```
-
-## Gotchas
-- `defaultOpen` only applies when `collapsible={true}` — otherwise the section is always open
-- Renders a horizontal rule between the header and content automatically
+# FormSection
+
+- Import: @devalok/shilp-sutra/composed/form-section
+- Server-safe: No
+- Category: composed
+
+## Props
+    title: string
+    description: string (subtitle text below the title)
+    collapsible: boolean (wraps content in a Collapsible)
+    defaultOpen: boolean (initial open state when collapsible)
+    children: ReactNode (form fields)
+
+## Defaults
+    collapsible={false}, defaultOpen={true}
+
+## Example
+```jsx
+<FormSection title="General" description="Basic project settings">
+  <FormField .../>
+  <FormField .../>
+</FormSection>
+
+<FormSection title="Advanced" collapsible defaultOpen={false}>
+  <FormField .../>
+</FormSection>
+```
+
+## Gotchas
+- `defaultOpen` only applies when `collapsible={true}` — otherwise the section is always open
+- Renders a horizontal rule between the header and content automatically

package/docs/components/composed/global-loading.md

@@ -1,27 +1,27 @@
-# GlobalLoading
-
-- Import: @devalok/shilp-sutra/composed/global-loading
-- Server-safe: No
-- Category: composed
-
-## Props
-    isLoading: boolean (REQUIRED)
-
-## Defaults
-    None
-
-## Example
-```jsx
-<GlobalLoading isLoading={isNavigating} />
-```
-
-## Gotchas
-- Fixed-position bar at top of viewport (z-toast layer)
-- Renders nothing when `isLoading` is false
-
-## Changes
-### v0.18.0
-- **Fixed** Track `setTimeout` with ref, add cleanup on unmount
-
-### v0.1.0
-- **Added** Initial release
+# GlobalLoading
+
+- Import: @devalok/shilp-sutra/composed/global-loading
+- Server-safe: No
+- Category: composed
+
+## Props
+    isLoading: boolean (REQUIRED)
+
+## Defaults
+    None
+
+## Example
+```jsx
+<GlobalLoading isLoading={isNavigating} />
+```
+
+## Gotchas
+- Fixed-position bar at top of viewport (z-toast layer)
+- Renders nothing when `isLoading` is false
+
+## Changes
+### v0.18.0
+- **Fixed** Track `setTimeout` with ref, add cleanup on unmount
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/inline-edit.md

@@ -1,35 +1,35 @@
-# InlineEdit
-
-- Import: @devalok/shilp-sutra/composed/inline-edit
-- Server-safe: No
-- Category: composed
-
-## Props
-    value: string (current text value)
-    onSave: (newValue: string) => void | Promise<void> (called on commit; async shows spinner)
-    placeholder: string (shown when value is empty)
-    textClassName: string (CSS class for the editable text, e.g. "text-ds-lg font-semibold")
-    readOnly: boolean
-    maxLength: number
-    saving: boolean (external saving state — shows spinner, disables editing)
-
-## Defaults
-    placeholder="Click to edit", readOnly={false}, saving={false}
-
-## Example
-```jsx
-<InlineEdit
-  value={title}
-  onSave={(v) => updateTitle(v)}
-  textClassName="text-ds-lg font-semibold"
-/>
-```
-
-## Gotchas
-- Uses contentEditable — the text IS the editor. No input field appears.
-- Click to focus → cursor appears in text. Type to edit. Enter saves. Escape reverts.
-- Text is auto-selected on focus (like renaming a file in Finder)
-- Paste is restricted to plain text (no rich content)
-- The value is trimmed before calling `onSave`; if unchanged, `onSave` is not called
-- If `onSave` returns a Promise, a spinner is shown and editing is disabled until it resolves
-- On Promise rejection, the text reverts to the original value
+# InlineEdit
+
+- Import: @devalok/shilp-sutra/composed/inline-edit
+- Server-safe: No
+- Category: composed
+
+## Props
+    value: string (current text value)
+    onSave: (newValue: string) => void | Promise<void> (called on commit; async shows spinner)
+    placeholder: string (shown when value is empty)
+    textClassName: string (CSS class for the editable text, e.g. "text-ds-lg font-semibold")
+    readOnly: boolean
+    maxLength: number
+    saving: boolean (external saving state — shows spinner, disables editing)
+
+## Defaults
+    placeholder="Click to edit", readOnly={false}, saving={false}
+
+## Example
+```jsx
+<InlineEdit
+  value={title}
+  onSave={(v) => updateTitle(v)}
+  textClassName="text-ds-lg font-semibold"
+/>
+```
+
+## Gotchas
+- Uses contentEditable — the text IS the editor. No input field appears.
+- Click to focus → cursor appears in text. Type to edit. Enter saves. Escape reverts.
+- Text is auto-selected on focus (like renaming a file in Finder)
+- Paste is restricted to plain text (no rich content)
+- The value is trimmed before calling `onSave`; if unchanged, `onSave` is not called
+- If `onSave` returns a Promise, a spinner is shown and editing is disabled until it resolves
+- On Promise rejection, the text reverts to the original value

package/docs/components/composed/loading-skeleton.md

@@ -1,51 +1,51 @@
-# LoadingSkeleton
-
-- Import: @devalok/shilp-sutra/composed/loading-skeleton
-- Server-safe: Yes
-- Category: composed
-
-Exports: CardSkeleton, TableSkeleton, BoardSkeleton, ListSkeleton
-
-## Props
-
-### CardSkeleton
-    className: string
-
-### TableSkeleton
-    rows: number (default: 5)
-    columns: number (default: 4)
-    className: string
-
-### BoardSkeleton
-    columns: number (default: 4)
-    cardsPerColumn: number (default: 3)
-    className: string
-
-### ListSkeleton
-    rows: number (default: 6)
-    showAvatar: boolean (default: true)
-    className: string
-
-## Defaults
-    TableSkeleton: rows=5, columns=4
-    BoardSkeleton: columns=4, cardsPerColumn=3
-    ListSkeleton: rows=6, showAvatar=true
-
-## Example
-```jsx
-<CardSkeleton />
-<TableSkeleton rows={8} columns={5} />
-<BoardSkeleton columns={3} cardsPerColumn={4} />
-<ListSkeleton rows={10} showAvatar={false} />
-```
-
-## Gotchas
-- Server-safe: can be imported directly in Next.js Server Components
-- These are pre-composed skeleton layouts — for individual skeleton shapes, use the `Skeleton` UI component
-
-## Changes
-### v0.2.0
-- **Added** Identified as server-safe component
-
-### v0.1.0
-- **Added** Initial release
+# LoadingSkeleton
+
+- Import: @devalok/shilp-sutra/composed/loading-skeleton
+- Server-safe: Yes
+- Category: composed
+
+Exports: CardSkeleton, TableSkeleton, BoardSkeleton, ListSkeleton
+
+## Props
+
+### CardSkeleton
+    className: string
+
+### TableSkeleton
+    rows: number (default: 5)
+    columns: number (default: 4)
+    className: string
+
+### BoardSkeleton
+    columns: number (default: 4)
+    cardsPerColumn: number (default: 3)
+    className: string
+
+### ListSkeleton
+    rows: number (default: 6)
+    showAvatar: boolean (default: true)
+    className: string
+
+## Defaults
+    TableSkeleton: rows=5, columns=4
+    BoardSkeleton: columns=4, cardsPerColumn=3
+    ListSkeleton: rows=6, showAvatar=true
+
+## Example
+```jsx
+<CardSkeleton />
+<TableSkeleton rows={8} columns={5} />
+<BoardSkeleton columns={3} cardsPerColumn={4} />
+<ListSkeleton rows={10} showAvatar={false} />
+```
+
+## Gotchas
+- Server-safe: can be imported directly in Next.js Server Components
+- These are pre-composed skeleton layouts — for individual skeleton shapes, use the `Skeleton` UI component
+
+## Changes
+### v0.2.0
+- **Added** Identified as server-safe component
+
+### v0.1.0
+- **Added** Initial release

package/docs/components/composed/markdown-viewer.md

@@ -1,27 +1,27 @@
-# MarkdownViewer
-
-- Import: @devalok/shilp-sutra/composed/markdown-viewer
-- Server-safe: No
-- Category: composed
-
-## Props
-    content: string (markdown source)
-    compact: boolean (tighter spacing for inline use)
-    allowHtml: boolean (allow raw HTML in markdown)
-    linkTarget: string (target attribute for links)
-
-## Defaults
-    compact={false}, allowHtml={false}, linkTarget="_blank"
-
-## Example
-```jsx
-<MarkdownViewer content={message.body} />
-<MarkdownViewer content={comment} compact />
-<MarkdownViewer content={trustedHtml} allowHtml />
-```
-
-## Gotchas
-- Code blocks with a language fence are syntax-highlighted via `react-syntax-highlighter` (lazy-loaded) — the first render shows a plain `<pre>` fallback
-- GFM (tables, strikethrough, task lists) is supported via `remark-gfm`
-- Raw HTML is stripped by default — only enable `allowHtml` for trusted content
-- Links open in a new tab by default (`target="_blank"` with `rel="noopener noreferrer"`)
+# MarkdownViewer
+
+- Import: @devalok/shilp-sutra/composed/markdown-viewer
+- Server-safe: No
+- Category: composed
+
+## Props
+    content: string (markdown source)
+    compact: boolean (tighter spacing for inline use)
+    allowHtml: boolean (allow raw HTML in markdown)
+    linkTarget: string (target attribute for links)
+
+## Defaults
+    compact={false}, allowHtml={false}, linkTarget="_blank"
+
+## Example
+```jsx
+<MarkdownViewer content={message.body} />
+<MarkdownViewer content={comment} compact />
+<MarkdownViewer content={trustedHtml} allowHtml />
+```
+
+## Gotchas
+- Code blocks with a language fence are syntax-highlighted via `react-syntax-highlighter` (lazy-loaded) — the first render shows a plain `<pre>` fallback
+- GFM (tables, strikethrough, task lists) is supported via `remark-gfm`
+- Raw HTML is stripped by default — only enable `allowHtml` for trusted content
+- Links open in a new tab by default (`target="_blank"` with `rel="noopener noreferrer"`)

package/docs/components/composed/master-detail.md

@@ -1,48 +1,48 @@
-# MasterDetail
-
-- Import: @devalok/shilp-sutra/composed/master-detail
-- Server-safe: No
-- Category: composed
-
-## Compound Components
-MasterDetail (root), MasterDetail.List, MasterDetail.Detail, MasterDetail.ListItem
-
-## Props
-
-### MasterDetail (root)
-    selected: string | null (ID of currently selected item; null = show list on mobile)
-    onBack: () => void (called when mobile back button is pressed)
-    masterWidth: string (master panel width on desktop)
-    breakpoint: "sm" | "md" | "lg" (below this, stacked mobile mode activates)
-
-### MasterDetail.ListItem
-    active: boolean (highlights the item)
-    (extends ButtonHTMLAttributes)
-
-## Defaults
-    selected={null}, masterWidth="280px", breakpoint="md"
-
-## Example
-```jsx
-<MasterDetail selected={selectedId} onBack={() => setSelectedId(null)}>
-  <MasterDetail.List>
-    {items.map((item) => (
-      <MasterDetail.ListItem
-        key={item.id}
-        active={item.id === selectedId}
-        onClick={() => setSelectedId(item.id)}
-      >
-        {item.name}
-      </MasterDetail.ListItem>
-    ))}
-  </MasterDetail.List>
-  <MasterDetail.Detail>
-    {selectedId ? <ItemDetail id={selectedId} /> : <EmptyState />}
-  </MasterDetail.Detail>
-</MasterDetail>
-```
-
-## Gotchas
-- On mobile (below breakpoint), List and Detail are mutually exclusive — selecting an item hides the list
-- The `onBack` callback is required for the mobile back button to appear in the Detail pane
-- Uses `window.matchMedia` — SSR renders desktop layout initially, then hydrates to correct mode
+# MasterDetail
+
+- Import: @devalok/shilp-sutra/composed/master-detail
+- Server-safe: No
+- Category: composed
+
+## Compound Components
+MasterDetail (root), MasterDetail.List, MasterDetail.Detail, MasterDetail.ListItem
+
+## Props
+
+### MasterDetail (root)
+    selected: string | null (ID of currently selected item; null = show list on mobile)
+    onBack: () => void (called when mobile back button is pressed)
+    masterWidth: string (master panel width on desktop)
+    breakpoint: "sm" | "md" | "lg" (below this, stacked mobile mode activates)
+
+### MasterDetail.ListItem
+    active: boolean (highlights the item)
+    (extends ButtonHTMLAttributes)
+
+## Defaults
+    selected={null}, masterWidth="280px", breakpoint="md"
+
+## Example
+```jsx
+<MasterDetail selected={selectedId} onBack={() => setSelectedId(null)}>
+  <MasterDetail.List>
+    {items.map((item) => (
+      <MasterDetail.ListItem
+        key={item.id}
+        active={item.id === selectedId}
+        onClick={() => setSelectedId(item.id)}
+      >
+        {item.name}
+      </MasterDetail.ListItem>
+    ))}
+  </MasterDetail.List>
+  <MasterDetail.Detail>
+    {selectedId ? <ItemDetail id={selectedId} /> : <EmptyState />}
+  </MasterDetail.Detail>
+</MasterDetail>
+```
+
+## Gotchas
+- On mobile (below breakpoint), List and Detail are mutually exclusive — selecting an item hides the list
+- The `onBack` callback is required for the mobile back button to appear in the Detail pane
+- Uses `window.matchMedia` — SSR renders desktop layout initially, then hydrates to correct mode