@warkypublic/svelix 0.1.43 → 0.1.46

package/llm/COMPONENT_GUIDE.md

@@ -767,6 +767,246 @@ Story behavior worth preserving:
 - markdown, Monaco/text, media, and PDF flows are all real supported paths
 - office-document integrations expose `insertText` and `insertHtml` hooks for external automation
 
+### CardGrid: virtualized card-based data grid
+
+Based on:
+- [src/lib/components/CardGrid/CardGrid.svelte](/home/hein/dev/svelix/src/lib/components/CardGrid/CardGrid.svelte)
+- [src/lib/components/CardGrid/CardGrid.stories.ts](/home/hein/dev/svelix/src/lib/components/CardGrid/CardGrid.stories.ts)
+
+A responsive, virtualized card grid with search, sort, filter, multi-select, context menus, and optional flip mode. Renders a toolbar above a scrollable grid of cards. Supports local data, async local data, and server-side paging via ResolveSpec or HeaderSpec adapters — the same adapter layer used by `GridlerFull`.
+
+The grid requires a bounded height on its scroll container. Always place it inside an element that has an explicit height, or use the `height: 100%` + flex approach shown below.
+
+#### Minimal local-data example
+
+```svelte
+<script lang="ts">
+  import { CardGrid } from '@warkypublic/svelix';
+  import type { CardGridColumn } from '@warkypublic/svelix';
+
+  const columns: CardGridColumn[] = [
+    { id: 'id',   title: 'ID',   disableSearch: true },
+    { id: 'name', title: 'Name' },
+    { id: 'role', title: 'Role' },
+  ];
+
+  const data = [
+    { id: 1, name: 'Alice Smith', role: 'Admin' },
+    { id: 2, name: 'Bob Jones',   role: 'Viewer' },
+  ];
+</script>
+
+<div style="height: 600px; display: flex; flex-direction: column;">
+  <CardGrid {columns} {data} pageSize={20} searchPlaceholder="Search…" />
+</div>
+```
+
+#### Props reference
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `columns` | `CardGridColumn[]` | — | Column definitions. **Required.** |
+| `displayColumns` | `string[]` | — | Subset of column IDs to show; omit to show all. |
+| `cardMinWidth` | `number` | `280` | Minimum card width in px. Grid fills available columns using `auto-fill`. |
+| `cardGap` | `number` | `16` | Gap between cards in px. |
+| `cardMaxFrontColumns` | `number` | — | Enables flip mode: first N columns on the front face, the rest on the back. |
+| `card` | `Snippet` | — | Custom front-face card snippet. Receives `(record, index, selected, focused)`. |
+| `cardBack` | `Snippet` | — | Custom back-face snippet for flip mode. Same signature as `card`. |
+| `empty` | `Snippet` | — | Rendered when the data set is empty. |
+| `skeleton` | `Snippet` | — | Rendered while the initial load is in flight. |
+| `data` | `Record<string,unknown>[] \| (() => Promise<Record<string,unknown>[]>)` | — | Local array or async factory. Used when `dataSource` is `'local'`. |
+| `dataSource` | `'local' \| 'resolvespec' \| 'headerspec'` | `'local'` | Data source adapter. |
+| `dataSourceOptions` | `object` | — | Adapter config — see table below. |
+| `pageSize` | `number` | `20` | Rows per page / server fetch page size. |
+| `uniqueID` | `string` | `'id'` | Field used for identity in selection and cursor paging. Overridden by `dataSourceOptions.uniqueID`. |
+| `searchValue` | `string` | — | Controlled search string. |
+| `onSearchValueChange` | `(v: string) => void` | — | Fires on every search input change. |
+| `serverSideSearch` | `boolean` | `true` | When true, search sends `ilike` filters to the server instead of filtering locally. |
+| `searchColumns` | `string[]` | — | Column IDs to search. Defaults to all searchable columns. |
+| `searchPlaceholder` | `string` | `'Search…'` | Placeholder text in the search input. |
+| `sortOptions` | `CardSortOption[]` | — | Sort options shown in the toolbar sort menu. |
+| `sortOrder` | `GridColumnSortOrder` | — | Controlled sort state. |
+| `onSortOrderChange` | `(order: GridColumnSortOrder) => void` | — | Fires when sort changes. |
+| `filters` | `GridColumnFilters` | — | Controlled filter state. |
+| `onFilterChange` | `(filters: GridColumnFilters) => void` | — | Fires when filters are applied or cleared. |
+| `selectedItems` | `Record<string,unknown>[]` | — | Controlled selection. |
+| `onSelectedItemsChange` | `(items: Record<string,unknown>[]) => void` | — | Fires when selection changes. |
+| `multiSelect` | `boolean` | `true` | `false` = single-select mode. Arrow keys move the selection. |
+| `menuItems` | `CardGridContextMenuItem[]` | — | Custom context menu items appended to the built-in ones. |
+| `onCardClick` | `(record, index) => void` | — | Fires on single click. |
+| `onCardDblClick` | `(record, index) => void` | — | Fires on double click. |
+| `onCardContextMenu` | `(record, index, x, y) => void` | — | Fires on right-click. `x`/`y` are viewport coordinates. |
+| `total` | `number` | bindable | Server-reported total count. |
+| `loading` | `boolean` | bindable | `true` while any fetch is in flight. |
+| `onLoadError` | `(error: string) => void` | — | Fires on adapter fetch failure. |
+| `toolbarEnd` | `Snippet` | — | Extra content rendered at the right end of the toolbar. |
+| `class` | `string` | — | Extra CSS class on the root element. |
+
+#### `CardGridColumn` fields
+
+| Field | Type | Description |
+|---|---|---|
+| `id` | `string` | Unique column identifier. Also used as the field key unless `dataKey` is set. |
+| `title` | `string` | Display label. |
+| `dataKey` | `string` | Dot-notation path into the record (e.g. `'login.contact.email'`). Defaults to `id`. |
+| `format` | `'currency' \| 'number' \| 'percentage' \| 'date' \| 'datetime'` | Value formatter applied in the default card renderer. |
+| `disableSort` | `boolean` | Excludes this column from sort options. |
+| `disableFilter` | `boolean` | Excludes this column from the filter panel. |
+| `disableSearch` | `boolean` | Excludes this column from local/server search. |
+
+#### `dataSourceOptions` fields
+
+| Field | Description |
+|---|---|
+| `url` | API base URL. |
+| `authToken` | Bearer token sent in `Authorization` header. |
+| `schema` | Database schema (ResolveSpec). |
+| `entity` | Table / entity name (ResolveSpec). |
+| `uniqueID` | Unique field for cursor paging. |
+| `hotfields` | Extra fields fetched but not rendered. |
+| `extraOptions` | Passed through to the adapter as `Partial<Options>` — same shape as `GridlerFull`. |
+
+#### Server-side paging
+
+```svelte
+<CardGrid
+  {columns}
+  {sortOptions}
+  dataSource="resolvespec"
+  dataSourceOptions={{
+    url: 'https://api.example.com',
+    schema: 'public',
+    entity: 'employees',
+    uniqueID: 'id',
+  }}
+  pageSize={20}
+  serverSideSearch={true}
+  searchColumns={['name', 'email']}
+/>
+```
+
+Cards are loaded a page at a time. Scrolling to the bottom appends the next page automatically. `total` and `loading` are bindable and update after each fetch.
+
+#### Flip mode (default card renderer)
+
+Set `cardMaxFrontColumns` to split columns across front and back faces. A `+N` badge appears on cards that have overflow columns; clicking it flips the card to show the remaining fields.
+
+```svelte
+<CardGrid
+  {columns}
+  {data}
+  cardMaxFrontColumns={3}
+/>
+```
+
+The flip button and the back button are always in the same bottom-right position on their respective faces.
+
+#### Custom card snippets
+
+Use `card` and `cardBack` snippets to replace the default renderer with fully custom markup. Both receive `(record, index, selected, focused)`.
+
+```svelte
+<CardGrid {columns} {data} cardMaxFrontColumns={3} pageSize={20}>
+  {#snippet card(record, _i, selected)}
+    <article class:selected>
+      <img src={record.imageUrl as string} alt={record.title as string} />
+      <p>{record.title as string}</p>
+    </article>
+  {/snippet}
+
+  {#snippet cardBack(record, _i, selected)}
+    <article class:selected>
+      <p>Views: {(record.views as number).toLocaleString()}</p>
+      <p>Likes: {(record.likes as number).toLocaleString()}</p>
+    </article>
+  {/snippet}
+</CardGrid>
+```
+
+When `cardBack` is provided without `card`, the default renderer is used for the front face and the custom snippet for the back.
+
+#### Custom card snippets from a `.ts` story file
+
+Svelte snippets cannot be written directly in a `.ts` file. Wrap them in a `.svelte` wrapper component and render that component from the story:
+
+```typescript
+// MyStory.stories.ts
+import WrapperComponent from './WrapperComponent.svelte';
+
+export const Custom: Story = {
+  render: () => ({ Component: WrapperComponent }),
+};
+```
+
+```svelte
+<!-- WrapperComponent.svelte -->
+<script lang="ts">
+  import CardGrid from './CardGrid.svelte';
+  const data = [...];
+  const columns = [...];
+</script>
+
+<CardGrid {columns} {data} cardMaxFrontColumns={3}>
+  {#snippet card(record, _i, selected, focused)}
+    ...
+  {/snippet}
+</CardGrid>
+```
+
+#### Multi-select keyboard shortcuts
+
+| Key | Behaviour |
+|---|---|
+| `Space` / `Enter` | Toggle selection on the focused card. |
+| `Arrow keys` | Move focus. In `multiSelect: false` mode, also moves selection. |
+| `Ctrl+A` / `Cmd+A` | Select all loaded cards (multi-select only). |
+| `Shift+Click` | Range-select from the last anchor to the clicked card. |
+| `Ctrl+Click` | Toggle a single card without clearing others. |
+
+#### Storybook height decorator
+
+The virtualizer requires a bounded scroll container. In Storybook, apply this decorator to give the root element a height:
+
+```typescript
+const heightDecorator = (Story) => {
+  const root = document.getElementById('storybook-root');
+  if (root) root.style.cssText = 'height:calc(100vh - 40px);display:flex;flex-direction:column;';
+  document.body.style.margin = '0';
+  return Story();
+};
+
+const meta = {
+  decorators: [heightDecorator],
+  ...
+};
+```
+
+#### Large local datasets in stories
+
+Generate large datasets lazily to avoid crashing Storybook at module-load time:
+
+```typescript
+let rows: ReturnType<typeof makeRow>[] | null = null;
+function getRows() {
+  if (!rows) rows = Array.from({ length: 100_000 }, (_, i) => makeRow(i));
+  return rows;
+}
+
+export const HundredThousandRows: Story = {
+  render: (args) => ({ Component: CardGrid, props: { ...args, data: getRows() } }),
+};
+```
+
+Story behaviors worth preserving:
+- `StaticData`: local array, verifies rendering, context menu, and search
+- `ServerSideCursorPaging`: cursor-forward paging, verifies infinite scroll
+- `ServerSideSearch`: `ilike` filters sent on every keystroke
+- `ServerError`: `onLoadError` fires on non-2xx response
+- `MultiSelect` / `SingleSelect`: selection modes and keyboard shortcuts
+- `FlipMode`: `cardMaxFrontColumns` splits columns, flip/back buttons match position
+- `ImageCards`: fully custom `card` + `cardBack` snippets via a wrapper `.svelte` component
+- `HundredThousandRows`: virtualizer handles 100 000 rows; only visible rows are in the DOM
+
 ### BetterMenu: interaction-first menu behavior
 
 Based on:

package/llm/plans/card_grid.plan.md

@@ -0,0 +1,305 @@
+# CardGrid Component — Implementation Plan
+
+## Context
+
+The project has `GridlerFull` for tabular data but no card-based equivalent. We need a `CardGrid` component that mirrors most GridlerFull features (sorting, filtering, search, context menus, data fetching) but renders records as responsive cards with **selection + animation** and **keyboard navigation**.
+
+---
+
+## Files
+
+All under `src/lib/components/CardGrid/`:
+
+| File | Lines (est.) | Role |
+|------|-------------|------|
+| `cardGrid.ts` | ~80 | Types + pure helpers (selection, grid math) |
+| `DefaultCard.svelte` | ~40 | Fallback card renderer |
+| `CardGridFilterPanel.svelte` | ~120 | Filter UI (reuses GridlerFull operator set) |
+| `CardGrid.svelte` | ~450 | Main component |
+| `index.ts` | ~10 | Barrel exports |
+
+Also update: `src/lib/components/index.ts` (add `export * from './CardGrid/index'`)
+
+---
+
+## Reuse From Existing Code
+
+| What | Source | How |
+|------|--------|-----|
+| `GridlerResolveSpecAdapter` | `src/lib/components/Gridler/adapters/GridlerResolveSpecAdapter.ts` | Import & instantiate directly |
+| `GridlerRestHeaderSpecAdapter` | `src/lib/components/Gridler/adapters/GridlerRestHeaderSpecAdapter.ts` | Same |
+| `GridlerAdapterConfig`, `GridlerPageResult` | `src/lib/components/Gridler/types.ts` | Re-export from cardGrid.ts |
+| `gridColumnFiltersToFilterOptions()` | `src/lib/components/Gridler/utils/filters.ts` | Import for server-side filters |
+| `buildSearchFilters()` | `src/lib/components/Gridler/utils/filters.ts` | Import — always pass `searchColumns` explicitly to avoid GridlerColumn type mismatch |
+| `sortOrderToSortOptions()` | `src/lib/components/Gridler/utils/sort.ts` | Import for server-side sort |
+| `GridColumnSortOrder`, `GridColumnFilters`, `FilterOperator` | `src/lib/components/Types/generic_grid.ts` | Re-export |
+| `BetterMenu` | `src/lib/components/BetterMenu/` | Context menu + filter panel popup |
+| Data fetch pattern | `GridlerFull.svelte` lines 550-700 | Port adapter creation, fetchPage, loadNextPage, cancellation |
+
+---
+
+## 1. `cardGrid.ts` — Types & Helpers
+
+### Types
+
+```ts
+export interface CardGridColumn {
+  id: string;
+  title: string;
+  dataKey?: string;        // field path; defaults to id
+  format?: GridColumnFormat;
+  disableSort?: boolean;
+  disableFilter?: boolean;
+  disableSearch?: boolean;
+}
+
+export interface CardSortOption {
+  columnId: string;
+  label: string;
+}
+
+export interface CardGridContextMenuItem {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  icon?: string;
+  kind?: 'item' | 'separator';
+  onselect?: (rowData?: Record<string, unknown>) => void;
+}
+```
+
+### Pure Helpers
+
+- `toggleItemInSelection(items, item, uniqueID)` — add/remove by uniqueID match
+- `rangeSelect(allItems, anchorIndex, targetIndex)` — slice between anchor and target
+- `isItemSelected(selectedItems, item, uniqueID)` — boolean check
+- `computeColumnsInRow(containerWidth, cardMinWidth, gap)` — `Math.max(1, Math.floor((w + gap) / (minW + gap)))`
+
+---
+
+## 2. `CardGrid.svelte` — Props
+
+```ts
+interface Props {
+  // Column/display
+  columns: CardGridColumn[];
+  displayColumns?: string[];
+  cardMinWidth?: number;       // default 280
+  cardGap?: number;            // default 16
+
+  // Custom rendering — note: card snippet gets selected+focused state
+  card?: Snippet<[Record<string, unknown>, number, boolean, boolean]>;
+  empty?: Snippet;
+  skeleton?: Snippet;
+
+  // Data source (mirrors GridlerFull pattern)
+  dataSource?: 'resolvespec' | 'headerspec' | 'local';
+  dataSourceOptions?: { url, authToken, schema, entity, uniqueID, hotfields, extraOptions };
+  data?: Record<string, unknown>[] | (() => Promise<Record<string, unknown>[]>);
+  pageSize?: number;           // default 20
+  uniqueID?: string;           // default 'id'
+
+  // Search
+  searchValue?: string;
+  onSearchValueChange?: (v: string) => void;
+  serverSideSearch?: boolean;  // default true
+  searchColumns?: string[];
+  searchPlaceholder?: string;
+
+  // Sort
+  sortOrder?: GridColumnSortOrder;
+  onSortOrderChange?: (order: GridColumnSortOrder) => void;
+  sortOptions?: CardSortOption[];
+
+  // Filters
+  filters?: GridColumnFilters;
+  onFilterChange?: (filters: GridColumnFilters) => void;
+
+  // Selection
+  selectedItems?: Record<string, unknown>[];
+  onSelectedItemsChange?: (items: Record<string, unknown>[]) => void;
+  multiSelect?: boolean;       // default true
+
+  // Card events
+  onCardClick?: (record, index) => void;
+  onCardDblClick?: (record, index) => void;
+  onCardContextMenu?: (record, index, x, y) => void;
+
+  // Context menu
+  menuItems?: CardGridContextMenuItem[];
+
+  // Status
+  total?: number;              // bindable
+  loading?: boolean;           // bindable
+  onLoadError?: (error: string) => void;
+
+  // Layout
+  class?: string;
+  toolbarEnd?: Snippet;
+}
+```
+
+---
+
+## 3. State Management
+
+**Controlled/uncontrolled pairs** (same pattern as GridlerFull):
+- `searchValue` / `internalSearchValue` → `resolvedSearchValue`
+- `filters` / `internalFilters` → `resolvedFilters`
+- `sortOrder` / `internalSortOrder` → `resolvedSortOrder`
+- `selectedItems` / `internalSelectedItems` → `resolvedSelectedItems`
+
+**Server state** (port of GridlerFull lines 537-546):
+- `serverData`, `serverTotal`, `serverCursor`, `serverFetchVersion`, `serverLoading`, `serverAllLoaded`
+
+**CardGrid-specific state**:
+- `focusedIndex: $state(-1)` — keyboard-focused card
+- `anchorIndex: $state(-1)` — shift+click range anchor
+- `columnsInRow: $state(1)` — via ResizeObserver
+- `containerEl`, `sentinelEl`, `searchInputEl` — element refs
+
+---
+
+## 4. Data Fetching (Port of GridlerFull)
+
+- **Adapter instantiation**: `$derived.by` — create `GridlerResolveSpecAdapter` or `GridlerRestHeaderSpecAdapter` from `dataSourceOptions`
+- **Initial fetch `$effect`**: triggers on adapter/sort/search/filters/refreshTrigger changes → reset state → `fetchPage()`
+- **`fetchPage()`**: calls `adapter.readPage(pageSize, cursor, sort, allFilters, fields)` with cancellation via `serverFetchVersion`
+- **`loadNextPage()`**: appends results, updates cursor
+- **Infinite scroll**: IntersectionObserver on sentinel div with `rootMargin: '200px'`
+- **`refresh()` export**: increment `refreshTrigger`
+
+Filter construction reuses `gridColumnFiltersToFilterOptions()` + `buildSearchFilters()`.
+
+---
+
+## 5. Selection
+
+**Click logic**:
+- **Plain click**: select single card, set anchor
+- **Ctrl/Cmd+click**: toggle card in/out of selection
+- **Shift+click**: range select from anchor to target
+- **Background click** (`e.target === e.currentTarget`): clear selection
+- **Escape**: clear selection
+
+**Bindable output**: `selectedItems` array + `onSelectedItemsChange` callback
+
+---
+
+## 6. Selection Animation (CSS Transitions)
+
+```css
+.cg-card {
+  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
+  border: 2px solid transparent;
+}
+
+.cg-card-selected {
+  border-color: var(--color-primary-500);
+  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary-500) 25%, transparent);
+  transform: scale(1.02);
+}
+
+.cg-card-focused {
+  outline: 2px solid var(--color-primary-400);
+  outline-offset: 2px;
+}
+```
+
+Selected = animated ring + subtle scale lift. Focused = outline ring (distinct from selection).
+
+---
+
+## 7. Keyboard Navigation
+
+Container gets `tabindex="0"` + `onkeydown`. `columnsInRow` computed via ResizeObserver.
+
+| Key | Action |
+|-----|--------|
+| ←/→ | Move focus left/right |
+| ↑/↓ | Move focus up/down by `columnsInRow` |
+| Enter | Trigger `onCardClick` on focused card |
+| Space | Toggle selection on focused card |
+| Escape | Clear selection, blur focus |
+| Tab/Shift+Tab | Move focus forward/backward |
+| Ctrl+A | Select all loaded cards |
+| Ctrl+F | Focus search input |
+
+After focus change: `scrollIntoView({ block: 'nearest', behavior: 'smooth' })`.
+
+Search input stops keydown propagation for its own keys to avoid grid nav conflicts.
+
+---
+
+## 8. Filter Panel (`CardGridFilterPanel.svelte`)
+
+- Opened via toolbar "Filters" button → BetterMenu popup (snippet-renderer pattern from GridlerFull line 406)
+- Shows filterable columns with operator dropdown (same 14 operators as GridlerFull)
+- Add/remove/edit filter rows
+- Apply/Cancel/Clear buttons
+- Emits updated `GridColumnFilters` object
+
+---
+
+## 9. Context Menu
+
+- Right-click on card → `BetterMenu.show()` with card data
+- Built-in items: Refresh, Clear Search (if active), Clear Filters (if active), Clear Sort (if active)
+- Custom items from `menuItems` prop prepended with separator
+
+---
+
+## 10. Template Structure
+
+```
+┌─ Toolbar ────────────────────────────────────────────────┐
+│ [Search input]  [Sort pills...]  [Filters (n)]  [↻] N items │
+└──────────────────────────────────────────────────────────┘
+┌─ Card Grid (role="listbox", tabindex="0") ──────────────┐
+│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐                    │
+│ │ Card │ │ Card │ │ Card │ │ Card │  ← auto-fill grid   │
+│ └──────┘ └──────┘ └──────┘ └──────┘                    │
+│ ┌──────┐ ┌──────┐ ┌──────┐                             │
+│ │ Card │ │ Card │ │ Card │                              │
+│ └──────┘ └──────┘ └──────┘                             │
+│ [sentinel]                                              │
+└──────────────────────────────────────────────────────────┘
+┌─ Page loading indicator ─────────────────────────────────┐
+│ Loading more...                                          │
+└──────────────────────────────────────────────────────────┘
+```
+
+States: skeleton (first load), empty, cards, loading-more (subsequent pages).
+
+---
+
+## Implementation Order
+
+1. `cardGrid.ts` — types + helpers (no Svelte deps)
+2. `DefaultCard.svelte` — simple presentational
+3. `CardGridFilterPanel.svelte` — self-contained filter UI
+4. `CardGrid.svelte` — main component (depends on all above + Gridler adapters/utils)
+5. `index.ts` — barrel exports
+6. Update `src/lib/components/index.ts`
+
+---
+
+## Verification
+
+```bash
+cd packages/svelix && pnpm run check   # TypeScript + Svelte type check
+cd packages/svelix && pnpm run test    # Vitest
+```
+
+Manual: drop `<CardGrid>` into a page with a known schema/entity. Verify:
+- Cards render with data
+- Search filters results server-side
+- Sort pills toggle direction, re-fetch
+- Filter panel applies/clears filters
+- Click selects card with animation
+- Ctrl+click multi-selects
+- Shift+click range selects
+- Arrow keys navigate, Space toggles, Enter activates
+- Scroll to bottom loads next page
+- Right-click shows context menu
+- Refresh button reloads data

package/package.json

@@ -1,8 +1,26 @@
 {
   "name": "@warkypublic/svelix",
-  "version": "0.1.43",
+  "version": "0.1.46",
   "description": "Svelte 5 component library with Skeleton UI and Tailwind CSS",
   "license": "Apache-2.0",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && pnpm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && mkdir -p dist/css && cp src/lib/css/tailwind-source.css dist/css/tailwind-source.css && publint",
+    "prepublishOnly": "npm run package",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "test": "vitest run --project unit",
+    "test:unit": "vitest run --project unit",
+    "test:watch": "vitest --project unit",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -84,22 +102,5 @@
     "isomorphic-dompurify": "^3.13.0",
     "katex": "^0.16.47",
     "monaco-editor": "^0.55.1"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && pnpm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && mkdir -p dist/css && cp src/lib/css/tailwind-source.css dist/css/tailwind-source.css && publint",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix",
-    "test": "vitest run --project unit",
-    "test:unit": "vitest run --project unit",
-    "test:watch": "vitest --project unit",
-    "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui"
   }
 }