@streamscloud/kit 0.2.42 → 0.9.0

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

@@ -61,7 +61,7 @@ const disableTimeout = () => {
 };
 </script>
 
-<span>
+<span class="time-ago">
   {#if timeSpan}
     {timeSpan}
   {/if}
@@ -69,6 +69,9 @@ const disableTimeout = () => {
 
 <!--
 @component
-Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates.
-Falls back to an absolute date after the threshold is exceeded.
+Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates on a self-scheduled
+timer. Falls back to an absolute date/time after `thresholdMinutes`.
+
+Inherits typography from the parent — pass `font-size` / `color` through CSS on a surrounding element to
+restyle. The host element exposes no public CSS API of its own.
 -->

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

@@ -5,8 +5,11 @@ type Props = {
     thresholdMinutes?: number;
 };
 /**
- * Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates.
- * Falls back to an absolute date after the threshold is exceeded.
+ * Displays a human-readable relative time string (e.g. "5 minutes ago") that auto-updates on a self-scheduled
+ * timer. Falls back to an absolute date/time after `thresholdMinutes`.
+ *
+ * Inherits typography from the parent — pass `font-size` / `color` through CSS on a surrounding element to
+ * restyle. The host element exposes no public CSS API of its own.
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/toast/cmp.toast-item.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">import { Icon } from '../icon';
+import { ToastLocalization } from './toast-localization';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_12_regular.svg?raw';
+const { toast, on } = $props();
+const localization = new ToastLocalization();
+let dragX = $state(0);
+let dragging = $state(false);
+let pointerId = null;
+let startX = 0;
+const SWIPE_THRESHOLD = 80;
+const handlePointerDown = (event) => {
+    if (!toast.swipeable) {
+        return;
+    }
+    if (event.button !== 0) {
+        return;
+    }
+    pointerId = event.pointerId;
+    startX = event.clientX;
+    dragging = true;
+    event.currentTarget.setPointerCapture(event.pointerId);
+};
+const handlePointerMove = (event) => {
+    if (!dragging || event.pointerId !== pointerId) {
+        return;
+    }
+    dragX = event.clientX - startX;
+};
+const handlePointerUp = (event) => {
+    if (!dragging || event.pointerId !== pointerId) {
+        return;
+    }
+    dragging = false;
+    pointerId = null;
+    if (Math.abs(dragX) > SWIPE_THRESHOLD) {
+        on.dismiss();
+        return;
+    }
+    dragX = 0;
+};
+const handleClose = (event) => {
+    event.stopPropagation();
+    on.dismiss();
+};
+const handleBodyClick = (event) => {
+    if (!toast.onClick) {
+        return;
+    }
+    const target = event.target;
+    if (target?.closest('button, a, input, textarea, select')) {
+        return;
+    }
+    toast.onClick();
+};
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div
+  class="toast toast--{toast.variant}"
+  class:toast--dragging={dragging}
+  class:toast--clickable={!!toast.onClick}
+  role="status"
+  aria-live="polite"
+  style:transform="translateX({dragX}px)"
+  style:opacity={dragging && Math.abs(dragX) > 0 ? Math.max(0.3, 1 - Math.abs(dragX) / 200) : 1}
+  onclick={handleBodyClick}
+  onpointerdown={handlePointerDown}
+  onpointermove={handlePointerMove}
+  onpointerup={handlePointerUp}
+  onpointercancel={handlePointerUp}>
+  <div class="toast__indicator" aria-hidden="true"></div>
+  <div class="toast__body">
+    <div class="toast__message">
+      {#if typeof toast.message === 'string'}
+        {toast.message}
+      {:else}
+        {@render toast.message()}
+      {/if}
+    </div>
+    {#if toast.description}
+      <div class="toast__description">{toast.description}</div>
+    {/if}
+  </div>
+  {#if toast.closable}
+    <button type="button" class="toast__close" aria-label={localization.dismiss} onclick={handleClose} onpointerdown={(e) => e.stopPropagation()}>
+      <Icon src={IconDismiss} />
+    </button>
+  {/if}
+</div>
+
+<style>.toast {
+  --_toast--background: var(--sc-kit--toast--background, var(--sc-kit--color--bg--panel));
+  --_toast--color: var(--sc-kit--toast--color, var(--sc-kit--color--text--primary));
+  --_toast--description-color: var(--sc-kit--toast--description--color, var(--sc-kit--color--text--secondary));
+  --_toast--border-color: var(--sc-kit--toast--border-color, var(--sc-kit--color--border));
+  --_toast--border-radius: var(--sc-kit--toast--border-radius, var(--sc-kit--radius--md));
+  --_toast--padding-block: var(--sc-kit--toast--padding-block, var(--sc-kit--space--3));
+  --_toast--padding-inline: var(--sc-kit--toast--padding-inline, var(--sc-kit--space--4));
+  --_toast--gap: var(--sc-kit--toast--gap, var(--sc-kit--space--3));
+  --_toast--shadow: var(--sc-kit--toast--shadow, var(--sc-kit--shadow--lg));
+  --_toast--indicator-color: var(--sc-kit--toast--indicator-color, var(--sc-kit--color--accent));
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--_toast--gap);
+  width: 100%;
+  min-width: 0;
+  padding: var(--_toast--padding-block) var(--_toast--padding-inline);
+  color: var(--_toast--color);
+  background: var(--_toast--background);
+  border: 1px solid var(--_toast--border-color);
+  border-radius: var(--_toast--border-radius);
+  box-shadow: var(--_toast--shadow);
+  cursor: default;
+  user-select: none;
+  transition: transform var(--sc-kit--duration--base) var(--sc-kit--ease--default), opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.toast--clickable {
+  cursor: pointer;
+}
+.toast--dragging {
+  cursor: grabbing;
+  transition: none;
+}
+.toast--info {
+  --sc-kit--toast--indicator-color: var(--sc-kit--color--accent);
+}
+.toast--success {
+  --sc-kit--toast--indicator-color: var(--sc-kit--color--success);
+}
+.toast--warning {
+  --sc-kit--toast--indicator-color: var(--sc-kit--color--warning);
+}
+.toast--error {
+  --sc-kit--toast--indicator-color: var(--sc-kit--color--danger);
+}
+.toast__indicator {
+  flex-shrink: 0;
+  width: 0.25rem;
+  align-self: stretch;
+  background: var(--_toast--indicator-color);
+  border-radius: 0.125rem;
+}
+.toast__body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.toast__message {
+  font-size: var(--sc-kit--font-size--md);
+  line-height: var(--sc-kit--line-height--md);
+  font-weight: var(--sc-kit--font-weight--medium);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.toast__description {
+  font-size: var(--sc-kit--font-size--sm);
+  line-height: var(--sc-kit--line-height--sm);
+  color: var(--_toast--description-color);
+  white-space: pre-line;
+  word-break: break-word;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.toast__close {
+  --sc-kit--icon--size: 0.75rem;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+  padding: 0;
+  background: transparent;
+  color: var(--sc-kit--color--text--muted);
+  border: none;
+  border-radius: var(--sc-kit--radius--sm);
+  cursor: pointer;
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.toast__close:hover {
+  background: var(--sc-kit--color--bg--hover);
+  color: var(--sc-kit--color--text--primary);
+}</style>

package/dist/ui/{form-group/cmp.form-group-note.svelte.d.ts → toast/cmp.toast-item.svelte.d.ts}

@@ -1,6 +1,9 @@
-import type { Snippet } from 'svelte';
+import type { Toast } from './types';
 type Props = {
-    children: Snippet;
+    toast: Toast;
+    on: {
+        dismiss: () => void;
+    };
 };
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

package/dist/ui/toast/cmp.toaster.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">import ToastItem from './cmp.toast-item.svelte';
+import { toastStore } from './toast-store.svelte';
+const { id = '', position = 'bottom-right' } = $props();
+let containerEl = $state();
+const toasts = $derived(toastStore.toasts(id));
+$effect(() => {
+    toastStore.registerMount(id);
+    return () => {
+        toastStore.unregisterMount(id);
+    };
+});
+$effect(() => {
+    if (!containerEl) {
+        return;
+    }
+    if (!('showPopover' in containerEl)) {
+        return;
+    }
+    const hasToasts = toasts.length > 0;
+    const isOpen = containerEl.matches(':popover-open');
+    try {
+        if (hasToasts && !isOpen) {
+            containerEl.showPopover();
+        }
+        else if (!hasToasts && isOpen) {
+            containerEl.hidePopover();
+        }
+    }
+    catch {
+        // SSR / unsupported / mid-transition; ignore.
+    }
+});
+</script>
+
+<div bind:this={containerEl} popover="manual" class="toaster toaster--{position}" aria-live="polite" aria-atomic="false">
+  {#each toasts as t (t.id)}
+    <ToastItem toast={t} on={{ dismiss: () => toastStore.dismiss(t.id, id) }} />
+  {/each}
+</div>
+
+<!--
+@component
+Toaster — renders toasts pushed via the `Toastr` static API. Mount once at
+the root of your app for the default container, or with an explicit `id` to
+route specific toasts there. Uses the browser Popover API to render in the
+top layer above page content.
+
+### Props
+| Prop | Type | Description |
+|---|---|---|
+| `id` | `string` | Container id; default `''` |
+| `position` | `ToastrPosition` | One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`. Default `bottom-right` |
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--toaster--gap` | Vertical gap between toasts | `var(--sc-kit--space--2)` |
+| `--sc-kit--toaster--margin` | Distance from viewport edge | `var(--sc-kit--space--4)` |
+| `--sc-kit--toaster--max-width` | Max toast width | `420px` |
+-->
+
+<style>.toaster {
+  --_toaster--gap: var(--sc-kit--toaster--gap, var(--sc-kit--space--2));
+  --_toaster--margin: var(--sc-kit--toaster--margin, var(--sc-kit--space--4));
+  --_toaster--max-width: var(--sc-kit--toaster--max-width, 26.25rem);
+  position: fixed;
+  inset: unset;
+  z-index: var(--sc-kit--z-index--toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--_toaster--gap);
+  width: 100%;
+  max-width: var(--_toaster--max-width);
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  border: none;
+  pointer-events: none;
+  overflow: visible;
+}
+.toaster:popover-open {
+  display: flex;
+}
+.toaster--top-right {
+  top: var(--_toaster--margin);
+  right: var(--_toaster--margin);
+}
+.toaster--top-left {
+  top: var(--_toaster--margin);
+  left: var(--_toaster--margin);
+}
+.toaster--top-center {
+  top: var(--_toaster--margin);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.toaster--bottom-right {
+  bottom: var(--_toaster--margin);
+  right: var(--_toaster--margin);
+  flex-direction: column-reverse;
+}
+.toaster--bottom-left {
+  bottom: var(--_toaster--margin);
+  left: var(--_toaster--margin);
+  flex-direction: column-reverse;
+}
+.toaster--bottom-center {
+  bottom: var(--_toaster--margin);
+  left: 50%;
+  transform: translateX(-50%);
+  flex-direction: column-reverse;
+}</style>

package/dist/ui/toast/cmp.toaster.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { ToastrPosition } from './types';
+type Props = {
+    /** Container id. Routes toasts addressed via `Toastr.info(msg, { containerId })`. Default container is the empty string. @default '' */
+    id?: string;
+    /** @default 'bottom-right' */
+    position?: ToastrPosition;
+};
+/**
+ * Toaster — renders toasts pushed via the `Toastr` static API. Mount once at
+ * the root of your app for the default container, or with an explicit `id` to
+ * route specific toasts there. Uses the browser Popover API to render in the
+ * top layer above page content.
+ *
+ * ### Props
+ * | Prop | Type | Description |
+ * |---|---|---|
+ * | `id` | `string` | Container id; default `''` |
+ * | `position` | `ToastrPosition` | One of `top-left`, `top-center`, `top-right`, `bottom-left`, `bottom-center`, `bottom-right`. Default `bottom-right` |
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--toaster--gap` | Vertical gap between toasts | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--toaster--margin` | Distance from viewport edge | `var(--sc-kit--space--4)` |
+ * | `--sc-kit--toaster--max-width` | Max toast width | `420px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,3 @@
+export { default as Toaster } from './cmp.toaster.svelte';
+export { Toastr } from './toastr';
+export type { Toast, ToastVariant, ToastrOptions, ToastrPosition } from './types';

package/dist/ui/toast/index.js

@@ -0,0 +1,2 @@
+export { default as Toaster } from './cmp.toaster.svelte';
+export { Toastr } from './toastr';

package/dist/ui/toast/toast-localization.d.ts

@@ -0,0 +1,3 @@
+export declare class ToastLocalization {
+    get dismiss(): string;
+}

package/dist/ui/toast/toast-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+export class ToastLocalization {
+    get dismiss() {
+        return loc.dismiss[AppLocale.current];
+    }
+}
+const loc = {
+    dismiss: {
+        en: 'Dismiss',
+        no: 'Avvis'
+    }
+};

package/dist/ui/toast/toast-store.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { Toast } from './types';
+declare class ToastStore {
+    private _buckets;
+    private _mounted;
+    private _mountedSet;
+    private _timers;
+    toasts: (containerId: string) => Toast[];
+    mounted: () => string[];
+    push: (containerId: string, toast: Omit<Toast, "id">) => number;
+    dismiss: (id: number, containerId: string) => void;
+    clear: (containerId: string) => void;
+    registerMount: (containerId: string) => void;
+    unregisterMount: (containerId: string) => void;
+    isMounted: (containerId: string) => boolean;
+}
+export declare const toastStore: ToastStore;
+export {};

package/dist/ui/toast/toast-store.svelte.js

@@ -0,0 +1,65 @@
+let nextId = 1;
+class ToastStore {
+    _buckets = $state.raw({});
+    _mounted = $state.raw([]);
+    _mountedSet = new Set();
+    _timers = new Map();
+    toasts = (containerId) => this._buckets[containerId] ?? [];
+    mounted = () => this._mounted;
+    push = (containerId, toast) => {
+        const id = nextId++;
+        const t = { ...toast, id };
+        const existing = this._buckets[containerId] ?? [];
+        this._buckets = { ...this._buckets, [containerId]: [...existing, t] };
+        if (t.duration > 0) {
+            const timer = setTimeout(() => this.dismiss(id, containerId), t.duration);
+            this._timers.set(id, timer);
+        }
+        return id;
+    };
+    dismiss = (id, containerId) => {
+        const existing = this._buckets[containerId];
+        if (!existing) {
+            return;
+        }
+        const next = existing.filter((t) => t.id !== id);
+        if (next.length === existing.length) {
+            return;
+        }
+        this._buckets = { ...this._buckets, [containerId]: next };
+        const timer = this._timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this._timers.delete(id);
+        }
+    };
+    clear = (containerId) => {
+        const existing = this._buckets[containerId];
+        if (!existing) {
+            return;
+        }
+        for (const t of existing) {
+            const timer = this._timers.get(t.id);
+            if (timer) {
+                clearTimeout(timer);
+                this._timers.delete(t.id);
+            }
+        }
+        this._buckets = { ...this._buckets, [containerId]: [] };
+    };
+    registerMount = (containerId) => {
+        if (this._mountedSet.has(containerId)) {
+            return;
+        }
+        this._mountedSet.add(containerId);
+        this._mounted = [...this._mountedSet];
+    };
+    unregisterMount = (containerId) => {
+        if (!this._mountedSet.delete(containerId)) {
+            return;
+        }
+        this._mounted = [...this._mountedSet];
+    };
+    isMounted = (containerId) => this._mountedSet.has(containerId);
+}
+export const toastStore = new ToastStore();

package/dist/ui/toast/toaster-host.svelte.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Ensures a `<Toaster>` exists for the requested container id. If no consumer
+ * has mounted one, lazily mounts a fresh `<Toaster id={containerId}>` directly
+ * to `document.body`. No-op if one is already mounted for that id.
+ */
+export declare const ensureToaster: (containerId: string) => void;

package/dist/ui/toast/toaster-host.svelte.js

@@ -0,0 +1,18 @@
+import Toaster from './cmp.toaster.svelte';
+import { toastStore } from './toast-store.svelte';
+import { mount } from 'svelte';
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
+/**
+ * Ensures a `<Toaster>` exists for the requested container id. If no consumer
+ * has mounted one, lazily mounts a fresh `<Toaster id={containerId}>` directly
+ * to `document.body`. No-op if one is already mounted for that id.
+ */
+export const ensureToaster = (containerId) => {
+    if (!isBrowser || toastStore.isMounted(containerId)) {
+        return;
+    }
+    const host = document.createElement('div');
+    host.dataset.scKitToaster = containerId || 'default';
+    document.body.appendChild(host);
+    mount(Toaster, { target: host, props: { id: containerId } });
+};

package/dist/ui/toast/toastr.d.ts

@@ -0,0 +1,17 @@
+import type { ToastrOptions } from './types';
+import type { Snippet } from 'svelte';
+/**
+ * Static API to push toasts from anywhere. The default container is lazily
+ * auto-mounted to `<body>` on first call. Route to other containers by
+ * mounting `<Toaster id="...">` and passing `containerId: '...'` in options.
+ */
+export declare class Toastr {
+    static info: (message: string | Snippet, options?: ToastrOptions) => number;
+    static success: (message: string | Snippet, options?: ToastrOptions) => number;
+    static warning: (message: string | Snippet, options?: ToastrOptions) => number;
+    static error: (message: string | Snippet, options?: ToastrOptions) => number;
+    static dismiss: (id: number, containerId?: string) => void;
+    static clear: (containerId?: string) => void;
+    /** List of currently-mounted container ids — useful for routing UIs. */
+    static mountedContainers: () => string[];
+}

package/dist/ui/toast/toastr.js

@@ -0,0 +1,30 @@
+import { toastStore } from './toast-store.svelte';
+import { ensureToaster } from './toaster-host.svelte';
+const push = (variant, message, options) => {
+    const containerId = options?.containerId ?? '';
+    ensureToaster(containerId);
+    return toastStore.push(containerId, {
+        variant,
+        message,
+        description: options?.description,
+        duration: options?.duration ?? 4000,
+        closable: options?.closable ?? true,
+        swipeable: options?.swipeable ?? true,
+        onClick: options?.onClick
+    });
+};
+/**
+ * Static API to push toasts from anywhere. The default container is lazily
+ * auto-mounted to `<body>` on first call. Route to other containers by
+ * mounting `<Toaster id="...">` and passing `containerId: '...'` in options.
+ */
+export class Toastr {
+    static info = (message, options) => push('info', message, options);
+    static success = (message, options) => push('success', message, options);
+    static warning = (message, options) => push('warning', message, options);
+    static error = (message, options) => push('error', message, options);
+    static dismiss = (id, containerId = '') => toastStore.dismiss(id, containerId);
+    static clear = (containerId = '') => toastStore.clear(containerId);
+    /** List of currently-mounted container ids — useful for routing UIs. */
+    static mountedContainers = () => toastStore.mounted();
+}

package/dist/ui/toast/types.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+export type ToastrPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type ToastrOptions = {
+    /** Secondary line under the message. */
+    description?: string;
+    /** Auto-dismiss delay in ms. `0` keeps the toast until manually dismissed. @default 4000 */
+    duration?: number;
+    /** Routes the toast to a specific `<Toaster id="...">`. Empty string targets the default container. @default '' */
+    containerId?: string;
+    /** Show the X close button. @default true */
+    closable?: boolean;
+    /** Swipe-to-dismiss enabled. @default true */
+    swipeable?: boolean;
+    /** Fires when the toast body is clicked (excludes close button and other interactive children). Does NOT auto-dismiss — call `Toastr.dismiss(id)` from the callback if needed. */
+    onClick?: () => void;
+};
+export type Toast = {
+    id: number;
+    variant: ToastVariant;
+    message: string | Snippet;
+    description?: string;
+    duration: number;
+    closable: boolean;
+    swipeable: boolean;
+    onClick?: () => void;
+};

package/dist/ui/toast/types.js

@@ -0,0 +1 @@
+export {};