@archetypeai/ds-ui-svelte-labs 0.7.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.
Files changed (81) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +120 -0
  3. package/dist/primitives/aspect-ratio/aspect-ratio.svelte +8 -0
  4. package/dist/primitives/aspect-ratio/aspect-ratio.svelte.d.ts +4 -0
  5. package/dist/primitives/aspect-ratio/index.d.ts +4 -0
  6. package/dist/primitives/aspect-ratio/index.js +6 -0
  7. package/dist/primitives/aspect-ratio/types.d.ts +2 -0
  8. package/dist/primitives/aspect-ratio/types.js +1 -0
  9. package/dist/primitives/chart/chart-container.svelte +36 -0
  10. package/dist/primitives/chart/chart-container.svelte.d.ts +4 -0
  11. package/dist/primitives/chart/chart-style.svelte +37 -0
  12. package/dist/primitives/chart/chart-style.svelte.d.ts +8 -0
  13. package/dist/primitives/chart/chart-tooltip.svelte +136 -0
  14. package/dist/primitives/chart/chart-tooltip.svelte.d.ts +4 -0
  15. package/dist/primitives/chart/chart-utils.d.ts +45 -0
  16. package/dist/primitives/chart/chart-utils.js +52 -0
  17. package/dist/primitives/chart/index.d.ts +7 -0
  18. package/dist/primitives/chart/index.js +7 -0
  19. package/dist/primitives/chart/scatter-tooltip.svelte +40 -0
  20. package/dist/primitives/chart/scatter-tooltip.svelte.d.ts +4 -0
  21. package/dist/primitives/chart/types.d.ts +33 -0
  22. package/dist/primitives/chart/types.js +45 -0
  23. package/dist/primitives/kbd/index.d.ts +5 -0
  24. package/dist/primitives/kbd/index.js +7 -0
  25. package/dist/primitives/kbd/kbd-group.svelte +10 -0
  26. package/dist/primitives/kbd/kbd-group.svelte.d.ts +4 -0
  27. package/dist/primitives/kbd/kbd.svelte +10 -0
  28. package/dist/primitives/kbd/kbd.svelte.d.ts +4 -0
  29. package/dist/primitives/kbd/types.d.ts +6 -0
  30. package/dist/primitives/kbd/types.js +8 -0
  31. package/dist/primitives/logo/index.d.ts +4 -0
  32. package/dist/primitives/logo/index.js +6 -0
  33. package/dist/primitives/logo/logo.svelte +22 -0
  34. package/dist/primitives/logo/logo.svelte.d.ts +4 -0
  35. package/dist/primitives/logo/types.d.ts +25 -0
  36. package/dist/primitives/logo/types.js +14 -0
  37. package/dist/primitives/menubar/index.d.ts +4 -0
  38. package/dist/primitives/menubar/index.js +6 -0
  39. package/dist/primitives/menubar/menubar.svelte +67 -0
  40. package/dist/primitives/menubar/menubar.svelte.d.ts +4 -0
  41. package/dist/primitives/menubar/types.d.ts +10 -0
  42. package/dist/primitives/menubar/types.js +5 -0
  43. package/dist/primitives/scatter-chart/index.d.ts +4 -0
  44. package/dist/primitives/scatter-chart/index.js +6 -0
  45. package/dist/primitives/scatter-chart/scatter-chart.svelte +147 -0
  46. package/dist/primitives/scatter-chart/scatter-chart.svelte.d.ts +5 -0
  47. package/dist/primitives/scatter-chart/types.d.ts +34 -0
  48. package/dist/primitives/scatter-chart/types.js +6 -0
  49. package/dist/primitives/sensor-chart/index.d.ts +4 -0
  50. package/dist/primitives/sensor-chart/index.js +6 -0
  51. package/dist/primitives/sensor-chart/sensor-chart.svelte +138 -0
  52. package/dist/primitives/sensor-chart/sensor-chart.svelte.d.ts +4 -0
  53. package/dist/primitives/sensor-chart/types.d.ts +27 -0
  54. package/dist/primitives/sensor-chart/types.js +6 -0
  55. package/dist/primitives/slider/index.d.ts +4 -0
  56. package/dist/primitives/slider/index.js +6 -0
  57. package/dist/primitives/slider/slider.svelte +47 -0
  58. package/dist/primitives/slider/slider.svelte.d.ts +4 -0
  59. package/dist/primitives/slider/types.d.ts +7 -0
  60. package/dist/primitives/slider/types.js +14 -0
  61. package/dist/primitives/switch/index.d.ts +4 -0
  62. package/dist/primitives/switch/index.js +6 -0
  63. package/dist/primitives/switch/switch.svelte +28 -0
  64. package/dist/primitives/switch/switch.svelte.d.ts +4 -0
  65. package/dist/primitives/switch/types.d.ts +45 -0
  66. package/dist/primitives/switch/types.js +27 -0
  67. package/dist/primitives/toggle/index.d.ts +4 -0
  68. package/dist/primitives/toggle/index.js +6 -0
  69. package/dist/primitives/toggle/toggle.svelte +24 -0
  70. package/dist/primitives/toggle/toggle.svelte.d.ts +4 -0
  71. package/dist/primitives/toggle/types.d.ts +39 -0
  72. package/dist/primitives/toggle/types.js +19 -0
  73. package/dist/primitives/utils.d.ts +4 -0
  74. package/dist/primitives/utils.js +29 -0
  75. package/dist/primitives/video-player/index.d.ts +4 -0
  76. package/dist/primitives/video-player/index.js +6 -0
  77. package/dist/primitives/video-player/types.d.ts +49 -0
  78. package/dist/primitives/video-player/types.js +32 -0
  79. package/dist/primitives/video-player/video-player.svelte +139 -0
  80. package/dist/primitives/video-player/video-player.svelte.d.ts +4 -0
  81. package/package.json +127 -0
@@ -0,0 +1,7 @@
1
+ import Root from './kbd.svelte';
2
+ import Group from './kbd-group.svelte';
3
+ export { kbdVariants, kbdGroupVariants } from './types.js';
4
+ export { Root, Group,
5
+ //
6
+ Root as Kbd, Group as KbdGroup };
7
+ export default Root;
@@ -0,0 +1,10 @@
1
+ <script lang="ts">
2
+ import { cn } from '../utils.js';
3
+ import { kbdGroupVariants, type KbdGroupProps } from './types.js';
4
+
5
+ let { ref = $bindable(null), class: className, children, ...restProps }: KbdGroupProps = $props();
6
+ </script>
7
+
8
+ <kbd bind:this={ref} data-slot="kbd-group" class={cn(kbdGroupVariants(), className)} {...restProps}>
9
+ {@render children?.()}
10
+ </kbd>
@@ -0,0 +1,4 @@
1
+ import { type KbdGroupProps } from './types.js';
2
+ declare const KbdGroup: import("svelte").Component<KbdGroupProps, {}, "ref">;
3
+ type KbdGroup = ReturnType<typeof KbdGroup>;
4
+ export default KbdGroup;
@@ -0,0 +1,10 @@
1
+ <script lang="ts">
2
+ import { cn } from '../utils.js';
3
+ import { kbdVariants, type KbdProps } from './types.js';
4
+
5
+ let { ref = $bindable(null), class: className, children, ...restProps }: KbdProps = $props();
6
+ </script>
7
+
8
+ <kbd bind:this={ref} data-slot="kbd" class={cn(kbdVariants(), className)} {...restProps}>
9
+ {@render children?.()}
10
+ </kbd>
@@ -0,0 +1,4 @@
1
+ import { type KbdProps } from './types.js';
2
+ declare const Kbd: import("svelte").Component<KbdProps, {}, "ref">;
3
+ type Kbd = ReturnType<typeof Kbd>;
4
+ export default Kbd;
@@ -0,0 +1,6 @@
1
+ import { type WithElementRef } from '../utils.js';
2
+ import type { HTMLAttributes } from 'svelte/elements';
3
+ export declare const kbdVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10", unknown, unknown, undefined>>;
4
+ export declare const kbdGroupVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "inline-flex items-center gap-1", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "inline-flex items-center gap-1", unknown, unknown, undefined>>;
5
+ export type KbdProps = WithElementRef<HTMLAttributes<HTMLElement>>;
6
+ export type KbdGroupProps = WithElementRef<HTMLAttributes<HTMLElement>>;
@@ -0,0 +1,8 @@
1
+ import {} from '../utils.js';
2
+ import { tv } from 'tailwind-variants';
3
+ export const kbdVariants = tv({
4
+ base: "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-xs px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3 in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10"
5
+ });
6
+ export const kbdGroupVariants = tv({
7
+ base: 'inline-flex items-center gap-1'
8
+ });
@@ -0,0 +1,4 @@
1
+ import Root from './logo.svelte';
2
+ export { logoVariants, type LogoProps, type LogoSize } from './types.js';
3
+ export { Root, Root as Logo };
4
+ export default Root;
@@ -0,0 +1,6 @@
1
+ import Root from './logo.svelte';
2
+ export { logoVariants } from './types.js';
3
+ export { Root,
4
+ //
5
+ Root as Logo };
6
+ export default Root;
@@ -0,0 +1,22 @@
1
+ <script lang="ts">
2
+ import { cn } from '../utils.js';
3
+ import { logoVariants, type LogoProps } from './types.js';
4
+
5
+ let { class: className, size = 'default', ...restProps }: LogoProps = $props();
6
+ </script>
7
+
8
+ <svg
9
+ data-slot="logo"
10
+ data-size={size}
11
+ class={cn(logoVariants({ size }), className)}
12
+ viewBox="0 0 190 35"
13
+ fill="none"
14
+ xmlns="http://www.w3.org/2000/svg"
15
+ {...restProps}
16
+ >
17
+ <path
18
+ d="M105.615 1.57812C105.722 1.57812 105.808 1.66398 105.808 1.77051V7.50879C105.808 7.66785 105.906 7.80434 106.045 7.86328C106.09 7.8821 106.14 7.89253 106.192 7.89258H113.744C113.843 7.89258 113.937 7.91818 114.02 7.96289C114.141 8.02708 114.238 8.13281 114.29 8.26562L116.048 12.8408L119.444 21.6826C119.475 21.7628 119.526 21.8231 119.587 21.8643C119.595 21.8697 119.603 21.8742 119.612 21.8789C119.637 21.8931 119.663 21.9049 119.69 21.9131C119.873 21.9666 120.091 21.8866 120.167 21.6738L125.096 8.01855C125.125 7.9418 125.197 7.8916 125.279 7.8916H129.266L129.268 7.89258C129.337 7.89261 129.394 7.92787 129.428 7.97852C129.462 8.02824 129.473 8.09345 129.448 8.15625H129.454L121.633 28.2607C120.696 30.6621 119.683 32.3727 118.621 33.3389C117.542 34.3182 116.19 34.8125 114.597 34.8125C114.39 34.8125 114.173 34.8027 113.944 34.7871C113.813 34.7782 113.679 34.7669 113.542 34.7529C113.102 34.7081 112.627 34.639 112.122 34.542L112.023 34.5254L112.022 34.5244H112.017C111.924 34.5096 111.853 34.4292 111.853 34.333V31.2559C111.853 31.1419 111.953 31.0511 112.068 31.0645L112.176 31.0762C112.617 31.1266 113.004 31.1598 113.334 31.1768C113.497 31.185 113.647 31.1894 113.782 31.1895C114.609 31.189 115.382 30.9116 116.079 30.3662C116.748 29.841 117.265 28.9285 117.613 27.6504C117.631 27.5838 117.627 27.5119 117.601 27.4482L111.117 11.6367C111.088 11.5654 111.039 11.5056 110.978 11.4639C110.916 11.4225 110.841 11.3994 110.763 11.3994H106.391C106.07 11.3997 105.81 11.6591 105.81 11.9785V22.2979C105.81 23.2461 105.956 23.8811 106.243 24.1904C106.278 24.2286 106.318 24.2644 106.361 24.2979L106.496 24.3877C106.8 24.5595 107.243 24.6465 107.818 24.6465C108.294 24.6465 108.633 24.6275 109.214 24.5283L109.411 24.4941C109.447 24.4878 109.483 24.4926 109.514 24.5049C109.587 24.5319 109.64 24.6021 109.64 24.6865V27.7285C109.64 27.8201 109.576 27.8986 109.489 27.918L109.246 27.9678C108.462 28.1216 107.885 28.1504 107.048 28.1504C105.88 28.1504 104.894 27.9608 104.099 27.5879C103.994 27.5384 103.891 27.4857 103.793 27.4297C103.771 27.4171 103.748 27.4055 103.726 27.3926C103.449 27.229 103.2 27.0395 102.979 26.8232C102.081 25.9429 101.626 24.3813 101.626 22.1797V11.5908C101.626 11.4975 101.56 11.4201 101.471 11.4023L101.432 11.3984H98.9547C98.8477 11.3984 98.7615 11.3125 98.7614 11.2061V8.08691C98.7614 8.07827 98.7632 8.06986 98.7643 8.06152C98.7654 8.05289 98.766 8.04437 98.7682 8.03613C98.7754 8.00967 98.7903 7.98738 98.8073 7.9668C98.843 7.9232 98.8949 7.89272 98.9557 7.89258H101.239C101.329 7.89258 101.412 7.86108 101.477 7.80957C101.566 7.73895 101.625 7.63142 101.625 7.50977V1.77051C101.625 1.66398 101.711 1.57812 101.818 1.57812H105.615ZM141.352 7.32031C143.058 7.32034 144.617 7.75709 145.985 8.62109C147.352 9.48369 148.444 10.7278 149.231 12.3184H149.228C150.012 13.903 150.409 15.784 150.409 17.9102C150.409 20.0361 150.012 21.918 149.228 23.501C148.441 25.093 147.349 26.3299 145.982 27.1807C144.614 28.0314 143.055 28.4619 141.35 28.4619C139.88 28.4619 138.609 28.1754 137.579 27.6104C136.862 27.2183 136.241 26.738 135.726 26.1816C135.606 26.0536 135.39 26.1334 135.389 26.3105V34.5479C135.389 34.6542 135.303 34.7401 135.196 34.7402H131.401L131.362 34.7363C131.274 34.7184 131.207 34.6409 131.207 34.5479V8.08984C131.207 7.98339 131.294 7.89564 131.401 7.89551H135.196C135.303 7.89567 135.389 7.98341 135.389 8.08984V8.99805C135.389 9.3309 135.791 9.50893 136.038 9.28125C137.451 7.97921 139.233 7.32031 141.352 7.32031ZM88.8688 7.2793C91.8792 7.27937 94.2532 8.20693 95.9235 10.0371H95.9215C97.5874 11.8644 98.4313 14.3698 98.4313 17.4844C98.4313 18.231 98.418 18.5033 98.3913 18.7178L98.3805 18.9209C98.3745 19.0229 98.2893 19.1025 98.1852 19.1025H83.859C83.5067 19.1025 83.237 19.4117 83.2829 19.7607C83.4584 21.116 83.96 22.294 84.778 23.2734C85.7537 24.4394 87.1551 25.0332 88.946 25.0332C90.4377 25.0332 91.5974 24.6744 92.3962 23.9658C93.2038 23.2497 93.7234 22.4653 93.945 21.6338L93.9743 21.4922C93.9936 21.4036 94.0727 21.3381 94.1647 21.3379H98.0397C98.163 21.3379 98.2571 21.4521 98.2292 21.5732L98.1911 21.7363C97.614 23.7692 96.5358 25.4219 94.9889 26.6484C93.4376 27.8779 91.379 28.501 88.8669 28.501C86.8025 28.501 84.9954 28.0378 83.5006 27.125C82.0044 26.2107 80.8532 24.9396 80.0797 23.3477C79.3093 21.7616 78.9177 19.9478 78.9176 17.8721C78.9176 15.7962 79.3226 13.9391 80.1198 12.3545C80.92 10.7625 82.0845 9.50493 83.5807 8.61719C85.0771 7.72944 86.8563 7.2793 88.8688 7.2793ZM161.463 7.2793C164.473 7.27936 166.847 8.20692 168.517 10.0371H168.515C170.18 11.8644 171.025 14.3698 171.025 17.4844C171.025 18.231 171.012 18.5033 170.985 18.7178L170.974 18.9209C170.968 19.0229 170.883 19.1025 170.779 19.1025H156.453C156.1 19.1025 155.831 19.4117 155.877 19.7607C156.052 21.116 156.554 22.294 157.372 23.2734C158.347 24.4394 159.749 25.0332 161.54 25.0332C163.031 25.0332 164.191 24.6744 164.99 23.9658C165.796 23.2497 166.317 22.4653 166.539 21.6338L166.569 21.4922C166.588 21.4036 166.665 21.3381 166.758 21.3379H170.633C170.757 21.3379 170.851 21.4521 170.823 21.5732L170.786 21.7363C170.209 23.7693 169.131 25.4219 167.583 26.6484C166.031 27.8779 163.971 28.501 161.461 28.501C159.396 28.501 157.589 28.0378 156.094 27.125C154.598 26.2107 153.447 24.9396 152.673 23.3477C151.903 21.7616 151.511 19.9478 151.511 17.8721C151.511 15.7962 151.916 13.9391 152.714 12.3545C153.514 10.7625 154.678 9.50493 156.174 8.61719C157.671 7.72944 159.45 7.2793 161.463 7.2793ZM48.9274 7.29297C50.6036 7.29297 52.1165 7.63016 53.4284 8.2959C54.7433 8.96171 55.8099 9.90612 56.6012 11.0957C56.7097 11.2583 56.8093 11.4238 56.9059 11.5938C56.9401 11.6499 56.9714 11.7065 56.9997 11.7627L57.1012 11.958C57.1206 11.9935 57.1371 12.0309 57.1549 12.0664C57.1697 12.0959 57.1846 12.1253 57.1979 12.1562C57.2202 12.205 57.2435 12.2525 57.2643 12.3027C57.3283 12.4418 57.387 12.584 57.445 12.7275C57.4732 12.8 57.4998 12.8729 57.5251 12.9453C57.5473 13.0103 57.5712 13.0737 57.5905 13.1387C57.6098 13.1905 57.6264 13.2441 57.6413 13.2959C57.6635 13.3682 57.6859 13.4404 57.7067 13.5127C57.7097 13.5216 57.7121 13.5312 57.7135 13.54C57.7834 13.7884 57.8451 14.0411 57.8942 14.2998C57.9105 14.3795 57.9248 14.4627 57.9381 14.5439C57.9724 14.7496 58.0023 14.9574 58.0231 15.1689L58.0309 15.2676C58.0384 15.3784 57.9504 15.4744 57.8376 15.4746H53.9264C53.824 15.4744 53.7405 15.3964 53.7331 15.2959L53.7262 15.21C53.7039 14.9999 53.6727 14.791 53.6296 14.5898L53.6286 14.5889L53.6276 14.5898C53.6158 14.531 53.6043 14.4734 53.5895 14.416C53.5791 14.3672 53.5653 14.3193 53.5534 14.2705C53.54 14.2203 53.5268 14.1684 53.5104 14.1182C53.4985 14.0753 53.4847 14.0321 53.4714 13.9893C53.4253 13.8444 53.3731 13.7039 53.3151 13.5664C53.3047 13.5369 53.2914 13.5071 53.278 13.4775C53.2573 13.4274 53.2353 13.3772 53.2116 13.3271C53.1848 13.268 53.1564 13.2095 53.1266 13.1533C53.0954 13.0927 53.0636 13.0337 53.0309 12.9746C53.0265 12.9673 53.0241 12.9609 53.0212 12.9551C52.9885 12.8974 52.9553 12.8413 52.9196 12.7852C52.884 12.7246 52.8454 12.6655 52.8053 12.6064C52.7667 12.5473 52.7264 12.4893 52.6833 12.4316L52.5544 12.2598C52.5097 12.205 52.4647 12.1504 52.4186 12.0957C51.6868 11.2346 50.5252 10.7979 48.9665 10.7979C47.0841 10.7982 45.6728 11.4763 44.7731 12.8105C43.857 14.1702 43.3932 15.8776 43.3932 17.8838C43.3932 19.8901 43.8574 21.5886 44.7721 22.9365C45.6718 24.2604 47.0811 24.9294 48.9665 24.9297C50.5519 24.9297 51.7269 24.5006 52.4587 23.6514C53.0848 22.9234 53.4863 22.0356 53.6559 21.0029C53.6901 20.8091 53.7128 20.6119 53.7292 20.4092L53.7331 20.3164C53.739 20.2143 53.8243 20.1348 53.9284 20.1348H57.8376C57.946 20.135 58.0349 20.2251 58.0319 20.333L58.029 20.3369L58.0251 20.4395C58.0146 20.6435 57.9981 20.8448 57.9743 21.043C57.8226 22.3241 57.4001 23.5048 56.7174 24.5566C55.9276 25.7743 54.8476 26.7421 53.5075 27.4346C52.1689 28.127 50.6397 28.4775 48.9665 28.4775C47.0047 28.4775 45.2523 28.0268 43.7575 27.1406C42.2598 26.2529 41.0891 24.9875 40.277 23.3838C39.4664 21.7859 39.0554 19.9348 39.0553 17.8857C39.0553 15.8365 39.4664 13.9847 40.277 12.3867C41.0891 10.7831 42.2538 9.52 43.738 8.63086C45.2194 7.74462 46.9671 7.293 48.9274 7.29297ZM15.0993 0C15.1793 0.000152967 15.2516 0.0488926 15.2799 0.124023L25.6569 27.6611H25.6549C25.7024 27.7868 25.6086 27.9209 25.4733 27.9209H20.8288C20.7455 27.9209 20.672 27.8694 20.6452 27.791L18.4499 21.4277C18.4231 21.3494 18.3505 21.2969 18.2672 21.2969H7.24576C7.16247 21.2969 7.08894 21.3493 7.06217 21.4277L4.86686 27.791C4.8401 27.8694 4.76746 27.9208 4.68424 27.9209H0.194007C0.0601917 27.9209 -0.0351022 27.7869 0.0123662 27.6611L10.3112 0.125977C10.3395 0.0505177 10.4125 0 10.4928 0H15.0993ZM37.0407 7.43164C37.551 7.43168 38.4924 7.51575 38.8805 7.55273C38.9785 7.56173 39.0543 7.64616 39.0544 7.74512V11.3672C39.0544 11.4824 38.9534 11.5745 38.8376 11.5586C38.4986 11.5157 37.8531 11.4366 37.5837 11.4365C35.9178 11.4365 34.5325 12.0126 33.4645 13.1475C32.3952 14.2852 31.8523 15.7705 31.8522 17.5605V27.7275C31.852 27.8339 31.7658 27.9209 31.6589 27.9209H27.8649C27.8104 27.9209 27.7607 27.8984 27.7253 27.8623C27.7119 27.8489 27.7029 27.8323 27.694 27.8154C27.6859 27.7999 27.6772 27.7844 27.6735 27.7666C27.6709 27.754 27.6696 27.7409 27.6696 27.7275V8.08594C27.6696 8.01093 27.7133 7.94776 27.776 7.91602C27.8029 7.90203 27.8326 7.8916 27.8649 7.8916H31.6589C31.7659 7.8916 31.8522 7.97941 31.8522 8.08594V9.68457C31.8522 9.9422 32.0797 10.0953 32.2926 10.0684C32.3474 10.0612 32.4003 10.0412 32.4489 10.0088C32.4577 10.003 32.4668 9.99784 32.4753 9.99121C32.504 9.96829 32.531 9.94069 32.5544 9.90723C32.5829 9.86636 32.6133 9.82697 32.6422 9.78711C32.6738 9.74369 32.7049 9.70043 32.737 9.6582C32.7673 9.61826 32.798 9.57892 32.8288 9.54004C32.872 9.48541 32.9164 9.43241 32.9606 9.37988C32.9847 9.35129 33.0076 9.32191 33.0319 9.29395C33.0629 9.25836 33.0951 9.22403 33.1266 9.18945C33.2719 9.02959 33.4213 8.88034 33.5758 8.74219C33.6091 8.71235 33.6427 8.68312 33.6764 8.6543C33.7146 8.62176 33.753 8.58984 33.7917 8.55859C33.8357 8.52297 33.8807 8.48902 33.9255 8.45508C33.9604 8.42863 33.9946 8.4014 34.0299 8.37598C34.0913 8.33181 34.1538 8.2901 34.2165 8.24902C34.2349 8.23694 34.2526 8.22373 34.2712 8.21191C34.3552 8.15831 34.4406 8.10766 34.527 8.05957C34.5438 8.05022 34.5609 8.04137 34.5778 8.03223C34.6508 7.9927 34.7248 7.95556 34.7995 7.91992C34.8254 7.90756 34.8515 7.89568 34.8776 7.88379C34.9395 7.85558 35.0021 7.82928 35.0651 7.80371C35.0938 7.79207 35.1221 7.77965 35.151 7.76855C35.2229 7.74098 35.2956 7.71559 35.3688 7.69141C35.39 7.6844 35.411 7.67664 35.4323 7.66992C35.5275 7.63991 35.6238 7.61223 35.7214 7.58789C35.7301 7.58571 35.739 7.58417 35.7477 7.58203C35.8389 7.55981 35.9309 7.53975 36.0241 7.52246C36.0416 7.51921 36.0592 7.51675 36.0768 7.51367C36.1587 7.49934 36.2414 7.48711 36.3249 7.47656C36.3518 7.47315 36.3788 7.46981 36.4059 7.4668C36.4786 7.45872 36.5518 7.4525 36.6256 7.44727C36.662 7.44469 36.6984 7.44134 36.735 7.43945C36.8357 7.43425 36.9379 7.43164 37.0407 7.43164ZM63.7604 0C63.8675 0 63.9538 0.0858526 63.9538 0.192383V9.08887C63.9538 9.42453 64.3553 9.60079 64.6022 9.37207C65.0751 8.93271 65.6304 8.54336 66.2624 8.20605C67.369 7.6157 68.7425 7.31641 70.3415 7.31641L70.7077 7.32324C72.5199 7.39134 74.0353 7.96955 75.2135 9.04297L75.2155 9.04004L75.445 9.2627C76.5555 10.4047 77.1178 12.0277 77.1178 14.0928V27.7256C77.1178 27.8321 77.0315 27.9179 76.9245 27.918H73.1296C73.0227 27.9177 72.9362 27.832 72.9362 27.7256V15.1328C72.9361 13.7999 72.6194 12.7543 71.9948 12.0234C71.3775 11.3014 70.4047 10.9355 69.1032 10.9355C67.5359 10.9356 66.2719 11.3721 65.3454 12.2314C64.4218 13.0895 63.9539 14.2467 63.9538 15.6729V27.7275C63.9537 27.834 63.8675 27.9199 63.7604 27.9199H59.9665L59.9274 27.916C59.8391 27.8982 59.7732 27.8207 59.7731 27.7275V0.192383C59.7731 0.0858526 59.8594 0 59.9665 0H63.7604ZM140.733 10.8643C139.102 10.8643 137.8 11.4943 136.862 12.7324C135.913 13.9886 135.43 15.7303 135.43 17.9111C135.43 20.092 135.913 21.8347 136.862 23.0908C137.8 24.3292 139.101 24.9579 140.733 24.958C142.461 24.958 143.744 24.3046 144.657 22.9629V22.9639C145.572 21.616 146.038 19.916 146.038 17.9111C146.038 15.9063 145.572 14.2078 144.657 12.8584C143.802 11.599 142.621 10.9476 141.052 10.8711L140.733 10.8643ZM181.645 1.14844C186.251 1.1486 190 4.87842 190 9.45898C190 14.0397 186.252 17.7684 181.645 17.7686C177.039 17.7686 173.29 14.0413 173.29 9.45898C173.29 4.87684 177.039 1.14844 181.645 1.14844ZM13.3307 6.25098C13.1537 5.72451 12.4074 5.72615 12.2301 6.25098L9.40397 14.6846L8.77116 16.5703C8.64665 16.9444 8.92614 17.3298 9.32291 17.3301H16.2682V17.332C16.6651 17.3319 16.9442 16.9445 16.818 16.5703L13.3307 6.25098ZM181.645 2.08691C177.559 2.08691 174.235 5.39358 174.235 9.45801C174.235 13.5223 177.559 16.8291 181.645 16.8291C185.731 16.8289 189.055 13.5222 189.055 9.45801C189.055 5.39368 185.731 2.08707 181.645 2.08691ZM88.7526 10.7461C87.2102 10.7461 85.913 11.2269 84.8971 12.1768C83.9735 13.0394 83.4211 14.1685 83.2546 15.5371C83.2414 15.6508 83.3337 15.7507 83.4479 15.751H93.8903L93.8883 15.7529C93.9999 15.7529 94.0911 15.6593 94.0837 15.5498C94.0033 14.2184 93.512 13.0971 92.6227 12.2109C91.7066 11.2997 90.4625 10.8097 89.0397 10.752L88.7526 10.7461ZM161.347 10.7461C159.805 10.7462 158.508 11.2269 157.492 12.1768C156.568 13.0393 156.017 14.1686 155.85 15.5371C155.836 15.6509 155.929 15.751 156.044 15.751H166.484V15.7529C166.595 15.7528 166.686 15.6592 166.678 15.5498C166.598 14.2185 166.108 13.0971 165.218 12.2109C164.301 11.2996 163.057 10.8096 161.634 10.752L161.347 10.7461ZM181.007 5.69531C181.028 5.69549 181.044 5.70863 181.051 5.72754L183.649 12.6182C183.661 12.6492 183.638 12.6835 183.604 12.6836H182.441L182.413 12.6748C182.405 12.6693 182.399 12.6607 182.395 12.6504L181.846 11.0586C181.839 11.0379 181.82 11.0244 181.799 11.0244H179.043L179.014 11.0342C179.006 11.0401 178.999 11.0483 178.996 11.0586L178.447 12.6504C178.439 12.6711 178.422 12.6836 178.401 12.6836H177.277L177.254 12.6777C177.233 12.6667 177.223 12.6415 177.232 12.6182L179.808 5.72754C179.816 5.70851 179.834 5.69538 179.854 5.69531H181.007ZM185.186 5.69531C185.213 5.69531 185.236 5.71717 185.236 5.74414V12.6328C185.236 12.6598 185.213 12.6816 185.186 12.6816H184.051C184.024 12.6815 184.003 12.6597 184.003 12.6328V5.74414C184.003 5.71729 184.024 5.6955 184.051 5.69531H185.186ZM180.565 7.25879C180.52 7.12618 180.334 7.12753 180.29 7.25879L179.424 9.84082C179.393 9.93548 179.463 10.0322 179.561 10.0322H181.3L181.301 10.0332C181.4 10.0332 181.469 9.93596 181.438 9.84277L180.565 7.25879Z"
19
+ fill="currentColor"
20
+ shape-rendering="crispEdges"
21
+ />
22
+ </svg>
@@ -0,0 +1,4 @@
1
+ import { type LogoProps } from './types.js';
2
+ declare const Logo: import("svelte").Component<LogoProps, {}, "">;
3
+ type Logo = ReturnType<typeof Logo>;
4
+ export default Logo;
@@ -0,0 +1,25 @@
1
+ import type { SVGAttributes } from 'svelte/elements';
2
+ import { type VariantProps } from 'tailwind-variants';
3
+ export declare const logoVariants: import("tailwind-variants").TVReturnType<{
4
+ size: {
5
+ sm: string;
6
+ default: string;
7
+ lg: string;
8
+ };
9
+ }, undefined, "text-foreground shrink-0 antialiased", {
10
+ size: {
11
+ sm: string;
12
+ default: string;
13
+ lg: string;
14
+ };
15
+ }, undefined, import("tailwind-variants").TVReturnType<{
16
+ size: {
17
+ sm: string;
18
+ default: string;
19
+ lg: string;
20
+ };
21
+ }, undefined, "text-foreground shrink-0 antialiased", unknown, unknown, undefined>>;
22
+ export type LogoSize = VariantProps<typeof logoVariants>['size'];
23
+ export type LogoProps = SVGAttributes<SVGSVGElement> & {
24
+ size?: LogoSize;
25
+ };
@@ -0,0 +1,14 @@
1
+ import { tv } from 'tailwind-variants';
2
+ export const logoVariants = tv({
3
+ base: 'text-foreground shrink-0 antialiased',
4
+ variants: {
5
+ size: {
6
+ sm: 'h-4 w-auto',
7
+ default: 'h-6 w-auto',
8
+ lg: 'h-8 w-auto'
9
+ }
10
+ },
11
+ defaultVariants: {
12
+ size: 'default'
13
+ }
14
+ });
@@ -0,0 +1,4 @@
1
+ import Root from './menubar.svelte';
2
+ export { menubarVariants, type MenubarProps } from './types.js';
3
+ export { Root, Root as Menubar };
4
+ export default Root;
@@ -0,0 +1,6 @@
1
+ import Root from './menubar.svelte';
2
+ export { menubarVariants } from './types.js';
3
+ export { Root,
4
+ //
5
+ Root as Menubar };
6
+ export default Root;
@@ -0,0 +1,67 @@
1
+ <script lang="ts">
2
+ import { cn } from '../utils.js';
3
+ import Logo from '../logo/index.js';
4
+ import { menubarVariants, type MenubarProps } from './types.js';
5
+ import { Badge } from '@archetypeai/ds-ui-svelte-console/primitives/badge';
6
+ import { Button } from '@archetypeai/ds-ui-svelte-console/primitives/button';
7
+ import SeparatorIcon from '@lucide/svelte/icons/minus';
8
+ import SunIcon from '@lucide/svelte/icons/sun';
9
+ import MoonIcon from '@lucide/svelte/icons/moon';
10
+
11
+ const browser = typeof window !== 'undefined';
12
+
13
+ let {
14
+ ref = $bindable(null),
15
+ partnerLogo,
16
+ class: className,
17
+ children,
18
+ darkToggle = true,
19
+ ...restProps
20
+ }: MenubarProps = $props();
21
+
22
+ // follow whatever theme the host app has already applied; the toggle is the
23
+ // only thing that mutates the document class
24
+ let darkMode = $state(browser && document.documentElement.classList.contains('dark'));
25
+
26
+ function toggleDark() {
27
+ const apply = () => {
28
+ darkMode = !darkMode;
29
+ document.documentElement.classList.toggle('dark', darkMode);
30
+ };
31
+
32
+ if (document.startViewTransition) {
33
+ document.startViewTransition(apply);
34
+ } else {
35
+ apply();
36
+ }
37
+ }
38
+ </script>
39
+
40
+ <header bind:this={ref} data-slot="menubar" class={cn(menubarVariants(), className)} {...restProps}>
41
+ <div data-slot="menubar-brand" class="flex items-center gap-3">
42
+ <Logo />
43
+ <SeparatorIcon class="text-muted-foreground size-6" strokeWidth={1} aria-hidden="true" />
44
+ {#if partnerLogo}
45
+ {@render partnerLogo()}
46
+ {:else}
47
+ <Badge class="text-muted-foreground mr-0">Partner Logo</Badge>
48
+ {/if}
49
+ </div>
50
+
51
+ {#if children || darkToggle}
52
+ <div data-slot="menubar-actions" class="flex items-center gap-2">
53
+ {#if children}
54
+ {@render children()}
55
+ {/if}
56
+ {#if darkToggle}
57
+ <Button variant="outline" size="icon" onclick={toggleDark} aria-label="Toggle dark mode">
58
+ {#if darkMode}
59
+ <SunIcon />
60
+ {:else}
61
+ <MoonIcon />
62
+ {/if}
63
+ </Button>
64
+ {/if}
65
+ </div>
66
+ {/if}
67
+ </header>
@@ -0,0 +1,4 @@
1
+ import { type MenubarProps } from './types.js';
2
+ declare const Menubar: import("svelte").Component<MenubarProps, {}, "ref">;
3
+ type Menubar = ReturnType<typeof Menubar>;
4
+ export default Menubar;
@@ -0,0 +1,10 @@
1
+ import { type WithElementRef } from '../utils.js';
2
+ import type { Snippet } from 'svelte';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+ export declare const menubarVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "border-border flex items-center justify-between border-b px-4 py-2", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "border-border flex items-center justify-between border-b px-4 py-2", unknown, unknown, undefined>>;
5
+ export type MenubarProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
6
+ /** optional partner logo snippet for co-branding; a placeholder badge renders when omitted */
7
+ partnerLogo?: Snippet;
8
+ /** show built-in dark mode toggle (opt out with false) */
9
+ darkToggle?: boolean;
10
+ };
@@ -0,0 +1,5 @@
1
+ import {} from '../utils.js';
2
+ import { tv } from 'tailwind-variants';
3
+ export const menubarVariants = tv({
4
+ base: 'border-border flex items-center justify-between border-b px-4 py-2'
5
+ });
@@ -0,0 +1,4 @@
1
+ import Root from './scatter-chart.svelte';
2
+ export { scatterChartVariants, type ScatterChartProps } from './types.js';
3
+ export { Root, Root as ScatterChart };
4
+ export default Root;
@@ -0,0 +1,6 @@
1
+ import Root from './scatter-chart.svelte';
2
+ export { scatterChartVariants } from './types.js';
3
+ export { Root,
4
+ //
5
+ Root as ScatterChart };
6
+ export default Root;
@@ -0,0 +1,147 @@
1
+ <script lang="ts">
2
+ import { cn } from '../utils.js';
3
+ import * as Chart from '../chart/index.js';
4
+ import { CHART_COLORS, buildChartConfig, slidingWindow } from '../chart/chart-utils.js';
5
+ import { scatterChartVariants, type ScatterChartProps } from './types.js';
6
+ import { ScatterChart } from 'layerchart';
7
+ // @ts-expect-error -- d3-scale ships without type declarations and @types/d3-scale is not installed
8
+ import { scaleLinear } from 'd3-scale';
9
+
10
+ let {
11
+ ref = $bindable(null),
12
+ title = undefined,
13
+ icon: Icon = undefined,
14
+ data = [],
15
+ xKey = 'x',
16
+ yKey = 'y',
17
+ categoryKey = undefined,
18
+ categories = {},
19
+ maxPoints = undefined,
20
+ xMin,
21
+ xMax,
22
+ yMin,
23
+ yMax,
24
+ xTicks,
25
+ yTicks,
26
+ class: className,
27
+ ...restProps
28
+ }: ScatterChartProps = $props();
29
+
30
+ // create a sliding window of data
31
+ let displayData = $derived(slidingWindow(data, maxPoints));
32
+
33
+ // derive series config from categoryKey and categories prop; without
34
+ // categories the points plot as a single unlabeled series
35
+ let series = $derived.by(() => {
36
+ if (categoryKey && Object.keys(categories).length > 0) {
37
+ const categoryKeys = Object.keys(categories);
38
+ return categoryKeys.map((catValue, i) => ({
39
+ key: catValue,
40
+ label: categories[catValue],
41
+ color: CHART_COLORS[i % CHART_COLORS.length],
42
+ data: displayData
43
+ .filter((d) => d[categoryKey] === catValue)
44
+ .map((d) => ({ x: d[xKey], y: d[yKey] }))
45
+ }));
46
+ }
47
+ return [
48
+ {
49
+ key: 'data',
50
+ label: undefined as string | undefined,
51
+ color: CHART_COLORS[0],
52
+ data: displayData.map((d) => ({ x: d[xKey], y: d[yKey] }))
53
+ }
54
+ ];
55
+ });
56
+
57
+ // legend only makes sense for explicit category groupings
58
+ let legendSeries = $derived(categoryKey ? series : []);
59
+
60
+ // build chart config for Chart.Container
61
+ let chartConfig = $derived(buildChartConfig(series));
62
+
63
+ // x-axis & y-axis scales and domains
64
+ const xScale = scaleLinear();
65
+ const yScale = scaleLinear();
66
+ let xDomain = $derived([xMin, xMax]);
67
+ let yDomain = $derived([yMin, yMax]);
68
+ </script>
69
+
70
+ <div
71
+ bind:this={ref}
72
+ data-slot="scatter-chart"
73
+ class={cn(scatterChartVariants(), className)}
74
+ {...restProps}
75
+ >
76
+ {#if title || Icon}
77
+ <div data-slot="scatter-chart-header" class="flex flex-row items-center justify-between">
78
+ <div
79
+ data-slot="scatter-chart-title"
80
+ class="text-foreground font-mono text-base font-normal tracking-wider uppercase"
81
+ >
82
+ {title}
83
+ </div>
84
+ {#if Icon}
85
+ <Icon strokeWidth={1.25} class="text-muted-foreground size-6" aria-hidden="true" />
86
+ {/if}
87
+ </div>
88
+ {/if}
89
+
90
+ <Chart.Container config={chartConfig} class="aspect-auto h-[220px] w-full">
91
+ <ScatterChart
92
+ data={displayData.map((d) => ({ x: d[xKey], y: d[yKey] }))}
93
+ x="x"
94
+ y="y"
95
+ {xScale}
96
+ {yScale}
97
+ {xDomain}
98
+ {yDomain}
99
+ {series}
100
+ legend={false}
101
+ labels={false}
102
+ padding={{ left: 20, bottom: 15 }}
103
+ props={{
104
+ points: {
105
+ fillOpacity: 0.6,
106
+ strokeWidth: 1,
107
+ r: 3
108
+ },
109
+ highlight: {
110
+ points: { r: 5 }
111
+ },
112
+ tooltip: {
113
+ context: { mode: 'voronoi' }
114
+ },
115
+ xAxis: {
116
+ ticks: xTicks,
117
+ format: (v) => v.toString()
118
+ },
119
+ yAxis: {
120
+ ticks: yTicks,
121
+ format: (v) => v.toString()
122
+ },
123
+ grid: {
124
+ x: true,
125
+ y: true,
126
+ xTicks: xTicks,
127
+ yTicks: yTicks
128
+ }
129
+ }}
130
+ >
131
+ {#snippet tooltip()}
132
+ <Chart.ScatterTooltip />
133
+ {/snippet}
134
+ </ScatterChart>
135
+ </Chart.Container>
136
+
137
+ {#if legendSeries.length > 0}
138
+ <div data-slot="scatter-chart-legend" class="flex items-center justify-center gap-10">
139
+ {#each legendSeries as s (s.key)}
140
+ <div class="flex items-center gap-2">
141
+ <div class="size-2 rounded-full bg-(--legend-color)" style:--legend-color={s.color}></div>
142
+ <span class="font-mono uppercase">{s.label}</span>
143
+ </div>
144
+ {/each}
145
+ </div>
146
+ {/if}
147
+ </div>
@@ -0,0 +1,5 @@
1
+ import { type ScatterChartProps } from './types.js';
2
+ import { ScatterChart } from 'layerchart';
3
+ declare const ScatterChart: import("svelte").Component<ScatterChartProps, {}, "ref">;
4
+ type ScatterChart = ReturnType<typeof ScatterChart>;
5
+ export default ScatterChart;
@@ -0,0 +1,34 @@
1
+ import { type WithElementRef } from '../utils.js';
2
+ import type { Component } from 'svelte';
3
+ import type { HTMLAttributes } from 'svelte/elements';
4
+ export declare const scatterChartVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm", unknown, unknown, undefined>>;
5
+ export type ScatterChartProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
6
+ /** card header label; header renders only when title or icon is set */
7
+ title?: string;
8
+ /** lucide icon component for header */
9
+ icon?: Component;
10
+ /** array of data points */
11
+ data?: Record<string, unknown>[];
12
+ /** data key for x-axis values */
13
+ xKey?: string;
14
+ /** data key for y-axis values */
15
+ yKey?: string;
16
+ /** data key for category grouping; when set, points are split into colored series */
17
+ categoryKey?: string;
18
+ /** map of category value to display label */
19
+ categories?: Record<string, string>;
20
+ /** enables streaming mode with sliding window */
21
+ maxPoints?: number;
22
+ /** minimum x-axis value (required) */
23
+ xMin: number;
24
+ /** maximum x-axis value (required) */
25
+ xMax: number;
26
+ /** minimum y-axis value (required) */
27
+ yMin: number;
28
+ /** maximum y-axis value (required) */
29
+ yMax: number;
30
+ /** explicit x-axis tick values */
31
+ xTicks?: number[];
32
+ /** explicit y-axis tick values */
33
+ yTicks?: number[];
34
+ };
@@ -0,0 +1,6 @@
1
+ import {} from '../utils.js';
2
+ import { tv } from 'tailwind-variants';
3
+ // card shell inlined from the retired background-card pattern
4
+ export const scatterChartVariants = tv({
5
+ base: 'bg-card text-card-foreground border-border flex flex-col gap-6 rounded-xs border p-4 shadow-sm'
6
+ });
@@ -0,0 +1,4 @@
1
+ import Root from './sensor-chart.svelte';
2
+ export { sensorChartVariants, type SensorChartProps } from './types.js';
3
+ export { Root, Root as SensorChart };
4
+ export default Root;
@@ -0,0 +1,6 @@
1
+ import Root from './sensor-chart.svelte';
2
+ export { sensorChartVariants } from './types.js';
3
+ export { Root,
4
+ //
5
+ Root as SensorChart };
6
+ export default Root;
@@ -0,0 +1,138 @@
1
+ <script lang="ts">
2
+ import { cn, formatMMSS } from '../utils.js';
3
+ import * as Chart from '../chart/index.js';
4
+ import { CHART_COLORS, buildChartConfig, slidingWindow } from '../chart/chart-utils.js';
5
+ import { sensorChartVariants, type SensorChartProps } from './types.js';
6
+ import { LineChart } from 'layerchart';
7
+ // @ts-expect-error -- d3-shape ships without type declarations and @types/d3-shape is not installed
8
+ import { curveNatural } from 'd3-shape';
9
+ // @ts-expect-error -- d3-scale ships without type declarations and @types/d3-scale is not installed
10
+ import { scaleUtc, scaleLinear } from 'd3-scale';
11
+
12
+ let {
13
+ ref = $bindable(null),
14
+ title = undefined,
15
+ icon: Icon = undefined,
16
+ data = [],
17
+ signals = {},
18
+ xKey = 'timestamp',
19
+ maxPoints = undefined,
20
+ yMin,
21
+ yMax,
22
+ yTicks,
23
+ axis = 'both',
24
+ class: className,
25
+ ...restProps
26
+ }: SensorChartProps = $props();
27
+
28
+ // data → series → config → formatting → scales
29
+
30
+ // create a sliding window of data
31
+ let displayData = $derived(slidingWindow(data, maxPoints));
32
+ let indexedData = $derived(displayData.map((d, i) => ({ ...d, _index: i })));
33
+
34
+ // derive series config from signals prop
35
+ let series = $derived(
36
+ Object.entries(signals).map(([key, label], i) => ({
37
+ key,
38
+ label,
39
+ color: CHART_COLORS[i % CHART_COLORS.length]
40
+ }))
41
+ );
42
+
43
+ // build chart config for Chart.Container
44
+ let chartConfig = $derived(buildChartConfig(series));
45
+
46
+ // get base timestamp for relative time formatting
47
+ let baseTimestamp = $derived(
48
+ displayData.length > 0 && displayData[0][xKey]
49
+ ? new Date(displayData[0][xKey] as string | number | Date).getTime()
50
+ : 0
51
+ );
52
+
53
+ // format time as MM:SS relative to first data point
54
+ function formatTime(date: Date) {
55
+ if (!baseTimestamp) return formatMMSS(0);
56
+ return formatMMSS(Math.floor((date.getTime() - baseTimestamp) / 1000));
57
+ }
58
+
59
+ // use index-based x for streaming (maxPoints set), timestamp for static
60
+ let useIndexX = $derived(maxPoints !== undefined);
61
+
62
+ // map the semantic axis union onto layerchart's prop shape
63
+ let axisProp = $derived(axis === 'both' ? true : axis === 'none' ? false : axis);
64
+
65
+ // y-axis scale and domain
66
+ const yScale = scaleLinear();
67
+ let xDomain = $derived(useIndexX ? [0, (maxPoints || displayData.length) - 1] : undefined);
68
+ let yDomain = $derived([yMin, yMax]);
69
+ </script>
70
+
71
+ <div
72
+ bind:this={ref}
73
+ data-slot="sensor-chart"
74
+ class={cn(sensorChartVariants(), className)}
75
+ {...restProps}
76
+ >
77
+ {#if title || Icon}
78
+ <div data-slot="sensor-chart-header" class="flex flex-row items-center justify-between">
79
+ <div
80
+ data-slot="sensor-chart-title"
81
+ class="text-foreground font-mono text-base font-normal tracking-wider uppercase"
82
+ >
83
+ {title}
84
+ </div>
85
+ {#if Icon}
86
+ <Icon strokeWidth={1.25} class="text-muted-foreground size-6" aria-hidden="true" />
87
+ {/if}
88
+ </div>
89
+ {/if}
90
+
91
+ <Chart.Container config={chartConfig} class="aspect-auto h-[220px] w-full">
92
+ <LineChart
93
+ data={indexedData}
94
+ x={useIndexX ? '_index' : xKey}
95
+ xScale={useIndexX ? scaleLinear() : scaleUtc()}
96
+ {xDomain}
97
+ {yScale}
98
+ {yDomain}
99
+ axis={axisProp}
100
+ {series}
101
+ tooltip={false}
102
+ padding={{ left: 20, bottom: 15 }}
103
+ props={{
104
+ spline: {
105
+ curve: curveNatural,
106
+ strokeWidth: 1.5
107
+ },
108
+ xAxis: {
109
+ format: formatTime
110
+ },
111
+ yAxis: {
112
+ ticks: yTicks,
113
+ format: (v) => v.toString()
114
+ },
115
+ grid: {
116
+ y: true,
117
+ x: false,
118
+ yTicks: yTicks
119
+ },
120
+ highlight: {
121
+ lines: false,
122
+ points: false
123
+ }
124
+ }}
125
+ />
126
+ </Chart.Container>
127
+
128
+ {#if series.length > 0}
129
+ <div data-slot="sensor-chart-legend" class="flex items-center justify-center gap-10">
130
+ {#each series as s (s.key)}
131
+ <div class="flex items-center gap-2">
132
+ <div class="size-2 rounded-full bg-(--legend-color)" style:--legend-color={s.color}></div>
133
+ <span class="font-mono uppercase">{s.label}</span>
134
+ </div>
135
+ {/each}
136
+ </div>
137
+ {/if}
138
+ </div>
@@ -0,0 +1,4 @@
1
+ import { type SensorChartProps } from './types.js';
2
+ declare const SensorChart: import("svelte").Component<SensorChartProps, {}, "ref">;
3
+ type SensorChart = ReturnType<typeof SensorChart>;
4
+ export default SensorChart;