@warkypublic/svelix 0.1.46 → 0.2.1

package/llm/COMPONENT_GUIDE.md

@@ -130,6 +130,30 @@ The project now contains a mix of simple components, folder-based component modu
 </script>
 ```
 
+**⚠️ Guardrail — never read and write the same `$state` inside one effect**
+
+```svelte
+<script lang="ts">
+	// ❌ Infinite loop: .filter() always returns a NEW array reference, even
+	// when nothing was removed. The effect tracks its own write target, sees
+	// a "changed" value on every run, and reruns forever — Svelte throws
+	// effect_update_depth_exceeded ("reads and writes the same piece of state").
+	$effect(() => {
+		selected = selected.filter((item) => validIds.has(item.id));
+	});
+
+	// ✅ Read the current value via untrack() so the effect doesn't depend on
+	// its own write target, and only write when something actually changed.
+	$effect(() => {
+		const current = untrack(() => selected);
+		const next = current.filter((item) => validIds.has(item.id));
+		if (next.length !== current.length) selected = next;
+	});
+</script>
+```
+
+Same hazard applies to any derived-and-reassigned value, not just `.filter()`: object/array spreads (`{...x}`, `[...x]`), `new Set(x)` / `new Map(x)`, `.map()`, `.sort()` copies — anything producing a new reference even when the content is unchanged. Real-world case: `CardGrid.svelte`'s "Reconcile selection" effect.
+
 #### Snippet - Children/Slots
 ```svelte
 <script lang="ts">
@@ -1211,6 +1235,7 @@ Before considering a component complete:
 - [ ] Focus management is correct
 - [ ] Documented in stories (autodocs)
 - [ ] Re-exported from `src/lib/components/index.ts` and therefore reachable from `src/lib/index.ts`
+- [ ] No `$effect` reads and writes the same `$state` without `untrack()` / a change-guard (see $effect Guardrail above)
 
 ## Advanced Patterns
 

package/package.json

@@ -1,26 +1,8 @@
 {
   "name": "@warkypublic/svelix",
-  "version": "0.1.46",
+  "version": "0.2.1",
   "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",
@@ -43,44 +25,45 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.31.0",
+    "@changesets/cli": "^2.31.1",
     "@chromatic-com/storybook": "^5.2.1",
     "@eslint/compat": "^2.1.0",
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.60.0",
-    "@sentry/svelte": "^10.53.1",
+    "@playwright/test": "^1.61.1",
+    "@sentry/svelte": "^10.66.0",
     "@skeletonlabs/skeleton": "^4.15.2",
     "@skeletonlabs/skeleton-svelte": "^4.15.2",
-    "@storybook/addon-a11y": "^10.4.0",
-    "@storybook/addon-docs": "^10.4.0",
+    "@storybook/addon-a11y": "^10.5.2",
+    "@storybook/addon-docs": "^10.5.2",
     "@storybook/addon-svelte-csf": "^5.1.2",
-    "@storybook/addon-vitest": "^10.4.0",
-    "@storybook/sveltekit": "^10.4.0",
+    "@storybook/addon-vitest": "^10.5.2",
+    "@storybook/sveltekit": "^10.5.2",
     "@storybook/test": "^8.6.15",
     "@sveltejs/adapter-auto": "^7.0.1",
-    "@sveltejs/kit": "^2.60.1",
-    "@sveltejs/package": "^2.5.7",
-    "@sveltejs/vite-plugin-svelte": "^7.1.2",
-    "@tailwindcss/vite": "^4.3.0",
-    "@tanstack/svelte-virtual": "^3.13.24",
-    "@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.6.0",
-    "playwright": "^1.60.0",
+    "@sveltejs/kit": "^2.69.3",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.2.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@tanstack/svelte-virtual": "^3.13.32",
+    "@types/node": "^26.1.1",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "esbuild": "^0.28.1",
+    "eslint": "^10.7.0",
+    "eslint-plugin-svelte": "^3.20.0",
+    "globals": "^17.7.0",
+    "playwright": "^1.61.1",
     "publint": "^0.3.21",
-    "storybook": "^10.4.0",
-    "svelte": "^5.55.7",
-    "svelte-check": "^4.4.8",
-    "tailwindcss": "^4.3.0",
+    "storybook": "^10.5.2",
+    "svelte": "^5.56.5",
+    "svelte-check": "^4.7.3",
+    "tailwindcss": "^4.3.3",
     "tslib": "^2.8.1",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.3",
-    "vite": "^8.0.13",
+    "typescript-eslint": "^8.64.0",
+    "vite": "^8.1.5",
     "vite-plugin-monaco-editor": "^1.1.0",
-    "vitest": "^4.1.6"
+    "vitest": "^4.1.10"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -92,15 +75,33 @@
     "@cartamd/plugin-component": "^1.1.1",
     "@cartamd/plugin-emoji": "^4.3.0",
     "@cartamd/plugin-math": "^4.3.1",
-    "@friendofsvelte/tipex": "^0.1.1",
+    "@friendofsvelte/tipex": "^0.2.0",
     "@js-temporal/polyfill": "^0.5.1",
-    "@svar-ui/svelte-grid": "^2.6.2",
-    "@warkypublic/resolvespec-js": "^1.0.1",
+    "@svar-ui/svelte-grid": "^2.7.1",
     "@warkypublic/artemis-kit": "^1.0.10",
+    "@warkypublic/resolvespec-js": "^1.0.1",
     "carta-md": "^4.11.2",
     "github-markdown-css": "^5.9.0",
-    "isomorphic-dompurify": "^3.13.0",
-    "katex": "^0.16.47",
+    "isomorphic-dompurify": "^3.18.0",
+    "katex": "^0.17.0",
     "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 && playwright test --config=playwright.storybook.config.ts",
+    "test:e2e:ui": "playwright test --ui",
+    "test:storybook": "playwright test --config=playwright.storybook.config.ts"
   }
 }