@hkdigital/lib-sveltekit 0.1.62 → 0.1.65

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.
Files changed (209) hide show
  1. package/README.md +135 -135
  2. package/dist/assets/autospuiten/car-paint-picker.js +41 -41
  3. package/dist/assets/autospuiten/labels.js +7 -7
  4. package/dist/classes/data/IterableTree.js +243 -243
  5. package/dist/classes/data/Selector.js +190 -190
  6. package/dist/classes/data/index.js +2 -2
  7. package/dist/classes/index.js +4 -4
  8. package/dist/classes/promise/HkPromise.js +377 -377
  9. package/dist/classes/promise/index.js +1 -1
  10. package/dist/classes/stores/SubscribersCount.js +107 -107
  11. package/dist/classes/stores/index.js +1 -1
  12. package/dist/classes/streams/LogTransformStream.js +19 -19
  13. package/dist/classes/streams/ServerEventsStore.js +110 -110
  14. package/dist/classes/streams/TimeStampSource.js +26 -26
  15. package/dist/classes/streams/index.js +3 -3
  16. package/dist/classes/svelte/audio/AudioLoader.svelte.js +58 -58
  17. package/dist/classes/svelte/audio/AudioScene.svelte.js +295 -295
  18. package/dist/classes/svelte/audio/mocks.js +35 -35
  19. package/dist/classes/svelte/finite-state-machine/FiniteStateMachine.svelte.js +133 -133
  20. package/dist/classes/svelte/finite-state-machine/index.js +1 -1
  21. package/dist/classes/svelte/image/ImageLoader.svelte.js +47 -47
  22. package/dist/classes/svelte/image/ImageScene.svelte.js +253 -253
  23. package/dist/classes/svelte/image/ImageVariantsLoader.svelte.js +152 -152
  24. package/dist/classes/svelte/image/index.js +4 -4
  25. package/dist/classes/svelte/image/mocks.js +35 -35
  26. package/dist/classes/svelte/image/typedef.js +8 -8
  27. package/dist/classes/svelte/index.js +14 -14
  28. package/dist/classes/svelte/loading-state-machine/LoadingStateMachine.svelte.js +109 -109
  29. package/dist/classes/svelte/loading-state-machine/constants.js +16 -16
  30. package/dist/classes/svelte/loading-state-machine/index.js +3 -3
  31. package/dist/classes/svelte/network-loader/NetworkLoader.svelte.js +331 -331
  32. package/dist/classes/svelte/network-loader/constants.js +3 -3
  33. package/dist/classes/svelte/network-loader/index.js +3 -3
  34. package/dist/classes/svelte/network-loader/mocks.js +30 -30
  35. package/dist/classes/svelte/network-loader/typedef.js +8 -8
  36. package/dist/components/area/HkArea.svelte +49 -49
  37. package/dist/components/area/HkGridArea.svelte +77 -77
  38. package/dist/components/area/index.js +2 -2
  39. package/dist/components/buttons/button/Button.svelte +82 -82
  40. package/dist/components/buttons/button-icon-steeze/SteezeIconButton.svelte +30 -30
  41. package/dist/components/buttons/button-text/TextButton.svelte +21 -21
  42. package/dist/components/buttons/index.js +3 -3
  43. package/dist/components/debug/debug-panel-design-scaling/DebugPanelDesignScaling.svelte +146 -146
  44. package/dist/components/debug/index.js +1 -1
  45. package/dist/components/hkdev/blocks/TextBlock.svelte +46 -46
  46. package/dist/components/hkdev/buttons/CheckButton.svelte +62 -62
  47. package/dist/components/icons/HkIcon.svelte +86 -86
  48. package/dist/components/icons/HkTabIcon.svelte +116 -116
  49. package/dist/components/icons/SteezeIcon.svelte +97 -97
  50. package/dist/components/icons/index.js +6 -6
  51. package/dist/components/icons/typedef.js +16 -16
  52. package/dist/components/index.js +2 -2
  53. package/dist/components/inputs/index.js +1 -1
  54. package/dist/components/inputs/text-input/TestTextInput.svelte__ +102 -102
  55. package/dist/components/inputs/text-input/TextInput.svelte +223 -223
  56. package/dist/components/inputs/text-input/TextInput.svelte___ +83 -83
  57. package/dist/components/inputs/text-input/assets/IconInvalid.svelte +14 -14
  58. package/dist/components/inputs/text-input/assets/IconValid.svelte +12 -12
  59. package/dist/components/layout/grid-layers/GridLayers.svelte +167 -167
  60. package/dist/components/layout/index.js +1 -1
  61. package/dist/components/panels/index.js +1 -1
  62. package/dist/components/panels/panel/Panel.svelte +43 -43
  63. package/dist/components/rows/index.js +3 -3
  64. package/dist/components/rows/panel-grid-row/PanelGridRow.svelte +104 -104
  65. package/dist/components/rows/panel-row-2/PanelRow2.svelte +40 -40
  66. package/dist/components/tab-bar/HkTabBar.state.svelte.js +149 -149
  67. package/dist/components/tab-bar/HkTabBar.svelte +74 -74
  68. package/dist/components/tab-bar/HkTabBarSelector.state.svelte.js +93 -93
  69. package/dist/components/tab-bar/HkTabBarSelector.svelte +49 -49
  70. package/dist/components/tab-bar/index.js +17 -17
  71. package/dist/components/tab-bar/typedef.js +8 -8
  72. package/dist/config/imagetools-config.js +189 -189
  73. package/dist/config/imagetools.d.ts +71 -71
  74. package/dist/config/typedef.js +8 -8
  75. package/dist/constants/bases.js +13 -13
  76. package/dist/constants/errors/api.js +9 -9
  77. package/dist/constants/errors/generic.js +5 -5
  78. package/dist/constants/errors/index.js +3 -3
  79. package/dist/constants/errors/jwt.js +5 -5
  80. package/dist/constants/http/headers.js +6 -6
  81. package/dist/constants/http/index.js +2 -2
  82. package/dist/constants/http/methods.js +2 -2
  83. package/dist/constants/index.js +3 -3
  84. package/dist/constants/mime/application.js +5 -5
  85. package/dist/constants/mime/audio.js +13 -13
  86. package/dist/constants/mime/image.js +3 -3
  87. package/dist/constants/mime/index.js +4 -4
  88. package/dist/constants/mime/text.js +2 -2
  89. package/dist/constants/regexp/index.js +31 -31
  90. package/dist/constants/regexp/inspiratie.js__ +95 -95
  91. package/dist/constants/regexp/text.js +49 -49
  92. package/dist/constants/regexp/user.js +32 -32
  93. package/dist/constants/regexp/web.js +3 -3
  94. package/dist/constants/state-labels/input-states.js +11 -11
  95. package/dist/constants/state-labels/submit-states.js +4 -4
  96. package/dist/constants/time.js +28 -28
  97. package/dist/css/utilities.css +43 -43
  98. package/dist/design/design-config.js +73 -73
  99. package/dist/design/tailwind-theme-extend.js +158 -158
  100. package/dist/schemas/index.js +1 -1
  101. package/dist/schemas/validate-url.js +180 -180
  102. package/dist/server/index.js +1 -1
  103. package/dist/server/logger.js +94 -94
  104. package/dist/states/index.js +1 -1
  105. package/dist/states/navigation.svelte.js +55 -55
  106. package/dist/stores/index.js +1 -1
  107. package/dist/stores/theme.js +80 -80
  108. package/dist/themes/hkdev/components/blocks/text-block.css +41 -41
  109. package/dist/themes/hkdev/components/boxes/game-box.css +12 -12
  110. package/dist/themes/hkdev/components/buttons/button-icon-steeze.css +22 -22
  111. package/dist/themes/hkdev/components/buttons/button-text.css +32 -32
  112. package/dist/themes/hkdev/components/buttons/button.css +142 -142
  113. package/dist/themes/hkdev/components/buttons/skip-button.css +6 -6
  114. package/dist/themes/hkdev/components/icons/icon-steeze.css +22 -22
  115. package/dist/themes/hkdev/components/inputs/text-input.css +104 -104
  116. package/dist/themes/hkdev/components/panels/panel.css +27 -27
  117. package/dist/themes/hkdev/components/rows/panel-grid-row.css +6 -6
  118. package/dist/themes/hkdev/components/rows/panel-row-2.css +7 -7
  119. package/dist/themes/hkdev/components.css +47 -47
  120. package/dist/themes/hkdev/debug.css +1 -1
  121. package/dist/themes/hkdev/global/layout.css +39 -39
  122. package/dist/themes/hkdev/global/on-colors.css +53 -53
  123. package/dist/themes/hkdev/globals.css +11 -11
  124. package/dist/themes/hkdev/responsive.css +12 -12
  125. package/dist/themes/hkdev/theme-ext.js +15 -15
  126. package/dist/themes/hkdev/theme.js +235 -235
  127. package/dist/themes/index.js +1 -1
  128. package/dist/util/array/index.js +455 -455
  129. package/dist/util/bases/base58.js +262 -262
  130. package/dist/util/bases/index.js +1 -1
  131. package/dist/util/compare/index.js +247 -247
  132. package/dist/util/css/css-vars.js +83 -83
  133. package/dist/util/css/index.js +1 -1
  134. package/dist/util/design-system/components/states.js +22 -22
  135. package/dist/util/design-system/css/clamp.js +66 -66
  136. package/dist/util/design-system/css/root-design-vars.js +100 -100
  137. package/dist/util/design-system/index.js +5 -5
  138. package/dist/util/design-system/layout/scaling.js +228 -228
  139. package/dist/util/design-system/skeleton.js +208 -208
  140. package/dist/util/design-system/tailwind.js +288 -288
  141. package/dist/util/expect/arrays.js +47 -47
  142. package/dist/util/expect/index.js +259 -259
  143. package/dist/util/expect/primitives.js +55 -55
  144. package/dist/util/expect/url.js +60 -60
  145. package/dist/util/function/index.js +218 -218
  146. package/dist/util/http/errors.js +97 -97
  147. package/dist/util/http/headers.js +45 -45
  148. package/dist/util/http/http-request.js +294 -294
  149. package/dist/util/http/index.js +22 -22
  150. package/dist/util/http/json-request.js +143 -143
  151. package/dist/util/http/mocks.js +65 -65
  152. package/dist/util/http/response.js +241 -241
  153. package/dist/util/http/test-data__/content-length-test-hkdigital-small.V4HfZyBQ.avif +0 -0
  154. package/dist/util/http/url.js +52 -52
  155. package/dist/util/image/index.js +86 -86
  156. package/dist/util/index.js +2 -2
  157. package/dist/util/is/index.js +140 -140
  158. package/dist/util/iterate/index.js +234 -234
  159. package/dist/util/object/index.js +1361 -1361
  160. package/dist/util/singleton/index.js +97 -97
  161. package/dist/util/string/array-path.js +75 -75
  162. package/dist/util/string/convert.js +54 -54
  163. package/dist/util/string/fs.js +226 -226
  164. package/dist/util/string/index.js +5 -5
  165. package/dist/util/string/interpolate.js +61 -61
  166. package/dist/util/string/pad.js +10 -10
  167. package/dist/util/svelte/index.js +4 -4
  168. package/dist/util/svelte/loading/loading-tracker.svelte.js +108 -108
  169. package/dist/util/svelte/observe/index.js +49 -49
  170. package/dist/util/svelte/state-context/index.js +83 -83
  171. package/dist/util/svelte/wait/index.js +38 -38
  172. package/dist/util/sveltekit/index.js +1 -1
  173. package/dist/util/sveltekit/route-folders/index.js +101 -101
  174. package/dist/util/time/index.js +323 -323
  175. package/dist/util/unique/index.js +249 -249
  176. package/dist/valibot/date.js__ +10 -10
  177. package/dist/valibot/index.js +9 -9
  178. package/dist/valibot/url.js +95 -95
  179. package/dist/valibot/user.js +23 -23
  180. package/dist/widgets/button-group/ButtonGroup.svelte +82 -94
  181. package/dist/widgets/button-group/ButtonGroup.svelte.d.ts +0 -2
  182. package/dist/widgets/button-group/typedef.js +10 -10
  183. package/dist/widgets/compare-left-right/CompareLeftRight.svelte +179 -179
  184. package/dist/widgets/compare-left-right/index.js +1 -1
  185. package/dist/widgets/game-box/GameBox.svelte +579 -186
  186. package/dist/widgets/game-box/GameBox.svelte.d.ts +64 -4
  187. package/dist/widgets/game-box/gamebox.util.js +83 -83
  188. package/dist/widgets/hk-app-layout/HkAppLayout.state.svelte.js +25 -25
  189. package/dist/widgets/hk-app-layout/HkAppLayout.svelte +251 -251
  190. package/dist/widgets/image-box/ImageBox.svelte +212 -212
  191. package/dist/widgets/image-box/index.js +5 -5
  192. package/dist/widgets/image-box/typedef.js +32 -32
  193. package/dist/widgets/index.js +23 -23
  194. package/dist/widgets/presenter/(broken) Presenter.state.svelte.js__ +613 -0
  195. package/dist/widgets/presenter/ImageSlide.svelte +64 -64
  196. package/dist/widgets/presenter/Presenter.state.svelte.js +636 -636
  197. package/dist/widgets/presenter/Presenter.svelte +140 -140
  198. package/dist/widgets/presenter/Presenter.svelte__ +125 -0
  199. package/dist/widgets/presenter/constants.js +7 -7
  200. package/dist/widgets/presenter/index.js +10 -10
  201. package/dist/widgets/presenter/typedef.js +106 -106
  202. package/dist/widgets/presenter/util.js +210 -210
  203. package/dist/widgets/virtual-viewport/VirtualViewport.svelte +196 -196
  204. package/dist/zod/all.js +33 -33
  205. package/dist/zod/generic.js +11 -11
  206. package/dist/zod/javascript.js +32 -32
  207. package/dist/zod/user.js +16 -16
  208. package/dist/zod/web.js +52 -52
  209. package/package.json +102 -102
@@ -1,22 +1,22 @@
1
- /**
2
- * Generates state classes from an object of state variables
3
- *
4
- * @param {Object.<string, boolean>} stateObject
5
- * Object with state names as keys and boolean values
6
- *
7
- * @returns {string} Space-separated string of state classes
8
- *
9
- * @example
10
- * // Returns "state-selected state-error"
11
- * toStateClasses({ selected: true, loading: false, error: true });
12
- */
13
- export function toStateClasses(stateObject) {
14
- if (!stateObject || typeof stateObject !== 'object') {
15
- return '';
16
- }
17
-
18
- return Object.entries(stateObject)
19
- .filter((entry) => entry[1] === true)
20
- .map(([state]) => `state-${state}`)
21
- .join(' ');
22
- }
1
+ /**
2
+ * Generates state classes from an object of state variables
3
+ *
4
+ * @param {Object.<string, boolean>} stateObject
5
+ * Object with state names as keys and boolean values
6
+ *
7
+ * @returns {string} Space-separated string of state classes
8
+ *
9
+ * @example
10
+ * // Returns "state-selected state-error"
11
+ * toStateClasses({ selected: true, loading: false, error: true });
12
+ */
13
+ export function toStateClasses(stateObject) {
14
+ if (!stateObject || typeof stateObject !== 'object') {
15
+ return '';
16
+ }
17
+
18
+ return Object.entries(stateObject)
19
+ .filter((entry) => entry[1] === true)
20
+ .map(([state]) => `state-${state}`)
21
+ .join(' ');
22
+ }
@@ -1,66 +1,66 @@
1
- import { getRootCssVar } from '../../css/index.js';
2
-
3
- /**
4
- * Cache to that ensures we parse CSS clamp parameters only once
5
- * @type {Object.<string, {min: number, max: number}>}
6
- */
7
- let clampParamCache = {};
8
-
9
- /**
10
- * Extract clamp parameters from a CSS variable
11
- *
12
- * @param {string} varName - CSS variable name without '--'
13
- * @returns {Object} Object with min and max values
14
- * @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
15
- */
16
- export function getClampParams(varName) {
17
- // Check cache first
18
- if (clampParamCache[varName]) {
19
- return clampParamCache[varName];
20
- }
21
-
22
- // Get the CSS variable value using the existing utility
23
- const declaration = getRootCssVar(varName);
24
-
25
- if (declaration === null) {
26
- throw new Error(`CSS variable --${varName} not found`);
27
- }
28
-
29
- // Parse clamp() function values
30
- const clampMatch =
31
- typeof declaration === 'string'
32
- ? declaration.match(
33
- /clamp\s*\(\s*([\d.]+)\s*,\s*[^,]+\s*,\s*([\d.]+)\s*\)/
34
- )
35
- : null;
36
-
37
- if (!clampMatch || clampMatch.length < 3) {
38
- // console.log(declaration);
39
- throw new Error(
40
- `CSS variable --${varName} does not contain a valid clamp function`
41
- );
42
- }
43
-
44
- const min = parseFloat(clampMatch[1]);
45
- const max = parseFloat(clampMatch[2]);
46
-
47
- if (isNaN(min) || isNaN(max)) {
48
- throw new Error(`Invalid min/max values in CSS variable --${varName}`);
49
- }
50
-
51
- // Cache the result
52
- clampParamCache[varName] = { min, max };
53
- return { min, max };
54
- }
55
-
56
- /**
57
- * CSS clamp function implementation
58
- *
59
- * @param {number} min - Minimum value
60
- * @param {number} value - Value to clamp
61
- * @param {number} max - Maximum value
62
- * @returns {number} Clamped value
63
- */
64
- export function clamp(min, value, max) {
65
- return Math.max(min, Math.min(value, max));
66
- }
1
+ import { getRootCssVar } from '../../css/index.js';
2
+
3
+ /**
4
+ * Cache to that ensures we parse CSS clamp parameters only once
5
+ * @type {Object.<string, {min: number, max: number}>}
6
+ */
7
+ let clampParamCache = {};
8
+
9
+ /**
10
+ * Extract clamp parameters from a CSS variable
11
+ *
12
+ * @param {string} varName - CSS variable name without '--'
13
+ * @returns {Object} Object with min and max values
14
+ * @throws {Error} If the CSS variable doesn't exist or doesn't contain a valid clamp function
15
+ */
16
+ export function getClampParams(varName) {
17
+ // Check cache first
18
+ if (clampParamCache[varName]) {
19
+ return clampParamCache[varName];
20
+ }
21
+
22
+ // Get the CSS variable value using the existing utility
23
+ const declaration = getRootCssVar(varName);
24
+
25
+ if (declaration === null) {
26
+ throw new Error(`CSS variable --${varName} not found`);
27
+ }
28
+
29
+ // Parse clamp() function values
30
+ const clampMatch =
31
+ typeof declaration === 'string'
32
+ ? declaration.match(
33
+ /clamp\s*\(\s*([\d.]+)\s*,\s*[^,]+\s*,\s*([\d.]+)\s*\)/
34
+ )
35
+ : null;
36
+
37
+ if (!clampMatch || clampMatch.length < 3) {
38
+ // console.log(declaration);
39
+ throw new Error(
40
+ `CSS variable --${varName} does not contain a valid clamp function`
41
+ );
42
+ }
43
+
44
+ const min = parseFloat(clampMatch[1]);
45
+ const max = parseFloat(clampMatch[2]);
46
+
47
+ if (isNaN(min) || isNaN(max)) {
48
+ throw new Error(`Invalid min/max values in CSS variable --${varName}`);
49
+ }
50
+
51
+ // Cache the result
52
+ clampParamCache[varName] = { min, max };
53
+ return { min, max };
54
+ }
55
+
56
+ /**
57
+ * CSS clamp function implementation
58
+ *
59
+ * @param {number} min - Minimum value
60
+ * @param {number} value - Value to clamp
61
+ * @param {number} max - Maximum value
62
+ * @returns {number} Clamped value
63
+ */
64
+ export function clamp(min, value, max) {
65
+ return Math.max(min, Math.min(value, max));
66
+ }
@@ -1,100 +1,100 @@
1
- import { getRootCssVar } from '../../css/css-vars.js';
2
-
3
- /**
4
- * Generates a complete HTML style tag with CSS custom properties for
5
- * the design system based on provided configuration.
6
- *
7
- * @param {Object} design - Design dimensions configuration
8
- * @param {number} design.width - The design width in pixels
9
- * @param {number} design.height - The design height in pixels
10
- * @param {Object} clamping - Scaling configuration parameters
11
- * @param {Object} clamping.ui - UI clamping configuration
12
- * @param {number} clamping.ui.min - Minimum UI scaling factor
13
- * @param {number} clamping.ui.max - Maximum UI scaling factor
14
- * @param {Object} clamping.textBase - Base text scaling configuration
15
- * @param {number} clamping.textBase.min - Minimum base text scaling
16
- * @param {number} clamping.textBase.max - Maximum base text scaling
17
- * @param {Object} clamping.textHeading - Heading text clamping configuration
18
- * @param {number} clamping.textHeading.min - Minimum heading text scaling
19
- * @param {number} clamping.textHeading.max - Maximum heading text scaling
20
- * @param {Object} clamping.textUi - UI text clamping configuration
21
- * @param {number} clamping.textUi.min - Minimum UI text scaling
22
- * @param {number} clamping.textUi.max - Maximum UI text scaling
23
- *
24
- * @returns {string} Complete HTML style tag with design system CSS variables
25
- *
26
- * @example
27
- * // +layout.svelte
28
- * <script>
29
- * import { DESIGN, CLAMPING } from '../../../tailwind/extend/clamping/config.js';
30
- *
31
- * import { rootDesignVarsHTML } from '../index.js';
32
- * </script>
33
- *
34
- * <svelte:head>
35
- * {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
36
- * </svelte:head>
37
- *
38
- * // Generates style tag for use in svelte:head
39
- * // <style>:root { --design-width: 1920; ... }</style>
40
- */
41
- export function rootDesignVarsHTML(design, clamping) {
42
- return `<style>:root {
43
- /* Design dimensions */
44
- --design-width: ${design.width};
45
- --design-height: ${design.height};
46
-
47
- /* Base clamping units */
48
- --scale-w: 1;
49
- --scale-h: 1;
50
- --scale-viewport: min(var(--scale-w), var(--scale-h));
51
-
52
- /* Scaling factors with configurable clamping */
53
- --scale-ui: clamp(${clamping.ui.min}, var(--scale-viewport), ${clamping.ui.max});
54
- --scale-text-base: clamp(${clamping.textBase.min}, var(--scale-viewport), ${clamping.textBase.max});
55
- --scale-text-heading: clamp(${clamping.textHeading.min}, var(--scale-viewport), ${clamping.textHeading.max});
56
- --scale-text-ui: clamp(${clamping.textUi.min}, var(--scale-viewport), ${clamping.textUi.max});
57
- }</style>`;
58
- }
59
-
60
- /**
61
- * Get design width from CSS variables
62
- *
63
- * @returns {number} Design width
64
- */
65
- export function getRootCssDesignWidth() {
66
- return getRootCssVar('design-width');
67
- }
68
-
69
- /**
70
- * Get design height from CSS variables
71
- *
72
- * @returns {number} Design height
73
- */
74
- export function getRootCssDesignHeight() {
75
- return getRootCssVar('design-height');
76
- }
77
-
78
- /**
79
- * Retrieves all current scaling factors from CSS variables
80
- *
81
- * @returns {Object} An object containing all scaling factors
82
- */
83
- export function getAllRootScalingVars() {
84
- const styles = getComputedStyle(document.documentElement);
85
-
86
- return {
87
- scaleW: parseFloat(styles.getPropertyValue('--scale-w').trim()) || 0,
88
- scaleH: parseFloat(styles.getPropertyValue('--scale-h').trim()) || 0,
89
- scaleViewport:
90
- parseFloat(styles.getPropertyValue('--scale-viewport').trim()) || 0,
91
-
92
- scaleUI: parseFloat(styles.getPropertyValue('--scale-ui').trim()) || 0,
93
- scaleTextBase:
94
- parseFloat(styles.getPropertyValue('--scale-text-base').trim()) || 0,
95
- scaleTextHeading:
96
- parseFloat(styles.getPropertyValue('--scale-text-heading').trim()) || 0,
97
- scaleTextUI:
98
- parseFloat(styles.getPropertyValue('--scale-text-ui').trim()) || 0
99
- };
100
- }
1
+ import { getRootCssVar } from '../../css/css-vars.js';
2
+
3
+ /**
4
+ * Generates a complete HTML style tag with CSS custom properties for
5
+ * the design system based on provided configuration.
6
+ *
7
+ * @param {Object} design - Design dimensions configuration
8
+ * @param {number} design.width - The design width in pixels
9
+ * @param {number} design.height - The design height in pixels
10
+ * @param {Object} clamping - Scaling configuration parameters
11
+ * @param {Object} clamping.ui - UI clamping configuration
12
+ * @param {number} clamping.ui.min - Minimum UI scaling factor
13
+ * @param {number} clamping.ui.max - Maximum UI scaling factor
14
+ * @param {Object} clamping.textBase - Base text scaling configuration
15
+ * @param {number} clamping.textBase.min - Minimum base text scaling
16
+ * @param {number} clamping.textBase.max - Maximum base text scaling
17
+ * @param {Object} clamping.textHeading - Heading text clamping configuration
18
+ * @param {number} clamping.textHeading.min - Minimum heading text scaling
19
+ * @param {number} clamping.textHeading.max - Maximum heading text scaling
20
+ * @param {Object} clamping.textUi - UI text clamping configuration
21
+ * @param {number} clamping.textUi.min - Minimum UI text scaling
22
+ * @param {number} clamping.textUi.max - Maximum UI text scaling
23
+ *
24
+ * @returns {string} Complete HTML style tag with design system CSS variables
25
+ *
26
+ * @example
27
+ * // +layout.svelte
28
+ * <script>
29
+ * import { DESIGN, CLAMPING } from '../../../tailwind/extend/clamping/config.js';
30
+ *
31
+ * import { rootDesignVarsHTML } from '../index.js';
32
+ * </script>
33
+ *
34
+ * <svelte:head>
35
+ * {@html rootDesignVarsHTML(DESIGN, CLAMPING)}
36
+ * </svelte:head>
37
+ *
38
+ * // Generates style tag for use in svelte:head
39
+ * // <style>:root { --design-width: 1920; ... }</style>
40
+ */
41
+ export function rootDesignVarsHTML(design, clamping) {
42
+ return `<style>:root {
43
+ /* Design dimensions */
44
+ --design-width: ${design.width};
45
+ --design-height: ${design.height};
46
+
47
+ /* Base clamping units */
48
+ --scale-w: 1;
49
+ --scale-h: 1;
50
+ --scale-viewport: min(var(--scale-w), var(--scale-h));
51
+
52
+ /* Scaling factors with configurable clamping */
53
+ --scale-ui: clamp(${clamping.ui.min}, var(--scale-viewport), ${clamping.ui.max});
54
+ --scale-text-base: clamp(${clamping.textBase.min}, var(--scale-viewport), ${clamping.textBase.max});
55
+ --scale-text-heading: clamp(${clamping.textHeading.min}, var(--scale-viewport), ${clamping.textHeading.max});
56
+ --scale-text-ui: clamp(${clamping.textUi.min}, var(--scale-viewport), ${clamping.textUi.max});
57
+ }</style>`;
58
+ }
59
+
60
+ /**
61
+ * Get design width from CSS variables
62
+ *
63
+ * @returns {number} Design width
64
+ */
65
+ export function getRootCssDesignWidth() {
66
+ return getRootCssVar('design-width');
67
+ }
68
+
69
+ /**
70
+ * Get design height from CSS variables
71
+ *
72
+ * @returns {number} Design height
73
+ */
74
+ export function getRootCssDesignHeight() {
75
+ return getRootCssVar('design-height');
76
+ }
77
+
78
+ /**
79
+ * Retrieves all current scaling factors from CSS variables
80
+ *
81
+ * @returns {Object} An object containing all scaling factors
82
+ */
83
+ export function getAllRootScalingVars() {
84
+ const styles = getComputedStyle(document.documentElement);
85
+
86
+ return {
87
+ scaleW: parseFloat(styles.getPropertyValue('--scale-w').trim()) || 0,
88
+ scaleH: parseFloat(styles.getPropertyValue('--scale-h').trim()) || 0,
89
+ scaleViewport:
90
+ parseFloat(styles.getPropertyValue('--scale-viewport').trim()) || 0,
91
+
92
+ scaleUI: parseFloat(styles.getPropertyValue('--scale-ui').trim()) || 0,
93
+ scaleTextBase:
94
+ parseFloat(styles.getPropertyValue('--scale-text-base').trim()) || 0,
95
+ scaleTextHeading:
96
+ parseFloat(styles.getPropertyValue('--scale-text-heading').trim()) || 0,
97
+ scaleTextUI:
98
+ parseFloat(styles.getPropertyValue('--scale-text-ui').trim()) || 0
99
+ };
100
+ }
@@ -1,5 +1,5 @@
1
- export * from './css/clamp.js';
2
- export * from './css/root-design-vars.js';
3
- export * from './components/states.js';
4
- export * from './layout/scaling.js';
5
- export * from './tailwind.js';
1
+ export * from './css/clamp.js';
2
+ export * from './css/root-design-vars.js';
3
+ export * from './components/states.js';
4
+ export * from './layout/scaling.js';
5
+ export * from './tailwind.js';