@profidev/pleiades 1.7.0

package/dist/components/ui-extra/file-drop-zone/file-drop-zone.svelte.js

@@ -0,0 +1,157 @@
+import { Context } from 'runed';
+class FileDropZoneState {
+    opts;
+    uploading = $state(false);
+    constructor(opts) {
+        this.opts = opts;
+        if (this.opts.maxFiles !== undefined && this.opts.fileCount === undefined) {
+            console.warn('Make sure to provide FileDropZone with `fileCount` when using the `maxFiles` prompt');
+        }
+        this.onchange = this.onchange.bind(this);
+        this.ondrop = this.ondrop.bind(this);
+    }
+    async ondrop(e) {
+        if (this.opts.disabled.current || !this.canUploadFiles)
+            return;
+        e.preventDefault();
+        const droppedFiles = Array.from(e.dataTransfer?.files ?? []);
+        await this.upload(droppedFiles);
+    }
+    async onchange(e) {
+        if (this.opts.disabled.current)
+            return;
+        const selectedFiles = e.currentTarget.files;
+        if (!selectedFiles)
+            return;
+        await this.upload(Array.from(selectedFiles));
+        // this if a file fails and we upload the same file again we still get feedback
+        e.target.value = '';
+    }
+    shouldAcceptFile(file, fileNumber) {
+        if (this.opts.maxFileSize.current !== undefined &&
+            file.size > this.opts.maxFileSize.current)
+            return 'Maximum file size exceeded';
+        if (this.opts.maxFiles.current !== undefined &&
+            fileNumber > this.opts.maxFiles.current)
+            return 'Maximum files uploaded';
+        if (!this.opts.accept.current)
+            return undefined;
+        const acceptedTypes = this.opts.accept.current
+            .split(',')
+            .map((a) => a.trim().toLowerCase());
+        const fileType = file.type.toLowerCase();
+        const fileName = file.name.toLowerCase();
+        const isAcceptable = acceptedTypes.some((pattern) => {
+            // check extension like .mp4
+            if (fileType === '' || pattern.startsWith('.')) {
+                return fileName.endsWith(pattern);
+            }
+            // if pattern has wild card like video/*
+            if (pattern.endsWith('/*')) {
+                const baseType = pattern.slice(0, pattern.indexOf('/*'));
+                return fileType.startsWith(baseType + '/');
+            }
+            // otherwise it must be a specific type like video/mp4
+            return fileType === pattern;
+        });
+        if (!isAcceptable)
+            return 'File type not allowed';
+        return undefined;
+    }
+    upload = async (uploadFiles) => {
+        this.uploading = true;
+        const validFiles = [];
+        for (let i = 0; i < uploadFiles.length; i++) {
+            const file = uploadFiles[i];
+            const rejectedReason = this.shouldAcceptFile(file, (this.opts.fileCount?.current ?? 0) + i + 1);
+            if (rejectedReason) {
+                this.opts.onFileRejected.current?.({ file, reason: rejectedReason });
+                continue;
+            }
+            validFiles.push(file);
+        }
+        await this.opts.onUpload.current?.(validFiles);
+        this.uploading = false;
+    };
+    canUploadFiles = $derived.by(() => {
+        if (this.opts.disabled.current)
+            return false;
+        if (this.uploading)
+            return false;
+        if (this.opts.maxFiles.current !== undefined &&
+            this.opts.fileCount.current !== undefined &&
+            this.opts.fileCount.current >= this.opts.maxFiles.current)
+            return false;
+        return true;
+    });
+    props = $derived.by(() => ({
+        disabled: !this.canUploadFiles,
+        id: this.opts.id.current,
+        accept: this.opts.accept.current,
+        multiple: this.opts.maxFiles.current === undefined ||
+            this.opts.maxFiles.current - (this.opts.fileCount.current ?? 0) > 1,
+        type: 'file',
+        onchange: this.onchange
+    }));
+}
+class FileDropZoneTrigger {
+    rootState;
+    constructor(rootState) {
+        this.rootState = rootState;
+    }
+    ondragover(e) {
+        e.preventDefault();
+    }
+    ondrop(e) {
+        this.rootState.ondrop(e);
+    }
+    props = $derived.by(() => ({
+        ondragover: this.ondragover.bind(this),
+        ondrop: this.ondrop.bind(this),
+        for: this.rootState.opts.id.current,
+        'aria-disabled': !this.rootState.canUploadFiles
+    }));
+}
+class FileDropZoneTextareaState {
+    opts;
+    rootState;
+    constructor(opts, rootState) {
+        this.opts = opts;
+        this.rootState = rootState;
+    }
+    ondragover(e) {
+        e.preventDefault();
+        this.opts.ondragover.current?.(e);
+    }
+    ondrop(e) {
+        this.rootState.ondrop(e);
+        this.opts.ondrop.current?.(e);
+    }
+    onpaste(e) {
+        const clipboardData = e.clipboardData;
+        if (!clipboardData) {
+            this.opts.onpaste.current?.(e);
+            return;
+        }
+        const files = Array.from(clipboardData.items)
+            .map((item) => item.getAsFile())
+            .filter((file) => file !== null);
+        this.rootState.upload(files);
+        this.opts.onpaste.current?.(e);
+    }
+    props = $derived.by(() => ({
+        ondragover: this.ondragover.bind(this),
+        ondrop: this.ondrop.bind(this),
+        onpaste: this.onpaste.bind(this)
+    }));
+}
+const ctx = new Context('file-drop-zone-state');
+export function useFileDropZone(opts) {
+    return ctx.set(new FileDropZoneState(opts));
+}
+export function useFileDropZoneTrigger() {
+    return new FileDropZoneTrigger(ctx.get());
+}
+export function useFileDropZoneTextarea(opts) {
+    return new FileDropZoneTextareaState(opts, ctx.get());
+}

package/dist/components/ui-extra/file-drop-zone/index.d.ts

@@ -0,0 +1,13 @@
+import Root from './file-drop-zone.svelte';
+import Trigger from './file-drop-zone-trigger.svelte';
+import Textarea from './file-drop-zone-textarea.svelte';
+import type { FileDropZoneRootProps, FileRejectedReason } from './types';
+export declare function displaySize(bytes: number): string;
+export declare const BYTE = 1;
+export declare const KILOBYTE = 1000;
+export declare const MEGABYTE: number;
+export declare const GIGABYTE: number;
+export declare const ACCEPT_IMAGE = "image/*";
+export declare const ACCEPT_VIDEO = "video/*";
+export declare const ACCEPT_AUDIO = "audio/*";
+export { Root, Trigger, Textarea, type FileDropZoneRootProps, type FileRejectedReason };

package/dist/components/ui-extra/file-drop-zone/index.js

@@ -0,0 +1,22 @@
+import Root from './file-drop-zone.svelte';
+import Trigger from './file-drop-zone-trigger.svelte';
+import Textarea from './file-drop-zone-textarea.svelte';
+export function displaySize(bytes) {
+    if (bytes < KILOBYTE)
+        return `${bytes.toFixed(0)} B`;
+    if (bytes < MEGABYTE)
+        return `${(bytes / KILOBYTE).toFixed(0)} KB`;
+    if (bytes < GIGABYTE)
+        return `${(bytes / MEGABYTE).toFixed(0)} MB`;
+    return `${(bytes / GIGABYTE).toFixed(0)} GB`;
+}
+// Utilities for working with file sizes
+export const BYTE = 1;
+export const KILOBYTE = 1000;
+export const MEGABYTE = 1000 * KILOBYTE;
+export const GIGABYTE = 1000 * MEGABYTE;
+// utilities for limiting accepted files
+export const ACCEPT_IMAGE = 'image/*';
+export const ACCEPT_VIDEO = 'video/*';
+export const ACCEPT_AUDIO = 'audio/*';
+export { Root, Trigger, Textarea };

package/dist/components/ui-extra/file-drop-zone/types.d.ts

@@ -0,0 +1,45 @@
+import type { WithChildren } from 'bits-ui';
+import type { WithElementRef } from 'svelte-toolbelt';
+import type { HTMLInputAttributes, HTMLLabelAttributes } from 'svelte/elements';
+export type FileRejectedReason = 'Maximum file size exceeded' | 'File type not allowed' | 'Maximum files uploaded';
+export type FileDropZoneRootPropsWithoutHTML = WithChildren<{
+    ref?: HTMLInputElement | null;
+    id?: string;
+    /** Called with the uploaded files when the user drops or clicks and selects their files.
+     *
+     * @param files
+     */
+    onUpload: (files: File[]) => Promise<void>;
+    /** The maximum amount files allowed to be uploaded */
+    maxFiles?: number;
+    fileCount?: number;
+    /** The maximum size of a file in bytes */
+    maxFileSize?: number;
+    /** Called when a file does not meet the upload criteria (size, or type) */
+    onFileRejected?: (opts: {
+        reason: FileRejectedReason;
+        file: File;
+    }) => void;
+    /** Takes a comma separated list of one or more file types.
+     *
+     *  [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)
+     *
+     * ### Usage
+     * ```svelte
+     * <FileDropZone
+     * 		accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+     * />
+     * ```
+     *
+     * ### Common Values
+     * ```svelte
+     * <FileDropZone accept="audio/*"/>
+     * <FileDropZone accept="image/*"/>
+     * <FileDropZone accept="video/*"/>
+     * ```
+     */
+    accept?: string;
+}>;
+export type FileDropZoneRootProps = FileDropZoneRootPropsWithoutHTML & Omit<HTMLInputAttributes, 'multiple' | 'files' | 'id' | 'class'>;
+export type FileDropZoneTriggerPropsWithoutHTML = WithChildren<WithElementRef<{}>>;
+export type FileDropZoneTriggerProps = FileDropZoneTriggerPropsWithoutHTML & Omit<HTMLLabelAttributes, 'for'>;

package/dist/components/ui-extra/file-drop-zone/types.js

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

package/dist/components/ui-extra/image-cropper/image-cropper-cancel.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import Button, { type ButtonProps } from '../../../blocks/button.svelte';
+  import { useImageCropperCancel } from './image-cropper.svelte.js';
+  import Trash2Icon from '@lucide/svelte/icons/trash-2';
+
+  let {
+    ref = $bindable(null),
+    variant = 'outline',
+    size = 'sm',
+    onclick,
+    ...rest
+  }: ButtonProps = $props();
+
+  const cancelState = useImageCropperCancel();
+</script>
+
+<Button
+  {...rest as /* eslint-disable-line @typescript-eslint/no-explicit-any */ any}
+  bind:ref
+  {size}
+  {variant}
+  onclick={(
+    e: MouseEvent & {
+      currentTarget: EventTarget & HTMLButtonElement;
+    }
+  ) => {
+    onclick?.(e);
+
+    cancelState.onclick();
+  }}
+>
+  <Trash2Icon />
+  <span>Cancel</span>
+</Button>

package/dist/components/ui-extra/image-cropper/image-cropper-cancel.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonProps } from '../../../blocks/button.svelte';
+declare const ImageCropperCancel: import("svelte").Component<ButtonProps, {}, "ref">;
+type ImageCropperCancel = ReturnType<typeof ImageCropperCancel>;
+export default ImageCropperCancel;

package/dist/components/ui-extra/image-cropper/image-cropper-controls.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { cn } from '../../../blocks/utils.js';
+  import type { ImageCropperControlsProps } from './types';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...rest
+  }: ImageCropperControlsProps = $props();
+</script>
+
+<div
+  {...rest}
+  bind:this={ref}
+  class={cn('flex w-full place-items-center justify-center gap-2', className)}
+>
+  {@render children?.()}
+</div>

package/dist/components/ui-extra/image-cropper/image-cropper-controls.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ImageCropperControlsProps } from './types';
+declare const ImageCropperControls: import("svelte").Component<ImageCropperControlsProps, {}, "ref">;
+type ImageCropperControls = ReturnType<typeof ImageCropperControls>;
+export default ImageCropperControls;

package/dist/components/ui-extra/image-cropper/image-cropper-crop.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import Button, { type ButtonProps } from '../../../blocks/button.svelte';
+  import { useImageCropperCrop } from './image-cropper.svelte.js';
+  import CropIcon from '@lucide/svelte/icons/crop';
+
+  let {
+    ref = $bindable(null),
+    variant = 'default',
+    size = 'sm',
+    onclick,
+    ...rest
+  }: ButtonProps = $props();
+
+  const cropState = useImageCropperCrop();
+</script>
+
+<Button
+  {...rest as /* eslint-disable-line @typescript-eslint/no-explicit-any */ any}
+  bind:ref
+  {size}
+  {variant}
+  onclick={(
+    e: MouseEvent & {
+      currentTarget: EventTarget & HTMLButtonElement;
+    }
+  ) => {
+    onclick?.(e);
+
+    cropState.onclick();
+  }}
+>
+  <CropIcon />
+  <span>Crop</span>
+</Button>

package/dist/components/ui-extra/image-cropper/image-cropper-crop.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ButtonProps } from '../../../blocks/button.svelte';
+declare const ImageCropperCrop: import("svelte").Component<ButtonProps, {}, "ref">;
+type ImageCropperCrop = ReturnType<typeof ImageCropperCrop>;
+export default ImageCropperCrop;

package/dist/components/ui-extra/image-cropper/image-cropper-cropper.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import Cropper from 'svelte-easy-crop';
+  import { useImageCropperCropper } from './image-cropper.svelte.js';
+  import type { ImageCropperCropperProps } from './types.js';
+
+  let {
+    cropShape = 'round',
+    aspect = 1,
+    showGrid = false,
+    ...rest
+  }: ImageCropperCropperProps = $props();
+
+  const cropperState = useImageCropperCropper();
+</script>
+
+<!-- This needs to be relative https://github.com/ValentinH/svelte-easy-crop#basic-usage -->
+<div class="relative h-full w-full">
+  <Cropper
+    {...rest}
+    {cropShape}
+    {aspect}
+    {showGrid}
+    image={cropperState.rootState.tempUrl}
+    oncropcomplete={cropperState.onCropComplete}
+  />
+</div>

package/dist/components/ui-extra/image-cropper/image-cropper-cropper.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ImageCropperCropperProps } from './types.js';
+declare const ImageCropperCropper: import("svelte").Component<ImageCropperCropperProps, {}, "">;
+type ImageCropperCropper = ReturnType<typeof ImageCropperCropper>;
+export default ImageCropperCropper;

package/dist/components/ui-extra/image-cropper/image-cropper-dialog.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import * as Dialog from '../dialog';
+  import { cn } from '../../../blocks/utils.js';
+  import { useImageCropperDialog } from './image-cropper.svelte.js';
+  import type { ImageCropperDialogProps } from './types';
+
+  let {
+    children,
+    class: className,
+    ...rest
+  }: ImageCropperDialogProps = $props();
+
+  const dialogState = useImageCropperDialog();
+</script>
+
+<Dialog.Root bind:open={dialogState.rootState.open}>
+  <Dialog.Content
+    {...rest}
+    showCloseButton={false}
+    class={cn(
+      'min-h-96 max-w-full rounded-none border-x-0 sm:max-w-lg sm:rounded-lg sm:border-x',
+      className
+    )}
+  >
+    <div class="flex flex-col gap-4">
+      {@render children?.()}
+    </div>
+  </Dialog.Content>
+</Dialog.Root>

package/dist/components/ui-extra/image-cropper/image-cropper-dialog.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ImageCropperDialog: import("svelte").Component<import("bits-ui").DialogContentProps, {}, "">;
+type ImageCropperDialog = ReturnType<typeof ImageCropperDialog>;
+export default ImageCropperDialog;

package/dist/components/ui-extra/image-cropper/image-cropper-preview.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import * as Avatar from '../avatar';
+  import type { ImageCropperPreviewProps } from './types';
+  import { useImageCropperPreview } from './image-cropper.svelte.js';
+  import UploadIcon from '@lucide/svelte/icons/upload';
+  import { cn } from '../../../blocks/utils.js';
+
+  let { child, class: className }: ImageCropperPreviewProps = $props();
+
+  const previewState = useImageCropperPreview();
+</script>
+
+{#if child}
+  {@render child({ src: previewState.rootState.src })}
+{:else}
+  <Avatar.Root
+    class={cn(
+      'ring-accent ring-offset-background size-20 ring-2 ring-offset-2',
+      className
+    )}
+  >
+    <Avatar.Image src={previewState.rootState.src} />
+    <Avatar.Fallback>
+      <UploadIcon class="size-4" />
+      <span class="sr-only">Upload image</span>
+    </Avatar.Fallback>
+  </Avatar.Root>
+{/if}

package/dist/components/ui-extra/image-cropper/image-cropper-preview.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ImageCropperPreviewProps } from './types';
+declare const ImageCropperPreview: import("svelte").Component<ImageCropperPreviewProps, {}, "">;
+type ImageCropperPreview = ReturnType<typeof ImageCropperPreview>;
+export default ImageCropperPreview;

package/dist/components/ui-extra/image-cropper/image-cropper-upload-trigger.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { useImageCropperTrigger } from './image-cropper.svelte.js';
+  import type { ImageCropperUploadTriggerProps } from './types';
+
+  let {
+    ref = $bindable(null),
+    children,
+    ...rest
+  }: ImageCropperUploadTriggerProps = $props();
+
+  const triggerState = useImageCropperTrigger();
+</script>
+
+<label
+  {...rest}
+  bind:this={ref}
+  for={triggerState.rootState.id}
+  class="hover:cursor-pointer"
+>
+  {@render children?.()}
+</label>

package/dist/components/ui-extra/image-cropper/image-cropper-upload-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ImageCropperUploadTriggerProps } from './types';
+declare const ImageCropperUploadTrigger: import("svelte").Component<ImageCropperUploadTriggerProps, {}, "ref">;
+type ImageCropperUploadTrigger = ReturnType<typeof ImageCropperUploadTrigger>;
+export default ImageCropperUploadTrigger;

package/dist/components/ui-extra/image-cropper/image-cropper.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { box } from 'svelte-toolbelt';
+  import { useImageCropperRoot } from './image-cropper.svelte.js';
+  import type { ImageCropperRootProps } from './types';
+  import { onDestroy } from 'svelte';
+  import { useId } from 'bits-ui';
+
+  let {
+    id = useId(),
+    src = $bindable(''),
+    onCropped = () => {},
+    onUnsupportedFile = () => {},
+    children,
+    ...rest
+  }: ImageCropperRootProps = $props();
+
+  const rootState = useImageCropperRoot({
+    id: box.with(() => id),
+    src: box.with(
+      () => src,
+      (v) => (src = v)
+    ),
+    onCropped: box.with(() => onCropped),
+    onUnsupportedFile: box.with(() => onUnsupportedFile)
+  });
+
+  onDestroy(() => rootState.dispose());
+</script>
+
+{@render children?.()}
+<input
+  {...rest}
+  onchange={(e) => {
+    const file = e.currentTarget.files?.[0];
+    if (!file) return;
+    rootState.onUpload(file);
+    // reset so that we can reupload the same file
+    (e.target! as HTMLInputElement).value = '';
+  }}
+  type="file"
+  {id}
+  style="display: none;"
+/>

package/dist/components/ui-extra/image-cropper/image-cropper.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ImageCropperRootProps } from './types';
+declare const ImageCropper: import("svelte").Component<ImageCropperRootProps, {}, "src">;
+type ImageCropper = ReturnType<typeof ImageCropper>;
+export default ImageCropper;

package/dist/components/ui-extra/image-cropper/image-cropper.svelte.js

@@ -0,0 +1,134 @@
+import { Context } from 'runed';
+import { getCroppedImg } from './utils';
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#supported_image_formats
+export const VALID_IMAGE_TYPES = [
+    'image/apng',
+    'image/avif',
+    'image/gif',
+    'image/jpeg',
+    'image/png',
+    'image/svg+xml',
+    'image/webp'
+];
+class ImageCropperRootState {
+    opts;
+    #createdUrls = $state([]);
+    open = $state(false);
+    tempUrl = $state();
+    pixelCrop = $state();
+    constructor(opts) {
+        this.opts = opts;
+        this.onUpload = this.onUpload.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+        this.onCrop = this.onCrop.bind(this);
+        this.dispose = this.dispose.bind(this);
+    }
+    onUpload(file) {
+        if (!VALID_IMAGE_TYPES.includes(file.type)) {
+            this.opts.onUnsupportedFile.current(file);
+            return;
+        }
+        this.tempUrl = URL.createObjectURL(file);
+        this.#createdUrls.push(this.tempUrl);
+        this.open = true;
+    }
+    onCancel() {
+        this.tempUrl = undefined;
+        this.open = false;
+        this.pixelCrop = undefined;
+    }
+    async onCrop() {
+        if (!this.pixelCrop || !this.tempUrl)
+            return;
+        this.opts.src.current = await getCroppedImg(this.tempUrl, this.pixelCrop);
+        this.open = false;
+        this.opts.onCropped.current(this.opts.src.current);
+    }
+    get src() {
+        return this.opts.src.current;
+    }
+    get id() {
+        return this.opts.id.current;
+    }
+    dispose() {
+        for (const url of this.#createdUrls) {
+            URL.revokeObjectURL(url);
+        }
+    }
+}
+class ImageCropperTriggerState {
+    rootState;
+    constructor(rootState) {
+        this.rootState = rootState;
+    }
+}
+class ImageCropperPreviewState {
+    rootState;
+    constructor(rootState) {
+        this.rootState = rootState;
+    }
+}
+class ImageCropperDialogState {
+    rootState;
+    constructor(rootState) {
+        this.rootState = rootState;
+    }
+}
+class ImageCropperCropperState {
+    rootState;
+    constructor(rootState) {
+        this.rootState = rootState;
+        this.onCropComplete = this.onCropComplete.bind(this);
+    }
+    onCropComplete(e) {
+        this.rootState.pixelCrop = e.pixels;
+    }
+}
+class ImageCropperCropState {
+    rootState;
+    constructor(rootState) {
+        this.rootState = rootState;
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick() {
+        this.rootState.onCrop();
+    }
+}
+class ImageCropperCancelState {
+    rootState;
+    constructor(rootState) {
+        this.rootState = rootState;
+        this.onclick = this.onclick.bind(this);
+    }
+    onclick() {
+        this.rootState.onCancel();
+    }
+}
+const ImageCropperRootContext = new Context('ImageCropper.Root');
+export const useImageCropperRoot = (props) => {
+    return ImageCropperRootContext.set(new ImageCropperRootState(props));
+};
+export const useImageCropperTrigger = () => {
+    const rootState = ImageCropperRootContext.get();
+    return new ImageCropperTriggerState(rootState);
+};
+export const useImageCropperPreview = () => {
+    const rootState = ImageCropperRootContext.get();
+    return new ImageCropperPreviewState(rootState);
+};
+export const useImageCropperDialog = () => {
+    const rootState = ImageCropperRootContext.get();
+    return new ImageCropperDialogState(rootState);
+};
+export const useImageCropperCropper = () => {
+    const rootState = ImageCropperRootContext.get();
+    return new ImageCropperCropperState(rootState);
+};
+export const useImageCropperCrop = () => {
+    const rootState = ImageCropperRootContext.get();
+    return new ImageCropperCropState(rootState);
+};
+export const useImageCropperCancel = () => {
+    const rootState = ImageCropperRootContext.get();
+    return new ImageCropperCancelState(rootState);
+};