@streamscloud/kit 0.1.8 → 0.1.10

package/dist/core/toastr/toastr.scss

@@ -1,5 +1,6 @@
-.sc-toast[data-sonner-toast] {
+.sc-toast[data-sonner-toast][data-styled='true'] {
   font-family: inherit;
+  font-size: 14px;
   --toast-close-button-start: auto;
   --toast-close-button-end: 0;
   --toast-close-button-transform: translate(35%, -35%);

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

@@ -0,0 +1,13 @@
+export declare class ColorHelper {
+    /**
+     * Normalize a color value to a clean hex string.
+     * - Strips 100% alpha (`#FF0000FF` → `#FF0000`)
+     * - Returns `''` for transparent / empty / invalid values
+     * - Preserves partial alpha (`#FF000080` stays as-is)
+     */
+    static normalizeHex(value: string | null | undefined): string;
+    /**
+     * Check whether a color value represents "no color" (empty, transparent, zero alpha).
+     */
+    static isTransparent(value: string | null | undefined): boolean;
+}

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

@@ -0,0 +1,39 @@
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+extend([namesPlugin]);
+export class ColorHelper {
+    /**
+     * Normalize a color value to a clean hex string.
+     * - Strips 100% alpha (`#FF0000FF` → `#FF0000`)
+     * - Returns `''` for transparent / empty / invalid values
+     * - Preserves partial alpha (`#FF000080` stays as-is)
+     */
+    static normalizeHex(value) {
+        if (!value) {
+            return '';
+        }
+        const parsed = colord(value);
+        if (!parsed.isValid()) {
+            return '';
+        }
+        const alpha = parsed.alpha();
+        if (alpha === 0) {
+            return '';
+        }
+        const hex = parsed.toHex().toUpperCase();
+        if (alpha === 1) {
+            return hex.substring(0, 7);
+        }
+        return hex;
+    }
+    /**
+     * Check whether a color value represents "no color" (empty, transparent, zero alpha).
+     */
+    static isTransparent(value) {
+        if (!value || value === 'transparent') {
+            return true;
+        }
+        const parsed = colord(value);
+        return !parsed.isValid() || parsed.alpha() === 0;
+    }
+}

package/dist/core/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './array-helper';
+export * from './color-helper';
 export * from './compact-number';
 export * from './base64-serializer';
 export * from './browser';

package/dist/core/utils/index.js

@@ -1,4 +1,5 @@
 export * from './array-helper';
+export * from './color-helper';
 export * from './compact-number';
 export * from './base64-serializer';
 export * from './browser';

package/dist/ui/color-picker/cmp.color-picker.svelte

@@ -0,0 +1,150 @@
+<script lang="ts">import { ColorHelper } from '../../core/utils';
+import { Dropdown } from '../dropdown';
+import { Icon } from '../icon';
+import { default as InputStub } from './cmp.input-stub.svelte';
+import { ColorPickerLocalization } from './color-picker-localization';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import IconColorF from '@fluentui/svg-icons/icons/color_20_regular.svg?raw';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+import { colord } from 'colord';
+import AwesomeColorPicker from 'svelte-awesome-color-picker';
+let { value, enableReset = false, on, children, defaultPreviewIcon } = $props();
+const loc = new ColorPickerLocalization();
+const textColor = $derived.by(() => {
+    if (!value) {
+        return null;
+    }
+    else {
+        const hex = colord(value).toHex();
+        const color = hex.substring(1, 7);
+        const red = parseInt(color.substring(0, 2), 16);
+        const green = parseInt(color.substring(2, 4), 16);
+        const blue = parseInt(color.substring(4, 6), 16);
+        if (red * 0.299 + green * 0.587 + blue * 0.114 > 149) {
+            return '#000000';
+        }
+        else {
+            return '#ffffff';
+        }
+    }
+});
+const previewBackgroundColor = $derived.by(() => {
+    if (!value) {
+        return '';
+    }
+    else {
+        return colord(value).toHex().substring(0, 7);
+    }
+});
+const resetValue = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (enableReset) {
+        on?.change?.('');
+    }
+};
+const onColorPickerInput = ({ hex }) => {
+    on?.change?.(ColorHelper.normalizeHex(hex));
+};
+</script>
+
+<div class="color-picker">
+  <Dropdown position="bottom-start" keepDropdownOpen>
+    {#snippet trigger()}
+      <div class="color-picker__trigger">
+        {#if children}
+          {@render children()}
+        {:else}
+          <InputStub
+            value={value || ''}
+            on={{}}
+            inert={true}
+            placeholder={loc.notSet}
+            --sc-kit--input--background={previewBackgroundColor}
+            --sc-kit--input--text--color={textColor}
+            --sc-kit--input--icon--color={textColor}>
+            {#snippet icon()}
+              {#if defaultPreviewIcon}
+                {@render defaultPreviewIcon()}
+              {:else}
+                <Icon src={IconColorF} color={value ? null : 'gray'} />
+              {/if}
+            {/snippet}
+            {#snippet clearButton()}
+              {#if !value}
+                <button type="button" inert={true}>
+                  <Icon src={IconChevronDown} color="gray" />
+                </button>
+              {:else}
+                <button type="button" inert={!enableReset} onclick={resetValue}>
+                  {#if enableReset}
+                    <Icon src={IconDismiss} />
+                  {:else}
+                    <Icon src={IconChevronDown} />
+                  {/if}
+                </button>
+              {/if}
+            {/snippet}
+          </InputStub>
+        {/if}
+      </div>
+    {/snippet}
+
+    <div class="color-picker__panel">
+      <AwesomeColorPicker hex={value ? colord(value).toHex() : null} isDialog={false} onInput={onColorPickerInput} textInputModes={['hex']} />
+    </div>
+  </Dropdown>
+</div>
+
+<!--
+@component
+A color picker that displays a swatch preview trigger and opens a dropdown panel with a full color picker (powered by svelte-awesome-color-picker).
+
+### Props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string \| null \| undefined` | — | Current color value (any CSS color format) |
+| `enableReset` | `boolean` | `false` | Show dismiss icon to clear the value |
+| `on.change` | `(value: string) => void` | — | Fires when color changes |
+| `children` | `Snippet` | — | Custom trigger snippet (replaces default preview) |
+| `defaultPreviewIcon` | `Snippet` | — | Custom icon in the default preview trigger |
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--color-picker--width` | Component width | `100%` |
+| `--sc-kit--color-picker--default-preview--font-size` | Preview text font size | inherited |
+| `--sc-kit--color-picker--default-preview--icon-size` | Preview icon size | `1rem` |
+| `--sc-kit--color-picker--default-preview--height` | Preview trigger height | inherited |
+-->
+
+<style>.color-picker {
+  --sc-kit--dropdown--width: 100%;
+  --_color-picker--default-preview--font-size: var(--sc-kit--color-picker--default-preview--font-size);
+  --_color-picker--default-preview--icon-size: var(--sc-kit--color-picker--default-preview--icon-size, 1rem);
+  --_color-picker--default-preview--height: var(--sc-kit--color-picker--default-preview--height);
+  --_color-picker--width: var(--sc-kit--color-picker--width, 100%);
+  display: flex;
+  position: relative;
+  width: var(--_color-picker--width);
+}
+.color-picker__trigger {
+  width: 100%;
+  --sc-kit--input--text--font-size: var(--_color-picker--default-preview--font-size);
+  --sc-kit--input--icon--size: var(--_color-picker--default-preview--icon-size);
+  --sc-kit--input--height: var(--_color-picker--default-preview--height);
+  --sc-kit--input--cursor--inert: pointer;
+}
+.color-picker__panel {
+  --focus-color: none;
+  --cp-bg-color: light-dark(#ffffff, #1c1c1c);
+  --cp-border-color: light-dark(#d1d5db, #4b5563);
+  --cp-input-color: light-dark(#f2f2f3, #4b5563);
+  --cp-text-color: light-dark(#2e2e2e, #ffffff);
+}
+.color-picker__panel :global(.button-like) {
+  display: none;
+}
+.color-picker__panel :global(.wrapper.is-open) {
+  margin: 0;
+}</style>

package/dist/ui/color-picker/cmp.color-picker.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    value: string | null | undefined;
+    enableReset?: boolean;
+    on?: {
+        change?: (value: string) => void;
+    };
+    children?: Snippet;
+    defaultPreviewIcon?: Snippet;
+};
+/**
+ * A color picker that displays a swatch preview trigger and opens a dropdown panel with a full color picker (powered by svelte-awesome-color-picker).
+ *
+ * ### Props
+ * | Prop | Type | Default | Description |
+ * |---|---|---|---|
+ * | `value` | `string \| null \| undefined` | — | Current color value (any CSS color format) |
+ * | `enableReset` | `boolean` | `false` | Show dismiss icon to clear the value |
+ * | `on.change` | `(value: string) => void` | — | Fires when color changes |
+ * | `children` | `Snippet` | — | Custom trigger snippet (replaces default preview) |
+ * | `defaultPreviewIcon` | `Snippet` | — | Custom icon in the default preview trigger |
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--color-picker--width` | Component width | `100%` |
+ * | `--sc-kit--color-picker--default-preview--font-size` | Preview text font size | inherited |
+ * | `--sc-kit--color-picker--default-preview--icon-size` | Preview icon size | `1rem` |
+ * | `--sc-kit--color-picker--default-preview--height` | Preview trigger height | inherited |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/color-picker/cmp.input-stub.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">import { untrack } from 'svelte';
+// inert and on are accepted for Input-compatibility but unused in the stub
+let { value, placeholder = '', inert, icon, clearButton, on } = $props();
+untrack(() => void inert);
+untrack(() => void on);
+</script>
+
+<div class="input-stub">
+  {#if icon}
+    <span class="input-stub__icon">
+      {@render icon()}
+    </span>
+  {/if}
+  <span class="input-stub__text" class:input-stub__text--placeholder={!value}>
+    {value || placeholder}
+  </span>
+  {#if clearButton}
+    <span class="input-stub__action">
+      {@render clearButton()}
+    </span>
+  {/if}
+</div>
+
+<!--
+@component
+Minimal input-field emulation for use inside ColorPicker.
+Reads `--sc-kit--input--*` CSS variables set by the parent. Will be replaced by a real Input component when available.
+
+### Props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string` | — | Displayed text |
+| `placeholder` | `string` | `''` | Placeholder when value is empty |
+| `inert` | `boolean` | — | Reserved for future Input compatibility |
+| `on` | `Record<string, never>` | — | Reserved for future Input compatibility |
+| `icon` | `Snippet` | — | Left icon slot |
+| `clearButton` | `Snippet` | — | Right action slot |
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--input--height` | Container height | `2rem` |
+| `--sc-kit--input--background` | Background color | light-dark white/dark |
+| `--sc-kit--input--border-color` | Border color | light-dark neutral |
+| `--sc-kit--input--border-radius` | Border radius | `0.25rem` |
+| `--sc-kit--input--text--font-size` | Text font size | `0.875rem` |
+| `--sc-kit--input--text--color` | Text color | light-dark gray/white |
+| `--sc-kit--input--icon--size` | Icon size | `1rem` |
+| `--sc-kit--input--icon--color` | Icon color | inherited |
+| `--sc-kit--input--padding--hor` | Horizontal padding | `0.625rem` |
+| `--sc-kit--input--cursor--inert` | Cursor when inert | `default` |
+-->
+
+<style>.input-stub {
+  --_input--height: var(--sc-kit--input--height, 2rem);
+  --_input--background: var(--sc-kit--input--background, light-dark(#ffffff, #222222));
+  --_input--border-color: var(--sc-kit--input--border-color, light-dark(#d1d5db, #383838));
+  --_input--border-radius: var(--sc-kit--input--border-radius, 0.25rem);
+  --_input--text-font-size: var(--sc-kit--input--text--font-size, 0.875rem);
+  --_input--text-color: var(--sc-kit--input--text--color, light-dark(#2e2e2e, #ffffff));
+  --_input--icon-size: var(--sc-kit--input--icon--size, 1rem);
+  --_input--icon-color: var(--sc-kit--input--icon--color);
+  --_input--padding-hor: var(--sc-kit--input--padding--hor, 0.625rem);
+  --_input--cursor: var(--sc-kit--input--cursor--inert, default);
+  display: flex;
+  align-items: center;
+  height: var(--_input--height);
+  background: var(--_input--background);
+  border: 1px solid var(--_input--border-color);
+  border-radius: var(--_input--border-radius);
+  padding-inline: var(--_input--padding-hor);
+  color: var(--_input--text-color);
+  cursor: var(--_input--cursor);
+}
+.input-stub__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 0.625rem;
+  --sc-kit--icon--size: var(--_input--icon-size);
+  --sc-kit--icon--color: var(--_input--icon-color);
+}
+.input-stub__text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--_input--text-font-size);
+}
+.input-stub__text--placeholder {
+  color: light-dark(#9ca3af, #6b7280);
+}
+.input-stub__action {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: auto;
+}</style>

package/dist/ui/color-picker/cmp.input-stub.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type Snippet } from 'svelte';
+type Props = {
+    value: string;
+    placeholder?: string;
+    inert?: boolean;
+    on?: Record<string, never>;
+    icon?: Snippet;
+    clearButton?: Snippet;
+};
+/**
+ * Minimal input-field emulation for use inside ColorPicker.
+ * Reads `--sc-kit--input--*` CSS variables set by the parent. Will be replaced by a real Input component when available.
+ *
+ * ### Props
+ * | Prop | Type | Default | Description |
+ * |---|---|---|---|
+ * | `value` | `string` | — | Displayed text |
+ * | `placeholder` | `string` | `''` | Placeholder when value is empty |
+ * | `inert` | `boolean` | — | Reserved for future Input compatibility |
+ * | `on` | `Record<string, never>` | — | Reserved for future Input compatibility |
+ * | `icon` | `Snippet` | — | Left icon slot |
+ * | `clearButton` | `Snippet` | — | Right action slot |
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--input--height` | Container height | `2rem` |
+ * | `--sc-kit--input--background` | Background color | light-dark white/dark |
+ * | `--sc-kit--input--border-color` | Border color | light-dark neutral |
+ * | `--sc-kit--input--border-radius` | Border radius | `0.25rem` |
+ * | `--sc-kit--input--text--font-size` | Text font size | `0.875rem` |
+ * | `--sc-kit--input--text--color` | Text color | light-dark gray/white |
+ * | `--sc-kit--input--icon--size` | Icon size | `1rem` |
+ * | `--sc-kit--input--icon--color` | Icon color | inherited |
+ * | `--sc-kit--input--padding--hor` | Horizontal padding | `0.625rem` |
+ * | `--sc-kit--input--cursor--inert` | Cursor when inert | `default` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/color-picker/color-picker-localization.d.ts

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

package/dist/ui/color-picker/color-picker-localization.js

@@ -0,0 +1,12 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    notSet: {
+        en: 'Not set',
+        no: 'Ikke angitt'
+    }
+};
+export class ColorPickerLocalization {
+    get notSet() {
+        return loc.notSet[AppLocale.current];
+    }
+}

package/dist/ui/color-picker/index.d.ts

@@ -0,0 +1 @@
+export { default as ColorPicker } from './cmp.color-picker.svelte';

package/dist/ui/color-picker/index.js

@@ -0,0 +1 @@
+export { default as ColorPicker } from './cmp.color-picker.svelte';

package/dist/ui/cropper/image-editor-dialog/cmp.image-editor-dialog.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">import { FileWithBlobDataHelper } from '../../../core/files';
+import { Toastr } from '../../../core/toastr';
+import { Dialog, DialogButton, DialogCancelButton, DialogSize } from '../../dialog';
+import { ImgCropper, ImgCropperControls, 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(() => {
+    const showImageShadow = data.showImageShadow ?? true;
+    if (data.mode === 'contain') {
+        return new ImgCropper({ mode: 'contain', aspectRatio: data.aspectRatio, fillColor: data.fillColor, showImageShadow });
+    }
+    return new ImgCropper({ mode: 'cover', aspectRatio: data.aspectRatio, fillColor: data.fillColor, showImageShadow });
+});
+const url = $derived(data.url);
+const save = async () => {
+    try {
+        const result = await cropper.save();
+        if (!result) {
+            Toastr.error(loc.saveError);
+            return;
+        }
+        const croppedFile = Object.assign(FileWithBlobDataHelper.fromBase64(result.dataUrl), {
+            width: result.width,
+            height: result.height
+        });
+        controller.ok({ croppedFile, selectedRatio: cropper.aspectRatio });
+    }
+    catch {
+        Toastr.error(loc.saveError);
+    }
+};
+const cancel = () => {
+    controller.cancel();
+};
+$effect(() => untrack(() => {
+    controller.updateSettings({ closeOnClickOutside: false, closeOnEsc: true });
+    controller.updateContainerSettings({ size: DialogSize.FullHD });
+}));
+</script>
+
+<div class="image-editor-dialog">
+  <Dialog controller={controller}>
+    {#snippet title()}
+      {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>
+    {/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>
+      </div>
+    {/snippet}
+  </Dialog>
+</div>
+
+<style>.image-editor-dialog {
+  --sc-kit--dialog--height: calc(100vh - 2.5rem);
+  display: contents;
+}
+.image-editor-dialog__body {
+  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;
+}
+.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;
+  gap: 1.5rem;
+  margin-left: 1rem;
+}</style>

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

@@ -0,0 +1,9 @@
+import { type DialogController } from '../../dialog';
+import type { ImageEditorDialogOptions, ImageEditorDialogResult } from './types';
+type Props = {
+    controller: DialogController<ImageEditorDialogResult>;
+    data: ImageEditorDialogOptions;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,6 @@
+export declare class ImageEditorDialogLocalization {
+    get title(): string;
+    get cancel(): string;
+    get save(): string;
+    get saveError(): string;
+}

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

@@ -0,0 +1,33 @@
+import { AppLocale } from '../../../core/locale';
+const loc = {
+    title: {
+        en: 'Edit Image',
+        no: 'Rediger bilde'
+    },
+    cancel: {
+        en: 'Cancel',
+        no: 'Avbryt'
+    },
+    save: {
+        en: 'Save',
+        no: 'Lagre'
+    },
+    saveError: {
+        en: 'Failed to save image',
+        no: 'Kunne ikke lagre bildet'
+    }
+};
+export class ImageEditorDialogLocalization {
+    get title() {
+        return loc.title[AppLocale.current];
+    }
+    get cancel() {
+        return loc.cancel[AppLocale.current];
+    }
+    get save() {
+        return loc.save[AppLocale.current];
+    }
+    get saveError() {
+        return loc.saveError[AppLocale.current];
+    }
+}

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

@@ -0,0 +1,21 @@
+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.
+ *
+ * ### Modes
+ * - **`cover`** (default) — image fills the canvas; crop selects a visible region.
+ * - **`contain`** — image is fitted inside the canvas with optional fill color.
+ *
+ * ### Aspect ratio
+ * - `number` — fixed ratio, no dropdown.
+ * - `{ initial, supported }` (cover) — dropdown with supported ratios.
+ * - `{ initial?, supported, allowFreeCrop? }` (contain) — dropdown with optional free crop.
+ * - Omitted — free crop in contain, full canvas in cover.
+ *
+ * ### Result
+ * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
+ * - `selectedRatio` — active aspect ratio at save time (`null` for free crop).
+ */
+export declare const openImageEditorDialog: (options: ImageEditorDialogOptions) => Promise<DialogResult<ImageEditorDialogResult>>;
+export type { CroppedFile, ImageEditorDialogOptions, ImageEditorDialogResult } from './types';

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

@@ -0,0 +1,25 @@
+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.
+ *
+ * ### Modes
+ * - **`cover`** (default) — image fills the canvas; crop selects a visible region.
+ * - **`contain`** — image is fitted inside the canvas with optional fill color.
+ *
+ * ### Aspect ratio
+ * - `number` — fixed ratio, no dropdown.
+ * - `{ initial, supported }` (cover) — dropdown with supported ratios.
+ * - `{ initial?, supported, allowFreeCrop? }` (contain) — dropdown with optional free crop.
+ * - Omitted — free crop in contain, full canvas in cover.
+ *
+ * ### Result
+ * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
+ * - `selectedRatio` — active aspect ratio at save time (`null` for free crop).
+ */
+export const openImageEditorDialog = async (options) => {
+    return await Dialogs.open({
+        view: ImageEditorDialog,
+        data: options
+    });
+};

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

@@ -0,0 +1,25 @@
+import type { FileWithBlobUrl } from '../../../core/files';
+import type { ImgCropperContainAspectRatio, ImgCropperCoverAspectRatio } from '../img-cropper';
+export type ImageEditorDialogOptions = ImageEditorDialogCoverOptions | ImageEditorDialogContainOptions;
+type ImageEditorDialogOptionsBase = {
+    url: string;
+    fillColor?: string;
+    showImageShadow?: boolean;
+};
+type ImageEditorDialogCoverOptions = ImageEditorDialogOptionsBase & {
+    mode?: 'cover';
+    aspectRatio?: number | ImgCropperCoverAspectRatio;
+};
+type ImageEditorDialogContainOptions = ImageEditorDialogOptionsBase & {
+    mode: 'contain';
+    aspectRatio?: number | ImgCropperContainAspectRatio;
+};
+export type CroppedFile = FileWithBlobUrl & {
+    width: number;
+    height: number;
+};
+export type ImageEditorDialogResult = {
+    croppedFile: CroppedFile;
+    selectedRatio: number | null;
+};
+export {};

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

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