Svelix

@warkypublic/svelix — a Svelte 5 component library built on Skeleton UI and Tailwind CSS v4, focused on workflow-heavy UI, data-rich views, and content tooling.

Install

pnpm add @warkypublic/svelix

Usage

import { Button, Former, Gridler } from '@warkypublic/svelix';

Components

Layout & Structure

| Export | Description | |---|---| | Boxer, BoxerTarget | Adaptive layout container with data-adapter support | | Portal | Renders children outside the current DOM subtree | | ErrorBoundary | Catches and displays component errors |

Forms

| Export | Description | |---|---| | Former, FormerButtonArea, FormerDrawer, FormerModal | Form builder with modal/drawer variants | | createFormerState | Reactive form state factory | | FormerResolveSpecAPI, FormerRestHeadSpecAPI | API adapters for form data sources | | ButtonCtrl, IconButtonCtrl | Button and icon-button form controls | | TextInputCtrl, TextAreaCtrl, PasswordInputCtrl | Text input controls | | NumberInputCtrl, NativeSelectCtrl | Number and select controls | | CheckBoxCtrl, SwitchCtrl | Checkbox and toggle controls; CheckBoxCtrl supports checkbox or switch presentation and boolean, integer, or string values | | FileInputCtrl | Single-file picker with a compact file-type or image thumbnail, filename, and size | | JsonCtrl | JSON editor control with a dialog editor and preview | | DateTimeCtrl | Date/time picker control | | CtrlFieldShell, InlineWrapper | Field shell and inline layout wrapper for form controls |

Data Grids

| Export | Description | |---|---| | Gridler, GridlerFull | Feature-rich data grid / table | | GridlerResolveSpecAdapter, GridlerRestHeaderSpecAdapter | Data adapters for Gridler | | SvarkGrid | SVAR-based grid with context menus and column mapping | | SvarkResolveSpecAdapter, SvarkRestHeaderSpecAdapter | Data adapters for SvarkGrid |

Card Grid

| Export | Description | |---|---| | CardGrid, DefaultCard, CardGridFilterPanel | Filterable, sortable card grid |

Menus & Overlays

| Export | Description | |---|---| | BetterMenu, MenuRenderer | Enhanced dropdown menu | | createBetterMenuStore | Store factory for menu state | | OverlayStack | Stacked modal/overlay manager |

Content & Markup

| Export | Description | |---|---| | ContentEditor | Rich content editor (Carta Markdown + Monaco) | | TextEditor, MarkdownViewer, MonacoEditor | Text, Markdown, and code editing components | | CollaboraEditor, Office365Editor | Office document editor integrations | | ImageViewer, AudioPlayer, VideoPlayer, PdfViewer | File media and PDF viewers | | EmailViewer, ZipViewer, UnknownFile | Fallback file viewers |

Trees

| Export | Description | |---|---| | VTree | Virtualised tree view | | VTreeResolveSpecAdapter | Data adapter for VTree |

Global State

| Export | Description | |---|---| | GlobalStateStoreProvider | App-level state provider | | useGlobalStateStoreContext | Context accessor | | t, _T, loadTranslations, appendTranslations, etc. | i18n helpers |

Utilities & Misc

| Export | Description | |---|---| | Button | Base button component | | CaptureScreenshotComponent, CaptureScreen | Screenshot capture | | errorManager | Global error manager | | IconAdd, IconClose, IconEdit, IconSearch, etc. | SVG icon components |

CSS Assets

Tailwind CSS source and theme files are published under @warkypublic/svelix/css/:

import '@warkypublic/svelix/css/tailwind-source.css';
import '@warkypublic/svelix/css/svelix_orange.css';

LLM Documentation

Extended architecture and implementation docs are published with the package under @warkypublic/svelix/llm/:

node_modules/@warkypublic/svelix/llm/README.md
node_modules/@warkypublic/svelix/llm/ARCHITECTURE.md
node_modules/@warkypublic/svelix/llm/COMPONENT_GUIDE.md
node_modules/@warkypublic/svelix/llm/FORMER_CONTROLLERS.md

Development

pnpm dev          # SvelteKit dev server
pnpm storybook    # Storybook on port 6006
pnpm build        # Build package
pnpm test         # Run unit tests
pnpm check        # Type-check .svelte files
pnpm lint         # ESLint