sveltekit-ui 1.1.74 → 1.1.76

package/dist/Components/AuthCodeInput/{index.svelte.js → manager.svelte.js}

@@ -7,6 +7,7 @@ export function create_auth_code_input_manager(config) {
   let is_required = $state(config?.is_required ?? false)
   let is_read_only = $state(config?.is_read_only ?? false)
   let autocomplete = $state(config?.autocomplete ?? "one-time-code")
+  let aria_label = $state(config?.aria_label ?? "Authentication code")
   let is_valid = $state(config?.is_valid)
   let is_disabled = $state(config?.is_disabled ?? false)
   let border_radius = $state(config?.border_radius ?? 1)
@@ -16,31 +17,37 @@ export function create_auth_code_input_manager(config) {
   let mb = $state(config?.mb ?? 0)
 
   function set_val(input) {
-    const cleaned_val = input ? input.replace(/\D+/g, "") : null
+    const cleaned_val = String(input ?? "")
+      .replace(/\D+/g, "")
+      .slice(0, 6)
     val = cleaned_val
-    is_valid = val && val.length == 6
+    is_valid = val.length === 6
     if (config?.on_change) {
       config?.on_change(cleaned_val)
     }
-    if (val.length == 6 && config?.on_sixth) {
+    if (val.length === 6 && config?.on_sixth) {
       config?.on_sixth(cleaned_val)
     }
   }
 
   function set_focus() {
-    let input_el = document?.querySelector(`#auth_code_input_${id}`)
+    if (typeof document === "undefined") return
+    let input_el = document.querySelector(`#auth_code_input_${id}`)
     if (input_el) {
       input_el.focus()
     }
   }
 
   function init(config) {
-    val = config?.val ?? null
+    val = String(config?.val ?? "")
+      .replace(/\D+/g, "")
+      .slice(0, 6)
     name = config?.name ?? "code"
     is_required = config?.is_required ?? false
     is_read_only = config?.is_read_only ?? false
     autocomplete = config?.autocomplete ?? "one-time-code"
-    is_valid = val && val.length == 6
+    aria_label = config?.aria_label ?? "Authentication code"
+    is_valid = val.length === 6
     is_disabled = config?.is_disabled ?? false
     border_radius = config?.border_radius ?? 1
     ml = config?.ml ?? 0
@@ -68,6 +75,9 @@ export function create_auth_code_input_manager(config) {
     get autocomplete() {
       return autocomplete
     },
+    get aria_label() {
+      return aria_label
+    },
     get is_valid() {
       return is_valid
     },

package/dist/Components/Breadcrumbs/index.svelte

@@ -6,7 +6,7 @@
 </script>
 
 {#if Array.isArray(manager?.val) && manager?.val.length > 0}
-  <div class="breadcrumbs">
+  <nav class="breadcrumbs" aria-label="Breadcrumb">
     <Button manager={manager?.back_button_manager} />
     <Button manager={manager?.slash_button_manager} />
     {#if Array.isArray(manager?.breadcrumb_managers) && manager?.breadcrumb_managers.length > 0}
@@ -15,7 +15,7 @@
         <Button manager={manager?.breadcrumb_managers?.[i]?.button_manager} />
       {/each}
     {/if}
-  </div>
+  </nav>
 {/if}
 
 <style>

package/dist/Components/Breadcrumbs/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/Breadcrumbs/manager.svelte.d.ts

@@ -0,0 +1,8 @@
+export function create_breadcrumbs_manager(config: any): {
+    readonly val: null;
+    readonly breadcrumb_managers: null;
+    readonly back_button_manager: null;
+    readonly slash_button_manager: null;
+    set_val: (input: any) => void;
+    select_path_breadcrumb_index: (i: any) => void;
+};

package/{src/lib/Components/Breadcrumbs/index.svelte.js → dist/Components/Breadcrumbs/manager.svelte.js}

@@ -1,5 +1,6 @@
-import { create_button_manager } from "$lib/Components/Button/index.svelte.js"
-import { create_icon_manager } from "$lib/Components/Icon/index.svelte.js"
+import { create_button_manager } from "../Button/manager.svelte.js"
+import { create_icon_manager } from "../Icon/manager.svelte.js"
+import { deep_copy } from "../../client/index.js"
 
 export function create_breadcrumbs_manager(config) {
   let val = $state(null)
@@ -8,7 +9,12 @@ export function create_breadcrumbs_manager(config) {
   let breadcrumb_managers = $state(null)
 
   function set_val(input) {
-    val = JSON.parse(JSON.stringify(input))
+    try {
+      const copied_input = deep_copy(input)
+      val = Array.isArray(copied_input) ? copied_input : []
+    } catch {
+      val = []
+    }
     let breadcrumb_managers_loc = []
     if (Array.isArray(val) && val.length > 0) {
       for (let i = 0; i < val.length; i++) {
@@ -38,7 +44,7 @@ export function create_breadcrumbs_manager(config) {
   function select_path_breadcrumb_index(i) {
     val = Array.isArray(val) ? val.slice(0, i + 1) : []
     if (config?.on_change) {
-      config?.on_change(val)
+      config.on_change(deep_copy(val))
     }
   }
 
@@ -54,12 +60,14 @@ export function create_breadcrumbs_manager(config) {
       border_radius: 0.5,
       min_height: 2,
       icon_pos: "left",
+      aria_label: "Go back one breadcrumb",
       on_click: () => select_path_breadcrumb_index(val.length - 2),
     })
     slash_button_manager = create_button_manager({
       type: "plain",
       min_height: 2,
       text: "/",
+      aria_label: "Go to breadcrumb root",
       pl: 0.5,
       pr: 0.5,
       on_click: () => select_path_breadcrumb_index(-1),

package/dist/Components/Button/index.svelte

@@ -98,16 +98,18 @@
       target={manager?.is_link ? manager?.target : undefined}
       rel={manager?.is_link ? manager?.rel : undefined}
       download={manager?.is_link ? manager?.download : undefined}
+      type={manager?.is_link ? undefined : manager?.html_type}
       popovertarget={manager?.is_link ? undefined : manager?.popover_target}
       tabindex={manager?.tabindex}
-      disabled={manager?.is_link ? undefined : manager?.is_action_disabled}
+      disabled={manager?.is_link ? undefined : manager?.is_native_disabled}
       onclick={(e) => manager?.handle_click(e)}
       onpointerdown={(e) => manager?.pointer_down(e)}
       onpointerenter={(e) => manager?.pointer_enter(e)}
       onpointerleave={(e) => manager?.pointer_leave(e)}
       role={manager?.is_link ? "link" : "button"}
       aria-label={manager?.aria_label}
-      aria-disabled={manager?.is_link && manager?.is_action_disabled ? "true" : undefined}
+      aria-disabled={manager?.is_action_disabled ? "true" : undefined}
+      aria-busy={manager?.is_loading}
     >
       {#if manager?.support_icon && manager?.icon_pos == "left" && !manager?.is_uniform}
         <div

package/dist/Components/Button/index.svelte.d.ts

@@ -0,0 +1,13 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+    content: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+    content: any;
+};

package/dist/Components/Button/manager.svelte.d.ts

@@ -0,0 +1,79 @@
+export function create_button_manager(config: any): {
+    id: string;
+    readonly type: any;
+    readonly ml: any;
+    readonly mr: any;
+    readonly mt: any;
+    readonly mb: any;
+    readonly pl: any;
+    readonly pr: any;
+    readonly pt: any;
+    readonly pb: any;
+    readonly border_radius: any;
+    readonly is_loading: any;
+    readonly is_pointer_down: boolean;
+    readonly is_prevent_default: any;
+    readonly is_stop_propagation: any;
+    readonly tabindex: any;
+    readonly is_disabled: any;
+    readonly is_action_disabled: any;
+    readonly is_native_disabled: any;
+    readonly selected_type: any;
+    readonly is_hovered: boolean;
+    readonly min_height: any;
+    readonly fixed_width: any;
+    readonly min_width: any;
+    readonly is_compressed: any;
+    readonly is_pill: any;
+    readonly is_uniform: any;
+    readonly cursor: any;
+    readonly text_align: any;
+    readonly text: any;
+    readonly is_success_animation: any;
+    readonly font_size: any;
+    readonly line_height: any;
+    readonly font_weight: any;
+    readonly color: any;
+    readonly gradient_to_color: any;
+    readonly gradient_turn: any;
+    readonly contrast_color: any;
+    readonly border_color: any;
+    readonly hover_shadow_color: any;
+    readonly hover_shadow_size: any;
+    readonly support_icon: any;
+    readonly is_icon_bg_tint: any;
+    readonly icon_deg: any;
+    readonly icon_sw: any;
+    readonly icon_size: any;
+    readonly icon_ml: any;
+    readonly icon_mr: any;
+    readonly icon_pos: any;
+    readonly is_icon_shimmyable: any;
+    readonly icon_movement_stiffness: any;
+    readonly icon_movement_damping: any;
+    readonly aria_label: any;
+    readonly popover_target: any;
+    readonly href: string | null;
+    readonly target: any;
+    readonly rel: any;
+    readonly download: any;
+    readonly html_type: any;
+    readonly is_link: boolean;
+    readonly element_tag: string;
+    readonly is_no_wrap: any;
+    readonly is_word_break_all: any;
+    readonly is_simulated_active: any;
+    readonly is_success: boolean;
+    readonly is_error: boolean;
+    readonly icon_manager: null;
+    success_trigger: () => void;
+    error_trigger: () => void;
+    icon_shimmy_trigger: () => void;
+    handle_click: (e: any) => Promise<any>;
+    pointer_down: () => void;
+    pointer_up: () => void;
+    pointer_enter: () => void;
+    pointer_leave: () => void;
+    simulate_click: () => void;
+    focus: () => void;
+};

package/dist/Components/Button/{index.svelte.js → manager.svelte.js}

@@ -1,5 +1,5 @@
-import { create_unique_id, set_closurable } from "../../client/index.js"
-import { create_icon_manager } from "../Icon/index.svelte.js"
+import { create_unique_id, normalize_link_href, set_closurable } from "../../client/index.js"
+import { create_icon_manager } from "../Icon/manager.svelte.js"
 
 export function create_button_manager(config) {
   const id = create_unique_id(null, 20)
@@ -18,10 +18,11 @@ export function create_button_manager(config) {
   let icon_movement_damping = $derived(set_closurable(config?.icon_movement_damping, 0.1))
   let aria_label = $derived(set_closurable(config?.aria_label, null))
   let popover_target = $derived(set_closurable(config?.popover_target, null))
-  let href = $derived(set_closurable(config?.href, null))
+  let href = $derived(normalize_link_href(set_closurable(config?.href, null)))
   let target = $derived(set_closurable(config?.target, null))
   let rel = $derived(set_closurable(config?.rel, target === "_blank" ? "noopener noreferrer" : null))
   let download = $derived(set_closurable(config?.download, null))
+  let html_type = $derived(set_closurable(config?.html_type, "button"))
   let is_link = $derived(!!href && !popover_target)
   let element_tag = $derived(is_link ? "a" : "button")
   let is_no_wrap = $derived(set_closurable(config?.is_no_wrap, false))
@@ -78,14 +79,20 @@ export function create_button_manager(config) {
   let hover_shadow_color = $derived(set_closurable(config?.hover_shadow_color, "transparent"))
   let hover_shadow_size = $derived(set_closurable(config?.hover_shadow_size, 1))
   let text = $derived(set_closurable(config?.text, null))
-  let is_loading = $derived(set_closurable(config?.is_loading, false))
+  let is_callback_loading = $state(false)
+  let is_loading = $derived(set_closurable(config?.is_loading, false) || is_callback_loading)
   let is_disabled = $derived(set_closurable(config?.is_disabled, false))
   let selected_type = $derived(set_closurable(config?.selected_type, null))
 
   let is_error = $state(false)
   let is_success = $state(false)
   let icon_manager = $state(null)
+  let is_native_activation_in_progress = $state(false)
   let is_action_disabled = $derived(is_disabled || is_loading || is_success || is_error)
+  let is_native_disabled = $derived(
+    is_disabled ||
+      (!is_native_activation_in_progress && (is_loading || is_success || is_error)),
+  )
 
   let is_hovered = $state(false)
   let is_pointer_down = $state(false)
@@ -113,7 +120,14 @@ export function create_button_manager(config) {
     }
   }
 
-  function handle_click(e) {
+  function preserve_current_native_activation() {
+    is_native_activation_in_progress = true
+    queueMicrotask(() => {
+      is_native_activation_in_progress = false
+    })
+  }
+
+  async function handle_click(e) {
     if (is_action_disabled) {
       e?.preventDefault?.()
       e?.stopPropagation?.()
@@ -125,11 +139,27 @@ export function create_button_manager(config) {
     if (is_stop_propagation) {
       e?.stopPropagation?.()
     }
-    if (is_success_animation) {
-      success_trigger()
-    }
-    if (config?.on_click) {
-      config?.on_click(e)
+    preserve_current_native_activation()
+    try {
+      let result = typeof config?.on_click == "function" ? config.on_click(e) : undefined
+      if (result && typeof result.then == "function") {
+        is_callback_loading = true
+        result = await result
+      }
+      if (is_success_animation) {
+        success_trigger()
+      }
+      return result
+    } catch (error) {
+      if (is_success_animation) {
+        error_trigger()
+      }
+      if (typeof config?.on_error == "function") {
+        config.on_error(error)
+      }
+      return undefined
+    } finally {
+      is_callback_loading = false
     }
   }
 
@@ -253,6 +283,9 @@ export function create_button_manager(config) {
     get is_action_disabled() {
       return is_action_disabled
     },
+    get is_native_disabled() {
+      return is_native_disabled
+    },
     get selected_type() {
       return selected_type
     },
@@ -370,6 +403,9 @@ export function create_button_manager(config) {
     get download() {
       return download
     },
+    get html_type() {
+      return html_type
+    },
     get is_link() {
       return is_link
     },

package/dist/Components/Chart/Klines/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    dataset: any;
+}, {}, "">;
+type $$ComponentProps = {
+    dataset: any;
+};

package/dist/Components/Chart/index.svelte.d.ts

@@ -0,0 +1,11 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    manager: any;
+}, {}, "">;
+type $$ComponentProps = {
+    manager: any;
+};

package/dist/Components/Chart/manager.svelte.d.ts

@@ -0,0 +1,46 @@
+export function create_chart_manager(config: any): {
+    readonly datasets: null;
+    readonly chart_prepped: null;
+    readonly y_axis_width: number;
+    readonly x_axis_height: number;
+    readonly grid_width: null;
+    readonly frame_width: number;
+    period_to_sec: {
+        "5m": number;
+        "10m": number;
+        "15m": number;
+        "20m": number;
+        "30m": number;
+        "45m": number;
+        "1h": number;
+        "2h": number;
+        "3h": number;
+        "4h": number;
+        "6h": number;
+        "8h": number;
+        "12h": number;
+        "1d": number;
+        "2d": number;
+        "3d": number;
+        "4d": number;
+        "1w": number;
+        "2w": number;
+    };
+    handle_scroll_frame: (e: any) => void;
+    handle_pointer_down: (e: any, frame_index: any) => void;
+    handle_pointer_move: (e: any, frame_index: any) => void;
+    handle_pointer_up: (e: any, frame_index: any) => void;
+    handle_pointer_cancel: (e: any, frame_index: any) => void;
+    handle_y_axis_pointer_down: (e: any, frame_index: any) => void;
+    handle_y_axis_pointer_move: (e: any, frame_index: any) => void;
+    handle_y_axis_pointer_up: (e: any, frame_index: any) => void;
+    handle_y_axis_pointer_cancel: (e: any, frame_index: any) => void;
+    handle_y_axis_click: (frame_index: any) => void;
+    handle_scroll_y_axis: (e: any, frame_index: any) => void;
+    handle_chart_hover: (e: any, frame_index: any) => void;
+    handle_chart_hover_leave: (e: any, frame_index: any) => void;
+    set_grid_width: (input: any) => void;
+    gen_color: (l: any, c: any, h: any, o?: number, is_theme_based?: boolean, dark_l_offset?: number, is_dark_theme?: boolean, is_safari?: boolean) => string;
+    set_datasets: (input: any) => void;
+    refresh_chart: (opts?: {}) => void;
+};

package/{src/lib/Components/Chart/index.svelte.js → dist/Components/Chart/manager.svelte.js}

@@ -1,4 +1,4 @@
-import { color_var, deep_copy } from "$lib/client/index.js"
+import { color_var, create_unique_id, deep_copy } from "../../client/index.js"
 
 export function create_chart_manager(config) {
   const y_axis_width = 70
@@ -136,7 +136,7 @@ export function create_chart_manager(config) {
   }
 
   function generate_id(prefix) {
-    return prefix + "-" + Math.floor(Math.random() * 1000000000000)
+    return create_unique_id(prefix, 20)
   }
 
   function add_val_to_obj_with_path(obj, pathList) {
@@ -1468,21 +1468,19 @@ export function create_chart_manager(config) {
       chart_prepped = null
       return
     }
-    let id = $state(input?.id)
-    let x_axis_type = $state(input?.x_axis_type)
-    let x_axis_title = $state(input?.x_axis_title)
-    let shown_start_x = $state(input?.shown_start_x)
-    let shown_end_x = $state(input?.shown_end_x)
-    let frames = $state(input?.frames)
-    let min_x_scrollable = $state(input?.min_x_scrollable)
-    let max_x_scrollable = $state(input?.max_x_scrollable)
+    const id = input?.id
+    const x_axis_type = input?.x_axis_type
+    const x_axis_title = input?.x_axis_title
+    let shown_start_x_initial = input?.shown_start_x
+    let shown_end_x_initial = input?.shown_end_x
+    const input_frames = Array.isArray(input?.frames) ? input.frames : []
     let x_axis_highlight_tic = $state(input?.x_axis_highlight_tic)
     let x_hovered_percent_decimal = $state(input?.x_hovered_percent_decimal)
-    let all_data_start_x_loc = $state(null)
-    let all_data_end_x_loc = $state(null)
+    let all_data_start_x_loc = null
+    let all_data_end_x_loc = null
     let most_datapoints_for_x_dataset = 0
-    if (Array.isArray(frames)) {
-      for (let frame of frames) {
+    if (input_frames.length > 0) {
+      for (let frame of input_frames) {
         if (Array.isArray(frame?.shared_y_axiss)) {
           for (let shared_y_axis of frame.shared_y_axiss) {
             if (Array.isArray(shared_y_axis?.datasets)) {
@@ -1529,25 +1527,16 @@ export function create_chart_manager(config) {
       range_to_show = (x_range * range_to_show_default) / most_datapoints_for_x_dataset
       shown_start_x_loc = all_data_end_x_loc - parseFloat(range_to_show.toPrecision(8))
     }
-    // console.log("x_range0", {
-    //   x_range,
-    //   range_to_show,
-    //   all_data_end_x_loc,
-    //   all_data_start_x_loc,
-    //   shown_start_x,
-    //   shown_end_x,
-    //   most_datapoints_for_x_dataset,
-    // })
-    min_x_scrollable = all_data_start_x_loc + Math.floor(range_to_show * 0.1)
-    max_x_scrollable = all_data_end_x_loc - Math.floor(range_to_show * 0.1)
-    if (shown_start_x == null || isNaN(shown_start_x)) {
-      shown_start_x = shown_start_x_loc
-    }
-    if (shown_end_x == null || isNaN(shown_end_x)) {
-      shown_end_x = all_data_end_x_loc
+    const min_x_scrollable = all_data_start_x_loc + Math.floor(range_to_show * 0.1)
+    const max_x_scrollable = all_data_end_x_loc - Math.floor(range_to_show * 0.1)
+    if (shown_start_x_initial == null || isNaN(shown_start_x_initial)) {
+      shown_start_x_initial = shown_start_x_loc
+    }
+    if (shown_end_x_initial == null || isNaN(shown_end_x_initial)) {
+      shown_end_x_initial = all_data_end_x_loc
     }
     let prepped_frames = []
-    for (let frame of frames) {
+    for (let frame of input_frames) {
       const frame_height = frame_width / frame.aspect_ratio
       let shown_y_axis_index = $state(Number.isInteger(frame?.shown_y_axis_index) ? frame.shown_y_axis_index : 0)
       let prepped_shared_y_axiss = []
@@ -1578,8 +1567,8 @@ export function create_chart_manager(config) {
                 !isNaN(kline[dataset?.keys[2]]) &&
                 !isNaN(kline[dataset?.keys[3]]) &&
                 !isNaN(kline[dataset?.keys[4]]) &&
-                shown_start_x <= kline[dataset?.keys[0]] &&
-                kline[dataset?.keys[0]] < shown_end_x
+                shown_start_x_initial <= kline[dataset?.keys[0]] &&
+                kline[dataset?.keys[0]] < shown_end_x_initial
               ) {
                 const item_to_add = {
                   x: kline[dataset?.keys[0]],
@@ -1602,8 +1591,8 @@ export function create_chart_manager(config) {
               if (
                 !isNaN(datapoint[dataset?.keys[0]]) &&
                 !isNaN(datapoint[dataset?.keys[1]]) &&
-                shown_start_x <= datapoint[dataset?.keys[0]] &&
-                datapoint[dataset?.keys[0]] < shown_end_x
+                shown_start_x_initial <= datapoint[dataset?.keys[0]] &&
+                datapoint[dataset?.keys[0]] < shown_end_x_initial
               ) {
                 const item_to_add = {
                   x: datapoint[dataset?.keys[0]],
@@ -1622,8 +1611,8 @@ export function create_chart_manager(config) {
                   s: dataset?.keys?.length > 2 ? datapoint[dataset?.keys[2]] : null,
                 }
                 shown_data.push(item_to_add)
-                register_y_value(item_to_add.m * shown_start_x + item_to_add.b, affects_y_scale)
-                register_y_value(item_to_add.m * shown_end_x + item_to_add.b, affects_y_scale)
+                register_y_value(item_to_add.m * shown_start_x_initial + item_to_add.b, affects_y_scale)
+                register_y_value(item_to_add.m * shown_end_x_initial + item_to_add.b, affects_y_scale)
                 register_y_value(datasets[dataset?.dataset_id]?.y_min, affects_y_scale)
                 register_y_value(datasets[dataset?.dataset_id]?.y_max, affects_y_scale)
               }
@@ -1696,14 +1685,14 @@ export function create_chart_manager(config) {
           shown_low_y = Number(shown_low_y) - shown_y_range / 2
           shown_high_y = shown_low_y + shown_y_range
         }
-        const shown_x_range = shown_end_x - shown_start_x
+        const shown_x_range = shown_end_x_initial - shown_start_x_initial
         let prepped_datasets = []
         for (let pre_prepped_dataset of pre_prepped_datasets) {
           const kline_width_pd = (pre_prepped_dataset.period_x * 1) / shown_x_range
           let normalized_datapoints_in_range_loc = []
           for (let datapoint of pre_prepped_dataset.data) {
             if (pre_prepped_dataset.type === "klines") {
-              const norm_x = (datapoint.x - shown_start_x) / shown_x_range
+              const norm_x = (datapoint.x - shown_start_x_initial) / shown_x_range
               const norm_o = (datapoint.o - shown_low_y) / shown_y_range
               const norm_l = (datapoint.l - shown_low_y) / shown_y_range
               const norm_h = (datapoint.h - shown_low_y) / shown_y_range
@@ -1718,7 +1707,7 @@ export function create_chart_manager(config) {
                 ...norm_details,
               })
             } else if (pre_prepped_dataset.type === "lines") {
-              let x1 = shown_start_x
+              let x1 = shown_start_x_initial
               let y1 = datapoint.m * x1 + datapoint.b
               if (y1 < shown_low_y) {
                 x1 = (shown_low_y - datapoint.b) / datapoint.m
@@ -1727,7 +1716,7 @@ export function create_chart_manager(config) {
                 x1 = (shown_high_y - datapoint.b) / datapoint.m
                 y1 = shown_high_y
               }
-              let x2 = shown_end_x
+              let x2 = shown_end_x_initial
               let y2 = datapoint.m * x2 + datapoint.b
               if (y2 < shown_low_y) {
                 x2 = (shown_low_y - datapoint.b) / datapoint.m
@@ -1738,8 +1727,8 @@ export function create_chart_manager(config) {
               }
               const norm_y1 = (y1 - shown_low_y) / shown_y_range
               const norm_y2 = (y2 - shown_low_y) / shown_y_range
-              const norm_x1 = (x1 - shown_start_x) / shown_x_range
-              const norm_x2 = (x2 - shown_start_x) / shown_x_range
+              const norm_x1 = (x1 - shown_start_x_initial) / shown_x_range
+              const norm_x2 = (x2 - shown_start_x_initial) / shown_x_range
               normalized_datapoints_in_range_loc.push({
                 x1: parseFloat(norm_x1.toPrecision(6)),
                 y1: parseFloat(norm_y1.toPrecision(6)),
@@ -1748,7 +1737,7 @@ export function create_chart_manager(config) {
                 s: datapoint?.s,
               })
             } else {
-              const norm_x = (datapoint.x - shown_start_x) / shown_x_range
+              const norm_x = (datapoint.x - shown_start_x_initial) / shown_x_range
               const norm_y = (datapoint.y - shown_low_y) / shown_y_range
               normalized_datapoints_in_range_loc.push({
                 x: parseFloat(norm_x.toPrecision(6)),
@@ -1802,8 +1791,10 @@ export function create_chart_manager(config) {
         change_shown_y_axis,
       })
     }
-    frames = prepped_frames
-    let x_axis_tics = prep_x_axis(shown_start_x, shown_end_x, frame_width)
+    let frames = $state(prepped_frames)
+    let shown_start_x = $state(shown_start_x_initial)
+    let shown_end_x = $state(shown_end_x_initial)
+    const x_axis_tics = prep_x_axis(shown_start_x_initial, shown_end_x_initial, frame_width)
     function set_shown_start_x(input) {
       shown_start_x = input
     }

package/dist/Components/ChartInput/DisplayNav/Klines/index.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    data: any;
+    shown_start_x: any;
+    shown_end_x: any;
+    shown_low_y: any;
+    shown_high_y: any;
+    period_x: any;
+}, {}, "">;
+type $$ComponentProps = {
+    data: any;
+    shown_start_x: any;
+    shown_end_x: any;
+    shown_low_y: any;
+    shown_high_y: any;
+    period_x: any;
+};

package/dist/Components/ChartInput/DisplayNav/Lines/index.svelte.d.ts

@@ -0,0 +1,19 @@
+export default Index;
+type Index = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Index: import("svelte").Component<{
+    data: any;
+    shown_start_x: any;
+    shown_end_x: any;
+    shown_low_y: any;
+    shown_high_y: any;
+}, {}, "">;
+type $$ComponentProps = {
+    data: any;
+    shown_start_x: any;
+    shown_end_x: any;
+    shown_low_y: any;
+    shown_high_y: any;
+};