sveltekit-ui 1.1.85 → 1.1.87

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 1.1.87 - 2026-10-03
+
+### Toolchain
+
+- Require Node.js 24 or newer for the package and documentation development.
+- Update Vite and Vitest, and respect peer dependencies and Node engine constraints during dependency upgrades.
+- Preserve the public SvelteKit 2 and 3 component APIs; TypeScript 7 remains excluded by the current Svelte toolchain peers.
+
+## 1.1.86 - 2026-10-02
+
+### SvelteKit compatibility
+
+- Support SvelteKit 2.22.2 and newer alongside SvelteKit 3 while preserving the public component and manager APIs.
+- Use `esm-env` for browser flags and rewrite source `#lib` imports to relative paths when packaging.
+- Preserve native internal-link navigation, including static resources, modified clicks, and navigation cancellation.
+- Migrate the documentation app to SvelteKit 3, Vercel adapter 7, explicit public environment variables, and Vite plugin configuration.
+- Preserve documentation analytics using the generic Analytics API, with manual SvelteKit navigation tracking that does not depend on removed stores.
+
 ## Unreleased
 
 ### Component fixes

package/README.md

@@ -1,6 +1,6 @@
 # SvelteKit UI
 
-SvelteKit UI is a Svelte 5 component library built around paired components and reactive manager functions. It is intended for SvelteKit 2 applications.
+SvelteKit UI is a Svelte 5 component library built around paired components and reactive manager functions. It supports SvelteKit 2 and 3 applications.
 
 The component documentation and interactive examples live at [sveltekit-ui.com](https://www.sveltekit-ui.com).
 
@@ -45,7 +45,7 @@ npm run dev
 
 Copy `.env.example` to `.env` and provide `PUBLIC_APPLE_MAPKIT_JS_API_KEY` if you want to run the MapKit showcases locally.
 
-Keep TypeScript on version 6 for the current Svelte tooling, even when writing JavaScript. The `.ncurc.js` configuration lets `ncu -u` update TypeScript within version 6 while other packages continue receiving normal updates.
+The package and documentation app require Node.js 24 or newer. The documentation app uses SvelteKit 3 and TypeScript 6, even when writing JavaScript. The `.ncurc.js` configuration updates development and runtime dependencies while respecting peer dependencies and the current Node engine. TypeScript 7 is held until SvelteKit and `svelte-check` support it. Analytics remains pinned until a compatible stable release supports SvelteKit 3.
 
 Before publishing, run the complete verification suite:
 
@@ -55,6 +55,8 @@ npm run verify
 
 This checks the Svelte source, runs tests, generates and verifies the distributable package, and builds the documentation site.
 
+To verify a packed release in clean SvelteKit 2 and 3 consumers, run `node scripts/verify-kit-consumers.js /absolute/path/to/sveltekit-ui.tgz`. The consumers install their dependencies with normal peer validation, then compile the public components for server and browser use and check server-rendered pages.
+
 Publish with `npm run publish:npm`. It checks npm for the newest published release, selects the next patch version when needed, keeps `package.json` and `package-lock.json` in sync, and runs verification before publishing. A prepared version that is newer than the published releases is reused, so retrying a failed publish does not skip another version.
 
 Preview the version without changing files or publishing:
@@ -66,7 +68,8 @@ npm run version:available -- --dry-run
 ## Compatibility and releases
 
 - Svelte 5 is required.
-- SvelteKit 2 is required because some components use SvelteKit navigation and environment modules.
+- SvelteKit 2.22.2 or newer, or SvelteKit 3, is required because some components use SvelteKit navigation modules.
+- Browser flags use `esm-env`. Source `#lib` imports are rewritten to relative imports in the published package; consumers do not need to configure the library's source alias.
 - Public API changes are documented with package releases. Consumers should review release notes before adopting a new minor version.
 
 The experimental Contibase code generator is available at [contibase.com/code_generator](https://www.contibase.com/code_generator).

package/dist/Components/Alert/index.svelte.js

@@ -1,6 +1,6 @@
 import { create_unique_id } from "../../client/index.js"
 import { create_button_manager } from "../Button/index.svelte.js"
-import { browser } from "$app/environment"
+import { BROWSER as browser } from "esm-env"
 
 export function create_alert_manager(config) {
   let alerts = $state([])

package/dist/Components/Audio/index.svelte.js

@@ -1,4 +1,4 @@
-import { browser } from "$app/environment"
+import { BROWSER as browser } from "esm-env"
 import { create_button_manager } from "../Button/index.svelte.js"
 import { create_popover_manager } from "../Popover/index.svelte.js"
 import { create_slider_manager } from "../Slider/index.svelte.js"

package/dist/Components/Content/index.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { goto } from "$app/navigation"
   import LoadingWheel from "../LoadingWheel/index.svelte"
   import Audio from "../Audio/index.svelte"
   import Code from "../Code/index.svelte"

package/dist/Components/ImageEditor/index.svelte

@@ -9,7 +9,7 @@
   import AIPanel from "./Panels/AI/index.svelte"
   import FilePanel from "./Panels/File/index.svelte"
   import { onDestroy } from "svelte"
-  import { browser } from "$app/environment"
+  import { BROWSER as browser } from "esm-env"
 
   let { manager } = $props()
 

package/dist/Components/Link/index.svelte.js

@@ -8,8 +8,6 @@ import {
   set_closurable,
   set_closurable_color,
 } from "../../client/index.js"
-import { goto } from "$app/navigation"
-// import { page } from "$app/state"
 
 export { normalize_link_href }
 
@@ -30,18 +28,18 @@ export function create_link_manager(config) {
   let display_text = $derived(set_closurable(config?.display_text, null))
   let text_color = $derived(set_closurable_color(config?.text_color, null))
   let is_internal_link = $derived(is_internal_href(href))
-  // let is_internal_link = $derived(new URL(href, page?.url?.origin)?.origin === page?.url?.origin)
   let is_show_preview = $derived(set_closurable(config?.is_show_preview, !is_internal_link))
 
   function handle_a_click(e) {
     if (e?.defaultPrevented || e?.metaKey || e?.ctrlKey || e?.shiftKey || e?.altKey || (e?.button != null && e.button !== 0)) {
       return
     }
+    // Let SvelteKit's native anchor handler distinguish app routes, hashes and
+    // static resources, and preserve beforeNavigate cancellation.
+    if (is_internal_link) return
     e?.preventDefault?.()
     if (!href) return
-    if (is_internal_link) {
-      goto(href)
-    } else if (is_show_preview) {
+    if (is_show_preview) {
       popover_manager.open()
     } else {
       open_link()
@@ -51,7 +49,18 @@ export function create_link_manager(config) {
   function open_link(is_open_same_tab = false) {
     if (!href) return
     if (is_internal_link) {
-      goto(href)
+      if (typeof document === "undefined" || !document.body) return
+      // Imperative callers use the same cancellable native navigation as the
+      // rendered anchor, including static resources that are not Kit routes.
+      const anchor = document.createElement("a")
+      anchor.href = href
+      anchor.hidden = true
+      document.body.append(anchor)
+      try {
+        anchor.click()
+      } finally {
+        anchor.remove()
+      }
     } else {
       if (typeof config?.on_goto_external_link == "function") {
         config?.on_goto_external_link(href)
@@ -84,13 +93,17 @@ export function create_link_manager(config) {
       support_icon: "link",
       text: "Open Link In New Tab",
       text_align: "left",
-      on_click: () => open_link(),
+      href: () => (is_internal_link ? href : null),
+      target: "_blank",
+      rel: "noopener noreferrer",
+      on_click: () => { if (!is_internal_link) open_link() },
     })
     goto_link_same_tab_button_manager = create_button_manager({
       support_icon: "link_internal",
       text: "Open Link In Same Tab",
       text_align: "left",
-      on_click: () => open_link(true),
+      href: () => (is_internal_link ? href : null),
+      on_click: () => { if (!is_internal_link) open_link(true) },
     })
     inline_goto_link_button_manager = create_button_manager({
       type: "soft",
@@ -101,7 +114,8 @@ export function create_link_manager(config) {
       is_uniform: true,
       aria_label: "Open link",
       support_icon: () => (is_internal_link ? "link_internal" : "link"),
-      on_click: () => open_link(),
+      href: () => (is_internal_link ? href : null),
+      on_click: () => { if (!is_internal_link) open_link() },
     })
     qr_manager = create_qr_manager({
       data: href,

package/dist/Components/Location/index.svelte.js

@@ -1,7 +1,7 @@
 import { create_unique_id, set_closurable } from "../../client/index.js"
 import { create_popover_manager } from "../Popover/index.svelte.js"
 import { create_button_manager } from "../Button/index.svelte.js"
-import { browser } from "$app/environment"
+import { BROWSER as browser } from "esm-env"
 import { load_mapkit_script } from "../../client/mapkit.js"
 
 function as_finite_number(value) {

package/dist/Components/LocationInput/index.svelte.js

@@ -4,7 +4,7 @@ import { create_popover_manager } from "../Popover/index.svelte.js"
 import { create_text_input_manager } from "../TextInput/index.svelte.js"
 import { create_dropdown_manager } from "../Dropdown/index.svelte.js"
 import { create_checkbox_manager } from "../Checkbox/index.svelte.js"
-import { browser } from "$app/environment"
+import { BROWSER as browser } from "esm-env"
 import { get_mapkit_api, load_mapkit_script } from "../../client/mapkit.js"
 
 export function create_location_input_manager(config) {

package/dist/Components/TableAdvanced/index.svelte.js

@@ -19,7 +19,7 @@ import {
   variables_data_type_remaining_to_astc,
 } from "../../client/index.js"
 import { tick } from "svelte"
-import { browser } from "$app/environment"
+import { BROWSER as browser } from "esm-env"
 import { literal_types } from "../../client/types/index.js"
 
 export function create_table_advanced_manager(config) {

package/dist/Components/TextInput/index.svelte.js

@@ -1,7 +1,7 @@
 import { create_unique_id, set_closurable } from "../../client/index.js"
 import { create_popover_manager } from "../Popover/index.svelte.js"
 import { create_button_manager } from "../Button/index.svelte.js"
-import { browser } from "$app/environment"
+import { BROWSER as browser } from "esm-env"
 
 export function create_text_input_manager(config) {
   const defaults = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.1.85",
+  "version": "1.1.87",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "repository": {
@@ -32,9 +32,9 @@
     "dev": "vite dev",
     "build": "vite build",
     "preview": "vite preview",
-    "check": "svelte-check --tsconfig ./jsconfig.json --fail-on-warnings",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --fail-on-warnings",
     "test": "vitest run",
-    "package": "npm run clean:dist && svelte-package -t false",
+    "package": "npm run clean:dist && svelte-package --no-types",
     "pack:check": "node ./scripts/verify-package.js",
     "verify": "npm run check && npm run test && npm run package && npm run pack:check && npm run build",
     "clean:dist": "node ./scripts/clean-dist.js",
@@ -45,24 +45,25 @@
   },
   "dependencies": {
     "context-filter-polyfill": "^0.3.23",
+    "esm-env": "^1.2.2",
     "qr-code-styling": "^1.9.2"
   },
   "peerDependencies": {
-    "@sveltejs/kit": "^2.22.2",
+    "@sveltejs/kit": "^2.22.2 || ^3.0.0",
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-vercel": "^6.3.4",
-    "@sveltejs/kit": "^2.70.3",
-    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/adapter-vercel": "^7.0.0",
+    "@sveltejs/kit": "^3.0.0",
+    "@sveltejs/package": "^3.0.0",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
-    "@vercel/analytics": "^2.0.1",
+    "@vercel/analytics": "1.3.2",
     "jsdom": "^30.1.1",
     "svelte": "^5.57.1",
     "svelte-check": "^4.7.6",
     "typescript": "^6.0.3",
-    "vite": "^8.3.1",
-    "vitest": "^5.0.2"
+    "vite": "^8.3.2",
+    "vitest": "^5.0.3"
   },
   "homepage": "https://www.sveltekit-ui.com",
   "keywords": [
@@ -73,14 +74,17 @@
     "library"
   ],
   "engines": {
-    "node": ">=22.12.0"
+    "node": ">=24.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
   "overrides": {
     "brace-expansion": "^5.0.12",
-    "cookie": "^0.7.2",
     "tar": "^7.5.22"
+  },
+  "imports": {
+    "#lib": "./src/lib/index.js",
+    "#lib/*": "./src/lib/*"
   }
 }