@coyalabs/bts-style 1.0.9 → 1.1.0

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.
@@ -0,0 +1,188 @@
1
+ <script>
2
+ import { onMount, onDestroy } from 'svelte';
3
+ import { gearSVGDark, gearSVGLight } from './AssetGear.js';
4
+
5
+ /**
6
+ * Primary gear size in pixels
7
+ * @type {number}
8
+ */
9
+ export let primarySize = 255;
10
+
11
+ /**
12
+ * Secondary gear size ratio relative to primary (0.0 - 1.0)
13
+ * @type {number}
14
+ */
15
+ export let secondaryRatio = 0.45;
16
+
17
+ /**
18
+ * Rotation speed in degrees per second
19
+ * @type {number}
20
+ */
21
+ export let speed = 10;
22
+
23
+ /**
24
+ * X offset adjustment for gear teeth meshing (in pixels)
25
+ * @type {number}
26
+ */
27
+ export let meshOffsetX = 15;
28
+
29
+ /**
30
+ * Y offset adjustment for gear teeth meshing (in pixels)
31
+ * @type {number}
32
+ */
33
+ export let meshOffsetY = 15;
34
+
35
+ /**
36
+ * Initial rotation offset for secondary gear (in degrees)
37
+ * Use this to align teeth when gears start
38
+ * @type {number}
39
+ */
40
+ export let secondaryRotationOffset = 0;
41
+
42
+
43
+ /**
44
+ * Opacity
45
+ * @type {number}
46
+ */
47
+ export let opacity = 0.3;
48
+
49
+ let primaryRotation = 0;
50
+ let secondaryRotation = secondaryRotationOffset;
51
+
52
+ /** @type {number | null} */
53
+ let animationFrameId = null;
54
+ let lastTime = 0;
55
+
56
+ $: secondarySize = primarySize * secondaryRatio;
57
+
58
+ // Position secondary gear at top-left of primary, with mesh offset
59
+ // The gears should appear to mesh together
60
+ $: secondaryX = -(secondarySize * 0.35) + meshOffsetX;
61
+ $: secondaryY = -(secondarySize * 0.35) + meshOffsetY;
62
+
63
+ // Calculate container size to fit both gears
64
+ $: minX = Math.min(0, secondaryX);
65
+ $: minY = Math.min(0, secondaryY);
66
+ $: maxX = Math.max(primarySize, secondaryX + secondarySize);
67
+ $: maxY = Math.max(primarySize, secondaryY + secondarySize);
68
+ $: containerWidth = maxX - minX;
69
+ $: containerHeight = maxY - minY;
70
+ $: offsetX = -minX;
71
+ $: offsetY = -minY;
72
+
73
+ // Secondary gear needs to spin faster inversely proportional to size ratio
74
+ // to simulate proper gear meshing
75
+ $: secondarySpeedMultiplier = 1 / secondaryRatio;
76
+
77
+ /**
78
+ * @param {number} currentTime
79
+ */
80
+ function animate(currentTime) {
81
+ if (lastTime === 0) {
82
+ lastTime = currentTime;
83
+ }
84
+
85
+ const deltaTime = (currentTime - lastTime) / 1000;
86
+ lastTime = currentTime;
87
+
88
+ // Primary gear rotates clockwise
89
+ primaryRotation += speed * deltaTime;
90
+
91
+ // Secondary gear rotates counter-clockwise at proportional speed
92
+ secondaryRotation -= speed * secondarySpeedMultiplier * deltaTime;
93
+
94
+ // Keep rotations in reasonable range
95
+ if (primaryRotation >= 360) primaryRotation -= 360;
96
+ if (secondaryRotation <= -360) secondaryRotation += 360;
97
+
98
+ animationFrameId = requestAnimationFrame(animate);
99
+ }
100
+
101
+ onMount(() => {
102
+ animationFrameId = requestAnimationFrame(animate);
103
+ });
104
+
105
+ onDestroy(() => {
106
+ if (animationFrameId !== null) {
107
+ cancelAnimationFrame(animationFrameId);
108
+ }
109
+ });
110
+
111
+ // Calculate shaft positions (centers of gears)
112
+ $: primaryCenterX = offsetX + primarySize / 2;
113
+ $: primaryCenterY = offsetY + primarySize / 2;
114
+ $: secondaryCenterX = offsetX + secondaryX + secondarySize / 2;
115
+ $: secondaryCenterY = offsetY + secondaryY + secondarySize / 2;
116
+ </script>
117
+
118
+ <div class="gears-container" style="--container-width: {containerWidth}px; --container-height: {containerHeight}px;">
119
+ <!-- Shaft connecting the gears -->
120
+ <svg class="shaft" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
121
+ <line
122
+ x1={primaryCenterX}
123
+ y1={primaryCenterY}
124
+ x2={secondaryCenterX}
125
+ y2={secondaryCenterY}
126
+ stroke="#0f0a10"
127
+ stroke-width="44"
128
+ stroke-linecap="round"
129
+ />
130
+ </svg>
131
+
132
+ <!-- Primary Gear (255x255) -->
133
+ <div
134
+ class="gear primary-gear"
135
+ style="transform: translate({offsetX}px, {offsetY}px) rotate({primaryRotation}deg); opacity: {opacity}; width: {primarySize}px; height: {primarySize}px;"
136
+ >
137
+ {@html gearSVGLight}
138
+ </div>
139
+
140
+ <!-- Secondary Gear (smaller, top-left) -->
141
+ <div
142
+ class="gear secondary-gear"
143
+ style="
144
+ transform: translate({offsetX + secondaryX}px, {offsetY + secondaryY}px) rotate({secondaryRotation}deg);
145
+ opacity: {opacity};
146
+ width: {secondarySize}px;
147
+ height: {secondarySize}px;
148
+ "
149
+ >
150
+ {@html gearSVGDark}
151
+ </div>
152
+ </div>
153
+
154
+ <style>
155
+ .gears-container {
156
+ position: relative;
157
+ width: var(--container-width);
158
+ height: var(--container-height);
159
+ }
160
+
161
+ .shaft {
162
+ z-index: 0;
163
+ pointer-events: none;
164
+ }
165
+
166
+ .gear {
167
+ position: absolute;
168
+ display: flex;
169
+ align-items: center;
170
+ justify-content: center;
171
+ z-index: 1;
172
+ }
173
+
174
+ .gear :global(svg) {
175
+ width: 100%;
176
+ height: 100%;
177
+ }
178
+
179
+ .primary-gear {
180
+ top: 0;
181
+ left: 0;
182
+ }
183
+
184
+ .secondary-gear {
185
+ top: 0;
186
+ left: 0;
187
+ }
188
+ </style>
@@ -0,0 +1,38 @@
1
+ export default BGGears;
2
+ type BGGears = SvelteComponent<{
3
+ primarySize?: number | undefined;
4
+ secondaryRatio?: number | undefined;
5
+ speed?: number | undefined;
6
+ meshOffsetX?: number | undefined;
7
+ meshOffsetY?: number | undefined;
8
+ secondaryRotationOffset?: number | undefined;
9
+ opacity?: number | undefined;
10
+ }, {
11
+ [evt: string]: CustomEvent<any>;
12
+ }, {}> & {
13
+ $$bindings?: string | undefined;
14
+ };
15
+ declare const BGGears: $$__sveltets_2_IsomorphicComponent<{
16
+ primarySize?: number | undefined;
17
+ secondaryRatio?: number | undefined;
18
+ speed?: number | undefined;
19
+ meshOffsetX?: number | undefined;
20
+ meshOffsetY?: number | undefined;
21
+ secondaryRotationOffset?: number | undefined;
22
+ opacity?: number | undefined;
23
+ }, {
24
+ [evt: string]: CustomEvent<any>;
25
+ }, {}, {}, string>;
26
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
27
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
28
+ $$bindings?: Bindings;
29
+ } & Exports;
30
+ (internal: unknown, props: Props & {
31
+ $$events?: Events;
32
+ $$slots?: Slots;
33
+ }): Exports & {
34
+ $set?: any;
35
+ $on?: any;
36
+ };
37
+ z_$$bindings?: Bindings;
38
+ }
package/dist/icons.d.ts CHANGED
@@ -7,4 +7,5 @@ export namespace icons {
7
7
  let check: string;
8
8
  let crossb: string;
9
9
  let help: string;
10
+ let any_ai: string;
10
11
  }
package/dist/icons.js CHANGED
@@ -6,5 +6,6 @@ export const icons = {
6
6
  pen: '<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.5664 0.750977C12.3421 0.769347 13.0332 1.10326 13.5186 1.62793C14.5307 2.72247 14.5264 4.45398 13.2959 5.68945L5.5166 13.5C5.03819 13.9803 4.38784 14.2499 3.70996 14.25H2.70215C1.61644 14.2499 0.75 13.3655 0.75 12.2949V11.2793C0.75 10.6048 1.0171 9.95741 1.49316 9.47949L9.27441 1.66699C9.30318 1.6381 9.33331 1.61087 9.36426 1.58496L9.61621 1.38965C10.2143 0.962846 10.8833 0.734842 11.5664 0.750977Z" stroke-width="2"/></svg>',
7
7
  check: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0909 7.54545C14.0909 3.9305 11.1604 1 7.54545 1C3.9305 1 1 3.9305 1 7.54545C1 11.1604 3.9305 14.0909 7.54545 14.0909C11.1604 14.0909 14.0909 11.1604 14.0909 7.54545Z" stroke-width="1.5"/><path d="M5.60596 8.05002L7.28552 9.00003L8.9999 6.09094" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
8
8
  crossb: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.0909 7.54545C14.0909 3.9305 11.1604 1 7.54545 1C3.9305 1 1 3.9305 1 7.54545C1 11.1604 3.9305 14.0909 7.54545 14.0909C11.1604 14.0909 14.0909 11.1604 14.0909 7.54545Z" stroke-width="1.5"/><path d="M5.54541 9.54547L9.54541 5.54547M9.54536 9.54547L5.54536 5.54547" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
9
- help: '<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.12598 1C8.80364 1 10.2761 1.41608 11.3467 2.30859C12.441 3.22103 13 4.53608 13 6.07031C13 8.64914 11.1429 9.84464 10.0557 10.5439L10.0498 10.5479C9.59811 10.834 9.28616 11.0529 9.08203 11.2695C8.90303 11.4596 8.86426 11.5868 8.86426 11.7109V12.0938C8.86426 12.2909 8.80556 12.474 8.70703 12.6289C9.12558 13.0883 9.38867 13.687 9.38867 14.3574C9.38856 15.8568 8.05087 17 6.60156 17C5.13309 16.9998 3.81554 15.875 3.81543 14.3574C3.81543 13.7321 4.03654 13.1746 4.39648 12.7324C4.25235 12.5591 4.16504 12.3368 4.16504 12.0938V11.7109C4.16504 9.40212 5.70071 8.25591 6.67773 7.51758C7.09258 7.20371 7.37411 6.98167 7.56445 6.75684C7.72926 6.56215 7.7763 6.42236 7.77637 6.27148C7.77637 5.9518 7.68601 5.82933 7.63672 5.78223C7.58081 5.72894 7.42619 5.62896 7.04883 5.62891C6.69244 5.62891 6.4936 5.74276 6.37793 5.86816C6.25387 6.00289 6.12603 6.25977 6.12598 6.70898C6.12598 7.26127 5.67826 7.70898 5.12598 7.70898H2C1.44772 7.70898 1 7.26127 1 6.70898C1.00007 5.04942 1.6296 3.59897 2.75098 2.57031C3.86552 1.54796 5.40077 1.00005 7.12598 1Z" stroke-width="1.5" stroke-linejoin="round"/></svg>'
9
+ help: '<svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.12598 1C8.80364 1 10.2761 1.41608 11.3467 2.30859C12.441 3.22103 13 4.53608 13 6.07031C13 8.64914 11.1429 9.84464 10.0557 10.5439L10.0498 10.5479C9.59811 10.834 9.28616 11.0529 9.08203 11.2695C8.90303 11.4596 8.86426 11.5868 8.86426 11.7109V12.0938C8.86426 12.2909 8.80556 12.474 8.70703 12.6289C9.12558 13.0883 9.38867 13.687 9.38867 14.3574C9.38856 15.8568 8.05087 17 6.60156 17C5.13309 16.9998 3.81554 15.875 3.81543 14.3574C3.81543 13.7321 4.03654 13.1746 4.39648 12.7324C4.25235 12.5591 4.16504 12.3368 4.16504 12.0938V11.7109C4.16504 9.40212 5.70071 8.25591 6.67773 7.51758C7.09258 7.20371 7.37411 6.98167 7.56445 6.75684C7.72926 6.56215 7.7763 6.42236 7.77637 6.27148C7.77637 5.9518 7.68601 5.82933 7.63672 5.78223C7.58081 5.72894 7.42619 5.62896 7.04883 5.62891C6.69244 5.62891 6.4936 5.74276 6.37793 5.86816C6.25387 6.00289 6.12603 6.25977 6.12598 6.70898C6.12598 7.26127 5.67826 7.70898 5.12598 7.70898H2C1.44772 7.70898 1 7.26127 1 6.70898C1.00007 5.04942 1.6296 3.59897 2.75098 2.57031C3.86552 1.54796 5.40077 1.00005 7.12598 1Z" stroke-width="1.5" stroke-linejoin="round"/></svg>',
10
+ any_ai: '<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.88735 4.12364C8.03771 0.625957 12.9862 0.625724 14.1366 4.12364C14.5667 5.43135 15.5924 6.45705 16.9001 6.88716L16.9167 6.89268L16.9319 6.89821L17.0299 6.93273L17.0423 6.93688L17.0555 6.94171C20.3467 8.17272 20.3465 12.8508 17.0555 14.0818L17.0251 14.0929L16.9277 14.1267L16.9132 14.1315L16.9001 14.1364C15.5925 14.5665 14.5667 15.5921 14.1366 16.8999C12.9862 20.3975 8.03863 20.3981 6.88804 16.9006L6.88735 16.8999C6.45723 15.5922 5.43157 14.5665 4.12383 14.1364L4.12314 14.1357C0.625653 12.9851 0.626209 8.03752 4.12383 6.88716C5.43159 6.45704 6.45725 5.43121 6.88735 4.12364ZM12.3115 10.161L12.2687 10.1472L12.2279 10.1313L12.143 10.0975L12.1023 10.0816L12.0622 10.0622C11.4966 9.79891 11.06 9.31206 10.8628 8.71224L10.512 7.64467L10.1612 8.71224C9.93579 9.39762 9.39782 9.9356 8.71243 10.161L7.64556 10.5111L8.71243 10.8626L8.83949 10.9081C9.42249 11.139 9.88476 11.6012 10.1156 12.1842L10.1612 12.3113L10.512 13.3775L10.8628 12.3113C11.06 11.7116 11.4966 11.2247 12.0622 10.9613L12.1016 10.9427L12.143 10.9261L12.2279 10.8923L12.2687 10.8764L12.3115 10.8626L13.3784 10.5111L12.3115 10.161Z" stroke-width="3"/></svg>',
10
11
  };
package/dist/index.d.ts CHANGED
@@ -3,16 +3,22 @@ export { default as BasePage } from "./Base/BasePage.svelte";
3
3
  export { default as BaseText } from "./Base/BaseText.svelte";
4
4
  export { default as BaseIcon } from "./Base/BaseIcon.svelte";
5
5
  export { default as TextHeader } from "./Structure/TextHeader.svelte";
6
- export { default as Separator } from "./Components/Separator.svelte";
7
- export { default as TreeDirectory } from "./Components/TreeDirectory.svelte";
6
+ export { default as BGDetails } from "./Structure/BG/BGDetails.svelte";
7
+ export { default as BGChain } from "./Structure/BG/BGChain.svelte";
8
+ export { default as BGGears } from "./Structure/BG/BGGears.svelte";
8
9
  export { default as Button } from "./Components/Button.svelte";
9
10
  export { default as IconButton } from "./Components/IconButton.svelte";
11
+ export { default as Separator } from "./Components/Separator.svelte";
12
+ export { default as TreeDirectory } from "./Components/TreeDirectory.svelte";
10
13
  export { default as InputBox } from "./Components/InputBox.svelte";
11
14
  export { default as Toggle } from "./Components/Toggle.svelte";
12
15
  export { default as Tooltip } from "./Components/Tooltip.svelte";
13
16
  export { default as TabBar } from "./Components/TabBar.svelte";
17
+ export { default as Dropdown } from "./Components/Dropdown.svelte";
14
18
  export { default as Popup } from "./Components/Popup/Popup.svelte";
15
19
  export { popupStore } from "./Components/popupStore.js";
20
+ export { default as SpecialAction } from "./Components/Special/SpecialAction.svelte";
21
+ export { default as SpecialParagraph } from "./Components/Special/SpecialParagraph.svelte";
16
22
  export { default as ConfirmPopup } from "./Components/Popup/ConfirmPopup.svelte";
17
23
  export { default as AlertPopup } from "./Components/Popup/AlertPopup.svelte";
18
24
  export { default as PromptPopup } from "./Components/Popup/PromptPopup.svelte";
package/dist/index.js CHANGED
@@ -5,17 +5,23 @@ export { default as BaseText } from "./Base/BaseText.svelte";
5
5
  export { default as BaseIcon } from "./Base/BaseIcon.svelte";
6
6
  /* Structure Components */
7
7
  export { default as TextHeader } from "./Structure/TextHeader.svelte";
8
- export { default as Separator } from "./Components/Separator.svelte";
9
- export { default as TreeDirectory } from "./Components/TreeDirectory.svelte";
8
+ export { default as BGDetails } from "./Structure/BG/BGDetails.svelte";
9
+ export { default as BGChain } from "./Structure/BG/BGChain.svelte";
10
+ export { default as BGGears } from "./Structure/BG/BGGears.svelte";
10
11
  /* Components */
11
12
  export { default as Button } from "./Components/Button.svelte";
12
13
  export { default as IconButton } from "./Components/IconButton.svelte";
14
+ export { default as Separator } from "./Components/Separator.svelte";
15
+ export { default as TreeDirectory } from "./Components/TreeDirectory.svelte";
13
16
  export { default as InputBox } from "./Components/InputBox.svelte";
14
17
  export { default as Toggle } from "./Components/Toggle.svelte";
15
18
  export { default as Tooltip } from "./Components/Tooltip.svelte";
16
19
  export { default as TabBar } from "./Components/TabBar.svelte";
20
+ export { default as Dropdown } from "./Components/Dropdown.svelte";
17
21
  export { default as Popup } from "./Components/Popup/Popup.svelte";
18
22
  export { popupStore } from "./Components/popupStore.js";
23
+ export { default as SpecialAction } from "./Components/Special/SpecialAction.svelte";
24
+ export { default as SpecialParagraph } from "./Components/Special/SpecialParagraph.svelte";
19
25
  /* Popup Presets */
20
26
  export { default as ConfirmPopup } from "./Components/Popup/ConfirmPopup.svelte";
21
27
  export { default as AlertPopup } from "./Components/Popup/AlertPopup.svelte";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coyalabs/bts-style",
3
- "version": "1.0.9",
3
+ "version": "1.1.0",
4
4
  "description": "BTS Theme Svelte component templates",
5
5
  "type": "module",
6
6
  "exports": {