@warkypublic/svelix 0.1.39 → 0.1.41

package/dist/components/Icons/strings.d.ts

@@ -0,0 +1,11 @@
+export declare const iconAddSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"9\"/><path d=\"M12 8v8M8 12h8\"/></svg>";
+export declare const iconEditSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7\"/><path d=\"m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>";
+export declare const iconTrashSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M3 6h18\"/><path d=\"M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2\"/><path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/></svg>";
+export declare const iconSearchSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"7\"/><path d=\"m21 21-4.35-4.35\"/></svg>";
+export declare const iconCloseSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg>";
+export declare const iconAlertCircleSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/><line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/></svg>";
+export declare const iconAlertTriangleSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"m10.29 3.86-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.71-3.14l-8-14a2 2 0 0 0-3.42 0z\"/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/></svg>";
+export declare const iconFilterSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 .8 1.6L14 13.5V19a1 1 0 0 1-1.45.9l-3-1.5A1 1 0 0 1 9 17.5v-4L3.2 5.6A1 1 0 0 1 3 5Z\"/></svg>";
+export declare const iconCameraSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z\"/><circle cx=\"12\" cy=\"13\" r=\"3\"/></svg>";
+export declare const iconSortAscSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M7 14l5-5 5 5H7z\"/></svg>";
+export declare const iconSortDescSvg = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\" style=\"flex-shrink:0\" aria-hidden=\"true\"><path d=\"M7 10l5 5 5-5H7z\"/></svg>";

package/dist/components/Icons/strings.js

@@ -0,0 +1,15 @@
+// SVG HTML strings for use with {@html} or the `icon?: string` prop on menu items.
+// Each string renders at 16×16 px and inherits colour via currentColor.
+const S = `width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0" aria-hidden="true"`;
+const F = `width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="flex-shrink:0" aria-hidden="true"`;
+export const iconAddSvg = `<svg ${S}><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></svg>`;
+export const iconEditSvg = `<svg ${S}><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>`;
+export const iconTrashSvg = `<svg ${S}><path d="M3 6h18"/><path d="M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>`;
+export const iconSearchSvg = `<svg ${S}><circle cx="11" cy="11" r="7"/><path d="m21 21-4.35-4.35"/></svg>`;
+export const iconCloseSvg = `<svg ${S}><path d="M18 6 6 18M6 6l12 12"/></svg>`;
+export const iconAlertCircleSvg = `<svg ${S}><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>`;
+export const iconAlertTriangleSvg = `<svg ${S}><path d="m10.29 3.86-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.71-3.14l-8-14a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>`;
+export const iconFilterSvg = `<svg ${F}><path d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 .8 1.6L14 13.5V19a1 1 0 0 1-1.45.9l-3-1.5A1 1 0 0 1 9 17.5v-4L3.2 5.6A1 1 0 0 1 3 5Z"/></svg>`;
+export const iconCameraSvg = `<svg ${S}><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>`;
+export const iconSortAscSvg = `<svg ${F}><path d="M7 14l5-5 5 5H7z"/></svg>`;
+export const iconSortDescSvg = `<svg ${F}><path d="M7 10l5 5 5-5H7z"/></svg>`;

package/dist/components/Screenshot/Screenshot.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { CaptureScreen } from "./Screenshot.util";
+  import IconCamera from '../Icons/IconCamera.svelte';
 
   let screenshot = $state("");
 
@@ -17,21 +18,7 @@
     onclick={capture}
     class="flex items-center gap-2 rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
   >
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="20"
-      height="20"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      aria-hidden="true"
-    >
-      <path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z" />
-      <circle cx="12" cy="13" r="3" />
-    </svg>
+    <IconCamera size={20} />
     Capture Screenshot
   </button>
 

package/dist/components/SvarkGrid/components/SvarkHeaderFilterCell.svelte

@@ -4,6 +4,8 @@
 	import type { BetterMenuStore } from '../../BetterMenu/store';
 	import type { GridColumnFilters } from '../../Types/generic_grid';
 	import SvarkColumnFilterForm from './SvarkColumnFilterForm.svelte';
+	import IconSort from '../../Icons/IconSort.svelte';
+	import IconFilter from '../../Icons/IconFilter.svelte';
 
 	type IApi = any;
 	type IColumn = any;
@@ -96,13 +98,7 @@
 			{#if typeof sortMark.index !== 'undefined'}
 				<span class="svark-sort-index">{sortMark.index + 1}</span>
 			{/if}
-			<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
-				{#if sortMark.order === 'asc'}
-					<path fill="currentColor" d="M7 14l5-5 5 5H7z" />
-				{:else}
-					<path fill="currentColor" d="M7 10l5 5 5-5H7z" />
-				{/if}
-			</svg>
+			<IconSort direction={sortMark.order} size={14} />
 		</div>
 	{/if}
 
@@ -117,12 +113,7 @@
 			onclick={onIconClick}
 			data-testid={`svarkgrid-filter-${columnId}`}
 		>
-			<svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
-				<path
-					fill="currentColor"
-					d="M3 5a1 1 0 0 1 1-1h16a1 1 0 0 1 .8 1.6L14 13.5V19a1 1 0 0 1-1.45.9l-3-1.5A1 1 0 0 1 9 17.5v-4L3.2 5.6A1 1 0 0 1 3 5Z"
-				/>
-			</svg>
+			<IconFilter size={14} />
 		</button>
 	{/if}
 </div>

package/dist/components/Types/generic_grid.d.ts

@@ -1,3 +1,4 @@
+import type { Options as ResolveSpecOptions } from '@warkypublic/resolvespec-js';
 export type GridColumnFormat = "text" | "number" | "currency" | "percentage" | "date" | "datetime" | "markdown" | "image" | "uri" | "bubble" | "drilldown";
 /**
  * GridEventType represents the various events that can occur on the grid level, such as clicking, hovering, loading, scrolling, resizing, and changes to sorting, filtering, searching, selection, column arrangement, data, and settings. These events can be used to trigger callbacks for handling user interactions and updates to the grid.
@@ -72,6 +73,23 @@ export interface GridCommonProps<RowDataType = unknown, CellType = unknown> {
         uniqueID?: string;
         headers?: Record<string, string>;
         hotfields?: string[];
+        /**
+         * Default ResolveSpec options sent with every request. Grid-controlled sort, filters, limit,
+         * cursor, and columns always take precedence over values set here.
+         *
+         * Key fields:
+         * - `preload`          — eager-load relations. Each entry specifies `relation`, optional `columns`,
+         *                        `filters`, `sort`, `limit`, `recursive`, `sql_joins`, etc.
+         * - `omit_columns`     — columns to exclude from the response.
+         * - `computedColumns`  — server-side computed expressions: `{ name, expression }`.
+         * - `customOperators`  — raw SQL WHERE fragments (AND-combined): `{ name, sql }`.
+         * - `parameters`       — named query parameters passed to the server: `{ name, value, sequence? }`.
+         * - `filters`          — default server-side filters applied before any grid filters.
+         * - `sort`             — default sort order, overridden when the user sorts a column.
+         * - `fetch_row_number` — column name whose row number is returned in metadata.
+         * - `offset`           — static row offset (cursor pagination is used by the adapter; avoid mixing).
+         */
+        extraOptions?: Partial<ResolveSpecOptions>;
     };
     data?: RowDataType[] | (() => Promise<RowDataType[]>);
     onDataChange?: (data: RowDataType[]) => Promise<void>;

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Button } from "./Button.svelte";
+export * from "./Icons/index";
 export * from "./ErrorBoundary/index";
 export * from "./BetterMenu/index";
 export * from "./FormerControllers/index";

package/dist/components/index.js

@@ -1,4 +1,5 @@
 export { default as Button } from "./Button.svelte";
+export * from "./Icons/index";
 export * from "./ErrorBoundary/index";
 export * from "./BetterMenu/index";
 export * from "./FormerControllers/index";

package/llm/COMPONENT_GUIDE.md

@@ -478,6 +478,104 @@ Story behavior worth preserving:
 - search highlighting and fixed columns are first-class usage patterns
 - theme overrides are an expected integration point, not a niche feature
 
+### GridlerFull: server-driven Gridler with adapters
+
+`GridlerFull` wraps `Gridler` and handles paging, sorting, filtering, and search against a
+ResolveSpec or HeaderSpec API. Configure via `dataSource` + `dataSourceOptions`.
+
+```svelte
+<script lang="ts">
+	import { GridlerFull } from '@warkypublic/svelix';
+	import type { GridlerColumn } from '@warkypublic/svelix';
+
+	const columns: GridlerColumn[] = [
+		{ id: 'id',    title: 'ID',    width: 60  },
+		{ id: 'name',  title: 'Name',  width: 180 },
+		{ id: 'email', title: 'Email', width: 220 },
+	];
+</script>
+
+<GridlerFull
+	{columns}
+	dataSource="resolvespec"
+	dataSourceOptions={{
+		url: 'https://api.example.com',
+		authToken: 'Bearer …',
+		schema: 'public',
+		entity: 'users',
+		uniqueID: 'id',
+		hotfields: ['role'],
+		extraOptions: {
+			preload: [
+				{
+					relation: 'department',
+					columns: ['id', 'name'],
+				},
+			],
+			filters: [{ column: 'active', operator: 'eq', value: true }],
+			sort: [{ column: 'created_at', direction: 'desc' }],
+			computedColumns: [{ name: 'full_name', expression: "first_name || ' ' || last_name" }],
+			customOperators: [{ name: 'tenant', sql: "tenant_id = '123'" }],
+			parameters: [{ name: 'p_role', value: 'admin' }],
+		},
+	}}
+	height={480}
+	pageSize={50}
+/>
+```
+
+#### `dataSource` values
+
+| Value          | Adapter class                    | Transport          |
+|----------------|----------------------------------|--------------------|
+| `resolvespec`  | `GridlerResolveSpecAdapter`      | JSON request body  |
+| `headerspec`   | `GridlerRestHeaderSpecAdapter`   | HTTP headers       |
+
+#### `dataSourceOptions.extraOptions` — all fields
+
+These are `Partial<Options>` from `@warkypublic/resolvespec-js`. Grid-controlled values
+(sort, filters, limit, cursor, columns) always win over anything set here.
+
+| Field             | Type                  | Purpose                                                          |
+|-------------------|-----------------------|------------------------------------------------------------------|
+| `preload`         | `PreloadOption[]`     | Eager-load related entities. See `PreloadOption` fields below.   |
+| `omit_columns`    | `string[]`            | Exclude these columns from every response.                       |
+| `computedColumns` | `ComputedColumn[]`    | Server-side SQL expressions: `{ name, expression }`.             |
+| `customOperators` | `CustomOperator[]`    | Raw SQL WHERE fragments (AND-combined): `{ name, sql }`.         |
+| `parameters`      | `Parameter[]`         | Named query params: `{ name, value, sequence? }`.                |
+| `filters`         | `FilterOption[]`      | Default filters prepended before any grid column filters.        |
+| `sort`            | `SortOption[]`        | Default sort, overridden when the user clicks a column header.   |
+| `fetch_row_number`| `string`              | Column whose absolute row number is returned in metadata.        |
+| `offset`          | `number`              | Static row offset — avoid mixing with cursor pagination.         |
+
+##### `PreloadOption` key fields
+
+| Field                | Purpose                                              |
+|----------------------|------------------------------------------------------|
+| `relation`           | Relation name (required).                            |
+| `table_name`         | Override the table resolved from the relation.       |
+| `columns`            | Columns to select on the related table.              |
+| `omit_columns`       | Columns to exclude on the related table.             |
+| `filters`            | Filters applied to the related table.                |
+| `sort`               | Sort order for the related rows.                     |
+| `limit`              | Max related rows per parent row.                     |
+| `recursive`          | Self-referential recursive load.                     |
+| `primary_key`        | Override primary key used for the join.              |
+| `related_key`        | Foreign key on the related table.                    |
+| `foreign_key`        | Foreign key on the parent table.                     |
+| `recursive_child_key`| Key used for the recursive child join.               |
+| `sql_joins`          | Raw SQL JOIN clauses.                                |
+| `join_aliases`       | Aliases for the SQL joins.                           |
+| `computed_ql`        | Map of computed column name → SQL expression.        |
+| `where`              | Raw SQL WHERE fragment for the relation.             |
+| `updatable`          | Marks the preloaded relation as updatable.           |
+
+Key behaviors:
+- `extraOptions` is stored on the adapter at construction time; changing `dataSourceOptions` recreates the adapter and triggers a full refetch.
+- Call-time `extraOptions` passed directly to `readPage` override the config-level defaults; specific params (sort, filters, limit, cursor, columns) override both.
+- `hotfields` are fetched alongside column fields but not rendered — use them for fields needed by filters or computed logic.
+- Use `headerspec` when the API endpoint only accepts query options via HTTP headers instead of a JSON body.
+
 ### SvarkGrid: adapter-backed tabular data
 
 Based on:

package/llm/README.md

@@ -18,6 +18,99 @@ This folder contains AI-readable documentation that ships with the package.
 - [plans/canvasgrid.md](./plans/canvasgrid.md)
 - [gridler-events.md](./gridler-events.md)
 
+## Implementation Patterns
+
+### Standard Entity Page
+
+GridlerFull and FormerDrawer are siblings. GridlerFull handles display/filtering; its `menuItems` and row events (`onRowDblClick`, `onRowContextMenu`) open a `FormerDrawer`. The drawer receives `request` (`insert` | `update` | `delete`), `bind:values`, and an `onAPICall` handler. Field controls go inside a `{#snippet children(state)}` block.
+
+```svelte
+<script lang="ts">
+  import GridlerFull from '@warkypublic/svelix/GridlerFull';
+  import FormerDrawer from '@warkypublic/svelix/FormerDrawer';
+  import TextInputCtrl from '@warkypublic/svelix/TextInputCtrl';
+  import NativeSelectCtrl from '@warkypublic/svelix/NativeSelectCtrl';
+  import type { FormRequestType } from '@warkypublic/svelix/Former';
+  import { iconAddSvg, iconEditSvg, iconTrashSvg } from '@warkypublic/svelix/Icons';
+
+  let drawerOpen = $state(false);
+  let formMode = $state<FormRequestType>('update');
+  let formValues = $state<MyRow | undefined>(undefined);
+  let selectedItems = $state<Record<string, unknown>[]>([]);
+
+  function openForm(mode: FormRequestType, row?: MyRow) {
+    formMode = mode;
+    formValues = row ? { ...row } : { id: 0, name: '' };
+    drawerOpen = true;
+  }
+
+  const menuItems = [
+    { id: 'add', label: 'Add', icon: iconAddSvg, kind: 'item', onselect: () => openForm('insert') },
+    { id: 'sep', label: '', kind: 'separator' },
+    { id: 'edit', label: 'Edit', icon: iconEditSvg, kind: 'item', onselect: () => openForm('update', selectedItems[0] as MyRow) },
+    { id: 'delete', label: 'Delete', icon: iconTrashSvg, kind: 'item', onselect: () => openForm('delete', selectedItems[0] as MyRow) },
+  ];
+</script>
+
+<GridlerFull
+  {columns}
+  {data}
+  uniqueID="id"
+  {menuItems}
+  onRowDblClick={(_row, rowData) => openForm('update', rowData as MyRow)}
+  onSelectedItemsChange={(items) => (selectedItems = items)}
+/>
+
+<FormerDrawer
+  bind:opened={drawerOpen}
+  bind:values={formValues}
+  request={formMode}
+  uniqueKeyField="id"
+  layout={{ title: 'Employee', buttonArea: 'bottom' }}
+  onAPICall={async (_mode, _req, data) => { /* call backend */ return data; }}
+  afterSave={(data) => { /* update local rows state */ }}
+  onClose={() => { drawerOpen = false; }}
+>
+  {#snippet children(state)}
+    {@const isReadonly = state.request === 'delete'}
+    <TextInputCtrl
+      label="Name" name="name"
+      value={state.values?.name ?? ''}
+      disabled={isReadonly}
+      onchange={(v) => state.setState('values', { ...state.values, name: v })}
+    />
+    <NativeSelectCtrl
+      label="Status" name="status"
+      value={state.values?.status ?? ''}
+      {options}
+      disabled={isReadonly}
+      onchange={(v) => state.setState('values', { ...state.values, status: v })}
+    />
+  {/snippet}
+</FormerDrawer>
+```
+
+### Component roles
+
+- **GridlerFull** — data grid with burger menu (`menuItems`), row events (`onRowDblClick`, `onRowContextMenu`, `onSelectedItemsChange`), filtering and pagination
+- **FormerDrawer** — slide-out drawer form for Add/Edit/Delete; `request` controls mode; fields go in `{#snippet children(state)}`; `state.setState('values', ...)` updates field values; `onAPICall` is the save handler; `afterSave` updates local state
+- **FormerControllers** — `TextInputCtrl`, `NumberInputCtrl`, `NativeSelectCtrl`, etc.; use `disabled` for delete readonly mode
+- **ErrorBoundary** — wraps async components to catch render and fetch errors
+- **ContentEditor** — edit JSON, Markdown, code, or documents as a FormerDrawer field
+- **VTree** — hierarchical/tree data display
+- **BetterMenu** — context menus or nav menus
+- **Boxer** — single or multi-value lookup control backed by a data source; used as a FormerDrawer field
+- **GlobalStateStore** — central store for all app state and API data
+- **resolvespec-js** — connects components to the backend via specs passed to GridlerFull, FormerDrawer, Boxer, etc.
+
+### Data flow
+
+```text
+GlobalStateStore ↔ resolvespec-js ↔ Backend API
+       ↑
+  GridlerFull / FormerDrawer / Boxer
+```
+
 ## Installed package paths
 
 When `@warkypublic/svelix` is installed, this documentation is available at:

package/package.json

@@ -1,26 +1,8 @@
 {
   "name": "@warkypublic/svelix",
-  "version": "0.1.39",
+  "version": "0.1.41",
   "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",
@@ -44,43 +26,43 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.31.0",
-    "@chromatic-com/storybook": "^5.1.2",
-    "@eslint/compat": "^2.0.5",
+    "@chromatic-com/storybook": "^5.2.1",
+    "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.59.1",
-    "@sentry/svelte": "^10.49.0",
+    "@playwright/test": "^1.60.0",
+    "@sentry/svelte": "^10.53.1",
     "@skeletonlabs/skeleton": "^4.15.2",
     "@skeletonlabs/skeleton-svelte": "^4.15.2",
-    "@storybook/addon-a11y": "^10.3.5",
-    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.0",
     "@storybook/addon-svelte-csf": "^5.1.2",
-    "@storybook/addon-vitest": "^10.3.5",
-    "@storybook/sveltekit": "^10.3.5",
+    "@storybook/addon-vitest": "^10.4.0",
+    "@storybook/sveltekit": "^10.4.0",
     "@storybook/test": "^8.6.15",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.57.1",
+    "@sveltejs/kit": "^2.60.1",
     "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.0.0",
-    "@tailwindcss/vite": "^4.2.4",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@tailwindcss/vite": "^4.3.0",
     "@tanstack/svelte-virtual": "^3.13.24",
-    "@types/node": "^25.6.0",
-    "@vitest/browser-playwright": "^4.1.5",
-    "@vitest/coverage-v8": "^4.1.5",
-    "eslint": "^10.2.1",
+    "@types/node": "^25.8.0",
+    "@vitest/browser-playwright": "^4.1.6",
+    "@vitest/coverage-v8": "^4.1.6",
+    "eslint": "^10.4.0",
     "eslint-plugin-svelte": "^3.17.1",
-    "globals": "^17.5.0",
-    "playwright": "^1.59.1",
-    "publint": "^0.3.18",
-    "storybook": "^10.3.5",
-    "svelte": "^5.55.4",
-    "svelte-check": "^4.4.6",
-    "tailwindcss": "^4.2.4",
+    "globals": "^17.6.0",
+    "playwright": "^1.60.0",
+    "publint": "^0.3.21",
+    "storybook": "^10.4.0",
+    "svelte": "^5.55.7",
+    "svelte-check": "^4.4.8",
+    "tailwindcss": "^4.3.0",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.0",
-    "vite": "^8.0.9",
+    "typescript-eslint": "^8.59.3",
+    "vite": "^8.0.13",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vitest": "^4.1.5"
+    "vitest": "^4.1.6"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -99,8 +81,25 @@
     "@warkypublic/artemis-kit": "^1.0.10",
     "carta-md": "^4.11.2",
     "github-markdown-css": "^5.9.0",
-    "isomorphic-dompurify": "^3.9.0",
-    "katex": "^0.16.45",
+    "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"
   }
-}
+}