@streamscloud/kit 0.62.0 → 0.64.0

package/dist/ui/cropper/img-cropper/img-cropper.svelte.js

@@ -1,161 +1,462 @@
 import { FileWithBlobDataHelper } from '../../../core/files';
 import { ColorHelper, Utils } from '../../../core/utils';
-import { ImgCropperContainWorker } from './img-cropper-contain-worker.svelte';
-import { ImgCropperCoverWorker } from './img-cropper-cover-worker.svelte';
-import { detectMimeFromUrl } from './img-cropper-utils';
+import { alignBox, boxAtZoom, boxTurnedWithFrame, clampBox, containBox, containZoom, coverBox, fitFrame, MAX_FRAME_ZOOM, MIN_FREE_ZOOM, moveBox, scaleBox, selectionFromDrag, shiftSelection, zoomOf } from './frame-geometry';
+import { detectAlpha, detectMimeFromUrl, loadImage } from './img-cropper-utils';
+const ZOOM_STOPS = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, MAX_FRAME_ZOOM];
+const DEFAULT_MARGIN = { block: 64, inline: 64 };
+const MIN_SELECTION_SIZE = 40;
+const MIN_FRAME = { w: 200, h: 100 };
+const MAX_OUTPUT_AREA_UPSCALE = 2;
+// iOS Safari's canvas area limit (4096²) — raising it makes save() return null on iPhones.
+const MAX_OUTPUT_PIXELS = 16_777_216;
+const assertAspectRatio = (ratio) => {
+    if (!Number.isFinite(ratio) || ratio <= 0) {
+        throw new Error(`ImgCropper: aspect ratio must be a positive finite number, got ${ratio}`);
+    }
+};
+const ROTATIONS = [0, 90, 180, 270];
+const toRotation = (degrees) => {
+    const normalized = ((degrees % 360) + 360) % 360;
+    return ROTATIONS.find((rotation) => rotation === normalized) ?? 0;
+};
+const toRatioLabel = (ratio) => {
+    const ldd = Utils.ldd(ratio);
+    return ldd ? `${ldd.dividend}:${ldd.divisor}` : String(ratio);
+};
 export class ImgCropper {
+    ratioOptions;
+    margin;
     loading = $state(false);
-    ready = $state(false);
+    failed = $state(false);
+    mode = $state('cover');
     fillColor = $state('');
-    mode;
-    ratioOptions;
-    showImageShadow;
-    _worker = $state.raw(null);
-    _originalSrc = null;
-    _defaultGeometry;
+    natural = $state.raw(null);
+    rotation = $state(0);
+    /** The part of the source (turned by `rotation`) the picture is cut to, in natural pixels; `null` for the whole source. */
+    crop = $state.raw(null);
+    source = $state('');
+    free = $state(false);
+    cropMode = $state(false);
+    selection = $state.raw(null);
+    aspectRatio = $state(null);
+    stage = $state.raw({ w: 0, h: 0 });
+    box = $state.raw(null);
+    _initialMode;
+    _initialAspectRatio;
+    _image = null;
+    _blobUrl = null;
+    _sourceMime = null;
+    _sourceHasAlpha = $state(false);
     constructor(options) {
         this.mode = options.mode;
+        this._initialMode = options.mode;
         this.fillColor = options.fillColor ?? '';
-        this.showImageShadow = options.showImageShadow ?? true;
-        const toOption = (r) => {
-            if (r === 0) {
-                return { label: '', value: null };
-            }
-            const ldd = Utils.ldd(r);
-            return ldd ? { label: `${ldd.dividend}:${ldd.divisor}`, value: r } : { label: String(r), value: r };
+        this.margin = {
+            block: options.margin?.block ?? DEFAULT_MARGIN.block,
+            inline: options.margin?.inline ?? DEFAULT_MARGIN.inline
         };
-        const toRatioOptions = (items) => (items.length >= 2 ? items : null);
-        let initialRatio;
-        if (options.aspectRatio === undefined || typeof options.aspectRatio === 'number') {
-            initialRatio = options.aspectRatio ?? null;
+        const dynamic = options.aspectRatio;
+        if (dynamic === undefined || typeof dynamic === 'number') {
+            if (dynamic !== undefined) {
+                assertAspectRatio(dynamic);
+            }
+            this.aspectRatio = dynamic ?? null;
+            this._initialAspectRatio = this.aspectRatio;
             this.ratioOptions = null;
+            return;
         }
-        else {
-            const dynamic = options.aspectRatio;
-            initialRatio = dynamic.initial ?? (dynamic.allowFreeCrop ? null : (dynamic.supported[0] ?? null));
-            const supported = [...dynamic.supported];
-            if (initialRatio !== null && !supported.includes(initialRatio)) {
-                supported.unshift(initialRatio);
-            }
-            if (dynamic.allowFreeCrop) {
-                supported.unshift(0);
-            }
-            this.ratioOptions = toRatioOptions(supported.map(toOption));
+        const initial = dynamic.initial ?? (dynamic.allowFreeCrop ? null : (dynamic.supported[0] ?? null));
+        const values = [...dynamic.supported];
+        if (initial !== null && !values.includes(initial)) {
+            values.unshift(initial);
         }
-        this._defaultGeometry = { aspectRatio: initialRatio, width: 0, height: 0 };
+        values.forEach(assertAspectRatio);
+        const items = values.map((value) => ({ label: toRatioLabel(value), value }));
+        if (dynamic.allowFreeCrop) {
+            items.unshift({ label: '', value: null });
+        }
+        this.aspectRatio = initial;
+        this._initialAspectRatio = initial;
+        this.ratioOptions = items.length >= 2 ? items : null;
     }
     get showFillColor() {
-        return this.mode === 'contain';
+        return this.mode === 'contain' || this.free || this.hasAlpha;
+    }
+    get hasSelection() {
+        const { selection } = this;
+        return !!selection && selection.w >= MIN_SELECTION_SIZE && selection.h >= MIN_SELECTION_SIZE;
+    }
+    /** Whether the picture has transparent pixels — the source's own, or empty space a crop took in past the source's edges. */
+    get hasAlpha() {
+        const { crop } = this;
+        const full = this._fullNatural;
+        const reachesPast = !!crop && !!full && (crop.x < -0.5 || crop.y < -0.5 || crop.x + crop.w > full.w + 0.5 || crop.y + crop.h > full.h + 0.5);
+        return this._sourceHasAlpha || reachesPast;
+    }
+    /** The current aspect ratio's label — a preset's own, or `1.78:1` for a custom one; `null` for Original. */
+    get ratioLabel() {
+        const { aspectRatio } = this;
+        if (aspectRatio === null) {
+            return null;
+        }
+        return this.ratioOptions?.find((option) => option.value === aspectRatio)?.label ?? `${Math.round(aspectRatio * 100) / 100}:1`;
     }
     get isTransparentFill() {
         return ColorHelper.isTransparent(this.fillColor);
     }
-    get canvasGeometry() {
-        return this._worker?.canvasGeometry ?? this._defaultGeometry;
+    /** The picture's natural size — the crop's, or the whole source's turned by `rotation`. */
+    get shownNatural() {
+        const full = this._fullNatural;
+        const { crop } = this;
+        return full && crop ? { w: crop.w, h: crop.h } : full;
+    }
+    /** The picture's own aspect ratio (post-rotation) — the shape `box` must always keep. */
+    get imageAspect() {
+        const shown = this.shownNatural;
+        return shown ? shown.w / shown.h : null;
+    }
+    /** The frame's own aspect ratio — the chosen ratio, or the picture's own when none is chosen. */
+    get frameAspect() {
+        return this.aspectRatio ?? this.imageAspect;
+    }
+    get frame() {
+        const frameAspect = this.frameAspect;
+        if (frameAspect === null) {
+            return null;
+        }
+        const available = {
+            w: this.stage.w - this.margin.inline * 2,
+            h: this.stage.h - this.margin.block * 2
+        };
+        if (available.w <= 0 || available.h <= 0) {
+            return null;
+        }
+        const fit = fitFrame(available, frameAspect);
+        const shown = this.shownNatural;
+        // Capped at the picture's natural size so a small one isn't blown up at rest — but never below MIN_FRAME, so a
+        // tiny one stays workable (and visibly small) instead of shrinking to a few pixels.
+        const naturalWidth = shown ? containBox(shown, frameAspect).w : fit.w;
+        const w = Math.min(fit.w, Math.max(naturalWidth, coverBox(MIN_FRAME, frameAspect).w));
+        const h = w / frameAspect;
+        return { x: this.margin.inline + (available.w - w) / 2, y: this.margin.block + (available.h - h) / 2, w, h };
+    }
+    /** Zoom as shown to the user: 1 is the current mode's rest state — filling the frame in `cover`, fitting it in `contain`. */
+    get zoom() {
+        const { box, frame, imageAspect } = this;
+        return box && frame && imageAspect !== null ? zoomOf(box, frame, imageAspect) / this._zoomBase : 1;
+    }
+    get minZoom() {
+        return this.free ? MIN_FREE_ZOOM / this._zoomBase : 1;
     }
-    get aspectRatio() {
-        return this.canvasGeometry.aspectRatio;
+    get maxZoom() {
+        return MAX_FRAME_ZOOM / this._zoomBase;
     }
-    get cropBoxVisible() {
-        return this._worker?.cropBoxVisible ?? false;
+    /** The mode whose rest state the picture is in right now — filling the frame for `cover`, fitting it for `contain`; `null` once zoomed or free. */
+    get restingMode() {
+        return !this.free && Math.abs(this.zoom - 1) < 0.005 ? this.mode : null;
     }
-    get dragMode() {
-        return this._worker?.dragMode ?? 'move';
+    get ready() {
+        return !this.failed && this.box !== null && this.frame !== null;
     }
-    init = async (params) => {
+    get _fullNatural() {
+        const { natural, rotation } = this;
+        return natural ? (rotation === 90 || rotation === 270 ? { w: natural.h, h: natural.w } : natural) : null;
+    }
+    get _zoomBase() {
+        const { frame, imageAspect } = this;
+        return this.mode === 'contain' && frame && imageAspect !== null ? containZoom(frame, imageAspect) : 1;
+    }
+    init = async (src) => {
         this.destroy();
         this.loading = true;
+        this.failed = false;
         try {
-            let resolvedSrc = params.src;
-            let sourceMime = null;
-            const file = await FileWithBlobDataHelper.fromUrl(params.src);
+            let resolvedSrc = src;
+            const file = await FileWithBlobDataHelper.fromUrl(src);
             if (file) {
                 resolvedSrc = file.blobUrl;
-                sourceMime = file.type || null;
-                this._originalSrc = resolvedSrc;
+                this._blobUrl = resolvedSrc;
+                this._sourceMime = file.type || null;
+            }
+            if (!this._sourceMime) {
+                this._sourceMime = detectMimeFromUrl(src);
             }
-            if (!sourceMime) {
-                sourceMime = detectMimeFromUrl(params.src);
+            const image = await loadImage(resolvedSrc);
+            if (!image.naturalWidth || !image.naturalHeight) {
+                this.failed = true;
+                return;
             }
-            const workerParams = {
-                originalSrc: resolvedSrc,
-                sourceMime,
-                image: params.cropperImage,
-                selection: params.cropperSelection,
-                canvas: params.cropperCanvas,
-                selectHandle: params.selectHandle,
-                aspectRatio: this._defaultGeometry.aspectRatio
-            };
-            this._worker = this.mode === 'cover' ? new ImgCropperCoverWorker(workerParams) : new ImgCropperContainWorker(workerParams);
-            await this._worker.ready();
-            this.ready = true;
+            this._image = image;
+            this.source = resolvedSrc;
+            this.natural = { w: image.naturalWidth, h: image.naturalHeight };
+            this._sourceHasAlpha = detectAlpha(image, this._sourceMime);
+            this.layout();
+        }
+        catch {
+            this.failed = true;
         }
         finally {
             this.loading = false;
         }
     };
     destroy = () => {
-        this._worker?.destroy();
-        this._worker = null;
-        this.ready = false;
-        if (this._originalSrc) {
-            URL.revokeObjectURL(this._originalSrc);
-            this._originalSrc = null;
+        this._image = null;
+        this._sourceMime = null;
+        this.natural = null;
+        this._sourceHasAlpha = false;
+        this.crop = null;
+        this.box = null;
+        if (this._blobUrl) {
+            URL.revokeObjectURL(this._blobUrl);
+            this._blobUrl = null;
+        }
+    };
+    setStage = (size) => {
+        const previousFrame = this.frame;
+        const previousBox = this.box;
+        this.stage = size;
+        const frame = this.frame;
+        if (previousFrame && previousBox && frame && previousFrame.w > 0) {
+            const factor = frame.w / previousFrame.w;
+            const scaled = (rect) => ({ x: rect.x * factor, y: rect.y * factor, w: rect.w * factor, h: rect.h * factor });
+            this.box = scaled(previousBox);
+            if (this.selection) {
+                this.selection = scaled(this.selection);
+            }
+        }
+        else {
+            this.layout();
+        }
+    };
+    layout = () => {
+        const { frame, imageAspect } = this;
+        if (!frame || imageAspect === null) {
+            return;
+        }
+        const cover = coverBox(frame, imageAspect);
+        this.box = this.mode === 'contain' ? boxAtZoom(cover, containZoom(frame, imageAspect), { frame, aspect: imageAspect, mode: 'contain' }) : cover;
+    };
+    changeAspectRatio = (ratio) => {
+        if (ratio !== null) {
+            assertAspectRatio(ratio);
+        }
+        this.aspectRatio = ratio;
+        this.selection = null;
+        this.free = false;
+        this.layout();
+    };
+    setFree = (free) => {
+        this.free = free;
+        this._update((box, ctx) => clampBox(box, ctx));
+    };
+    toggleFree = () => {
+        if (this.cropMode) {
+            this.setCropMode(false);
+            return;
+        }
+        this.setFree(!this.free);
+    };
+    setCropMode = (active) => {
+        this.cropMode = active;
+        this.selection = null;
+    };
+    updateSelection = (anchor, point) => {
+        const frame = this.frame;
+        if (!this.cropMode || !frame) {
+            return;
         }
+        const minSize = this.hasSelection ? MIN_SELECTION_SIZE : 0;
+        this.selection = selectionFromDrag({ anchor, point, frame, aspect: this.aspectRatio, minSize });
     };
-    rotate = async () => {
-        await this._worker?.rotate();
+    /** Drops a freshly drawn selection that ended up below the minimum size. */
+    finishSelection = () => {
+        if (!this.hasSelection) {
+            this.selection = null;
+        }
+    };
+    moveSelection = (delta) => {
+        const { selection, frame } = this;
+        if (!this.cropMode || !selection || !frame) {
+            return;
+        }
+        this.selection = shiftSelection({ rect: selection, delta, frame });
+    };
+    clearSelection = () => {
+        this.selection = null;
+    };
+    /**
+     * Cuts the picture to the selection — whatever it covers, empty space past the picture included (that turns
+     * transparent). The cut piece becomes the picture: the rest of it is gone until `reset()`, and it's laid out afresh,
+     * filling the frame — with the Original aspect the frame takes the piece's shape, a fixed aspect already matches it.
+     */
+    applyCrop = () => {
+        const { selection, box, shownNatural } = this;
+        if (!this.hasSelection || !selection || !box || !shownNatural || !this.frame) {
+            return;
+        }
+        const scale = shownNatural.w / box.w;
+        const origin = this.crop ?? { x: 0, y: 0 };
+        const w = selection.w * scale;
+        // The selection's height is rounded; a fixed aspect is re-derived so the piece fills the frame without a seam.
+        const h = this.aspectRatio === null ? selection.h * scale : w / this.aspectRatio;
+        this.crop = { x: origin.x + (selection.x - box.x) * scale, y: origin.y + (selection.y - box.y) * scale, w, h };
+        this.selection = null;
+        this.cropMode = false;
+        this.free = false;
+        this.layout();
+    };
+    pan = (delta) => {
+        this._update((box, ctx) => moveBox(box, delta, ctx));
+    };
+    scaleAbout = (factor, anchor) => {
+        this._update((box, ctx) => scaleBox(box, factor, anchor, ctx));
+    };
+    /** Sets the zoom in the shown units — see `zoom`. */
+    setZoom = (zoom) => {
+        const base = this._zoomBase;
+        this._update((box, ctx) => boxAtZoom(box, zoom * base, ctx));
     };
     zoomIn = () => {
-        this._worker?.zoomIn();
+        const next = ZOOM_STOPS.find((stop) => stop > this.zoom + 0.001);
+        this.setZoom(next ?? this.maxZoom);
     };
     zoomOut = () => {
-        this._worker?.zoomOut();
+        const floor = this.minZoom;
+        const next = [...ZOOM_STOPS].reverse().find((stop) => stop < this.zoom - 0.001);
+        this.setZoom(Math.max(floor, next ?? floor));
     };
-    reset = async () => {
-        await this._worker?.reset();
+    /** Switches to `cover` (leaving free position) and fills the frame. */
+    fill = () => {
+        this.mode = 'cover';
+        this.free = false;
+        this.setZoom(1);
     };
-    changeAspectRatio = async (ratio) => {
-        if (this._worker) {
-            this._worker.canvasGeometry = { ...this._worker.canvasGeometry, aspectRatio: ratio };
-        }
-        this._defaultGeometry = { ...this._defaultGeometry, aspectRatio: ratio };
-        await this.reset();
+    /** Switches to `contain` (leaving free position) and fits the picture inside the frame, centered. */
+    fit = () => {
+        this.mode = 'contain';
+        this.free = false;
+        this.layout();
     };
-    crop = async () => {
-        if (!this._worker) {
-            return null;
+    align = (fx, fy) => {
+        this._update((box, ctx) => alignBox(box, fx, fy, ctx));
+    };
+    /** Turns the picture a quarter clockwise (`1`) or counter-clockwise (`-1`). With the Original aspect the frame turns
+     * along and keeps what's inside it; a fixed-aspect frame can't turn, so the picture is laid out afresh instead. */
+    rotate = (direction) => {
+        const { box, frame: fromFrame, crop } = this;
+        const full = this._fullNatural;
+        this.rotation = toRotation(this.rotation + direction * 90);
+        if (crop && full) {
+            // A quarter turn maps (x, y) in the W×H source to (H - y, x) clockwise, (y, W - x) counter-clockwise.
+            this.crop =
+                direction === 1
+                    ? { x: full.h - (crop.y + crop.h), y: crop.x, w: crop.h, h: crop.w }
+                    : { x: crop.y, y: full.w - (crop.x + crop.w), w: crop.h, h: crop.w };
         }
-        this.loading = true;
-        try {
-            return await this._worker.crop({ fillColor: this.fillColor });
+        this.selection = null;
+        if (this.aspectRatio !== null) {
+            this.layout();
+            return;
         }
-        finally {
-            this.loading = false;
+        const { frame, imageAspect } = this;
+        if (!box || !fromFrame || !frame || imageAspect === null) {
+            return;
         }
+        this.box = boxTurnedWithFrame({
+            box,
+            from: fromFrame,
+            clockwise: direction === 1,
+            ctx: { frame, aspect: imageAspect, mode: this.mode, free: this.free }
+        });
     };
+    reset = () => {
+        this.mode = this._initialMode;
+        this.free = false;
+        this.cropMode = false;
+        this.selection = null;
+        this.rotation = 0;
+        this.crop = null;
+        this.aspectRatio = this._initialAspectRatio;
+        this.layout();
+    };
+    /** Renders the frame to an image, applying a pending selection first; `null` when there's nothing to render or the browser can't. */
     save = async () => {
-        if (!this._worker) {
+        if (this.hasSelection) {
+            this.applyCrop();
+        }
+        const image = this._image;
+        const { box, frame, shownNatural } = this;
+        if (this.failed || !image || !box || !frame || !shownNatural) {
             return null;
         }
-        this.loading = true;
-        try {
-            return await this._worker.save({ fillColor: this.fillColor });
+        const nativeScale = shownNatural.w / box.w;
+        const nativeArea = frame.w * frame.h * nativeScale * nativeScale;
+        const areaLimit = Math.min(shownNatural.w * shownNatural.h * MAX_OUTPUT_AREA_UPSCALE, MAX_OUTPUT_PIXELS);
+        const scale = nativeArea > areaLimit ? nativeScale * Math.sqrt(areaLimit / nativeArea) : nativeScale;
+        const width = Math.max(1, Math.floor(frame.w * scale));
+        const height = Math.max(1, Math.floor(frame.h * scale));
+        const left = Math.round(box.x * scale);
+        const top = Math.round(box.y * scale);
+        const right = Math.round((box.x + box.w) * scale);
+        const bottom = Math.round((box.y + box.h) * scale);
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const context = canvas.getContext('2d');
+        if (!context) {
+            return null;
         }
-        finally {
-            this.loading = false;
+        const hasGap = left > 0 || top > 0 || right < width || bottom < height;
+        if (!this.isTransparentFill) {
+            context.fillStyle = this.fillColor;
+            context.fillRect(0, 0, width, height);
         }
+        const picture = { x: left, y: top, w: right - left, h: bottom - top };
+        const placement = this.sourcePlacement(picture);
+        if (!placement) {
+            return null;
+        }
+        const { center, size } = placement;
+        const turned = this.rotation === 90 || this.rotation === 270;
+        context.save();
+        context.beginPath();
+        context.rect(picture.x, picture.y, picture.w, picture.h);
+        context.clip();
+        context.translate(center.x, center.y);
+        context.rotate((this.rotation * Math.PI) / 180);
+        const drawWidth = turned ? size.h : size.w;
+        const drawHeight = turned ? size.w : size.h;
+        context.drawImage(image, -drawWidth / 2, -drawHeight / 2, drawWidth, drawHeight);
+        context.restore();
+        const needsAlpha = !ColorHelper.isOpaque(this.fillColor) && (hasGap || this.hasAlpha);
+        const mimeType = this._sourceMime === 'image/jpeg' && !needsAlpha ? 'image/jpeg' : 'image/png';
+        const dataUrl = canvas.toDataURL(mimeType, 0.92);
+        // A canvas past the browser's size limit encodes to an empty "data:," URL instead of throwing.
+        return dataUrl.length > 'data:,'.length ? { dataUrl, width, height, mimeType } : null;
     };
-    clearSelection = () => {
-        this._worker?.clearSelection();
-    };
-    enableCropMode = () => {
-        this._worker?.enableCropMode();
-    };
-    enableMoveMode = () => {
-        this._worker?.clearSelection();
+    /**
+     * Where the whole turned source lands when the picture is drawn into `picture` — its center and its size on each axis,
+     * before `rotation` swaps them. The view and `save()` both place the source through this, so they can't drift apart.
+     */
+    sourcePlacement = (picture) => {
+        const full = this._fullNatural;
+        const shown = this.shownNatural;
+        if (!full || !shown) {
+            return null;
+        }
+        // Per axis: the picture rect is rounded on each axis separately when exported, so one shared scale leaves a seam.
+        const perX = picture.w / shown.w;
+        const perY = picture.h / shown.h;
+        const offset = this.crop ?? { x: 0, y: 0 };
+        return {
+            center: { x: picture.x + (full.w / 2 - offset.x) * perX, y: picture.y + (full.h / 2 - offset.y) * perY },
+            size: { w: full.w * perX, h: full.h * perY }
+        };
     };
-    refit = () => {
-        void this._worker?.refit();
+    _update = (change) => {
+        const { box, frame, imageAspect } = this;
+        if (box && frame && imageAspect !== null) {
+            this.box = change(box, { frame, aspect: imageAspect, mode: this.mode, free: this.free });
+        }
     };
 }

package/dist/ui/cropper/img-cropper/index.d.ts

@@ -1,4 +1,3 @@
-export { default as ImgCropperControls } from './cmp.img-cropper-controls.svelte';
 export { default as ImgCropperToolbar } from './cmp.img-cropper-toolbar.svelte';
 export { default as ImgCropperView } from './cmp.img-cropper.svelte';
-export { type CanvasGeometry, type CropperMode, type DragMode, ImgCropper, type ImgCropperDynamicAspectRatio, type ImgCropperOptions, type ImgCropperRatioOption, type ImgCropperSaveResult } from './img-cropper.svelte';
+export { ImgCropper, type CropperMode, type ImgCropperDynamicAspectRatio, type ImgCropperMargin, type ImgCropperOptions, type ImgCropperRatioOption, type ImgCropperSaveResult } from './img-cropper.svelte';

package/dist/ui/cropper/img-cropper/index.js

@@ -1,4 +1,3 @@
-export { default as ImgCropperControls } from './cmp.img-cropper-controls.svelte';
 export { default as ImgCropperToolbar } from './cmp.img-cropper-toolbar.svelte';
 export { default as ImgCropperView } from './cmp.img-cropper.svelte';
 export { ImgCropper } from './img-cropper.svelte';

package/dist/ui/table/cmp.table-draggable.svelte

@@ -7,9 +7,9 @@ import { columnWidthStyle, createTableView } from './table-view.svelte';
 import IconReorderDotsHorizontal from '@fluentui/svg-icons/icons/re_order_dots_horizontal_20_regular.svg?raw';
 import { flip } from 'svelte/animate';
 import { dndzone } from 'svelte-dnd-action';
-let { model, showAlternativeView = false, noItemsPlaceholder, on, alternativeView, customNoItemsPlaceholder } = $props();
+let { model, showAlternativeView = false, noItemsPlaceholderEnabled, noItemsPlaceholderDelay, on, alternativeView, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
-const view = createTableView(() => model, () => on, () => noItemsPlaceholder);
+const view = createTableView(() => model, () => on, () => noItemsPlaceholderEnabled, () => noItemsPlaceholderDelay);
 const flipDurationMs = 200;
 let tableRef = $state.raw(null);
 let dndItems = $state.raw(null);

package/dist/ui/table/cmp.table-draggable.svelte.d.ts

@@ -6,13 +6,11 @@ declare function $$render<T extends {
     props: {
         model: TableModel<T>;
         showAlternativeView?: boolean;
-        /**
-         * When an empty list turns into the no-items placeholder. A number delays it by that many ms (anti-flicker while the first page is in flight); a boolean
-         * decides outright — `true` shows it as soon as the list is empty, `false` never shows it (pair it with your own loading / empty UI). Rows always win:
-         * the placeholder is never rendered over a non-empty list.
-         * @default 700
-         */
-        noItemsPlaceholder?: number | boolean;
+        /** Whether an empty list turns into the no-items placeholder at all — `false` pairs with your own loading / empty UI. Rows always win: the placeholder
+         * is never rendered over a non-empty list. @default true */
+        noItemsPlaceholderEnabled?: boolean;
+        /** Anti-flicker delay in ms before the placeholder appears, once `noItemsPlaceholderEnabled`. `0` shows it as soon as the list is empty. @default 0 */
+        noItemsPlaceholderDelay?: number;
         on?: {
             selectionChanged?: (e: T[]) => void;
             itemsSelected?: (e: T[]) => void;

package/dist/ui/table/cmp.table.svelte

@@ -3,9 +3,9 @@ import { EmptyState } from '../empty-state';
 import { TableCell, TableHideableCell } from './table-cells';
 import { TableLocalization } from './table-localization';
 import { columnWidthStyle, createTableView } from './table-view.svelte';
-let { model, showAlternativeView = false, noItemsPlaceholder, grouping, on, alternativeView, customNoItemsPlaceholder } = $props();
+let { model, showAlternativeView = false, noItemsPlaceholderEnabled, noItemsPlaceholderDelay, grouping, on, alternativeView, customNoItemsPlaceholder } = $props();
 const localization = new TableLocalization();
-const view = createTableView(() => model, () => on, () => noItemsPlaceholder);
+const view = createTableView(() => model, () => on, () => noItemsPlaceholderEnabled, () => noItemsPlaceholderDelay);
 const displayRows = $derived.by(() => {
     const items = model.items;
     const grp = grouping;

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

@@ -6,13 +6,11 @@ declare function $$render<T extends {
     props: {
         model: TableModel<T>;
         showAlternativeView?: boolean;
-        /**
-         * When an empty list turns into the no-items placeholder. A number delays it by that many ms (anti-flicker while the first page is in flight); a boolean
-         * decides outright — `true` shows it as soon as the list is empty, `false` never shows it (pair it with your own loading / empty UI). Rows always win:
-         * the placeholder is never rendered over a non-empty list.
-         * @default 700
-         */
-        noItemsPlaceholder?: number | boolean;
+        /** Whether an empty list turns into the no-items placeholder at all — `false` pairs with your own loading / empty UI. Rows always win: the placeholder
+         * is never rendered over a non-empty list. @default true */
+        noItemsPlaceholderEnabled?: boolean;
+        /** Anti-flicker delay in ms before the placeholder appears, once `noItemsPlaceholderEnabled`. `0` shows it as soon as the list is empty. @default 0 */
+        noItemsPlaceholderDelay?: number;
         /** Group consecutive (already-sorted) rows under section headers. `key` returns a group id per item (`null` = ungrouped); a header row renders wherever the key changes between neighbours. */
         grouping?: {
             key: (item: T) => string | null;