@streamscloud/kit 0.1.9 → 0.1.10

package/dist/ui/cropper/img-cropper/img-cropper-worker.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
+export type DragMode = 'move' | 'crop';
+export type ImgCropperWorkerParams = {
+    originalSrc: string;
+    image: CropperImage;
+    selection: CropperSelection;
+    canvas: CropperCanvas;
+    selectHandle: HTMLElement | null;
+};
+export interface ImgCropperWorker {
+    cropBoxVisible: boolean;
+    dragMode: DragMode;
+    naturalWidth: number;
+    naturalHeight: number;
+    canvasRatio: number | null;
+    destroy: () => void;
+    ready: () => Promise<void>;
+    rotate: () => void | Promise<void>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    reset: () => Promise<void>;
+    crop: (options?: {
+        fillColor?: string;
+        freeRatio?: boolean;
+    }) => Promise<{
+        dataUrl: string;
+        width: number;
+        height: number;
+    }>;
+    save: (options?: {
+        fillColor?: string;
+    }) => Promise<{
+        dataUrl: string;
+        width: number;
+        height: number;
+    }>;
+    clearSelection: () => void;
+    enableCropMode: () => void;
+}

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

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

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

@@ -0,0 +1,81 @@
+import type { DragMode } from './img-cropper-worker.svelte';
+import type { CropperCanvas, CropperImage, CropperSelection } from 'cropperjs';
+export type CropperMode = 'contain' | 'cover';
+export type CorsMode = 'native' | 'fetch';
+export type { DragMode };
+export type ImgCropperRatioOption = {
+    label: string;
+    value: number | null;
+};
+export type ImgCropperCoverAspectRatio = {
+    initial: number;
+    supported: number[];
+};
+export type ImgCropperContainAspectRatio = {
+    initial: number;
+    supported: number[];
+    allowFreeCrop?: false;
+} | {
+    initial?: number;
+    supported: number[];
+    allowFreeCrop: true;
+};
+export type ImgCropperSaveResult = {
+    dataUrl: string;
+    width: number;
+    height: number;
+};
+type ImgCropperOptionsBase = {
+    corsMode?: CorsMode;
+    fillColor?: string;
+    showImageShadow?: boolean;
+};
+export type ImgCropperOptions = (ImgCropperOptionsBase & {
+    mode: 'cover';
+    aspectRatio?: number | ImgCropperCoverAspectRatio;
+}) | (ImgCropperOptionsBase & {
+    mode: 'contain';
+    aspectRatio?: number | ImgCropperContainAspectRatio;
+});
+export declare class ImgCropper {
+    loading: boolean;
+    ready: boolean;
+    fillColor: string;
+    aspectRatio: number | null;
+    readonly mode: CropperMode;
+    readonly corsMode: CorsMode;
+    readonly ratioOptions: ImgCropperRatioOption[] | null;
+    readonly showImageShadow: boolean;
+    private _worker;
+    private _originalSrc;
+    constructor(options: ImgCropperOptions);
+    get showFillColor(): boolean;
+    get isTransparentFill(): boolean;
+    get effectiveCanvasRatio(): number | null;
+    get naturalWidth(): number;
+    get naturalHeight(): number;
+    get cropBoxVisible(): boolean;
+    get dragMode(): DragMode;
+    init: (params: {
+        src: string;
+        cropperImage: CropperImage;
+        cropperSelection: CropperSelection;
+        cropperCanvas: CropperCanvas;
+        selectHandle: HTMLElement | null;
+    }) => Promise<void>;
+    destroy: () => void;
+    rotate: () => Promise<void>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    reset: () => Promise<void>;
+    changeAspectRatio: (ratio: number | null) => Promise<void>;
+    crop: () => Promise<{
+        dataUrl: string;
+        width: number;
+        height: number;
+    } | null>;
+    save: () => Promise<ImgCropperSaveResult | null>;
+    clearSelection: () => void;
+    enableCropMode: () => void;
+    enableMoveMode: () => void;
+}

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

@@ -0,0 +1,160 @@
+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';
+export class ImgCropper {
+    loading = $state(false);
+    ready = $state(false);
+    fillColor = $state('');
+    aspectRatio = $state(null);
+    mode;
+    corsMode;
+    ratioOptions;
+    showImageShadow;
+    _worker = $state.raw(null);
+    _originalSrc = null;
+    constructor(options) {
+        this.mode = options.mode;
+        this.corsMode = options.corsMode ?? 'native';
+        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 };
+        };
+        const toRatioOptions = (items) => (items.length >= 2 ? items : null);
+        if (options.aspectRatio === undefined || typeof options.aspectRatio === 'number') {
+            this.aspectRatio = options.aspectRatio ?? null;
+            this.ratioOptions = null;
+        }
+        else if (options.mode === 'cover') {
+            const dynamic = options.aspectRatio;
+            this.aspectRatio = dynamic.initial;
+            const supported = [...dynamic.supported];
+            if (!supported.includes(dynamic.initial)) {
+                supported.unshift(dynamic.initial);
+            }
+            this.ratioOptions = toRatioOptions(supported.map(toOption));
+        }
+        else {
+            const dynamic = options.aspectRatio;
+            const initialRatio = dynamic.initial ?? (dynamic.allowFreeCrop ? null : (dynamic.supported[0] ?? null));
+            this.aspectRatio = initialRatio;
+            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));
+        }
+    }
+    get showFillColor() {
+        return this.mode === 'contain';
+    }
+    get isTransparentFill() {
+        return ColorHelper.isTransparent(this.fillColor);
+    }
+    get effectiveCanvasRatio() {
+        return this.aspectRatio ?? this._worker?.canvasRatio ?? null;
+    }
+    get naturalWidth() {
+        return this._worker?.naturalWidth ?? 0;
+    }
+    get naturalHeight() {
+        return this._worker?.naturalHeight ?? 0;
+    }
+    get cropBoxVisible() {
+        return this._worker?.cropBoxVisible ?? false;
+    }
+    get dragMode() {
+        return this._worker?.dragMode ?? 'move';
+    }
+    init = async (params) => {
+        this.destroy();
+        this.loading = true;
+        try {
+            let resolvedSrc = params.src;
+            if (this.corsMode === 'fetch') {
+                const file = await FileWithBlobDataHelper.fromUrl(params.src);
+                resolvedSrc = file ? file.blobUrl : params.src;
+                this._originalSrc = resolvedSrc;
+            }
+            const workerParams = {
+                originalSrc: resolvedSrc,
+                image: params.cropperImage,
+                selection: params.cropperSelection,
+                canvas: params.cropperCanvas,
+                selectHandle: params.selectHandle
+            };
+            this._worker = this.mode === 'cover' ? new ImgCropperCoverWorker(workerParams) : new ImgCropperContainWorker(workerParams);
+            await this._worker.ready();
+            this.ready = 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;
+        }
+    };
+    rotate = async () => {
+        await this._worker?.rotate();
+    };
+    zoomIn = () => {
+        this._worker?.zoomIn();
+    };
+    zoomOut = () => {
+        this._worker?.zoomOut();
+    };
+    reset = async () => {
+        await this._worker?.reset();
+    };
+    changeAspectRatio = async (ratio) => {
+        this.aspectRatio = ratio;
+        await this.reset();
+    };
+    crop = async () => {
+        if (!this._worker) {
+            return null;
+        }
+        this.loading = true;
+        try {
+            return await this._worker.crop({ fillColor: this.fillColor, freeRatio: this.aspectRatio === null });
+        }
+        finally {
+            this.loading = false;
+        }
+    };
+    save = async () => {
+        if (!this._worker) {
+            return null;
+        }
+        this.loading = true;
+        try {
+            return await this._worker.save({ fillColor: this.fillColor });
+        }
+        finally {
+            this.loading = false;
+        }
+    };
+    clearSelection = () => {
+        this._worker?.clearSelection();
+    };
+    enableCropMode = () => {
+        this._worker?.enableCropMode();
+    };
+    enableMoveMode = () => {
+        this._worker?.clearSelection();
+    };
+}

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

@@ -0,0 +1,4 @@
+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 CorsMode, type CropperMode, type DragMode, ImgCropper, type ImgCropperContainAspectRatio, type ImgCropperCoverAspectRatio, type ImgCropperOptions, type ImgCropperRatioOption, type ImgCropperSaveResult } from './img-cropper.svelte';

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

@@ -0,0 +1,4 @@
+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/icon-text/cmp.icon-text.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">import { Icon } from '../icon';
+let { icon, iconColor, iconPosition = 'left', trimText = false, children } = $props();
+const iconAsSnippet = $derived(icon && typeof icon === 'function' ? icon : null);
+const iconAsString = $derived(icon && typeof icon !== 'function' ? icon : null);
+</script>
+
+<span class="icon-text" class:icon-text--right={iconPosition === 'right'}>
+  <span class="icon-text__icon">
+    {#if iconAsSnippet}
+      {@render iconAsSnippet()}
+    {:else if iconAsString}
+      <Icon src={iconAsString} color={iconColor} />
+    {/if}
+  </span>
+  {#if children}
+    <span class="icon-text__text" class:icon-text__text--trim={trimText}>
+      {@render children()}
+    </span>
+  {/if}
+</span>
+
+<!--
+@component
+Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
+(rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
+before or after the text.
+
+### Props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `icon` | `string \| Snippet` | — | SVG string or custom snippet for the icon |
+| `iconColor` | `IconColor \| null` | `null` | Color preset passed to `Icon` |
+| `iconPosition` | `'left' \| 'right'` | `'left'` | Icon placement relative to text |
+| `trimText` | `boolean` | `false` | Truncate text with ellipsis when overflowing |
+| `children` | `Snippet` | — | Text content |
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--icon-text--global--font-size` | Root font size of the component | `1em` |
+| `--sc-kit--icon-text--global--color` | Root text color | — |
+| `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
+| `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
+| `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
+| `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
+| `--sc-kit--icon-text--icon--size` | Icon width/height (forwarded to `Icon`) | `1em` |
+| `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
+| `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
+-->
+
+<style>.icon-text {
+  --_icon-text--global--font-size: var(--sc-kit--icon-text--global--font-size, 1em);
+  --_icon-text--global--color: var(--sc-kit--icon-text--global--color);
+  --_icon-text--text--display: var(--sc-kit--icon-text--text--display, flex);
+  --_icon-text--text--font-size: var(--sc-kit--icon-text--text--font-size, 1em);
+  --_icon-text--icon--font-size: var(--sc-kit--icon-text--icon--font-size, var(--_icon-text--text--font-size));
+  --_icon-text--icon--color: var(--sc-kit--icon-text--icon--color);
+  --_icon-text--gap: var(--sc-kit--icon-text--gap, 0.5em);
+  --_icon-text--justify-content: var(--sc-kit--icon-text--justify-content, normal);
+  --_icon-text--icon--size: var(--sc-kit--icon-text--icon--size, 1em);
+  display: flex;
+  align-items: center;
+  justify-content: var(--_icon-text--justify-content);
+  font-size: var(--_icon-text--global--font-size);
+  gap: var(--_icon-text--gap);
+  color: var(--_icon-text--global--color);
+  min-width: 0;
+}
+.icon-text--right {
+  flex-direction: row-reverse;
+}
+.icon-text__text {
+  font-size: var(--_icon-text--text--font-size);
+  display: var(--_icon-text--text--display);
+}
+.icon-text__text--trim {
+  display: block;
+  flex: 1;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.icon-text__icon {
+  font-size: var(--_icon-text--icon--font-size);
+  color: var(--_icon-text--icon--color);
+  display: flex;
+  --sc-kit--icon--color: var(--_icon-text--icon--color, var(--_icon-text--global--color));
+  --sc-kit--icon--size: var(--_icon-text--icon--size);
+}</style>

package/dist/ui/icon-text/cmp.icon-text.svelte.d.ts

@@ -0,0 +1,39 @@
+import { type IconColor } from '../icon';
+import type { Snippet } from 'svelte';
+type Props = {
+    icon?: string | Snippet;
+    iconColor?: IconColor | null;
+    iconPosition?: 'left' | 'right';
+    trimText?: boolean;
+    children?: Snippet;
+};
+/**
+ * Displays an icon alongside text in a horizontal layout. The icon can be an SVG string
+ * (rendered via `Icon`) or a custom `Snippet`. Use `iconPosition` to place the icon
+ * before or after the text.
+ *
+ * ### Props
+ * | Prop | Type | Default | Description |
+ * |---|---|---|---|
+ * | `icon` | `string \| Snippet` | — | SVG string or custom snippet for the icon |
+ * | `iconColor` | `IconColor \| null` | `null` | Color preset passed to `Icon` |
+ * | `iconPosition` | `'left' \| 'right'` | `'left'` | Icon placement relative to text |
+ * | `trimText` | `boolean` | `false` | Truncate text with ellipsis when overflowing |
+ * | `children` | `Snippet` | — | Text content |
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--icon-text--global--font-size` | Root font size of the component | `1em` |
+ * | `--sc-kit--icon-text--global--color` | Root text color | — |
+ * | `--sc-kit--icon-text--text--display` | Display mode of the text slot (set `none` to hide) | `flex` |
+ * | `--sc-kit--icon-text--text--font-size` | Font size of the text slot | `1em` |
+ * | `--sc-kit--icon-text--icon--font-size` | Font size of the icon slot | text font size |
+ * | `--sc-kit--icon-text--icon--color` | Icon color (also forwarded to `Icon`) | global color |
+ * | `--sc-kit--icon-text--icon--size` | Icon width/height (forwarded to `Icon`) | `1em` |
+ * | `--sc-kit--icon-text--gap` | Gap between icon and text | `0.5em` |
+ * | `--sc-kit--icon-text--justify-content` | Flex justify-content | `normal` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/icon-text/index.d.ts

@@ -0,0 +1 @@
+export { default as IconText } from './cmp.icon-text.svelte';

package/dist/ui/icon-text/index.js

@@ -0,0 +1 @@
+export { default as IconText } from './cmp.icon-text.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -92,26 +92,42 @@
       "types": "./dist/ui/card-actions/index.d.ts",
       "svelte": "./dist/ui/card-actions/index.js"
     },
+    "./ui/color-picker": {
+      "types": "./dist/ui/color-picker/index.d.ts",
+      "svelte": "./dist/ui/color-picker/index.js"
+    },
+    "./ui/cropper": {
+      "types": "./dist/ui/cropper/img-cropper/index.d.ts",
+      "svelte": "./dist/ui/cropper/img-cropper/index.js"
+    },
     "./ui/dialog": {
       "types": "./dist/ui/dialog/index.d.ts",
       "svelte": "./dist/ui/dialog/index.js"
     },
-    "./ui/dynamic-component": {
-      "types": "./dist/ui/dynamic-component/index.d.ts",
-      "svelte": "./dist/ui/dynamic-component/index.js"
-    },
     "./ui/dropdown": {
       "types": "./dist/ui/dropdown/index.d.ts",
       "svelte": "./dist/ui/dropdown/index.js"
     },
+    "./ui/dynamic-component": {
+      "types": "./dist/ui/dynamic-component/index.d.ts",
+      "svelte": "./dist/ui/dynamic-component/index.js"
+    },
     "./ui/icon": {
       "types": "./dist/ui/icon/index.d.ts",
       "svelte": "./dist/ui/icon/index.js"
     },
+    "./ui/icon-text": {
+      "types": "./dist/ui/icon-text/index.d.ts",
+      "svelte": "./dist/ui/icon-text/index.js"
+    },
     "./ui/image": {
       "types": "./dist/ui/image/index.d.ts",
       "svelte": "./dist/ui/image/index.js"
     },
+    "./ui/image-editor-dialog": {
+      "types": "./dist/ui/cropper/image-editor-dialog/index.d.ts",
+      "svelte": "./dist/ui/cropper/image-editor-dialog/index.js"
+    },
     "./ui/infinite-scrolling": {
       "types": "./dist/ui/infinite-scrolling/index.d.ts",
       "svelte": "./dist/ui/infinite-scrolling/index.js"
@@ -196,12 +212,15 @@
     "@fluentui/svg-icons": "^1.1.318",
     "@popperjs/core": "^2.11.8",
     "@urql/core": "^5.2.0 || ^6.0.0",
+    "colord": "^2.9.3",
+    "cropperjs": "^2.1.0",
     "dequal": "^2.0.0",
     "dompurify": "^3.3.0",
     "mime": "^4.1.0",
     "nanoid": "^5.1.6",
     "rfdc": "^1.4.1",
     "svelte": "^5.50.0",
+    "svelte-awesome-color-picker": "^4.1.1",
     "wheel-gestures": "^2.2.48",
     "yup": "^1.6.1"
   },
@@ -216,6 +235,8 @@
     "@types/node": "^25.2.3",
     "@urql/core": "^6.0.1",
     "autoprefixer": "^10.4.24",
+    "colord": "^2.9.3",
+    "cropperjs": "^2.1.0",
     "dequal": "^2.0.3",
     "dompurify": "^3.3.1",
     "eslint": "^9.39.2",
@@ -237,6 +258,7 @@
     "rfdc": "^1.4.1",
     "sass": "^1.97.3",
     "svelte": "^5.51.0",
+    "svelte-awesome-color-picker": "^4.1.1",
     "svelte-check": "^4.4.0",
     "svelte-preprocess": "^6.0.3",
     "svelte-sonner": "^1.0.7",