@streamscloud/kit 0.63.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/color-helper.d.ts

@@ -10,4 +10,8 @@ export declare class ColorHelper {
      * Check whether a color value represents "no color" (empty, transparent, zero alpha).
      */
     static isTransparent(value: string | null | undefined): boolean;
+    /**
+     * Check whether a color value fully hides what is behind it (valid, 100% alpha).
+     */
+    static isOpaque(value: string | null | undefined): boolean;
 }

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

@@ -33,4 +33,14 @@ export class ColorHelper {
         const parsed = colord(value);
         return !parsed.isValid() || parsed.alpha() === 0;
     }
+    /**
+     * Check whether a color value fully hides what is behind it (valid, 100% alpha).
+     */
+    static isOpaque(value) {
+        if (!value) {
+            return false;
+        }
+        const parsed = colord(value);
+        return parsed.isValid() && parsed.alpha() === 1;
+    }
 }

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/cropper/image-editor-dialog/cmp.image-editor-dialog.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">import { FileWithBlobDataHelper } from '../../../core/files';
 import { Dialog, DialogButton, DialogCancelButton } from '../../dialog';
 import { Toastr } from '../../toast';
-import { ImgCropper, ImgCropperControls, ImgCropperToolbar, ImgCropperView } from '../img-cropper';
+import { ImgCropper, ImgCropperToolbar, ImgCropperView } from '../img-cropper';
 import { ImageEditorDialogLocalization } from './image-editor-dialog-localization';
 import { untrack } from 'svelte';
 const { controller, data } = $props();
 const loc = new ImageEditorDialogLocalization();
-const cropper = untrack(() => {
-    return new ImgCropper({
-        mode: data.mode ?? 'cover',
-        aspectRatio: data.aspectRatio,
-        fillColor: data.fillColor,
-        showImageShadow: data.showImageShadow ?? true
-    });
-});
+const cropper = untrack(() => new ImgCropper({
+    mode: data.mode ?? 'cover',
+    aspectRatio: data.aspectRatio,
+    fillColor: data.fillColor
+}));
 const url = $derived(data.url);
 const save = async () => {
     try {
@@ -47,24 +44,18 @@ $effect(() => untrack(() => {
       {loc.title}
     {/snippet}
     {#snippet bodySection()}
-      <div class="image-editor-dialog__body">
-        <div class="image-editor-dialog__cropper-wrapper">
-          <ImgCropperView src={url} cropper={cropper} showControls={false} />
-        </div>
-        <div class="image-editor-dialog__controls">
-          <ImgCropperControls cropper={cropper} />
-        </div>
+      <div class="image-editor-dialog__workspace">
+        <ImgCropperView src={url} cropper={cropper}>
+          {#snippet toolbar()}
+            <ImgCropperToolbar cropper={cropper} />
+          {/snippet}
+        </ImgCropperView>
       </div>
     {/snippet}
     {#snippet footer()}
       <div class="image-editor-dialog__footer">
-        <div class="image-editor-dialog__toolbar">
-          <ImgCropperToolbar cropper={cropper} />
-        </div>
-        <div class="image-editor-dialog__buttons">
-          <DialogCancelButton on={{ click: cancel }}>{loc.cancel}</DialogCancelButton>
-          <DialogButton on={{ click: save }}>{loc.save}</DialogButton>
-        </div>
+        <DialogCancelButton on={{ click: cancel }}>{loc.cancel}</DialogCancelButton>
+        <DialogButton on={{ click: save }}>{loc.save}</DialogButton>
       </div>
     {/snippet}
   </Dialog>
@@ -74,37 +65,12 @@ $effect(() => untrack(() => {
   --sc-kit--dialog--height: calc(100vh - 2.5rem);
   display: contents;
 }
-.image-editor-dialog__body {
+.image-editor-dialog__workspace {
   flex: 1;
-  position: relative;
-  background: #dadada;
-  overflow: hidden;
-}
-.image-editor-dialog__cropper-wrapper {
-  position: absolute;
-  inset: 3rem;
-}
-.image-editor-dialog__controls {
-  position: absolute;
-  bottom: 0.3125rem;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
+  min-block-size: 0;
 }
 .image-editor-dialog__footer {
-  container-type: inline-size;
-  display: flex;
-  flex: 1;
-  justify-content: space-between;
-  align-items: center;
-}
-.image-editor-dialog__toolbar {
-  flex: 1;
-  min-width: 0;
-}
-.image-editor-dialog__buttons {
-  white-space: nowrap;
   display: flex;
+  justify-content: flex-end;
   gap: 1.5rem;
-  margin-left: 1rem;
 }</style>

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.d.ts

@@ -1,11 +1,11 @@
 import type { FileWithBlobUrl } from '../../../core/files';
 import type { ImageEditorDynamicAspectRatio } from './types';
 export type CropAndResizeOptions = {
-    /** Fixed aspect ratio, or dynamic selector, or omit for free crop. */
+    /** Fixed aspect ratio, or dynamic selector, or omit to follow the picture's own. */
     aspectRatio?: number | ImageEditorDynamicAspectRatio;
-    /** Crop/scale mode inside the editor canvas. @default 'cover' */
+    /** @default 'cover' */
     mode?: 'contain' | 'cover';
-    /** Fill color in `contain` mode (transparent letterbox by default). */
+    /** Fill color in `contain` mode (transparent by default). */
     fillColor?: string;
     /**
      * After cropping, downscale to fit these limits. `max1` / `max2` are not tied to width /
@@ -18,19 +18,7 @@ export type CropAndResizeOptions = {
     } | false;
 };
 /**
- * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the
- * result before returning. Composable opt-in helper — call it explicitly from a consumer's
- * select handler when image cropping is needed before upload.
- *
+ * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the result before returning.
  * Returns `null` when the user cancels the dialog.
- *
- * @example
- * ```ts
- * const cropped = await cropAndResizeImage(file, {
- *   aspectRatio: 1,
- *   resize: { max1: 400, max2: 400 }
- * });
- * if (cropped) store.add(cropped);
- * ```
  */
 export declare const cropAndResizeImage: (file: File, options?: CropAndResizeOptions) => Promise<FileWithBlobUrl | null>;

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.js

@@ -2,20 +2,8 @@ import { FileWithBlobDataHelper, resizeBlob } from '../../../core/files';
 import { openImageEditorDialog } from './index';
 const DEFAULT_RESIZE_LIMITS = { max1: 1600, max2: 1000 };
 /**
- * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the
- * result before returning. Composable opt-in helper — call it explicitly from a consumer's
- * select handler when image cropping is needed before upload.
- *
+ * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the result before returning.
  * Returns `null` when the user cancels the dialog.
- *
- * @example
- * ```ts
- * const cropped = await cropAndResizeImage(file, {
- *   aspectRatio: 1,
- *   resize: { max1: 400, max2: 400 }
- * });
- * if (cropped) store.add(cropped);
- * ```
  */
 export const cropAndResizeImage = async (file, options = {}) => {
     const sourceUrl = URL.createObjectURL(file);
@@ -35,7 +23,6 @@ export const cropAndResizeImage = async (file, options = {}) => {
         }
         const limits = options.resize ?? DEFAULT_RESIZE_LIMITS;
         const resizedBlob = await resizeBlob(cropped, limits);
-        // Already-fitting blob? `resizeBlob` returns the same instance — short-circuit.
         if (resizedBlob === cropped) {
             return cropped;
         }

package/dist/ui/cropper/image-editor-dialog/index.d.ts

@@ -1,21 +1,22 @@
 import { type DialogResult } from '../../dialog';
 import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types';
 /**
- * Opens a full-screen image editor dialog with crop, rotate, zoom, and reset controls.
+ * Opens a full-screen image editor dialog: drag the picture inside a fixed frame, scale it from the corners, zoom,
+ * rotate, align, and reset.
  *
  * ### Modes
- * - **`cover`** (default) — image fills the canvas; crop selects a visible region.
- * - **`contain`** — image is fitted inside the canvas with optional fill color.
+ * - **`cover`** (default) — the picture always fills the frame; nothing outside the frame is exported.
+ * - **`contain`** — the picture is fitted inside the frame with an optional fill color for the remaining space.
  *
  * ### Aspect ratio
  * - `number` — fixed ratio, no popover.
- * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true`
- *   adds a free-ratio option; `initial` is optional when free crop is enabled.
- * - Omitted — free crop (no ratio constraint on the selection).
+ * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true` adds the picture's own
+ *   ratio as a choice; `initial` is optional when it's enabled.
+ * - Omitted — the frame follows the picture's own aspect ratio.
  *
  * ### Result
  * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
- * - `selectedRatio` — active aspect ratio at save time (`null` for free crop).
+ * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
  */
 export declare const openImageEditorDialog: (options: ImageEditorDialogOptions) => Promise<DialogResult<ImageEditorDialogResult>>;
 export type { CroppedFile, ImageEditorDialogOptions, ImageEditorDialogResult, ImageEditorDynamicAspectRatio } from './types';

package/dist/ui/cropper/image-editor-dialog/index.js

@@ -1,21 +1,22 @@
 import { Dialogs } from '../../dialog';
 import { default as ImageEditorDialog } from './cmp.image-editor-dialog.svelte';
 /**
- * Opens a full-screen image editor dialog with crop, rotate, zoom, and reset controls.
+ * Opens a full-screen image editor dialog: drag the picture inside a fixed frame, scale it from the corners, zoom,
+ * rotate, align, and reset.
  *
  * ### Modes
- * - **`cover`** (default) — image fills the canvas; crop selects a visible region.
- * - **`contain`** — image is fitted inside the canvas with optional fill color.
+ * - **`cover`** (default) — the picture always fills the frame; nothing outside the frame is exported.
+ * - **`contain`** — the picture is fitted inside the frame with an optional fill color for the remaining space.
  *
  * ### Aspect ratio
  * - `number` — fixed ratio, no popover.
- * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true`
- *   adds a free-ratio option; `initial` is optional when free crop is enabled.
- * - Omitted — free crop (no ratio constraint on the selection).
+ * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true` adds the picture's own
+ *   ratio as a choice; `initial` is optional when it's enabled.
+ * - Omitted — the frame follows the picture's own aspect ratio.
  *
  * ### Result
  * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
- * - `selectedRatio` — active aspect ratio at save time (`null` for free crop).
+ * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
  */
 export const openImageEditorDialog = async (options) => {
     return await Dialogs.open({

package/dist/ui/cropper/image-editor-dialog/types.d.ts

@@ -9,9 +9,9 @@ export type ImageEditorDynamicAspectRatio = {
     allowFreeCrop: true;
 };
 export type ImageEditorDialogOptions = {
+    /** The picture to edit — same-origin, a `blob:` / `data:` URL, or a server that sends CORS headers; anything else fails to load. */
     url: string;
     fillColor?: string;
-    showImageShadow?: boolean;
     mode?: 'contain' | 'cover';
     aspectRatio?: number | ImageEditorDynamicAspectRatio;
 };