@streamscloud/kit 0.1.9 → 0.1.10

package/dist/ui/cropper/img-cropper/cmp.img-cropper-controls.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">import { ImgCropperLocalization } from './img-cropper-localization';
+const { cropper } = $props();
+const loc = new ImgCropperLocalization();
+</script>
+
+{#if cropper.cropBoxVisible}
+  <div class="img-cropper-controls">
+    <button type="button" class="img-cropper-controls__button img-cropper-controls__button--apply" onclick={() => cropper.crop()}>{loc.apply}</button>
+    <button type="button" class="img-cropper-controls__button img-cropper-controls__button--cancel" onclick={() => cropper.clearSelection()}>
+      {loc.cancel}
+    </button>
+  </div>
+{/if}
+
+<!--
+@component
+Apply/Cancel controls for the image cropper. Renders conditionally when a crop box is active.
+Can be placed anywhere in the layout.
+
+### Props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `cropper` | `ImgCropper` | — | Cropper controller instance |
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--img-cropper-controls--background` | Panel background | `transparent` |
+-->
+
+<style>.img-cropper-controls {
+  --_img-cropper-controls--background: var(--sc-kit--img-cropper-controls--background, transparent);
+  width: 15rem;
+  padding: 0.3125rem;
+  display: flex;
+  gap: 0.625rem;
+  background: var(--_img-cropper-controls--background);
+}
+.img-cropper-controls__button {
+  font-size: 0.75rem;
+  padding: 0.25rem 1rem;
+  border-radius: 0.25rem;
+  max-width: 8rem;
+  height: 2rem;
+  display: inline-flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color linear 0.2s, color linear 0.2s;
+}
+.img-cropper-controls__button--apply {
+  color: #ffffff;
+  background: #0cce6b;
+}
+.img-cropper-controls__button--apply:hover {
+  background: #0bbc60;
+}
+.img-cropper-controls__button--cancel {
+  color: light-dark(#2e2e2e, #ffffff);
+  background: light-dark(#ffffff, #222222);
+  border: 1px solid light-dark(#e5e7eb, #242424);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+}
+.img-cropper-controls__button--cancel:hover {
+  background: light-dark(#f9fafb, #242424);
+}</style>

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

@@ -0,0 +1,21 @@
+import type { ImgCropper } from './img-cropper.svelte';
+type Props = {
+    cropper: ImgCropper;
+};
+/**
+ * Apply/Cancel controls for the image cropper. Renders conditionally when a crop box is active.
+ * Can be placed anywhere in the layout.
+ *
+ * ### Props
+ * | Prop | Type | Default | Description |
+ * |---|---|---|---|
+ * | `cropper` | `ImgCropper` | — | Cropper controller instance |
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--img-cropper-controls--background` | Panel background | `transparent` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/cropper/img-cropper/cmp.img-cropper-toolbar.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">import { ColorPicker } from '../../color-picker';
+import { Dropdown } from '../../dropdown';
+import { Icon } from '../../icon';
+import { IconText } from '../../icon-text';
+import { ImgCropperToolbarLocalization } from './img-cropper-toolbar-localization';
+import IconArrowMove from '@fluentui/svg-icons/icons/arrow_move_20_regular.svg?raw';
+import IconReset from '@fluentui/svg-icons/icons/arrow_reset_20_regular.svg?raw';
+import IconArrowRotateClockwise from '@fluentui/svg-icons/icons/arrow_rotate_clockwise_20_regular.svg?raw';
+import IconCrop from '@fluentui/svg-icons/icons/crop_20_regular.svg?raw';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+import IconZoomIn from '@fluentui/svg-icons/icons/zoom_in_20_regular.svg?raw';
+import IconZoomOut from '@fluentui/svg-icons/icons/zoom_out_20_regular.svg?raw';
+const { cropper, children } = $props();
+const loc = new ImgCropperToolbarLocalization();
+const ratioLabel = (option) => (option.value === null ? loc.free : option.label);
+const selectedRatioLabel = $derived.by(() => {
+    const found = cropper.ratioOptions?.find((r) => r.value === cropper.aspectRatio);
+    return found ? ratioLabel(found) : loc.free;
+});
+</script>
+
+<div class="img-cropper-toolbar">
+  <button
+    type="button"
+    class="img-cropper-toolbar__button"
+    class:img-cropper-toolbar__button--active={cropper.dragMode === 'move'}
+    onclick={() => cropper.enableMoveMode()}>
+    <IconText icon={IconArrowMove}>{loc.move}</IconText>
+  </button>
+  <button
+    type="button"
+    class="img-cropper-toolbar__button"
+    class:img-cropper-toolbar__button--active={cropper.dragMode === 'crop'}
+    onclick={() => cropper.enableCropMode()}>
+    <IconText icon={IconCrop}>{loc.crop}</IconText>
+  </button>
+  <button type="button" class="img-cropper-toolbar__button" onclick={() => cropper.zoomIn()}>
+    <IconText icon={IconZoomIn}>{loc.zoomIn}</IconText>
+  </button>
+  <button type="button" class="img-cropper-toolbar__button" onclick={() => cropper.zoomOut()}>
+    <IconText icon={IconZoomOut}>{loc.zoomOut}</IconText>
+  </button>
+  <button type="button" class="img-cropper-toolbar__button" onclick={() => cropper.rotate()}>
+    <IconText icon={IconArrowRotateClockwise}>{loc.rotate}</IconText>
+  </button>
+  <button type="button" class="img-cropper-toolbar__button img-cropper-toolbar__button--reset" onclick={() => cropper.reset()}>
+    <IconText icon={IconReset}>{loc.reset}</IconText>
+  </button>
+
+  {#if cropper.ratioOptions}
+    <div class="img-cropper-toolbar__ratio">
+      <span class="img-cropper-toolbar__label">{loc.ratio}</span>
+      <Dropdown position="top">
+        {#snippet trigger()}
+          <div class="img-cropper-toolbar__ratio-trigger">{selectedRatioLabel}</div>
+        {/snippet}
+        <div class="img-cropper-toolbar__ratio-menu">
+          {#each cropper.ratioOptions as option (String(option.value))}
+            <button type="button" class="img-cropper-toolbar__ratio-item" onclick={() => cropper.changeAspectRatio(option.value)}>
+              {ratioLabel(option)}
+            </button>
+          {/each}
+        </div>
+      </Dropdown>
+    </div>
+  {/if}
+
+  {#if cropper.showFillColor}
+    <div class="img-cropper-toolbar__fill">
+      <span class="img-cropper-toolbar__label">{loc.fill}</span>
+      <ColorPicker value={cropper.fillColor} on={{ change: (v) => (cropper.fillColor = v) }}>
+        <div
+          class="img-cropper-toolbar__fill-swatch"
+          class:img-cropper-toolbar__fill-swatch--empty={cropper.isTransparentFill}
+          style:background-color={cropper.isTransparentFill ? undefined : cropper.fillColor}>
+        </div>
+      </ColorPicker>
+      {#if !cropper.isTransparentFill}
+        <button type="button" class="img-cropper-toolbar__fill-reset" onclick={() => (cropper.fillColor = '')}>
+          <Icon src={IconDismiss} />
+        </button>
+      {/if}
+    </div>
+  {/if}
+
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<!--
+@component
+Toolbar with image manipulation buttons: Move, Crop, Zoom In/Out, Rotate, Reset.
+Shows aspect ratio dropdown when `cropper.ratioOptions` is set, and fill color
+picker when `cropper.showFillColor` is true (derived from `mode === 'contain'`).
+
+### Props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `cropper` | `ImgCropper` | — | Cropper controller instance |
+| `children` | `Snippet` | — | Extra controls rendered at the end |
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--img-cropper-toolbar--color` | Button text/icon color | `light-dark(gray-800, white)` |
+| `--sc-kit--img-cropper-toolbar--background` | Button background | `light-dark(white, dark-700)` |
+| `--sc-kit--img-cropper-toolbar--border-color` | Button border color | `light-dark(neutral-200, dark-600)` |
+| `--sc-kit--img-cropper-toolbar--active-color` | Active button accent color | `light-dark(primary-500, primary-400)` |
+-->
+
+<style>.img-cropper-toolbar {
+  --_img-cropper-toolbar--color: var(--sc-kit--img-cropper-toolbar--color, light-dark(#2e2e2e, #ffffff));
+  --_img-cropper-toolbar--background: var(--sc-kit--img-cropper-toolbar--background, light-dark(#ffffff, #222222));
+  --_img-cropper-toolbar--border-color: var(--sc-kit--img-cropper-toolbar--border-color, light-dark(#e5e7eb, #242424));
+  --_img-cropper-toolbar--active-color: var(
+    --sc-kit--img-cropper-toolbar--active-color,
+    light-dark(#144ab0, #5a8dec)
+  );
+  container-type: inline-size;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  gap: 0.5rem;
+  --sc-kit--icon-text--icon--size: 1rem;
+}
+.img-cropper-toolbar__button {
+  font-size: 0.75rem;
+  border-radius: 0.25rem;
+  white-space: nowrap;
+  border: 1px solid var(--_img-cropper-toolbar--border-color);
+  color: var(--_img-cropper-toolbar--color);
+  background: var(--_img-cropper-toolbar--background);
+  min-width: 5rem;
+  padding: 0.25rem 0.5rem;
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color linear 0.2s, color linear 0.2s, border-color linear 0.2s;
+}
+.img-cropper-toolbar__button:hover, .img-cropper-toolbar__button--active {
+  color: var(--_img-cropper-toolbar--active-color);
+  border-color: var(--_img-cropper-toolbar--active-color);
+}
+.img-cropper-toolbar__button--reset {
+  margin-left: 0.5rem;
+}
+.img-cropper-toolbar__button {
+  /* Set 'container-type: inline-size;' to reference container*/
+}
+@container (width < 53.125rem) {
+  .img-cropper-toolbar__button {
+    min-width: auto;
+    padding: 0.25rem;
+    --sc-kit--icon-text--text--display: none;
+  }
+}
+.img-cropper-toolbar__label {
+  font-size: 0.625rem;
+  white-space: nowrap;
+  margin-right: 0.5rem;
+}
+.img-cropper-toolbar__ratio {
+  display: flex;
+  align-items: center;
+  margin-left: 1rem;
+}
+.img-cropper-toolbar__ratio-trigger {
+  padding: 0.25rem;
+  border-radius: 0.125rem;
+  border: 1px solid var(--_img-cropper-toolbar--border-color);
+  cursor: pointer;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+.img-cropper-toolbar__ratio-menu {
+  background: var(--_img-cropper-toolbar--background);
+  border: 1px solid var(--_img-cropper-toolbar--border-color);
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  padding: 0.25rem 0;
+}
+.img-cropper-toolbar__ratio-item {
+  display: block;
+  width: 100%;
+  padding: 0.375rem 0.75rem;
+  border: none;
+  background: none;
+  text-align: left;
+  cursor: pointer;
+  font-size: 0.75rem;
+  color: var(--_img-cropper-toolbar--color);
+}
+.img-cropper-toolbar__ratio-item:hover {
+  background: light-dark(#f9fafb, #242424);
+}
+.img-cropper-toolbar__fill {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-left: 1rem;
+}
+.img-cropper-toolbar__fill-swatch {
+  width: 3.125rem;
+  height: 1.625rem;
+  border-radius: 0.25rem;
+  border: 1px solid var(--_img-cropper-toolbar--border-color);
+  cursor: pointer;
+}
+.img-cropper-toolbar__fill-swatch--empty {
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 8px 8px;
+  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
+}
+.img-cropper-toolbar__fill-reset {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--_img-cropper-toolbar--color);
+  background: none;
+  border: none;
+  padding: 0;
+  --sc-kit--icon--size: 1rem;
+}
+.img-cropper-toolbar__fill-reset:hover {
+  color: var(--_img-cropper-toolbar--active-color);
+}</style>

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

@@ -0,0 +1,28 @@
+import type { ImgCropper } from './img-cropper.svelte';
+import type { Snippet } from 'svelte';
+type Props = {
+    cropper: ImgCropper;
+    children?: Snippet;
+};
+/**
+ * Toolbar with image manipulation buttons: Move, Crop, Zoom In/Out, Rotate, Reset.
+ * Shows aspect ratio dropdown when `cropper.ratioOptions` is set, and fill color
+ * picker when `cropper.showFillColor` is true (derived from `mode === 'contain'`).
+ *
+ * ### Props
+ * | Prop | Type | Default | Description |
+ * |---|---|---|---|
+ * | `cropper` | `ImgCropper` | — | Cropper controller instance |
+ * | `children` | `Snippet` | — | Extra controls rendered at the end |
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--img-cropper-toolbar--color` | Button text/icon color | `light-dark(gray-800, white)` |
+ * | `--sc-kit--img-cropper-toolbar--background` | Button background | `light-dark(white, dark-700)` |
+ * | `--sc-kit--img-cropper-toolbar--border-color` | Button border color | `light-dark(neutral-200, dark-600)` |
+ * | `--sc-kit--img-cropper-toolbar--active-color` | Active button accent color | `light-dark(primary-500, primary-400)` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1,198 @@
+<script lang="ts">import { Toastr } from '../../../core/toastr';
+import { Loading } from '../../loading';
+import { default as ImgCropperControls } from './cmp.img-cropper-controls.svelte';
+import { ImgCropperLocalization } from './img-cropper-localization';
+const { src, cropper, showControls = true } = $props();
+const loc = new ImgCropperLocalization();
+let cropperLoaded = $state(false);
+$effect(() => {
+    const loadCropper = async () => {
+        try {
+            await import('cropperjs');
+            cropperLoaded = true;
+        }
+        catch {
+            Toastr.error(loc.initCropperError);
+        }
+    };
+    void loadCropper();
+});
+const initCanvas = (canvasEl) => {
+    const imageEl = canvasEl.querySelector('cropper-image');
+    const selectionEl = canvasEl.querySelector('cropper-selection');
+    const selectHandle = canvasEl.querySelector('cropper-handle[action="select"]');
+    if (imageEl && selectionEl) {
+        const initCropper = async () => {
+            try {
+                await cropper.init({
+                    src,
+                    cropperImage: imageEl,
+                    cropperSelection: selectionEl,
+                    cropperCanvas: canvasEl,
+                    selectHandle
+                });
+            }
+            catch {
+                Toastr.error(loc.imageLoadError);
+            }
+        };
+        void initCropper();
+    }
+    return { destroy: () => cropper.destroy() };
+};
+</script>
+
+<div
+  class="img-cropper"
+  style:--img-cropper--fill-color={cropper.fillColor || undefined}
+  style:--img-cropper--ratio={cropper.effectiveCanvasRatio ?? undefined}
+  style:--img-cropper--natural-w={cropper.naturalWidth ? `${cropper.naturalWidth}px` : undefined}
+  style:--img-cropper--natural-h={cropper.naturalHeight ? `${cropper.naturalHeight}px` : undefined}>
+  {#if cropper.loading || !cropper.ready}
+    <Loading positionAbsoluteCenter={true} />
+  {/if}
+
+  {#if cropperLoaded}
+    <cropper-canvas
+      class="img-cropper__canvas"
+      class:img-cropper__canvas--visible={cropper.ready}
+      class:img-cropper__canvas--fitted={cropper.effectiveCanvasRatio !== null && cropper.naturalWidth > 0}
+      class:img-cropper__canvas--shadow={cropper.showImageShadow}
+      use:initCanvas
+      background={(cropper.showFillColor && cropper.isTransparentFill) || undefined}>
+      <cropper-image crossorigin={cropper.corsMode === 'native' ? 'anonymous' : null} initial-center-size={cropper.mode} scalable translatable rotatable>
+      </cropper-image>
+      <cropper-shade hidden></cropper-shade>
+      <cropper-handle action="select" plain></cropper-handle>
+      <cropper-selection movable resizable aspect-ratio={cropper.aspectRatio ?? undefined}>
+        <cropper-grid role="grid" bordered covered></cropper-grid>
+        <cropper-crosshair centered></cropper-crosshair>
+        <cropper-handle action="move" theme-color="rgba(255,255,255,0.35)"></cropper-handle>
+        <cropper-handle action="n-resize"></cropper-handle>
+        <cropper-handle action="e-resize"></cropper-handle>
+        <cropper-handle action="s-resize"></cropper-handle>
+        <cropper-handle action="w-resize"></cropper-handle>
+        <cropper-handle action="ne-resize"></cropper-handle>
+        <cropper-handle action="nw-resize"></cropper-handle>
+        <cropper-handle action="se-resize"></cropper-handle>
+        <cropper-handle action="sw-resize"></cropper-handle>
+      </cropper-selection>
+    </cropper-canvas>
+
+    {#if cropper.showImageShadow && cropper.ready}
+      <div class="img-cropper__shadow" class:img-cropper__shadow--full={cropper.effectiveCanvasRatio === null}></div>
+    {/if}
+  {/if}
+
+  {#if showControls}
+    <div class="img-cropper__controls">
+      <ImgCropperControls cropper={cropper} />
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+Image cropper view based on CropperJS v2 web components.
+
+Renders a canvas with crop selection, rotation, zoom, and reset capabilities.
+The container fills 100% width and height of its parent; the image is centered inside.
+The component itself uses `overflow: visible` — the parent element should set
+`overflow: hidden` to clip the shadow overlay at its boundaries.
+
+#### Modes
+
+The behavior is determined by the `ImgCropper` instance passed via the `cropper` prop:
+
+- **`cover`** — the image always fills the canvas completely. The crop selection
+  defines the visible area. After save, the result is the selected region at
+  natural image resolution.
+- **`contain`** — the image is fitted inside the canvas with optional fill color
+  for empty space. After crop, the canvas shrinks to match the cropped area's
+  aspect ratio. After save, the result includes the fill color background.
+
+#### Aspect ratio
+
+Aspect ratio is configured on the `ImgCropper` instance via the `aspectRatio` option:
+
+- **Fixed number** (e.g. `16/9`) — locks the crop selection to this ratio.
+- **Dynamic object** — provides a list of `supported` ratios and an `initial` value.
+  The toolbar renders a ratio dropdown when multiple options are available.
+  - In `contain` mode, `allowFreeCrop: true` adds a free-ratio option that lets
+    the user draw an unconstrained selection. After crop, the canvas dynamically
+    adopts the cropped area's proportions.
+  - In `cover` mode, `initial` is required and free crop is not available.
+- **Omitted** — defaults to free crop in `contain` mode, or fills the canvas in `cover` mode.
+
+#### Shadow overlay
+
+When `showImageShadow` is enabled on the cropper instance, a dark semi-transparent
+overlay (`box-shadow: 0 0 0 9999px`) extends beyond the canvas bounds so the full
+image remains visible outside the crop area. In free-ratio mode (no fixed aspect
+ratio), the shadow covers the entire container instead.
+
+### Props
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `src` | `string` | — | Image source URL |
+| `cropper` | `ImgCropper` | — | Cropper controller instance |
+| `showControls` | `boolean` | `true` | Show built-in Apply/Cancel crop controls |
+
+### CSS Custom Properties
+None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
+-->
+
+<style>.img-cropper {
+  --_fill-color: var(--img-cropper--fill-color);
+  --_ratio: var(--img-cropper--ratio);
+  --_natural-w: var(--img-cropper--natural-w, 100cqw);
+  --_natural-h: var(--img-cropper--natural-h, 100cqh);
+  container-type: size;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: visible;
+}
+.img-cropper__canvas {
+  width: 100%;
+  height: 100%;
+  background-color: var(--_fill-color);
+  visibility: hidden;
+}
+.img-cropper__canvas--fitted {
+  width: min(100cqw, 100cqh * var(--_ratio), max(var(--_natural-w), var(--_natural-h) * var(--_ratio)));
+  height: auto;
+  aspect-ratio: var(--_ratio);
+}
+.img-cropper__canvas--visible {
+  visibility: visible;
+}
+.img-cropper__canvas--shadow {
+  overflow: visible;
+}
+.img-cropper__shadow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(100cqw, 100cqh * var(--_ratio), max(var(--_natural-w), var(--_natural-h) * var(--_ratio)));
+  aspect-ratio: var(--_ratio);
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
+  pointer-events: none;
+  z-index: 2;
+}
+.img-cropper__shadow--full {
+  width: 100cqw;
+  height: 100cqh;
+  aspect-ratio: auto;
+}
+.img-cropper__controls {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 100;
+}</style>

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

@@ -0,0 +1,58 @@
+import type { ImgCropper } from './img-cropper.svelte';
+type Props = {
+    src: string;
+    cropper: ImgCropper;
+    showControls?: boolean;
+};
+/**
+ * Image cropper view based on CropperJS v2 web components.
+ *
+ * Renders a canvas with crop selection, rotation, zoom, and reset capabilities.
+ * The container fills 100% width and height of its parent; the image is centered inside.
+ * The component itself uses `overflow: visible` — the parent element should set
+ * `overflow: hidden` to clip the shadow overlay at its boundaries.
+ *
+ * #### Modes
+ *
+ * The behavior is determined by the `ImgCropper` instance passed via the `cropper` prop:
+ *
+ * - **`cover`** — the image always fills the canvas completely. The crop selection
+ * defines the visible area. After save, the result is the selected region at
+ * natural image resolution.
+ * - **`contain`** — the image is fitted inside the canvas with optional fill color
+ * for empty space. After crop, the canvas shrinks to match the cropped area's
+ * aspect ratio. After save, the result includes the fill color background.
+ *
+ * #### Aspect ratio
+ *
+ * Aspect ratio is configured on the `ImgCropper` instance via the `aspectRatio` option:
+ *
+ * - **Fixed number** (e.g. `16/9`) — locks the crop selection to this ratio.
+ * - **Dynamic object** — provides a list of `supported` ratios and an `initial` value.
+ * The toolbar renders a ratio dropdown when multiple options are available.
+ * - In `contain` mode, `allowFreeCrop: true` adds a free-ratio option that lets
+ *   the user draw an unconstrained selection. After crop, the canvas dynamically
+ *   adopts the cropped area's proportions.
+ * - In `cover` mode, `initial` is required and free crop is not available.
+ * - **Omitted** — defaults to free crop in `contain` mode, or fills the canvas in `cover` mode.
+ *
+ * #### Shadow overlay
+ *
+ * When `showImageShadow` is enabled on the cropper instance, a dark semi-transparent
+ * overlay (`box-shadow: 0 0 0 9999px`) extends beyond the canvas bounds so the full
+ * image remains visible outside the crop area. In free-ratio mode (no fixed aspect
+ * ratio), the shadow covers the entire container instead.
+ *
+ * ### Props
+ * | Prop | Type | Default | Description |
+ * |---|---|---|---|
+ * | `src` | `string` | — | Image source URL |
+ * | `cropper` | `ImgCropper` | — | Cropper controller instance |
+ * | `showControls` | `boolean` | `true` | Show built-in Apply/Cancel crop controls |
+ *
+ * ### CSS Custom Properties
+ * None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/cropper/img-cropper/cropperjs-elements.d.ts

@@ -0,0 +1,33 @@
+// Type declarations for CropperJS v2 web components.
+// Extends svelteHTML.IntrinsicElements so the Svelte language server
+// recognises <cropper-*> tags and their attributes in templates.
+
+type CamelToKebab<S extends string> = S extends `${infer F}${infer R}`
+  ? R extends Uncapitalize<R>
+    ? `${Lowercase<F>}${CamelToKebab<R>}`
+    : `${Lowercase<F>}-${CamelToKebab<R>}`
+  : S;
+
+type CropperElementProps<T extends HTMLElement> = {
+  [K in keyof T as K extends keyof HTMLElement
+    ? never
+    : K extends `$${string}`
+      ? never
+      : T[K] extends (...args: never[]) => unknown
+        ? never
+        : K extends string
+          ? CamelToKebab<K>
+          : never]?: (T[K] extends boolean ? boolean : T[K] extends number ? number | string : string) | null;
+} & import('svelte/elements').HTMLAttributes<HTMLElement>;
+
+declare namespace svelteHTML {
+  interface IntrinsicElements {
+    'cropper-canvas': CropperElementProps<import('cropperjs').CropperCanvas>;
+    'cropper-image': CropperElementProps<import('cropperjs').CropperImage>;
+    'cropper-shade': CropperElementProps<import('cropperjs').CropperShade>;
+    'cropper-handle': CropperElementProps<import('cropperjs').CropperHandle>;
+    'cropper-selection': CropperElementProps<import('cropperjs').CropperSelection>;
+    'cropper-grid': CropperElementProps<import('cropperjs').CropperGrid>;
+    'cropper-crosshair': CropperElementProps<import('cropperjs').CropperCrosshair>;
+  }
+}

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

@@ -0,0 +1,40 @@
+import type { DragMode, ImgCropperWorker, ImgCropperWorkerParams } from './img-cropper-worker.svelte';
+export declare class ImgCropperContainWorker implements ImgCropperWorker {
+    cropBoxVisible: boolean;
+    dragMode: DragMode;
+    naturalWidth: number;
+    naturalHeight: number;
+    canvasRatio: number | null;
+    destroy: () => void;
+    private _image;
+    private _selection;
+    private _canvas;
+    private _selectHandle;
+    private _originalSrc;
+    constructor(params: ImgCropperWorkerParams);
+    ready: () => Promise<void>;
+    rotate: () => 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;
+    private _applyMoveMode;
+    private _fitImage;
+    private _centerForCurrentRotation;
+}