@streamscloud/kit 0.63.0 → 0.64.0

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

@@ -5,23 +5,14 @@ type Props = {
     children?: Snippet;
 };
 /**
- * Toolbar with image manipulation buttons: Move, Crop, Zoom In/Out, Rotate, Reset.
- * Shows aspect ratio popover 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 |
+ * Floating toolbar for `ImgCropperView` — aspect ratio, zoom, free position, alignment, rotate, reset, and the frame's
+ * fill color (in `contain` mode, whenever free position is on, or when the picture has its own transparency). Pass it
+ * to `ImgCropperView`'s `toolbar` snippet prop.
  *
  * ### 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)` |
+ * | `--sc-kit--img-cropper-toolbar--background` | Panel background | `var(--sc-kit--color--bg--panel)` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;

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

@@ -1,183 +1,425 @@
 <script lang="ts">import { Spinner } from '../../spinner';
-import { Toastr } from '../../toast';
-import { default as ImgCropperControls } from './cmp.img-cropper-controls.svelte';
+import { Text } from '../../typography';
 import { ImgCropperLocalization } from './img-cropper-localization';
-const { src, cropper, showControls = true } = $props();
+import { ImgCropper } from './img-cropper.svelte';
+import { untrack } from 'svelte';
+const { src, cropper, toolbar } = $props();
+const CORNERS = ['nw', 'ne', 'sw', 'se'];
 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();
+const WHEEL_ZOOM_RATE = 0.0016;
+const DRAW_START_PX = 4;
+let stageEl = $state();
+let drag = $state.raw(null);
+let dragPointer = null;
+let dragStart = { box: null, selection: null };
+$effect(() => untrack(() => {
+    const mountedCropper = cropper;
+    if (stageEl) {
+        mountedCropper.setStage({ w: stageEl.clientWidth, h: stageEl.clientHeight });
     }
-    return {
-        destroy: () => {
-            cropper.destroy();
-        }
-    };
+    void mountedCropper.init(src);
+    return () => mountedCropper.destroy();
+}));
+const beginDrag = (event, next) => {
+    stageEl?.setPointerCapture(event.pointerId);
+    dragPointer = event.pointerId;
+    dragStart = { box: cropper.box, selection: cropper.selection };
+    drag = next;
 };
-const observeResize = (el) => {
-    const observer = new ResizeObserver(() => {
-        if (cropper.ready) {
-            cropper.refit();
+const ignoreWhileDragging = (event) => {
+    if (drag) {
+        event.stopPropagation();
+    }
+};
+const observeStage = (node) => {
+    const observer = new ResizeObserver((entries) => {
+        const entry = entries.at(0);
+        if (entry) {
+            cropper.setStage({ w: entry.contentRect.width, h: entry.contentRect.height });
         }
     });
-    observer.observe(el);
+    observer.observe(node);
     return { destroy: () => observer.disconnect() };
 };
+const stagePoint = (event) => {
+    if (!stageEl) {
+        return null;
+    }
+    const stageRect = stageEl.getBoundingClientRect();
+    return { x: event.clientX - stageRect.left, y: event.clientY - stageRect.top };
+};
+const framePoint = (event) => {
+    const frame = cropper.frame;
+    const point = stagePoint(event);
+    return frame && point ? { x: point.x - frame.x, y: point.y - frame.y } : null;
+};
+const cornerPoint = (rect, corner) => ({
+    x: corner === 'ne' || corner === 'se' ? rect.x + rect.w : rect.x,
+    y: corner === 'sw' || corner === 'se' ? rect.y + rect.h : rect.y
+});
+const oppositeCorner = (corner) => (corner === 'nw' ? 'se' : corner === 'se' ? 'nw' : corner === 'ne' ? 'sw' : 'ne');
+const startPan = (event) => {
+    if (event.button !== 0 || !cropper.ready) {
+        return;
+    }
+    event.stopPropagation();
+    beginDrag(event, { kind: 'pan', last: { x: event.clientX, y: event.clientY } });
+};
+const stagePointerDown = (event) => {
+    if (!cropper.cropMode || drag) {
+        return;
+    }
+    if (event.button !== 0) {
+        return;
+    }
+    const frame = cropper.frame;
+    const anchor = framePoint(event);
+    if (!frame || !anchor) {
+        return;
+    }
+    beginDrag(event, {
+        kind: 'selection',
+        anchor: { x: Math.min(Math.max(anchor.x, 0), frame.w), y: Math.min(Math.max(anchor.y, 0), frame.h) },
+        pressedAt: { x: event.clientX, y: event.clientY }
+    });
+    cropper.clearSelection();
+};
+const startScale = (event, corner) => {
+    const box = cropper.box;
+    const start = framePoint(event);
+    if (event.button !== 0 || !box || !start) {
+        return;
+    }
+    event.stopPropagation();
+    const draggedCorner = cornerPoint(box, corner);
+    const anchor = cornerPoint(box, oppositeCorner(corner));
+    beginDrag(event, { kind: 'scale', startBox: box, anchor, corner: draggedCorner, start });
+};
+const startSelectionHandle = (event, corner) => {
+    const selection = cropper.selection;
+    if (event.button !== 0 || !selection) {
+        return;
+    }
+    event.stopPropagation();
+    beginDrag(event, { kind: 'selection', anchor: cornerPoint(selection, oppositeCorner(corner)), pressedAt: null });
+};
+const startMoveSelection = (event) => {
+    if (event.button !== 0 || !cropper.selection) {
+        return;
+    }
+    event.stopPropagation();
+    beginDrag(event, { kind: 'move-selection', last: { x: event.clientX, y: event.clientY } });
+};
+const pointerMove = (event) => {
+    if (!drag || event.pointerId !== dragPointer) {
+        return;
+    }
+    if (drag.kind === 'pan') {
+        cropper.pan({ x: event.clientX - drag.last.x, y: event.clientY - drag.last.y });
+        drag = { kind: 'pan', last: { x: event.clientX, y: event.clientY } };
+        return;
+    }
+    if (drag.kind === 'selection') {
+        const { pressedAt } = drag;
+        if (pressedAt) {
+            if (Math.hypot(event.clientX - pressedAt.x, event.clientY - pressedAt.y) < DRAW_START_PX) {
+                return;
+            }
+            drag = { ...drag, pressedAt: null };
+        }
+        const point = framePoint(event);
+        if (!point) {
+            return;
+        }
+        cropper.updateSelection(drag.anchor, point);
+        return;
+    }
+    if (drag.kind === 'move-selection') {
+        cropper.moveSelection({ x: event.clientX - drag.last.x, y: event.clientY - drag.last.y });
+        drag = { kind: 'move-selection', last: { x: event.clientX, y: event.clientY } };
+        return;
+    }
+    const point = framePoint(event);
+    if (!point) {
+        return;
+    }
+    const diagonal = { x: drag.corner.x - drag.anchor.x, y: drag.corner.y - drag.anchor.y };
+    const lengthSquared = diagonal.x * diagonal.x + diagonal.y * diagonal.y || 1;
+    const traveled = { x: point.x - drag.start.x, y: point.y - drag.start.y };
+    const factor = Math.max(0.05, 1 + (traveled.x * diagonal.x + traveled.y * diagonal.y) / lengthSquared);
+    cropper.box = drag.startBox;
+    cropper.scaleAbout(factor, drag.anchor);
+};
+const endDrag = (event) => {
+    if (event.pointerId !== dragPointer) {
+        return;
+    }
+    if (drag?.kind === 'selection') {
+        cropper.finishSelection();
+    }
+    drag = null;
+    dragPointer = null;
+};
+const cancelDrag = (event) => {
+    if (event.pointerId !== dragPointer) {
+        return;
+    }
+    cropper.box = dragStart.box;
+    cropper.selection = dragStart.selection;
+    drag = null;
+    dragPointer = null;
+};
+const wheelZoom = (event) => {
+    if (!cropper.ready) {
+        return;
+    }
+    event.preventDefault();
+    if (drag) {
+        return;
+    }
+    const anchor = framePoint(event);
+    if (anchor) {
+        cropper.scaleAbout(Math.exp(-event.deltaY * WHEEL_ZOOM_RATE), anchor);
+    }
+};
+const placement = (rect) => `left:${rect.x}px;top:${rect.y}px;width:${rect.w}px;height:${rect.h}px`;
+const pictureStyle = (box) => {
+    const placement = cropper.sourcePlacement({ x: 0, y: 0, w: box.w, h: box.h });
+    if (!placement) {
+        return '';
+    }
+    const { center, size } = placement;
+    const turned = cropper.rotation === 90 || cropper.rotation === 270;
+    return `left:${center.x}px;top:${center.y}px;width:${turned ? size.h : size.w}px;height:${turned ? size.w : size.h}px;rotate:${cropper.rotation}deg`;
+};
 </script>
 
-<div class="img-cropper" use:observeResize style:--img-cropper--fill-color={cropper.fillColor || undefined}>
-  {#if cropper.loading || !cropper.ready}
-    <Spinner position="absolute-center" size="lg" />
-  {/if}
-
-  {#if cropperLoaded}
-    <cropper-canvas
-      class="img-cropper__canvas"
-      class:img-cropper__canvas--visible={cropper.ready}
-      class:img-cropper__canvas--shadow={cropper.showImageShadow}
-      style:width={cropper.canvasGeometry.width ? `${cropper.canvasGeometry.width}px` : undefined}
-      style:height={cropper.canvasGeometry.height ? `${cropper.canvasGeometry.height}px` : undefined}
-      use:initCanvas
-      background={(cropper.showFillColor && cropper.isTransparentFill) || undefined}>
-      <cropper-image 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 && cropper.canvasGeometry.width > 0}
-      <div class="img-cropper__shadow" style:width="{cropper.canvasGeometry.width}px" style:height="{cropper.canvasGeometry.height}px"></div>
+<div class="img-cropper">
+  <div
+    class="img-cropper__stage"
+    class:img-cropper__stage--dragging={drag !== null && !cropper.cropMode}
+    class:img-cropper__stage--crop-mode={cropper.cropMode}
+    role="presentation"
+    bind:this={stageEl}
+    use:observeStage
+    onpointerdowncapture={ignoreWhileDragging}
+    onpointerdown={stagePointerDown}
+    onpointermove={pointerMove}
+    onpointerup={endDrag}
+    onpointercancel={cancelDrag}
+    onwheel={wheelZoom}>
+    {#if cropper.failed}
+      <div class="img-cropper__state"><Text size="sm" tone="muted">{loc.imageLoadError}</Text></div>
+    {:else if !cropper.ready || !cropper.box || !cropper.frame}
+      <div class="img-cropper__state"><Spinner /></div>
+    {:else}
+      {@const box = cropper.box}
+      {@const frame = cropper.frame}
+      <div class="img-cropper__picture-box img-cropper__picture-box--outside" style={placement({ x: frame.x + box.x, y: frame.y + box.y, w: box.w, h: box.h })}>
+        <img class="img-cropper__picture" src={cropper.source} alt="" draggable="false" style={pictureStyle(box)} />
+      </div>
+      <div class="img-cropper__frame" style={placement(frame)} style:--_--img-cropper--fill-color={cropper.fillColor || undefined}>
+        <div class="img-cropper__picture-box" style={placement(box)}>
+          <img class="img-cropper__picture" src={cropper.source} alt="" draggable="false" style={pictureStyle(box)} />
+        </div>
+      </div>
+      <div class="img-cropper__outline" style={placement(frame)}></div>
+      {#if cropper.cropMode}
+        {#if cropper.selection}
+          {@const selection = cropper.selection}
+          <div
+            class="img-cropper__selection"
+            class:img-cropper__selection--dragging={drag !== null}
+            role="presentation"
+            style={placement({ x: frame.x + selection.x, y: frame.y + selection.y, w: selection.w, h: selection.h })}
+            onpointerdown={startMoveSelection}>
+          </div>
+          {#each CORNERS as corner (corner)}
+            {@const point = cornerPoint(selection, corner)}
+            <button
+              type="button"
+              class="img-cropper__handle img-cropper__handle--{corner}"
+              aria-label={loc.resizeSelection}
+              tabindex="-1"
+              style:left="{frame.x + point.x}px"
+              style:top="{frame.y + point.y}px"
+              onpointerdown={(event) => startSelectionHandle(event, corner)}>
+            </button>
+          {/each}
+        {/if}
+      {:else}
+        <div
+          class="img-cropper__hit"
+          class:img-cropper__hit--dragging={drag !== null}
+          role="presentation"
+          style={placement({ x: frame.x + box.x, y: frame.y + box.y, w: box.w, h: box.h })}
+          onpointerdown={startPan}>
+          <div class="img-cropper__picture-outline"></div>
+          {#each CORNERS as corner (corner)}
+            <button
+              type="button"
+              class="img-cropper__handle img-cropper__handle--{corner} img-cropper__handle--picture"
+              aria-label={loc.resizeHandle}
+              tabindex="-1"
+              style:left={corner === 'ne' || corner === 'se' ? '100%' : '0'}
+              style:top={corner === 'sw' || corner === 'se' ? '100%' : '0'}
+              onpointerdown={(event) => startScale(event, corner)}>
+            </button>
+          {/each}
+        </div>
+      {/if}
     {/if}
-  {/if}
-
-  {#if showControls}
-    <div class="img-cropper__controls">
-      <ImgCropperControls cropper={cropper} />
+  </div>
+  {#if toolbar}
+    <div class="img-cropper__toolbar" inert={drag !== null}>
+      {@render toolbar()}
     </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** (`ImgCropperDynamicAspectRatio`) — provides a list of `supported`
-  ratios and an optional `initial` value. The toolbar renders a ratio popover when
-  multiple options are available. `allowFreeCrop: true` adds a free-ratio option
-  that lets the user draw an unconstrained selection.
-- **Omitted** — defaults to free crop (no ratio constraint on the selection).
-
-#### Shadow overlay
-
-When `showImageShadow` is enabled on the cropper instance, a dark semi-transparent
-`box-shadow` is applied directly to the `<cropper-canvas>` element, extending beyond
-the canvas bounds so the surrounding area is dimmed. The parent element should set
-`overflow: hidden` to clip the shadow at its boundaries.
+Fixed-frame picture cropper — the frame stays put on the stage; drag pans the picture, the corner handles (shown while
+the pointer is over the picture, always on touch) scale it about the opposite corner, and the wheel zooms about the
+pointer. The part of the picture spilling past the frame stays visible but dimmed. Pass a `toolbar` snippet to mount
+`ImgCropperToolbar` underneath the picture area. `src` and `cropper` are read once, on mount — to change either, remount
+the view (e.g. `{#key}`) with a new `ImgCropper`.
 
 ### CSS Custom Properties
-None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--img-cropper--handle-color` | Corner handle fill | `#ffffff` |
+| `--sc-kit--img-cropper--outline-color` | Frame outline color | `#4a4a4f` |
 -->
 
 <style>.img-cropper {
-  --_fill-color: var(--img-cropper--fill-color);
+  --_img-cropper--handle-color: var(--sc-kit--img-cropper--handle-color, #ffffff);
+  --_img-cropper--outline-color: var(--sc-kit--img-cropper--outline-color, #4a4a4f);
+  --_img-cropper--background: var(--sc-kit--img-cropper--background, #1e1e20);
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+  background: var(--_img-cropper--background);
+}
+.img-cropper__stage {
   position: relative;
-  width: 100%;
-  height: 100%;
+  flex: 1;
+  min-block-size: 0;
+  touch-action: none;
+  user-select: none;
+}
+.img-cropper__stage--dragging {
+  cursor: grabbing;
+}
+.img-cropper__stage--crop-mode {
+  cursor: crosshair;
+}
+.img-cropper__toolbar {
   display: flex;
+  flex-shrink: 0;
   justify-content: center;
+  padding-inline: var(--sc-kit--space--4);
+  padding-block-end: var(--sc-kit--space--4);
+}
+.img-cropper__state {
+  position: absolute;
+  inset: 0;
+  display: flex;
   align-items: center;
-  overflow: visible;
+  justify-content: center;
 }
-.img-cropper__canvas {
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  min-height: 0;
-  background-color: var(--_fill-color);
-  visibility: hidden;
+.img-cropper__hit {
+  --_img-cropper--picture-controls: hidden;
+  position: absolute;
+  cursor: grab;
 }
-.img-cropper__canvas--visible {
-  visibility: visible;
+.img-cropper__hit::before {
+  content: "";
+  position: absolute;
+  inset: -0.5rem;
+}
+.img-cropper__hit:hover {
+  --_img-cropper--picture-controls: visible;
+}
+@media (any-pointer: coarse) {
+  .img-cropper__hit {
+    --_img-cropper--picture-controls: visible;
+  }
+}
+.img-cropper__hit--dragging {
+  --_img-cropper--picture-controls: visible;
+  cursor: grabbing;
+}
+.img-cropper__picture-box {
+  position: absolute;
+  pointer-events: none;
+  overflow: hidden;
+}
+.img-cropper__picture-box--outside {
+  opacity: 0.35;
+}
+.img-cropper__picture {
+  position: absolute;
+  max-inline-size: none;
+  translate: -50% -50%;
+}
+.img-cropper__frame {
+  --_img-cropper--fill-color: var(--_--img-cropper--fill-color, transparent);
+  --_check: rgb(255 255 255 / 10%);
+  position: absolute;
+  overflow: hidden;
+  background-image: linear-gradient(var(--_img-cropper--fill-color), var(--_img-cropper--fill-color)), linear-gradient(45deg, var(--_check) 25%, transparent 25%, transparent 75%, var(--_check) 75%), linear-gradient(45deg, var(--_check) 25%, transparent 25%, transparent 75%, var(--_check) 75%);
+  background-size: 100% 100%, 1rem 1rem, 1rem 1rem;
+  background-position: 0 0, 0 0, 0.5rem 0.5rem;
 }
-.img-cropper__canvas--shadow {
-  overflow: visible;
+.img-cropper__outline {
+  position: absolute;
+  border: 1px solid var(--_img-cropper--outline-color);
+  pointer-events: none;
 }
-.img-cropper__shadow {
+.img-cropper__picture-outline {
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8);
+  inset: 0;
+  border: 1px dashed rgba(255, 255, 255, 0.55);
   pointer-events: none;
-  z-index: 2;
+  visibility: var(--_img-cropper--picture-controls);
+}
+.img-cropper__selection {
+  position: absolute;
+  border: 1px dashed rgba(255, 255, 255, 0.55);
+  box-shadow: 0 0 0 999rem rgba(0, 0, 0, 0.55);
+  cursor: grab;
+}
+.img-cropper__selection--dragging {
+  cursor: grabbing;
 }
-.img-cropper__controls {
+.img-cropper__handle {
   position: absolute;
-  bottom: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 100;
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  translate: -50% -50%;
+  cursor: nwse-resize;
+}
+.img-cropper__handle::before {
+  content: "";
+  position: absolute;
+  inset: 0.1875rem;
+  border-radius: 50%;
+  background: var(--_img-cropper--handle-color);
+  box-shadow: var(--sc-kit--shadow--sm);
+}
+.img-cropper__handle--ne, .img-cropper__handle--sw {
+  cursor: nesw-resize;
+}
+.img-cropper__handle--picture {
+  visibility: var(--_img-cropper--picture-controls);
+}
+.img-cropper__handle:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 1px;
 }</style>

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

@@ -1,49 +1,23 @@
-import type { ImgCropper } from './img-cropper.svelte';
+import { ImgCropper } from './img-cropper.svelte';
+import { type Snippet } from 'svelte';
 type Props = {
+    /** The picture — same-origin, a `blob:` / `data:` URL, or a server that sends CORS headers; anything else fails to load. */
     src: string;
     cropper: ImgCropper;
-    /** Show the built-in Apply/Cancel crop controls @default true */
-    showControls?: boolean;
+    toolbar?: Snippet;
 };
 /**
- * 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** (`ImgCropperDynamicAspectRatio`) — provides a list of `supported`
- * ratios and an optional `initial` value. The toolbar renders a ratio popover when
- * multiple options are available. `allowFreeCrop: true` adds a free-ratio option
- * that lets the user draw an unconstrained selection.
- * - **Omitted** — defaults to free crop (no ratio constraint on the selection).
- *
- * #### Shadow overlay
- *
- * When `showImageShadow` is enabled on the cropper instance, a dark semi-transparent
- * `box-shadow` is applied directly to the `<cropper-canvas>` element, extending beyond
- * the canvas bounds so the surrounding area is dimmed. The parent element should set
- * `overflow: hidden` to clip the shadow at its boundaries.
+ * Fixed-frame picture cropper — the frame stays put on the stage; drag pans the picture, the corner handles (shown while
+ * the pointer is over the picture, always on touch) scale it about the opposite corner, and the wheel zooms about the
+ * pointer. The part of the picture spilling past the frame stays visible but dimmed. Pass a `toolbar` snippet to mount
+ * `ImgCropperToolbar` underneath the picture area. `src` and `cropper` are read once, on mount — to change either, remount
+ * the view (e.g. `{#key}`) with a new `ImgCropper`.
  *
  * ### CSS Custom Properties
- * None — canvas background, shadow, and sizing are controlled by the `ImgCropper` instance.
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--img-cropper--handle-color` | Corner handle fill | `#ffffff` |
+ * | `--sc-kit--img-cropper--outline-color` | Frame outline color | `#4a4a4f` |
  */
 declare const Cmp: import("svelte").Component<Props, {}, "">;
 type Cmp = ReturnType<typeof Cmp>;