@warkypublic/svelix 0.1.38 → 0.1.40

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/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/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.38",
+  "version": "0.1.40",
   "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",
@@ -102,5 +84,22 @@
     "isomorphic-dompurify": "^3.9.0",
     "katex": "^0.16.45",
     "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"
   }
-}
+}