@streamscloud/kit 0.0.1-1770841384222 → 0.0.1-1770887346972

package/dist/core/actions/horizontal-wheel-scroll.d.ts

@@ -0,0 +1,5 @@
+import type { Action } from 'svelte/action';
+export declare const horizontalWheelScroll: Action<HTMLElement, {
+    isolateScroll: boolean;
+    speed?: number;
+} | undefined>;

package/dist/core/actions/horizontal-wheel-scroll.js

@@ -0,0 +1,20 @@
+export const horizontalWheelScroll = (node, param = { isolateScroll: true, speed: 1 }) => {
+    const onWheel = (event) => {
+        const canScrollX = node.scrollWidth > node.clientWidth;
+        if (!canScrollX) {
+            return;
+        }
+        const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+        node.scrollBy({ left: delta * (param.speed ?? 1), behavior: 'smooth' });
+        if (param.isolateScroll) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    node.addEventListener('wheel', onWheel, { passive: false });
+    return {
+        destroy() {
+            node.removeEventListener('wheel', onWheel);
+        }
+    };
+};

package/dist/core/actions/index.d.ts

@@ -0,0 +1,2 @@
+export { horizontalWheelScroll } from './horizontal-wheel-scroll';
+export { swallowTouch } from './swallow-touch';

package/dist/core/actions/index.js

@@ -0,0 +1,2 @@
+export { horizontalWheelScroll } from './horizontal-wheel-scroll';
+export { swallowTouch } from './swallow-touch';

package/dist/core/actions/swallow-touch.d.ts

@@ -0,0 +1,2 @@
+import type { Action } from 'svelte/action';
+export declare const swallowTouch: Action;

package/dist/core/actions/swallow-touch.js

@@ -0,0 +1,17 @@
+export const swallowTouch = (node) => {
+    const stopAll = (e) => {
+        e.stopPropagation();
+    };
+    node.addEventListener('touchstart', stopAll, { passive: false });
+    node.addEventListener('touchmove', stopAll, { passive: false });
+    node.addEventListener('touchend', stopAll, { passive: false });
+    node.addEventListener('touchcancel', stopAll, { passive: false });
+    return {
+        destroy() {
+            node.removeEventListener('touchstart', stopAll);
+            node.removeEventListener('touchmove', stopAll);
+            node.removeEventListener('touchend', stopAll);
+            node.removeEventListener('touchcancel', stopAll);
+        }
+    };
+};

package/dist/core/validation/validation-schemas/email-validation.js

@@ -1,15 +1,15 @@
-import { getValidationMessages } from './validation-messages';
+import { ValidationLocalization } from './validation-localization';
 import * as yup from 'yup';
 const EMAIL_REGEX = /^[a-zA-Z0-9_]([.+-]?[a-zA-Z0-9_])+@[a-zA-Z0-9]([.-]?[a-zA-Z0-9])+\.[a-zA-Z]{2,}$/;
 export const emailValidationSchema = () => {
-    const msg = getValidationMessages();
+    const msg = new ValidationLocalization();
     return yup.string().required(msg.required).matches(EMAIL_REGEX, {
         excludeEmptyString: true,
         message: msg.email
     });
 };
 export const nullableEmailValidationSchema = () => {
-    const msg = getValidationMessages();
+    const msg = new ValidationLocalization();
     return yup.string().nullable().matches(EMAIL_REGEX, {
         excludeEmptyString: true,
         message: msg.email

package/dist/core/validation/validation-schemas/handle-validations.js

@@ -1,10 +1,10 @@
-import { getValidationMessages } from './validation-messages';
+import { ValidationLocalization } from './validation-localization';
 import * as yup from 'yup';
 const DEFAULT_MIN_LENGTH = 3;
 const DEFAULT_MAX_LENGTH = 30;
 const HANDLE_REGEX = /^[a-z_]([a-z0-9_]|[.-](?![.-]))*[a-z0-9_]$/;
 export const handleValidationSchema = (lengthValidation) => {
-    const msg = getValidationMessages();
+    const msg = new ValidationLocalization();
     const minLength = lengthValidation?.minLength ?? DEFAULT_MIN_LENGTH;
     const maxLength = lengthValidation?.maxLength ?? DEFAULT_MAX_LENGTH;
     return yup

package/dist/core/validation/validation-schemas/index.d.ts

@@ -1,5 +1,4 @@
 export type { TextValidation, TextWithFormatValidation, NumberValidation, MinNumberValidation } from './types';
-export { setValidationMessages } from './validation-messages';
 export { emailValidationSchema, nullableEmailValidationSchema } from './email-validation';
 export { textValidationSchema, formattedTextValidationSchema } from './text-validations';
 export { handleValidationSchema } from './handle-validations';

package/dist/core/validation/validation-schemas/index.js

@@ -1,4 +1,3 @@
-export { setValidationMessages } from './validation-messages';
 export { emailValidationSchema, nullableEmailValidationSchema } from './email-validation';
 export { textValidationSchema, formattedTextValidationSchema } from './text-validations';
 export { handleValidationSchema } from './handle-validations';

package/dist/core/validation/validation-schemas/number-validations.js

@@ -1,7 +1,7 @@
-import { getValidationMessages } from './validation-messages';
+import { ValidationLocalization } from './validation-localization';
 import * as yup from 'yup';
 export const numberValidationSchema = (rules) => {
-    const msg = getValidationMessages();
+    const msg = new ValidationLocalization();
     let schema = yup.number().typeError(msg.badFormat);
     if (rules.isRequired) {
         schema = schema.required(msg.required);
@@ -17,7 +17,7 @@ export const numberValidationSchema = (rules) => {
     return schema;
 };
 export const minNumberValidationSchema = (rules) => {
-    const msg = getValidationMessages();
+    const msg = new ValidationLocalization();
     let schema = yup.number().typeError(msg.badFormat);
     if (rules.isRequired) {
         schema = schema.required(msg.required);

package/dist/core/validation/validation-schemas/text-validations.js

@@ -1,7 +1,7 @@
-import { getValidationMessages } from './validation-messages';
+import { ValidationLocalization } from './validation-localization';
 import * as yup from 'yup';
 export const textValidationSchema = (rules) => {
-    const msg = getValidationMessages();
+    const msg = new ValidationLocalization();
     const schema = yup.string().max(rules.maxLength, msg.maxLength(rules.maxLength));
     if (rules.minLength === 0) {
         return schema;
@@ -14,6 +14,6 @@ export const textValidationSchema = (rules) => {
     }
 };
 export const formattedTextValidationSchema = (rules, fieldName, formatMessage) => {
-    const msg = getValidationMessages();
+    const msg = new ValidationLocalization();
     return textValidationSchema(rules).test(`${fieldName}-format`, formatMessage ?? msg.badFormat, (val) => !val || new RegExp(rules.format).test(val));
 };

package/dist/core/validation/validation-schemas/validation-localization.d.ts

@@ -0,0 +1,9 @@
+export declare class ValidationLocalization {
+    get required(): string;
+    get email(): string;
+    get minLength(): (length: number) => string;
+    get maxLength(): (length: number) => string;
+    get min(): (val: number) => string;
+    get max(): (val: number) => string;
+    get badFormat(): string;
+}

package/dist/core/validation/validation-schemas/validation-localization.js

@@ -0,0 +1,54 @@
+import { getLocale } from '../../../locale';
+export class ValidationLocalization {
+    get required() {
+        return loc.required[getLocale()];
+    }
+    get email() {
+        return loc.email[getLocale()];
+    }
+    get minLength() {
+        return loc.minLength[getLocale()];
+    }
+    get maxLength() {
+        return loc.maxLength[getLocale()];
+    }
+    get min() {
+        return loc.min[getLocale()];
+    }
+    get max() {
+        return loc.max[getLocale()];
+    }
+    get badFormat() {
+        return loc.badFormat[getLocale()];
+    }
+}
+const loc = {
+    required: {
+        en: 'This field is required',
+        no: 'Dette feltet er obligatorisk'
+    },
+    email: {
+        en: 'Please enter a valid email address',
+        no: 'Vennligst skriv inn en gyldig e-postadresse'
+    },
+    minLength: {
+        en: (length) => `Must be at least ${length} characters`,
+        no: (length) => `Må være minst ${length} tegn`
+    },
+    maxLength: {
+        en: (length) => `Must be at most ${length} characters`,
+        no: (length) => `Kan ikke være mer enn ${length} tegn`
+    },
+    min: {
+        en: (val) => `Must be at least ${val}`,
+        no: (val) => `Må være minst ${val}`
+    },
+    max: {
+        en: (val) => `Must be at most ${val}`,
+        no: (val) => `Kan ikke være mer enn ${val}`
+    },
+    badFormat: {
+        en: 'Invalid format',
+        no: 'Ugyldig format'
+    }
+};

package/dist/locale/index.d.ts

@@ -0,0 +1 @@
+export { getLocale, type Locale, type LocalizationSchema, setLocale } from './locale.svelte';

package/dist/locale/index.js

@@ -0,0 +1 @@
+export { getLocale, setLocale } from './locale.svelte';

package/dist/locale/locale.svelte.d.ts

@@ -0,0 +1,6 @@
+export type Locale = 'en' | 'no';
+export type LocalizationSchema = {
+    [key: string]: Record<Locale, unknown>;
+};
+export declare const getLocale: () => Locale;
+export declare const setLocale: (value: Locale) => void;

package/dist/locale/locale.svelte.js

@@ -0,0 +1,5 @@
+let locale = $state('en');
+export const getLocale = () => locale;
+export const setLocale = (value) => {
+    locale = value;
+};

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
+import { calculateClampValue } from './line-clamp-utils';
+import { untrack } from 'svelte';
+let { enableShowMore = false, children } = $props();
+const localization = new LineClampLocalization();
+let element = $state(null);
+let clampWrapperRef = $state(null);
+let isTruncated = $state(false);
+let showingAllText = $state(false);
+const canShowMore = $derived(enableShowMore && isTruncated && !showingAllText);
+const clamp = () => {
+    if (!element || !clampWrapperRef) {
+        return;
+    }
+    const parent = element.parentElement;
+    if (!parent) {
+        return;
+    }
+    isTruncated = clampWrapperRef.scrollHeight > clampWrapperRef.offsetHeight;
+    if (showingAllText) {
+        clampWrapperRef.style.setProperty('-webkit-line-clamp', 'unset');
+    }
+    else {
+        const value = calculateClampValue(parent);
+        clampWrapperRef.style.setProperty('-webkit-line-clamp', value.toString());
+    }
+};
+const toggleShowMore = () => {
+    showingAllText = !showingAllText;
+    clamp();
+};
+$effect(() => {
+    if (!element) {
+        return;
+    }
+    const parent = element.parentElement;
+    if (!parent) {
+        return;
+    }
+    untrack(() => clamp());
+    const resizeObserver = new ResizeObserver(clamp);
+    resizeObserver.observe(parent);
+    return () => {
+        resizeObserver.disconnect();
+    };
+});
+</script>
+
+<div
+  class="line-clamp"
+  class:line-clamp--clickable={canShowMore}
+  bind:this={element}
+  onclick={() => canShowMore && toggleShowMore()}
+  onmousedown={() => {}}
+  role="none">
+  <div class="line-clamp__wrapper-container">
+    <div class="line-clamp__wrapper" bind:this={clampWrapperRef}>
+      {@render children()}
+    </div>
+  </div>
+
+  {#if enableShowMore && showingAllText}
+    <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
+      {localization.showLess}
+    </button>
+  {/if}
+</div>
+
+<style>.line-clamp {
+  --_line-clamp--white-space: var(--line-clamp--white-space, pre-line);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.line-clamp--clickable {
+  cursor: pointer;
+  pointer-events: auto;
+}
+.line-clamp__wrapper-container {
+  position: relative;
+}
+.line-clamp__wrapper {
+  display: -webkit-box;
+  overflow: hidden;
+  word-break: break-word;
+  white-space: var(--_line-clamp--white-space);
+  -webkit-box-orient: vertical;
+}
+.line-clamp__show-more-button {
+  font-size: 0.9em;
+  font-style: italic;
+  pointer-events: auto;
+  margin-top: 0.5em;
+}</style>

package/dist/ui/line-clamp/cmp.line-clamp-auto.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from 'svelte';
+type Props = {
+    enableShowMore?: boolean;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/line-clamp/cmp.line-clamp.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">import { LineClampLocalization } from './line-clamp-localization';
+import {} from 'svelte';
+let { maxLines, enableShowMore = false, children } = $props();
+const localization = new LineClampLocalization();
+let isTruncated = $state(false);
+let showingAllText = $state(false);
+const canShowMore = $derived(enableShowMore && isTruncated && !showingAllText);
+const toggleShowMore = () => {
+    showingAllText = !showingAllText;
+};
+const trackTruncatedState = (node) => {
+    const resizeObserver = new ResizeObserver(() => {
+        isTruncated = node.scrollHeight > node.offsetHeight;
+    });
+    resizeObserver.observe(node);
+    return {
+        destroy() {
+            resizeObserver.disconnect();
+        }
+    };
+};
+</script>
+
+<div
+  class="line-clamp"
+  class:line-clamp--clickable={canShowMore}
+  style:--line-clamp--line-clamp={maxLines}
+  onclick={() => canShowMore && toggleShowMore()}
+  onmousedown={() => {}}
+  role="none">
+  <div class="line-clamp__wrapper-container">
+    <div class="line-clamp__wrapper" class:line-clamp__wrapper--showing-all={showingAllText} use:trackTruncatedState>
+      {@render children()}
+    </div>
+  </div>
+
+  {#if enableShowMore && showingAllText}
+    <button type="button" class="line-clamp__show-more-button" onclick={toggleShowMore}>
+      {localization.showLess}
+    </button>
+  {/if}
+</div>
+
+<style>.line-clamp {
+  --_line-clamp--white-space: var(--line-clamp--white-space, pre-line);
+  --_line-clamp--line-clamp: var(--line-clamp--line-clamp, 1);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.line-clamp--clickable {
+  cursor: pointer;
+  pointer-events: auto;
+}
+.line-clamp__wrapper-container {
+  position: relative;
+}
+.line-clamp__wrapper {
+  display: -webkit-box;
+  overflow: hidden;
+  word-break: break-word;
+  white-space: var(--_line-clamp--white-space);
+  -webkit-box-orient: vertical;
+  line-clamp: var(--_line-clamp--line-clamp);
+  -webkit-line-clamp: var(--_line-clamp--line-clamp);
+  text-overflow: ellipsis;
+}
+.line-clamp__wrapper--showing-all {
+  --_line-clamp--line-clamp: none;
+}
+.line-clamp__show-more-button {
+  font-size: 0.9em;
+  font-style: italic;
+  pointer-events: auto;
+  margin-top: 0.5em;
+}</style>

package/dist/ui/line-clamp/cmp.line-clamp.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type Snippet } from 'svelte';
+type Props = {
+    maxLines?: number;
+    enableShowMore?: boolean;
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/line-clamp/index.d.ts

@@ -0,0 +1,2 @@
+export { default as LineClamp } from './cmp.line-clamp.svelte';
+export { default as LineClampAuto } from './cmp.line-clamp-auto.svelte';

package/dist/ui/line-clamp/index.js

@@ -0,0 +1,2 @@
+export { default as LineClamp } from './cmp.line-clamp.svelte';
+export { default as LineClampAuto } from './cmp.line-clamp-auto.svelte';

package/dist/ui/line-clamp/line-clamp-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class LineClampLocalization {
+    get showLess(): string;
+    get showMore(): string;
+}

package/dist/ui/line-clamp/line-clamp-localization.js

@@ -0,0 +1,19 @@
+import { getLocale } from '../../locale';
+export class LineClampLocalization {
+    get showLess() {
+        return loc.showLess[getLocale()];
+    }
+    get showMore() {
+        return loc.showMore[getLocale()];
+    }
+}
+const loc = {
+    showLess: {
+        en: 'Show less',
+        no: 'Vis mindre'
+    },
+    showMore: {
+        en: 'Show more',
+        no: 'Vis mer'
+    }
+};

package/dist/ui/line-clamp/line-clamp-utils.d.ts

@@ -0,0 +1 @@
+export declare const calculateClampValue: (elm: HTMLElement) => number;

package/dist/ui/line-clamp/line-clamp-utils.js

@@ -0,0 +1,31 @@
+const getNumberStyleValue = (elm, property) => {
+    const value = window.getComputedStyle(elm).getPropertyValue(property);
+    const parsed = parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+};
+const getContentHeight = (elm) => {
+    const maxHeight = getNumberStyleValue(elm, 'max-height');
+    const height = getNumberStyleValue(elm, 'height');
+    const paddingTop = getNumberStyleValue(elm, 'padding-top');
+    const paddingBottom = getNumberStyleValue(elm, 'padding-bottom');
+    const borderTop = getNumberStyleValue(elm, 'border-top-width');
+    const borderBottom = getNumberStyleValue(elm, 'border-bottom-width');
+    // In border-box: height/max-height include padding + border — subtract both to get content
+    // clientHeight includes padding only — border subtraction is a minor over-correction for this fallback
+    const elementHeight = maxHeight || height || elm.clientHeight;
+    return elementHeight - paddingTop - paddingBottom - borderTop - borderBottom;
+};
+const getLineHeight = (elm) => {
+    const lineHeight = getNumberStyleValue(elm, 'line-height');
+    if (lineHeight > 0) {
+        return lineHeight;
+    }
+    // Fallback: line-height: normal is approximately 1.2 * font-size
+    const fontSize = getNumberStyleValue(elm, 'font-size');
+    return fontSize > 0 ? fontSize * 1.2 : 1;
+};
+export const calculateClampValue = (elm) => {
+    const contentHeight = getContentHeight(elm);
+    const lineHeight = getLineHeight(elm);
+    return Math.max(1, Math.floor(contentHeight / lineHeight));
+};

package/dist/ui/progress/cmp.progress.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">let { value } = $props();
+const cssWidth = $derived(`${100 * (value <= 1 ? value : 1)}%`);
+</script>
+
+<div class="progress">
+  <span class="progress__value" class:progress__value--animated={value > 0.01 && value < 0.96} style:width={cssWidth}> &nbsp; </span>
+</div>
+
+<style>.progress {
+  --_progress--height: var(--progress--height, 0.25em);
+  --_progress--back-color: var(--progress--back-color, #9ca3af);
+  --_progress--front-color: var(--progress--front-color, #ffffff);
+  --_progress--box-shadow: var(--progress--box-shadow, 0 2px 3px rgba(0, 0, 0, 0.25) inset);
+  --_progress--border-radius: var(--progress--border-radius, 0);
+  width: 100%;
+  background: var(--_progress--back-color);
+  height: var(--_progress--height);
+  box-shadow: var(--_progress--box-shadow);
+  border-radius: var(--_progress--border-radius);
+}
+.progress__value {
+  background: var(--_progress--front-color);
+  display: inline-block;
+  height: 100%;
+}
+.progress__value--animated {
+  transition: width 600ms;
+}</style>

package/dist/ui/progress/cmp.progress.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    /** 0-1 */
+    value: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/progress/index.d.ts

@@ -0,0 +1 @@
+export { default as Progress } from './cmp.progress.svelte';

package/dist/ui/progress/index.js

@@ -0,0 +1 @@
+export { default as Progress } from './cmp.progress.svelte';

package/dist/ui/seek-bar/cmp.seek-bar.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">let { value, listenParentClicks = false, on } = $props();
+let seekBarRef = $state(null);
+let scrubberRef = $state(null);
+let progressRef = $state(null);
+let isDragging = $state(false);
+const cssValue = $derived(`${100 * (value <= 1 ? value : 1)}%`);
+const handleSeek = (e) => {
+    if (!progressRef) {
+        return;
+    }
+    e.stopPropagation();
+    const { left, width } = progressRef.getBoundingClientRect();
+    const x = e.clientX - left;
+    const percent = Math.max(0, Math.min(1, x / width));
+    on?.seek(percent);
+};
+const handleParentClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!progressRef || !seekBarRef || isDragging) {
+        return;
+    }
+    const seekBarRect = progressRef.getBoundingClientRect();
+    if (e.clientX >= seekBarRect.left && e.clientX <= seekBarRect.right) {
+        const x = e.clientX - seekBarRect.left;
+        const percent = Math.max(0, Math.min(1, x / seekBarRect.width));
+        on?.seek(percent);
+    }
+};
+const onMouseMove = (e) => {
+    if (isDragging) {
+        handleSeek(e);
+    }
+};
+const onMouseUp = () => {
+    isDragging = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    scrubberRef?.blur();
+    on?.dragEnd?.();
+};
+const onMouseDown = (e) => {
+    isDragging = true;
+    on?.dragStart?.();
+    handleSeek(e);
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    scrubberRef?.blur();
+};
+const handleScrubberKeyDown = (event) => {
+    const step = 0.05;
+    let newValue;
+    if (event.key === /*@wc-ignore*/ 'ArrowLeft') {
+        newValue = Math.max(0, value - step);
+    }
+    else if (event.key === /*@wc-ignore*/ 'ArrowRight') {
+        newValue = Math.min(1, value + step);
+    }
+    else if (event.key === /*@wc-ignore*/ 'Home') {
+        newValue = 0;
+    }
+    else if (event.key === /*@wc-ignore*/ 'End') {
+        newValue = 1;
+    }
+    if (newValue !== undefined) {
+        event.preventDefault();
+        on?.seek(newValue);
+    }
+};
+$effect(() => {
+    if (!listenParentClicks || !seekBarRef) {
+        return;
+    }
+    const parent = seekBarRef.parentElement;
+    if (!parent) {
+        return;
+    }
+    parent.addEventListener('click', handleParentClick);
+    return () => {
+        parent.removeEventListener('click', handleParentClick);
+    };
+});
+$effect(() => {
+    return () => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    };
+});
+</script>
+
+<div class="seek-bar" onmousedown={onMouseDown} onkeydown={() => ({})} role="none" bind:this={seekBarRef}>
+  <div class="seek-bar__container" bind:this={progressRef}>
+    <span class="seek-bar__value" style:width={cssValue}> &nbsp; </span>
+    <div
+      class="seek-bar__scrubber"
+      bind:this={scrubberRef}
+      class:is-dragging={isDragging}
+      style:left={cssValue}
+      role="slider"
+      tabindex="0"
+      aria-valuemin="0"
+      aria-valuemax="1"
+      aria-valuenow={value}
+      aria-label="Media position slider"
+      onkeydown={handleScrubberKeyDown}>
+    </div>
+  </div>
+</div>
+
+<style>.seek-bar {
+  cursor: pointer;
+  position: relative;
+  padding: 0.3125rem 0;
+  --_seek-bar--container-color: var(--seek-bar--container-color, #9ca3af);
+  --_seek-bar--value-color: var(--seek-bar--value-color, #ffffff);
+  --_seek-bar--scrubber-color: var(--seek-bar--scrubber-color, #ffffff);
+  --_seek-bar--scrubber-border-color: var(--seek-bar--scrubber-border-color, #9ca3af);
+  --_seek-bar--scrubber-opacity: 0;
+}
+.seek-bar:hover {
+  --_seek-bar--scrubber-opacity: 1;
+}
+.seek-bar__container {
+  width: 100%;
+  background: var(--_seek-bar--container-color);
+  height: 0.3125rem;
+  position: relative;
+}
+.seek-bar__value {
+  background: var(--_seek-bar--value-color);
+  border-color: var(--_seek-bar--container-color);
+  border-width: 0.0625rem;
+  display: inline-block;
+  height: 100%;
+}
+.seek-bar__scrubber {
+  position: absolute;
+  top: 50%;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--_seek-bar--scrubber-color);
+  border-color: var(--_seek-bar--scrubber-border-color);
+  border-width: 0.0625rem;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  opacity: var(--_seek-bar--scrubber-opacity);
+  transition: opacity 0.2s ease-in-out;
+}
+.seek-bar__scrubber.is-dragging, .seek-bar__scrubber:focus {
+  --_seek-bar--scrubber-opacity: 1;
+}
+.seek-bar__scrubber:focus-visible {
+  outline: none;
+}</style>

package/dist/ui/seek-bar/cmp.seek-bar.svelte.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    /** 0-1 */
+    value: number;
+    listenParentClicks?: boolean;
+    on: {
+        seek: (e: number) => void;
+        dragStart?: () => void;
+        dragEnd?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/seek-bar/index.d.ts

@@ -0,0 +1 @@
+export { default as SeekBar } from './cmp.seek-bar.svelte';

package/dist/ui/seek-bar/index.js

@@ -0,0 +1 @@
+export { default as SeekBar } from './cmp.seek-bar.svelte';

package/dist/ui/time-ago/cmp.time-ago.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">import { DateFormatOptions, DateHelper } from '../../core/utils/date-helper';
+import { TimeAgoLocalization } from './time-ago-localization';
+let { date = null, thresholdMinutes = 60 * 24 * 2 /* 2 days */ } = $props();
+const localization = new TimeAgoLocalization();
+let timeSpan = $state.raw(null);
+let timeoutId;
+const setRelativeTime = (d) => {
+    disableTimeout();
+    const dateVal = d ? DateHelper.toDate(d) : new Date();
+    const setupAbsDate = () => {
+        timeSpan = localization.at(dateVal.toLocaleString(localization.locale, dateVal.getFullYear() === new Date().getFullYear() ? DateFormatOptions.dateFormatWithoutYear : DateFormatOptions.dateFormat), dateVal.toLocaleString(localization.locale, DateFormatOptions.timeFormat));
+    };
+    const diffSeconds = (+new Date() - +dateVal) / 1000;
+    if (diffSeconds > thresholdMinutes * 60) {
+        return setupAbsDate();
+    }
+    const secsInHour = 60 * 60;
+    const secsIn2Hours = secsInHour * 2;
+    const secsInDay = 60 * 60 * 24;
+    const secsIn2Days = secsInDay * 2;
+    let refreshIntervalSec;
+    if (diffSeconds < 60) {
+        timeSpan = localization.justNow;
+        refreshIntervalSec = 5;
+    }
+    else if (diffSeconds < 120) {
+        timeSpan = localization.aMinuteAgo;
+        refreshIntervalSec = 5;
+    }
+    else if (diffSeconds < secsInHour) {
+        timeSpan = localization.minutesAgo(Math.floor(diffSeconds / 60));
+        refreshIntervalSec = 60;
+    }
+    else if (diffSeconds < secsIn2Hours) {
+        timeSpan = localization.anHourAgo;
+        refreshIntervalSec = 60;
+    }
+    else if (diffSeconds < secsInDay) {
+        timeSpan = localization.hoursAgo(Math.floor(diffSeconds / secsInHour));
+        refreshIntervalSec = 3600;
+    }
+    else if (diffSeconds < secsIn2Days) {
+        timeSpan = localization.yesterday(dateVal.toLocaleString(localization.locale, DateFormatOptions.timeFormat));
+        refreshIntervalSec = 3600;
+    }
+    else {
+        return setupAbsDate();
+    }
+    timeoutId = setTimeout(() => setRelativeTime(d), refreshIntervalSec * 1000);
+};
+$effect(() => {
+    setRelativeTime(date);
+    return () => {
+        disableTimeout();
+    };
+});
+const disableTimeout = () => {
+    if (timeoutId) {
+        clearTimeout(timeoutId);
+    }
+};
+</script>
+
+<span>
+  {#if timeSpan}
+    {timeSpan}
+  {/if}
+</span>

package/dist/ui/time-ago/cmp.time-ago.svelte.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    date: Date | string | null;
+    thresholdMinutes?: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/time-ago/index.d.ts

@@ -0,0 +1 @@
+export { default as TimeAgo } from './cmp.time-ago.svelte';

package/dist/ui/time-ago/index.js

@@ -0,0 +1 @@
+export { default as TimeAgo } from './cmp.time-ago.svelte';

package/dist/ui/time-ago/time-ago-localization.d.ts

@@ -0,0 +1,10 @@
+export declare class TimeAgoLocalization {
+    get locale(): string;
+    get aMinuteAgo(): string;
+    get anHourAgo(): string;
+    get justNow(): string;
+    get at(): (date: string, time: string) => string;
+    get hoursAgo(): (hours: number) => string;
+    get minutesAgo(): (minutes: number) => string;
+    get yesterday(): (time: string) => string;
+}

package/dist/ui/time-ago/time-ago-localization.js

@@ -0,0 +1,61 @@
+import { getLocale } from '../../locale';
+export class TimeAgoLocalization {
+    get locale() {
+        return loc.locale[getLocale()];
+    }
+    get aMinuteAgo() {
+        return loc.aMinuteAgo[getLocale()];
+    }
+    get anHourAgo() {
+        return loc.anHourAgo[getLocale()];
+    }
+    get justNow() {
+        return loc.justNow[getLocale()];
+    }
+    get at() {
+        return loc.at[getLocale()];
+    }
+    get hoursAgo() {
+        return loc.hoursAgo[getLocale()];
+    }
+    get minutesAgo() {
+        return loc.minutesAgo[getLocale()];
+    }
+    get yesterday() {
+        return loc.yesterday[getLocale()];
+    }
+}
+const loc = {
+    locale: {
+        en: 'en-US',
+        no: 'no-NO'
+    },
+    aMinuteAgo: {
+        en: 'a minute ago',
+        no: 'ett minutt siden'
+    },
+    anHourAgo: {
+        en: 'an hour ago',
+        no: 'en time siden'
+    },
+    justNow: {
+        en: 'just now',
+        no: 'nettopp nå'
+    },
+    at: {
+        en: (date, time) => `${date} at ${time}`,
+        no: (date, time) => `${date} kl. ${time}`
+    },
+    hoursAgo: {
+        en: (hours) => `${hours} hours ago`,
+        no: (hours) => `${hours} timer siden`
+    },
+    minutesAgo: {
+        en: (minutes) => `${minutes} minutes ago`,
+        no: (minutes) => `${minutes} minutter siden`
+    },
+    yesterday: {
+        en: (time) => `Yesterday at ${time}`,
+        no: (time) => `I går kl. ${time}`
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.0.1-1770841384222",
+  "version": "0.0.1-1770887346972",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -32,38 +32,34 @@
       "types": "./dist/core/index.d.ts",
       "svelte": "./dist/core/index.js"
     },
+    "./core/actions": {
+      "types": "./dist/core/actions/index.d.ts",
+      "svelte": "./dist/core/actions/index.js"
+    },
     "./core/css": {
       "types": "./dist/core/css/index.d.ts",
       "svelte": "./dist/core/css/index.js"
     },
-    "./core/i18n": {
-      "types": "./dist/core/i18n/index.d.ts",
-      "svelte": "./dist/core/i18n/index.js"
-    },
-    "./core/transitions": {
-      "types": "./dist/core/transitions/index.d.ts",
-      "svelte": "./dist/core/transitions/index.js"
-    },
-    "./core/utils": {
-      "types": "./dist/core/utils/index.d.ts",
-      "svelte": "./dist/core/utils/index.js"
+    "./core/data-loaders": {
+      "types": "./dist/core/data-loaders/index.d.ts",
+      "svelte": "./dist/core/data-loaders/index.js"
     },
     "./core/files": {
       "types": "./dist/core/files/index.d.ts",
       "svelte": "./dist/core/files/index.js"
     },
+    "./core/i18n": {
+      "types": "./dist/core/i18n/index.d.ts",
+      "svelte": "./dist/core/i18n/index.js"
+    },
+    "./core/media": {
+      "types": "./dist/core/media/index.d.ts",
+      "svelte": "./dist/core/media/index.js"
+    },
     "./core/repository": {
       "types": "./dist/core/repository/index.d.ts",
       "svelte": "./dist/core/repository/index.js"
     },
-    "./core/data-loaders": {
-      "types": "./dist/core/data-loaders/index.d.ts",
-      "svelte": "./dist/core/data-loaders/index.js"
-    },
-    "./core/validation": {
-      "types": "./dist/core/validation/index.d.ts",
-      "svelte": "./dist/core/validation/index.js"
-    },
     "./core/theme": {
       "types": "./dist/core/theme/index.d.ts",
       "svelte": "./dist/core/theme/index.js"
@@ -72,55 +68,83 @@
       "types": "./dist/core/toastr/index.d.ts",
       "svelte": "./dist/core/toastr/index.js"
     },
-    "./dialog": {
-      "types": "./dist/ui/dialog/index.d.ts",
-      "svelte": "./dist/ui/dialog/index.js"
+    "./core/transitions": {
+      "types": "./dist/core/transitions/index.d.ts",
+      "svelte": "./dist/core/transitions/index.js"
+    },
+    "./core/utils": {
+      "types": "./dist/core/utils/index.d.ts",
+      "svelte": "./dist/core/utils/index.js"
+    },
+    "./core/validation": {
+      "types": "./dist/core/validation/index.d.ts",
+      "svelte": "./dist/core/validation/index.js"
     },
-    "./button": {
+    "./locale": {
+      "types": "./dist/locale/index.d.ts",
+      "svelte": "./dist/locale/index.js"
+    },
+    "./ui/button": {
       "types": "./dist/ui/button/index.d.ts",
       "svelte": "./dist/ui/button/index.js"
     },
-    "./icon": {
+    "./ui/dialog": {
+      "types": "./dist/ui/dialog/index.d.ts",
+      "svelte": "./dist/ui/dialog/index.js"
+    },
+    "./ui/icon": {
       "types": "./dist/ui/icon/index.d.ts",
       "svelte": "./dist/ui/icon/index.js"
     },
-    "./image": {
+    "./ui/image": {
       "types": "./dist/ui/image/index.d.ts",
       "svelte": "./dist/ui/image/index.js"
     },
-    "./infinite-scrolling": {
+    "./ui/infinite-scrolling": {
       "types": "./dist/ui/infinite-scrolling/index.d.ts",
       "svelte": "./dist/ui/infinite-scrolling/index.js"
     },
-    "./loading": {
+    "./ui/line-clamp": {
+      "types": "./dist/ui/line-clamp/index.d.ts",
+      "svelte": "./dist/ui/line-clamp/index.js"
+    },
+    "./ui/loading": {
       "types": "./dist/ui/loading/index.d.ts",
       "svelte": "./dist/ui/loading/index.js"
     },
-    "./proportional-container": {
+    "./ui/progress": {
+      "types": "./dist/ui/progress/index.d.ts",
+      "svelte": "./dist/ui/progress/index.js"
+    },
+    "./ui/proportional-container": {
       "types": "./dist/ui/proportional-container/index.d.ts",
       "svelte": "./dist/ui/proportional-container/index.js"
     },
-    "./core/media": {
-      "types": "./dist/core/media/index.d.ts",
-      "svelte": "./dist/core/media/index.js"
+    "./ui/seek-bar": {
+      "types": "./dist/ui/seek-bar/index.d.ts",
+      "svelte": "./dist/ui/seek-bar/index.js"
     },
-    "./styles/functions": {
-      "sass": "./dist/styles/_functions.scss"
+    "./ui/time-ago": {
+      "types": "./dist/ui/time-ago/index.d.ts",
+      "svelte": "./dist/ui/time-ago/index.js"
     },
-    "./styles/mixins": {
-      "sass": "./dist/styles/_mixins.scss"
+    "./styles/base": {
+      "sass": "./dist/styles/_index.scss"
     },
     "./styles/colors": {
       "sass": "./dist/styles/_colors.scss"
     },
-    "./styles/responsive": {
-      "sass": "./dist/styles/_responsive.scss"
+    "./styles/functions": {
+      "sass": "./dist/styles/_functions.scss"
     },
-    "./styles/base": {
-      "sass": "./dist/styles/_index.scss"
+    "./styles/mixins": {
+      "sass": "./dist/styles/_mixins.scss"
     },
     "./styles/normalize.css": "./dist/styles/normalize.css",
     "./styles/reset.css": "./dist/styles/reset.css",
+    "./styles/responsive": {
+      "sass": "./dist/styles/_responsive.scss"
+    },
     "./styles/theme": {
       "sass": "./dist/styles/_theme.scss"
     }

package/dist/core/validation/validation-schemas/validation-messages.d.ts

@@ -1,11 +0,0 @@
-export interface ValidationMessages {
-    required: string;
-    email: string;
-    minLength: (length: number) => string;
-    maxLength: (length: number) => string;
-    min: (val: number) => string;
-    max: (val: number) => string;
-    badFormat: string;
-}
-export declare const getValidationMessages: () => ValidationMessages;
-export declare const setValidationMessages: (messages: Partial<ValidationMessages>) => void;

package/dist/core/validation/validation-schemas/validation-messages.js

@@ -1,14 +0,0 @@
-const defaultMessages = {
-    required: 'This field is required',
-    email: 'Please enter a valid email address',
-    minLength: (length) => `Must be at least ${length} characters`,
-    maxLength: (length) => `Must be at most ${length} characters`,
-    min: (val) => `Must be at least ${val}`,
-    max: (val) => `Must be at most ${val}`,
-    badFormat: 'Invalid format'
-};
-let currentMessages = { ...defaultMessages };
-export const getValidationMessages = () => currentMessages;
-export const setValidationMessages = (messages) => {
-    currentMessages = { ...currentMessages, ...messages };
-};