@marianmeres/stuic 3.79.0 → 3.80.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -353,6 +353,8 @@ export function popover(anchorEl, fn) {
353
353
  position: fixed;
354
354
  position-anchor: ${anchorName};
355
355
  position-area: ${POSITION_MAP[currentOptions.position || "bottom"] || "bottom"};
356
+ max-width: calc(100vw - 1rem);
357
+ max-height: calc(100vh - 1rem);
356
358
  transition-duration: ${TRANSITION}ms;
357
359
  margin: ${offsetValue};
358
360
  `;
@@ -288,6 +288,7 @@ export function spotlight(targetEl, fn) {
288
288
  annotationEl.style.top = "";
289
289
  annotationEl.style.right = "";
290
290
  annotationEl.style.bottom = "";
291
+ annotationEl.style.transform = "";
291
292
  if (pos.startsWith("top")) {
292
293
  annotationEl.style.left = `${x}px`;
293
294
  annotationEl.style.bottom = `${window.innerHeight - y + offset}px`;
@@ -304,6 +305,27 @@ export function spotlight(targetEl, fn) {
304
305
  annotationEl.style.left = `${x + w + offset}px`;
305
306
  annotationEl.style.top = `${y}px`;
306
307
  }
308
+ // Clamp into viewport after layout settles. Using transform keeps the
309
+ // underlying left/top intent intact so the next call recomputes cleanly.
310
+ requestAnimationFrame(() => {
311
+ if (!annotationEl)
312
+ return;
313
+ const a = annotationEl.getBoundingClientRect();
314
+ const m = 8;
315
+ const vw = window.innerWidth;
316
+ const vh = window.innerHeight;
317
+ let dx = 0;
318
+ let dy = 0;
319
+ if (a.left < m)
320
+ dx = m - a.left;
321
+ else if (a.right > vw - m)
322
+ dx = vw - m - a.right;
323
+ if (a.top < m)
324
+ dy = m - a.top;
325
+ else if (a.bottom > vh - m)
326
+ dy = vh - m - a.bottom;
327
+ annotationEl.style.transform = dx || dy ? `translate(${dx}px, ${dy}px)` : "";
328
+ });
307
329
  }
308
330
  function renderContent() {
309
331
  if (!annotationEl || !currentOptions.content)
@@ -384,6 +406,10 @@ export function spotlight(targetEl, fn) {
384
406
  position: fixed;
385
407
  position-anchor: ${anchorName};
386
408
  position-area: ${POSITION_MAP[currentOptions.position || "bottom"] || "bottom"};
409
+ position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
410
+ position-try-order: most-width;
411
+ max-width: calc(100vw - 1rem);
412
+ max-height: calc(100vh - 1rem);
387
413
  transition-duration: ${TRANSITION}ms;
388
414
  margin: ${offsetValue};
389
415
  z-index: 50;
package/package.json CHANGED
@@ -1,93 +1,95 @@
1
1
  {
2
- "name": "@marianmeres/stuic",
3
- "version": "3.79.0",
4
- "files": [
5
- "dist",
6
- "!dist/**/*.test.*",
7
- "!dist/**/*.spec.*",
8
- "docs",
9
- "AGENTS.md",
10
- "CLAUDE.md",
11
- "API.md"
12
- ],
13
- "sideEffects": [
14
- "**/*.css"
15
- ],
16
- "svelte": "./dist/index.js",
17
- "types": "./dist/index.d.ts",
18
- "type": "module",
19
- "exports": {
20
- ".": {
21
- "types": "./dist/index.d.ts",
22
- "svelte": "./dist/index.js"
23
- },
24
- "./utils": {
25
- "types": "./dist/utils/index.d.ts",
26
- "default": "./dist/utils/index.js"
27
- },
28
- "./phone-validation": {
29
- "types": "./dist/components/Input/phone-validation.d.ts",
30
- "default": "./dist/components/Input/phone-validation.js"
31
- }
32
- },
33
- "peerDependencies": {
34
- "svelte": "^5.0.0"
35
- },
36
- "devDependencies": {
37
- "@eslint/js": "^9.39.4",
38
- "@marianmeres/random-human-readable": "^1.9.0",
39
- "@sveltejs/adapter-auto": "^4.0.0",
40
- "@sveltejs/kit": "^2.57.1",
41
- "@sveltejs/package": "^2.5.7",
42
- "@sveltejs/vite-plugin-svelte": "^6.2.4",
43
- "@tailwindcss/cli": "^4.2.2",
44
- "@tailwindcss/forms": "^0.5.11",
45
- "@tailwindcss/typography": "^0.5.19",
46
- "@tailwindcss/vite": "^4.2.2",
47
- "@types/node": "^25.6.0",
48
- "dotenv": "^16.6.1",
49
- "eslint": "^9.39.4",
50
- "globals": "^16.5.0",
51
- "prettier": "^3.8.3",
52
- "prettier-plugin-svelte": "^3.5.1",
53
- "publint": "^0.3.18",
54
- "svelte": "^5.55.4",
55
- "svelte-check": "^4.4.6",
56
- "tailwindcss": "^4.2.2",
57
- "tsx": "^4.21.0",
58
- "typescript": "^5.9.3",
59
- "typescript-eslint": "^8.58.2",
60
- "vite": "^7.3.2",
61
- "vitest": "^3.2.4"
62
- },
63
- "dependencies": {
64
- "@marianmeres/clog": "^3.17.1",
65
- "@marianmeres/cron": "^2.0.0",
66
- "@marianmeres/design-tokens": "^1.4.0",
67
- "@marianmeres/icons-fns": "^5.0.0",
68
- "@marianmeres/item-collection": "^1.4.2",
69
- "@marianmeres/paging-store": "^2.1.1",
70
- "@marianmeres/parse-boolean": "^2.1.0",
71
- "@marianmeres/ticker": "^1.17.1",
72
- "@marianmeres/tree": "^2.3.0",
73
- "libphonenumber-js": "^1.12.41",
74
- "runed": "^0.23.4",
75
- "tailwind-merge": "^3.5.0"
76
- },
77
- "scripts": {
78
- "dev": "vite dev",
79
- "build": "vite build && pnpm run prepack",
80
- "preview": "vite preview",
81
- "package": "pnpm run prepack",
82
- "package:watch": "svelte-kit sync && svelte-package --watch && publint",
83
- "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
84
- "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
85
- "format": "prettier --write .",
86
- "lint": "eslint . && prettier --check .",
87
- "test": "vitest --dir src/",
88
- "svelte-check": "svelte-check",
89
- "svelte-package": "svelte-package",
90
- "rp": "pnpm run build && ./release.sh patch",
91
- "rpm": "pnpm run build && ./release.sh minor"
92
- }
93
- }
2
+ "name": "@marianmeres/stuic",
3
+ "version": "3.80.1",
4
+ "scripts": {
5
+ "dev": "vite dev",
6
+ "build": "vite build && pnpm run prepack",
7
+ "preview": "vite preview",
8
+ "prepare": "svelte-kit sync || echo ''",
9
+ "prepack": "svelte-kit sync && svelte-package && publint",
10
+ "package": "pnpm run prepack",
11
+ "package:watch": "svelte-kit sync && svelte-package --watch && publint",
12
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
13
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
14
+ "format": "prettier --write .",
15
+ "lint": "eslint . && prettier --check .",
16
+ "test": "vitest --dir src/",
17
+ "svelte-check": "svelte-check",
18
+ "svelte-package": "svelte-package",
19
+ "rp": "pnpm run build && ./release.sh patch",
20
+ "rpm": "pnpm run build && ./release.sh minor"
21
+ },
22
+ "files": [
23
+ "dist",
24
+ "!dist/**/*.test.*",
25
+ "!dist/**/*.spec.*",
26
+ "docs",
27
+ "AGENTS.md",
28
+ "CLAUDE.md",
29
+ "API.md"
30
+ ],
31
+ "sideEffects": [
32
+ "**/*.css"
33
+ ],
34
+ "svelte": "./dist/index.js",
35
+ "types": "./dist/index.d.ts",
36
+ "type": "module",
37
+ "exports": {
38
+ ".": {
39
+ "types": "./dist/index.d.ts",
40
+ "svelte": "./dist/index.js"
41
+ },
42
+ "./utils": {
43
+ "types": "./dist/utils/index.d.ts",
44
+ "default": "./dist/utils/index.js"
45
+ },
46
+ "./phone-validation": {
47
+ "types": "./dist/components/Input/phone-validation.d.ts",
48
+ "default": "./dist/components/Input/phone-validation.js"
49
+ }
50
+ },
51
+ "peerDependencies": {
52
+ "svelte": "^5.0.0"
53
+ },
54
+ "devDependencies": {
55
+ "@eslint/js": "^9.39.4",
56
+ "@marianmeres/random-human-readable": "^1.9.0",
57
+ "@sveltejs/adapter-auto": "^4.0.0",
58
+ "@sveltejs/kit": "^2.59.1",
59
+ "@sveltejs/package": "^2.5.7",
60
+ "@sveltejs/vite-plugin-svelte": "^6.2.4",
61
+ "@tailwindcss/cli": "^4.3.0",
62
+ "@tailwindcss/forms": "^0.5.11",
63
+ "@tailwindcss/typography": "^0.5.19",
64
+ "@tailwindcss/vite": "^4.3.0",
65
+ "@types/node": "^25.6.2",
66
+ "dotenv": "^16.6.1",
67
+ "eslint": "^9.39.4",
68
+ "globals": "^16.5.0",
69
+ "prettier": "^3.8.3",
70
+ "prettier-plugin-svelte": "^3.5.1",
71
+ "publint": "^0.3.20",
72
+ "svelte": "^5.55.5",
73
+ "svelte-check": "^4.4.8",
74
+ "tailwindcss": "^4.3.0",
75
+ "tsx": "^4.21.0",
76
+ "typescript": "^5.9.3",
77
+ "typescript-eslint": "^8.59.2",
78
+ "vite": "^7.3.3",
79
+ "vitest": "^3.2.4"
80
+ },
81
+ "dependencies": {
82
+ "@marianmeres/clog": "^3.18.1",
83
+ "@marianmeres/cron": "^2.0.0",
84
+ "@marianmeres/design-tokens": "^1.4.1",
85
+ "@marianmeres/icons-fns": "^5.0.0",
86
+ "@marianmeres/item-collection": "^1.4.2",
87
+ "@marianmeres/paging-store": "^2.1.1",
88
+ "@marianmeres/parse-boolean": "^2.1.0",
89
+ "@marianmeres/ticker": "^1.17.1",
90
+ "@marianmeres/tree": "^2.3.0",
91
+ "libphonenumber-js": "^1.13.0",
92
+ "runed": "^0.23.4",
93
+ "tailwind-merge": "^3.6.0"
94
+ }
95
+ }