@coyalabs/bts-style 1.0.8 → 1.1.0

package/dist/Structure/BG/BGChain.svelte

@@ -0,0 +1,188 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+
+  /**
+   * @type {string}
+   */
+  export let chainColor = "#130F15";
+
+  /**
+   * @type {number}
+   */
+  export let linkCount = 8;
+
+  /**
+   * @type {number}
+   */
+  export let offset = 30;
+
+  /**
+   * @type {number}
+   */
+  export let windStrength = 0.04;
+
+  /**
+   * @type {number}
+   */
+  export let damping = 50;
+
+  /**
+   * @type {number}
+   */
+  export let stiffness = 100;
+
+  /** @type {Array<{x: number, y: number, rotation: number}>} */
+  let links = [];
+
+  /** @type {Array<{vx: number, vy: number}>} */
+  let velocities = [];
+
+  /** @type {number | null} */
+  let animationFrameId = null;
+
+  /** @type {number} */
+  let startTime = 0;
+
+  function initializeLinks() {
+    links = Array.from({ length: linkCount }, (_, i) => ({
+      x: 0,
+      y: i * offset,
+      rotation: 0,
+    }));
+    velocities = Array.from({ length: linkCount }, () => ({
+      vx: 0,
+      vy: 0,
+    }));
+  }
+
+  function animate() {
+    const elapsed = (Date.now() - startTime) / 1000;
+
+    const nextLinks = links.map((link, i) => {
+      if (i === 0) {
+        velocities[i] = { vx: 0, vy: 0 };
+        return { ...link, x: 0, y: 0, rotation: 0 };
+      }
+
+      // Wind simulation
+      const time = elapsed;
+      const wave =
+        Math.sin(time * 2 + i * 0.3) +
+        Math.sin(time * 1.5 + i * 0.1) * 0.5;
+
+      // Force decreases down the chain (strongest at bottom, weakest at top)
+      const windForce =
+        wave *
+        windStrength *
+        ((linkCount - i) / linkCount) *
+        40;
+
+      // Get previous link position
+      const prevLink = links[i - 1];
+
+      // Calculate target position based on constraint
+      const targetY = prevLink.y + offset;
+      const targetX = prevLink.x + windForce;
+
+      // Apply forces
+      const dampingFactor = damping / 100;
+      velocities[i].vx += (targetX - link.x) * (stiffness / 1000);
+      velocities[i].vy += (targetY - link.y) * (stiffness / 1000);
+
+      // Apply damping
+      velocities[i].vx *= 1 - dampingFactor;
+      velocities[i].vy *= 1 - dampingFactor;
+
+      // Update position
+      const newX = link.x + velocities[i].vx;
+      const newY = link.y + velocities[i].vy;
+
+      return {
+        x: newX,
+        y: newY,
+        rotation: 0,
+      };
+    });
+
+    // Calculate rotations
+    for (let i = 1; i < nextLinks.length; i++) {
+      const prev = nextLinks[i - 1];
+      const curr = nextLinks[i];
+      const dx = curr.x - prev.x;
+      const dy = curr.y - prev.y;
+      const angle = -Math.atan2(dx, dy) * (180 / Math.PI);
+      // Constrain rotation to max 3 degrees
+      curr.rotation = Math.max(-3, Math.min(3, angle));
+    }
+
+    links = nextLinks;
+    animationFrameId = requestAnimationFrame(animate);
+  }
+
+  onMount(() => {
+    initializeLinks();
+    startTime = Date.now();
+    animationFrameId = requestAnimationFrame(animate);
+  });
+
+  onDestroy(() => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+    }
+  });
+
+  // Reinitialize when props change
+  $: if (linkCount || offset) {
+    initializeLinks();
+  }
+
+  $: viewBoxHeight = linkCount * offset;
+</script>
+
+<div class="chain-container">
+  <svg
+    width="100%"
+    height="100%"
+    viewBox="0 0 60 {viewBoxHeight}"
+    style="overflow: visible;"
+  >
+    {#each links as link, i}
+      <g
+        transform="translate({30 + link.x}, {link.y}) rotate({link.rotation})"
+        style="transform-origin: 30px 0;"
+      >
+        <g transform="translate(-10, 0)">
+          {#if i === linkCount - 1}
+            <!-- End link (decorative bottom piece) -->
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M10.0646 37.4537C5.79507 37.4632 2.10983 34.8721 0.626751 30.8898C-0.137261 28.8554 -0.227146 15.5559 0.491925 13.4749C0.806518 12.651 1.48065 11.3932 2.06489 10.6121C3.08802 9.32346 3.14248 7.91558 3.14348 2.36149L8.49965 3.01461C8.49965 6.09044 9.61514 6.56641 10.6488 6.56411C11.0982 6.56311 12.233 4.76726 12.233 2.34125L17.8844 2.32867C17.8844 8.74026 17.9294 10.4035 18.9181 12.3941C19.9068 14.428 19.9967 15.0776 19.9967 22.1391C19.9967 29.2871 19.9518 29.8504 18.9181 31.6722C16.8058 35.5759 13.9745 37.445 10.0646 37.4537ZM12.6712 18.1265C10.8735 18.607 8.62641 18.3954 7.36804 17.6184L6.28943 16.971L6.28943 23.0793V29.1877L7.59275 30.4411C9.07583 31.8674 10.1095 31.9951 11.6375 30.9953C13.3903 29.7784 13.9296 27.8277 13.9296 22.5858V17.8204L12.6712 18.1265Z"
+              fill={chainColor}
+            />
+          {:else}
+            <!-- Regular chain link -->
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M-9.31873e-07 21.3396C-6.35866e-07 14.5677 0.0898832 13.8569 1.03366 11.932C1.96876 10.0247 2.0656 9.26831 2.11102 3.31844L7.76383 3.30585C7.76759 5.99271 8.86971 6.2713 9.66251 6.26954C10.4715 6.26774 11.5613 5.9727 11.5613 3.4228L11.5612 3.2974L16.8532 3.28562C16.8532 7.08956 17.033 9.22103 17.3476 9.42934C17.6172 9.55414 18.3363 10.6812 18.9205 11.8503C19.9093 13.8546 19.9992 14.4814 19.9992 21.2951C19.9992 28.1087 19.9093 28.7359 18.9205 30.7446C18.3363 31.9164 17.6172 33.0466 17.3476 33.1726C17.033 33.3823 16.8532 35.7654 16.8532 39.4021L11.5612 39.4139C11.5613 39.3727 11.5613 39.3309 11.5613 39.2885C11.5613 36.655 10.4715 36.3648 9.66251 36.3666C8.85356 36.3684 7.76372 36.6635 7.76371 39.297C7.76371 39.3394 7.76374 39.3812 7.76379 39.4224L2.11227 39.435C2.11227 33.3319 2.02239 32.6633 1.0786 30.7425C0.0898826 28.7801 -1.22971e-06 28.1532 -9.31873e-07 21.3396ZM6.87611 25.2536C8.3592 24.5815 11.7748 24.8247 12.7635 25.6585L13.7073 26.4507L13.7073 21.7689L13.7073 17.0871L12.359 17.759C10.8759 18.4729 8.17943 18.6043 6.92106 17.9801C6.1121 17.5639 6.06716 17.6894 6.06716 21.5769C6.06716 25.2554 6.1121 25.5479 6.87611 25.2536Z"
+              fill={chainColor}
+            />
+          {/if}
+        </g>
+      </g>
+    {/each}
+  </svg>
+</div>
+
+<style>
+  .chain-container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    overflow: visible;
+  }
+</style>

package/dist/Structure/BG/BGChain.svelte.d.ts

@@ -0,0 +1,36 @@
+export default BGChain;
+type BGChain = SvelteComponent<{
+    chainColor?: string | undefined;
+    linkCount?: number | undefined;
+    offset?: number | undefined;
+    windStrength?: number | undefined;
+    damping?: number | undefined;
+    stiffness?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BGChain: $$__sveltets_2_IsomorphicComponent<{
+    chainColor?: string | undefined;
+    linkCount?: number | undefined;
+    offset?: number | undefined;
+    windStrength?: number | undefined;
+    damping?: number | undefined;
+    stiffness?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Structure/BG/BGDetails.svelte

@@ -0,0 +1,130 @@
+<script>
+  import BGChain from './BGChain.svelte';
+  import BGGears from './BGGears.svelte';
+  import { gearSVGDark } from './AssetGear.js';
+
+  /**
+   * @type {string}
+   */
+  export let chainColor = "#130F15";
+
+  /**
+   * @type {number}
+   */
+  export let linkCount = 8;
+
+  /**
+   * @type {number}
+   */
+  export let offset = 36;
+
+  /**
+   * @type {number}
+   */
+  export let windStrength = 0.04;
+
+  /**
+   * Show gears
+   * @type {boolean}
+   */
+  export let showGears = true;
+
+  /**
+   * Show chain
+   * @type {boolean}
+   */
+  export let showChain = true;
+</script>
+
+<div class="bg-details">
+  {#if showChain}
+    <div class="chain-wrapper top-left">
+      <BGChain 
+        {chainColor} 
+        {linkCount} 
+        {offset} 
+        {windStrength}
+      />
+    </div>
+  {/if}
+
+  {#if showGears}
+    <div class="gears-wrapper top-right">
+      <BGGears 
+        primarySize={255}
+        secondaryRatio={0.7}
+        speed={-3}
+        meshOffsetX={50}
+        meshOffsetY={-100}
+        opacity={1}
+        secondaryRotationOffset={45}
+      />
+    </div>
+    <div class="single-gear-wrapper bottom-left">
+      <div class="single-gear">
+        {@html gearSVGDark}
+      </div>
+    </div>  {/if}
+</div>
+
+<style>
+  .bg-details {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 0;
+    overflow: hidden;
+  }
+
+  .chain-wrapper {
+    position: absolute;
+    width: 80px;
+    height: fit-content;
+  }
+
+  .chain-wrapper.top-left {
+    top: -50px;
+    left: 30px;
+  }
+
+  .gears-wrapper {
+    position: absolute;
+  }
+
+  .gears-wrapper.top-right {
+    top: 15px;
+    right: -150px;
+  }
+  .single-gear-wrapper {
+    position: absolute;
+    width: 220px;
+    height: 215px;
+  }
+
+  .single-gear-wrapper.bottom-left {
+    bottom: -100px;
+    left: -120px;
+  }
+
+  .single-gear {
+    width: 100%;
+    height: 100%;
+    animation: rotateSingleGear 100s linear infinite;
+  }
+
+  .single-gear :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @keyframes rotateSingleGear {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }</style>

package/dist/Structure/BG/BGDetails.svelte.d.ts

@@ -0,0 +1,36 @@
+export default BGDetails;
+type BGDetails = SvelteComponent<{
+    chainColor?: string | undefined;
+    linkCount?: number | undefined;
+    offset?: number | undefined;
+    windStrength?: number | undefined;
+    showGears?: boolean | undefined;
+    showChain?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BGDetails: $$__sveltets_2_IsomorphicComponent<{
+    chainColor?: string | undefined;
+    linkCount?: number | undefined;
+    offset?: number | undefined;
+    windStrength?: number | undefined;
+    showGears?: boolean | undefined;
+    showChain?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Structure/BG/BGGears.svelte

@@ -0,0 +1,188 @@
+<script>
+  import { onMount, onDestroy } from 'svelte';
+  import { gearSVGDark, gearSVGLight } from './AssetGear.js';
+
+  /**
+   * Primary gear size in pixels
+   * @type {number}
+   */
+  export let primarySize = 255;
+
+  /**
+   * Secondary gear size ratio relative to primary (0.0 - 1.0)
+   * @type {number}
+   */
+  export let secondaryRatio = 0.45;
+
+  /**
+   * Rotation speed in degrees per second
+   * @type {number}
+   */
+  export let speed = 10;
+
+  /**
+   * X offset adjustment for gear teeth meshing (in pixels)
+   * @type {number}
+   */
+  export let meshOffsetX = 15;
+
+  /**
+   * Y offset adjustment for gear teeth meshing (in pixels)
+   * @type {number}
+   */
+  export let meshOffsetY = 15;
+
+  /**
+   * Initial rotation offset for secondary gear (in degrees)
+   * Use this to align teeth when gears start
+   * @type {number}
+   */
+  export let secondaryRotationOffset = 0;
+
+
+  /**
+   * Opacity
+   * @type {number}
+   */
+  export let opacity = 0.3;
+
+  let primaryRotation = 0;
+  let secondaryRotation = secondaryRotationOffset;
+
+  /** @type {number | null} */
+  let animationFrameId = null;
+  let lastTime = 0;
+
+  $: secondarySize = primarySize * secondaryRatio;
+  
+  // Position secondary gear at top-left of primary, with mesh offset
+  // The gears should appear to mesh together
+  $: secondaryX = -(secondarySize * 0.35) + meshOffsetX;
+  $: secondaryY = -(secondarySize * 0.35) + meshOffsetY;
+
+  // Calculate container size to fit both gears
+  $: minX = Math.min(0, secondaryX);
+  $: minY = Math.min(0, secondaryY);
+  $: maxX = Math.max(primarySize, secondaryX + secondarySize);
+  $: maxY = Math.max(primarySize, secondaryY + secondarySize);
+  $: containerWidth = maxX - minX;
+  $: containerHeight = maxY - minY;
+  $: offsetX = -minX;
+  $: offsetY = -minY;
+
+  // Secondary gear needs to spin faster inversely proportional to size ratio
+  // to simulate proper gear meshing
+  $: secondarySpeedMultiplier = 1 / secondaryRatio;
+
+  /**
+     * @param {number} currentTime
+     */
+  function animate(currentTime) {
+    if (lastTime === 0) {
+      lastTime = currentTime;
+    }
+    
+    const deltaTime = (currentTime - lastTime) / 1000;
+    lastTime = currentTime;
+
+    // Primary gear rotates clockwise
+    primaryRotation += speed * deltaTime;
+    
+    // Secondary gear rotates counter-clockwise at proportional speed
+    secondaryRotation -= speed * secondarySpeedMultiplier * deltaTime;
+
+    // Keep rotations in reasonable range
+    if (primaryRotation >= 360) primaryRotation -= 360;
+    if (secondaryRotation <= -360) secondaryRotation += 360;
+
+    animationFrameId = requestAnimationFrame(animate);
+  }
+
+  onMount(() => {
+    animationFrameId = requestAnimationFrame(animate);
+  });
+
+  onDestroy(() => {
+    if (animationFrameId !== null) {
+      cancelAnimationFrame(animationFrameId);
+    }
+  });
+
+  // Calculate shaft positions (centers of gears)
+  $: primaryCenterX = offsetX + primarySize / 2;
+  $: primaryCenterY = offsetY + primarySize / 2;
+  $: secondaryCenterX = offsetX + secondaryX + secondarySize / 2;
+  $: secondaryCenterY = offsetY + secondaryY + secondarySize / 2;
+</script>
+
+<div class="gears-container" style="--container-width: {containerWidth}px; --container-height: {containerHeight}px;">
+  <!-- Shaft connecting the gears -->
+  <svg class="shaft" width="100%" height="100%" style="position: absolute; top: 0; left: 0;">
+    <line
+      x1={primaryCenterX}
+      y1={primaryCenterY}
+      x2={secondaryCenterX}
+      y2={secondaryCenterY}
+      stroke="#0f0a10"
+      stroke-width="44"
+      stroke-linecap="round"
+    />
+  </svg>
+
+  <!-- Primary Gear (255x255) -->
+  <div 
+    class="gear primary-gear"
+    style="transform: translate({offsetX}px, {offsetY}px) rotate({primaryRotation}deg); opacity: {opacity}; width: {primarySize}px; height: {primarySize}px;"
+  >
+    {@html gearSVGLight}
+  </div>
+
+  <!-- Secondary Gear (smaller, top-left) -->
+  <div 
+    class="gear secondary-gear"
+    style="
+      transform: translate({offsetX + secondaryX}px, {offsetY + secondaryY}px) rotate({secondaryRotation}deg);
+      opacity: {opacity};
+      width: {secondarySize}px;
+      height: {secondarySize}px;
+    "
+  >
+    {@html gearSVGDark}
+  </div>
+</div>
+
+<style>
+  .gears-container {
+    position: relative;
+    width: var(--container-width);
+    height: var(--container-height);
+  }
+
+  .shaft {
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  .gear {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+  }
+
+  .gear :global(svg) {
+    width: 100%;
+    height: 100%;
+  }
+
+  .primary-gear {
+    top: 0;
+    left: 0;
+  }
+
+  .secondary-gear {
+    top: 0;
+    left: 0;
+  }
+</style>

package/dist/Structure/BG/BGGears.svelte.d.ts

@@ -0,0 +1,38 @@
+export default BGGears;
+type BGGears = SvelteComponent<{
+    primarySize?: number | undefined;
+    secondaryRatio?: number | undefined;
+    speed?: number | undefined;
+    meshOffsetX?: number | undefined;
+    meshOffsetY?: number | undefined;
+    secondaryRotationOffset?: number | undefined;
+    opacity?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const BGGears: $$__sveltets_2_IsomorphicComponent<{
+    primarySize?: number | undefined;
+    secondaryRatio?: number | undefined;
+    speed?: number | undefined;
+    meshOffsetX?: number | undefined;
+    meshOffsetY?: number | undefined;
+    secondaryRotationOffset?: number | undefined;
+    opacity?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/Structure/TextHeader.svelte

@@ -0,0 +1,32 @@
+<script>
+  import BaseText from '../Base/BaseText.svelte';
+  
+  export let title = '';
+  export let subtitle = '';
+</script>
+
+<div class="text-header">
+    {#if title}
+    <div class="title">
+        <BaseText variant="title">{title}</BaseText>
+    </div>
+    {/if}
+    {#if subtitle}
+    <div class="subtitle">
+        <BaseText variant="content">{subtitle}</BaseText>
+    </div>
+    {/if}
+</div>
+
+<style>
+  .text-header {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .title,
+  .subtitle {
+    margin: 0;
+  }
+</style>

package/dist/Structure/TextHeader.svelte.d.ts

@@ -0,0 +1,28 @@
+export default TextHeader;
+type TextHeader = SvelteComponent<{
+    title?: string | undefined;
+    subtitle?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const TextHeader: $$__sveltets_2_IsomorphicComponent<{
+    title?: string | undefined;
+    subtitle?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+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> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/icons.d.ts

@@ -0,0 +1,11 @@
+export namespace icons {
+    let arrow: string;
+    let folder: string;
+    let icon_expand: string;
+    let cross: string;
+    let pen: string;
+    let check: string;
+    let crossb: string;
+    let help: string;
+    let any_ai: string;
+}