@streamscloud/kit 0.64.0 → 0.65.0

package/dist/core/local-storage/index.d.ts

@@ -1 +1 @@
-export { LocalStorageItem } from './local-storage-item';
+export { LocalStorageItem, type LocalStorageItemOptions } from './local-storage-item';

package/dist/core/local-storage/local-storage-item.d.ts

@@ -1,10 +1,22 @@
+export type LocalStorageItemOptions<T> = {
+    /** Rejects a stored value that parses but no longer fits (a stale number, a removed enum member) — `get()` then returns the fallback. */
+    validate?: (value: unknown) => value is T;
+};
 export declare class LocalStorageItem<T, TFallback = null> {
     readonly key: string;
     private readonly _fallback;
+    private readonly _validate;
     private constructor();
-    static of: <T_1>(key: string) => LocalStorageItem<T_1>;
-    static withDefault: <T_1>(key: string, fallback: T_1) => LocalStorageItem<T_1, T_1>;
+    static of: <T_1>(key: string, options?: LocalStorageItemOptions<T_1>) => LocalStorageItem<T_1>;
+    static withDefault: <T_1>(key: string, fallback: T_1, options?: LocalStorageItemOptions<T_1>) => LocalStorageItem<T_1, T_1>;
+    /**
+     * The stored value — or the fallback when nothing is stored, storage is unavailable, the value doesn't parse, or
+     * `validate` rejects it (or throws). Without `validate` a parsed value comes back unchecked — a stored `null`, `0` or
+     * `false` included.
+     */
     get(): T | TFallback;
+    /** Removes the stored value; does nothing when storage is unavailable. */
     remove(): void;
+    /** Stores the value; when storage is unavailable or full it just isn't remembered. */
     set(value: T): void;
 }

package/dist/core/local-storage/local-storage-item.js

@@ -1,27 +1,52 @@
 export class LocalStorageItem {
     key;
     _fallback;
-    constructor(key, fallback) {
+    _validate;
+    constructor(key, fallback, options) {
         this.key = key;
         this._fallback = fallback;
+        this._validate = options?.validate ?? null;
     }
-    static of = (key) => {
-        return new LocalStorageItem(key, null);
+    static of = (key, options) => {
+        return new LocalStorageItem(key, null, options);
     };
-    static withDefault = (key, fallback) => {
-        return new LocalStorageItem(key, fallback);
+    static withDefault = (key, fallback, options) => {
+        return new LocalStorageItem(key, fallback, options);
     };
+    /**
+     * The stored value — or the fallback when nothing is stored, storage is unavailable, the value doesn't parse, or
+     * `validate` rejects it (or throws). Without `validate` a parsed value comes back unchecked — a stored `null`, `0` or
+     * `false` included.
+     */
     get() {
-        const stringValue = localStorage.getItem(this.key);
-        if (!stringValue) {
+        try {
+            const stringValue = localStorage.getItem(this.key);
+            if (!stringValue) {
+                return this._fallback;
+            }
+            const value = JSON.parse(stringValue);
+            return !this._validate || this._validate(value) ? value : this._fallback;
+        }
+        catch {
             return this._fallback;
         }
-        return JSON.parse(stringValue);
     }
+    /** Removes the stored value; does nothing when storage is unavailable. */
     remove() {
-        localStorage.removeItem(this.key);
+        try {
+            localStorage.removeItem(this.key);
+        }
+        catch {
+            // Storage blocked (private mode, sandboxed iframe) — there is nothing to remove.
+        }
     }
+    /** Stores the value; when storage is unavailable or full it just isn't remembered. */
     set(value) {
-        localStorage.setItem(this.key, JSON.stringify(value));
+        try {
+            localStorage.setItem(this.key, JSON.stringify(value));
+        }
+        catch {
+            // Storage blocked or over quota — losing a remembered setting beats breaking the caller.
+        }
     }
 }

package/dist/core/utils/price-helper.d.ts

@@ -4,6 +4,8 @@ export type PriceRepresentationOptions = {
     currencyMode?: CurrencyMode;
     missingFractionMode?: 'hide' | 'currency-placeholder' | 'zeros' | 'zeros-or-placeholder';
     locale?: string;
+    /** Render a zero amount as a localized "Free" (in the app's `AppLocale`) instead of a number. @default false */
+    zeroAsFree?: boolean;
 };
 export declare const toPriceRepresentation: (data: {
     amountMinor: number;

package/dist/core/utils/price-helper.js

@@ -1,9 +1,20 @@
+import { AppLocale } from '../locale/app-locale.svelte';
+import {} from '../locale/types';
 import { Utils } from './utils';
+const loc = {
+    free: {
+        en: 'Free',
+        no: 'Gratis'
+    }
+};
 // `amountMinor` is an integer in the currency's smallest unit (e.g. cents) — the canonical money
 // representation. It is converted to a major amount here via the currency's minor-unit exponent.
 export const toPriceRepresentation = (data) => {
     const { amountMinor, currency, options } = data;
-    const { currencyMode = 'symbol', missingFractionMode = 'zeros-or-placeholder', locale = 'nb-NO' } = options ?? {};
+    const { currencyMode = 'symbol', missingFractionMode = 'zeros-or-placeholder', locale = 'nb-NO', zeroAsFree = false } = options ?? {};
+    if (zeroAsFree && amountMinor === 0) {
+        return loc.free[AppLocale.current];
+    }
     const cfg = currencyDefaults[currency];
     const amount = amountMinor / 10 ** cfg.minorUnit;
     // Helper to attach currency per mode

package/dist/ui/image/cmp.image.svelte

@@ -4,6 +4,10 @@ import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw
 let { src, alt = '', showStubOnError = false, on, stub } = $props();
 let hasError = $state(false);
 const imageState = $derived(calculateImageState(src, hasError, showStubOnError));
+// A 0.01x density makes the intrinsic size 100× the natural one, so `contain` sizing always scales the picture
+// down to fit — small pictures upscale too — and the box hugs the picture, rounding its own corners.
+// `src` must stay unset: it would join srcset as the 1x candidate and win.
+const srcset = $derived(src ? `${src.replace(/\s/g, (char) => encodeURIComponent(char))} 0.01x` : undefined);
 const onLoad = () => {
     hasError = false;
     on?.load?.(true);
@@ -16,7 +20,7 @@ const onLoadError = () => {
 
 <div class="image">
   {#if !!src}
-    <img class="image__img" class:image__img--hidden={imageState !== 'showImage'} src={src} alt={alt || ''} onload={onLoad} onerror={onLoadError} />
+    <img class="image__img" class:image__img--hidden={imageState !== 'showImage'} srcset={srcset} alt={alt || ''} onload={onLoad} onerror={onLoadError} />
   {/if}
 
   {#if imageState === 'showError'}
@@ -29,7 +33,7 @@ const onLoadError = () => {
     {#if stub}
       {@render stub()}
     {:else}
-      <div class="image__img image__img--stub"></div>
+      <div class="image__stub"></div>
     {/if}
   {/if}
 </div>
@@ -43,7 +47,7 @@ Displays an image with loading states: shows the image on success, an error icon
 |---|---|---|
 | `--sc-kit--image--background` | Container background | `transparent` |
 | `--sc-kit--image--border-radius` | Corner rounding | `0` |
-| `--sc-kit--image--object-fit` | Image object-fit mode | `cover` |
+| `--sc-kit--image--object-fit` | Image object-fit mode; `contain` hugs the picture (so `--border-radius` rounds it) and upscales small ones where `@container style()` is supported, elsewhere it letterboxes | `cover` |
 | `--sc-kit--image--stub--background` | Stub placeholder background | `var(--sc-kit--color--bg--images)` |
 -->
 
@@ -60,15 +64,29 @@ Displays an image with loading states: shows the image on success, an error icon
   background: var(--_image--background);
 }
 .image__img {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
   width: 100%;
   height: 100%;
-  z-index: 2;
+  margin: auto;
+  border-radius: var(--_image--border-radius);
   object-fit: var(--_image--object-fit);
 }
+@container style(--_image--object-fit: contain) {
+  .image__img {
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
 .image__img--hidden {
   display: none;
 }
-.image__img--stub {
+.image__stub {
+  width: 100%;
+  height: 100%;
   background: var(--_image--stub--background);
 }
 .image__load-error {

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

@@ -20,7 +20,7 @@ type Props = {
  * |---|---|---|
  * | `--sc-kit--image--background` | Container background | `transparent` |
  * | `--sc-kit--image--border-radius` | Corner rounding | `0` |
- * | `--sc-kit--image--object-fit` | Image object-fit mode | `cover` |
+ * | `--sc-kit--image--object-fit` | Image object-fit mode; `contain` hugs the picture (so `--border-radius` rounds it) and upscales small ones where `@container style()` is supported, elsewhere it letterboxes | `cover` |
  * | `--sc-kit--image--stub--background` | Stub placeholder background | `var(--sc-kit--color--bg--images)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;

package/dist/ui/page-toolbar/cmp.toolbar-segmented-control.svelte

@@ -8,9 +8,9 @@ $effect(() => untrack(() => {
     if (!localStorageKey) {
         return;
     }
-    storage = LocalStorageItem.of(localStorageKey);
+    storage = LocalStorageItem.of(localStorageKey, { validate: (saved) => segments.some((s) => s.value === saved) });
     const saved = storage.get();
-    if (saved !== null && segments.some((s) => s.value === saved)) {
+    if (saved !== null) {
         on?.change?.(saved);
     }
 }));

package/dist/ui/page-toolbar/cmp.toolbar-view-controls.svelte

@@ -12,9 +12,11 @@ $effect(() => untrack(() => {
     if (!viewStorageKey) {
         return;
     }
-    storage = LocalStorageItem.of(viewStorageKey);
+    storage = LocalStorageItem.of(viewStorageKey, {
+        validate: (value) => value === 'list' || value === 'grid' || (value === 'card' && showCard)
+    });
     const saved = storage.get();
-    if (saved === 'list' || saved === 'grid' || (saved === 'card' && showCard)) {
+    if (saved) {
         on?.viewChange?.(saved);
     }
 }));

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte

@@ -5,7 +5,9 @@ import IconColumnTwo from '@fluentui/svg-icons/icons/text_column_two_20_regular.
 import { untrack } from 'svelte';
 let { model, localStorageKey, on } = $props();
 const localization = new TableColumnsManagerLocalization();
-const storage = $derived(localStorageKey ? LocalStorageItem.of(localStorageKey) : null);
+const isColumnsConfig = (value) => Array.isArray(value) &&
+    value.every((entry) => typeof entry === 'object' && entry !== null && 'id' in entry && typeof entry.id === 'string' && 'hidden' in entry && typeof entry.hidden === 'boolean');
+const storage = $derived(localStorageKey ? LocalStorageItem.of(localStorageKey, { validate: isColumnsConfig }) : null);
 const hideableColumns = $derived(model.columns.filter((c) => c.hideable));
 const items = $derived(hideableColumns.map((col) => ({
     id: String(col.id),
@@ -26,7 +28,7 @@ $effect(() => {
         enabled: !('hidden' in col.def && col.def.hidden === true)
     }));
     const saved = storage?.get();
-    if (!saved || !Array.isArray(saved)) {
+    if (!saved) {
         return;
     }
     untrack(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.64.0",
+  "version": "0.65.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",