@streamscloud/kit 0.63.0 → 0.64.0

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

@@ -10,4 +10,8 @@ export declare class ColorHelper {
      * Check whether a color value represents "no color" (empty, transparent, zero alpha).
      */
     static isTransparent(value: string | null | undefined): boolean;
+    /**
+     * Check whether a color value fully hides what is behind it (valid, 100% alpha).
+     */
+    static isOpaque(value: string | null | undefined): boolean;
 }

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

@@ -33,4 +33,14 @@ export class ColorHelper {
         const parsed = colord(value);
         return !parsed.isValid() || parsed.alpha() === 0;
     }
+    /**
+     * Check whether a color value fully hides what is behind it (valid, 100% alpha).
+     */
+    static isOpaque(value) {
+        if (!value) {
+            return false;
+        }
+        const parsed = colord(value);
+        return parsed.isValid() && parsed.alpha() === 1;
+    }
 }

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

@@ -1,19 +1,16 @@
 <script lang="ts">import { FileWithBlobDataHelper } from '../../../core/files';
 import { Dialog, DialogButton, DialogCancelButton } from '../../dialog';
 import { Toastr } from '../../toast';
-import { ImgCropper, ImgCropperControls, ImgCropperToolbar, ImgCropperView } from '../img-cropper';
+import { ImgCropper, 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(() => {
-    return new ImgCropper({
-        mode: data.mode ?? 'cover',
-        aspectRatio: data.aspectRatio,
-        fillColor: data.fillColor,
-        showImageShadow: data.showImageShadow ?? true
-    });
-});
+const cropper = untrack(() => new ImgCropper({
+    mode: data.mode ?? 'cover',
+    aspectRatio: data.aspectRatio,
+    fillColor: data.fillColor
+}));
 const url = $derived(data.url);
 const save = async () => {
     try {
@@ -47,24 +44,18 @@ $effect(() => untrack(() => {
       {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 class="image-editor-dialog__workspace">
+        <ImgCropperView src={url} cropper={cropper}>
+          {#snippet toolbar()}
+            <ImgCropperToolbar cropper={cropper} />
+          {/snippet}
+        </ImgCropperView>
       </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>
+        <DialogCancelButton on={{ click: cancel }}>{loc.cancel}</DialogCancelButton>
+        <DialogButton on={{ click: save }}>{loc.save}</DialogButton>
       </div>
     {/snippet}
   </Dialog>
@@ -74,37 +65,12 @@ $effect(() => untrack(() => {
   --sc-kit--dialog--height: calc(100vh - 2.5rem);
   display: contents;
 }
-.image-editor-dialog__body {
+.image-editor-dialog__workspace {
   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;
+  min-block-size: 0;
 }
 .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;
+  justify-content: flex-end;
   gap: 1.5rem;
-  margin-left: 1rem;
 }</style>

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.d.ts

@@ -1,11 +1,11 @@
 import type { FileWithBlobUrl } from '../../../core/files';
 import type { ImageEditorDynamicAspectRatio } from './types';
 export type CropAndResizeOptions = {
-    /** Fixed aspect ratio, or dynamic selector, or omit for free crop. */
+    /** Fixed aspect ratio, or dynamic selector, or omit to follow the picture's own. */
     aspectRatio?: number | ImageEditorDynamicAspectRatio;
-    /** Crop/scale mode inside the editor canvas. @default 'cover' */
+    /** @default 'cover' */
     mode?: 'contain' | 'cover';
-    /** Fill color in `contain` mode (transparent letterbox by default). */
+    /** Fill color in `contain` mode (transparent by default). */
     fillColor?: string;
     /**
      * After cropping, downscale to fit these limits. `max1` / `max2` are not tied to width /
@@ -18,19 +18,7 @@ export type CropAndResizeOptions = {
     } | false;
 };
 /**
- * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the
- * result before returning. Composable opt-in helper — call it explicitly from a consumer's
- * select handler when image cropping is needed before upload.
- *
+ * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the result before returning.
  * Returns `null` when the user cancels the dialog.
- *
- * @example
- * ```ts
- * const cropped = await cropAndResizeImage(file, {
- *   aspectRatio: 1,
- *   resize: { max1: 400, max2: 400 }
- * });
- * if (cropped) store.add(cropped);
- * ```
  */
 export declare const cropAndResizeImage: (file: File, options?: CropAndResizeOptions) => Promise<FileWithBlobUrl | null>;

package/dist/ui/cropper/image-editor-dialog/crop-and-resize.js

@@ -2,20 +2,8 @@ import { FileWithBlobDataHelper, resizeBlob } from '../../../core/files';
 import { openImageEditorDialog } from './index';
 const DEFAULT_RESIZE_LIMITS = { max1: 1600, max2: 1000 };
 /**
- * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the
- * result before returning. Composable opt-in helper — call it explicitly from a consumer's
- * select handler when image cropping is needed before upload.
- *
+ * Opens the kit's image editor dialog, lets the user crop, and (optionally) downscales the result before returning.
  * Returns `null` when the user cancels the dialog.
- *
- * @example
- * ```ts
- * const cropped = await cropAndResizeImage(file, {
- *   aspectRatio: 1,
- *   resize: { max1: 400, max2: 400 }
- * });
- * if (cropped) store.add(cropped);
- * ```
  */
 export const cropAndResizeImage = async (file, options = {}) => {
     const sourceUrl = URL.createObjectURL(file);
@@ -35,7 +23,6 @@ export const cropAndResizeImage = async (file, options = {}) => {
         }
         const limits = options.resize ?? DEFAULT_RESIZE_LIMITS;
         const resizedBlob = await resizeBlob(cropped, limits);
-        // Already-fitting blob? `resizeBlob` returns the same instance — short-circuit.
         if (resizedBlob === cropped) {
             return cropped;
         }

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

@@ -1,21 +1,22 @@
 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.
+ * Opens a full-screen image editor dialog: drag the picture inside a fixed frame, scale it from the corners, zoom,
+ * rotate, align, and reset.
  *
  * ### Modes
- * - **`cover`** (default) — image fills the canvas; crop selects a visible region.
- * - **`contain`** — image is fitted inside the canvas with optional fill color.
+ * - **`cover`** (default) — the picture always fills the frame; nothing outside the frame is exported.
+ * - **`contain`** — the picture is fitted inside the frame with an optional fill color for the remaining space.
  *
  * ### Aspect ratio
  * - `number` — fixed ratio, no popover.
- * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true`
- *   adds a free-ratio option; `initial` is optional when free crop is enabled.
- * - Omitted — free crop (no ratio constraint on the selection).
+ * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true` adds the picture's own
+ *   ratio as a choice; `initial` is optional when it's enabled.
+ * - Omitted — the frame follows the picture's own aspect ratio.
  *
  * ### Result
  * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
- * - `selectedRatio` — active aspect ratio at save time (`null` for free crop).
+ * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
  */
 export declare const openImageEditorDialog: (options: ImageEditorDialogOptions) => Promise<DialogResult<ImageEditorDialogResult>>;
 export type { CroppedFile, ImageEditorDialogOptions, ImageEditorDialogResult, ImageEditorDynamicAspectRatio } from './types';

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

@@ -1,21 +1,22 @@
 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.
+ * Opens a full-screen image editor dialog: drag the picture inside a fixed frame, scale it from the corners, zoom,
+ * rotate, align, and reset.
  *
  * ### Modes
- * - **`cover`** (default) — image fills the canvas; crop selects a visible region.
- * - **`contain`** — image is fitted inside the canvas with optional fill color.
+ * - **`cover`** (default) — the picture always fills the frame; nothing outside the frame is exported.
+ * - **`contain`** — the picture is fitted inside the frame with an optional fill color for the remaining space.
  *
  * ### Aspect ratio
  * - `number` — fixed ratio, no popover.
- * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true`
- *   adds a free-ratio option; `initial` is optional when free crop is enabled.
- * - Omitted — free crop (no ratio constraint on the selection).
+ * - `ImageEditorDynamicAspectRatio` — popover with supported ratios. `allowFreeCrop: true` adds the picture's own
+ *   ratio as a choice; `initial` is optional when it's enabled.
+ * - Omitted — the frame follows the picture's own aspect ratio.
  *
  * ### Result
  * - `croppedFile` — `FileWithBlobUrl` with `width`/`height` at natural resolution.
- * - `selectedRatio` — active aspect ratio at save time (`null` for free crop).
+ * - `selectedRatio` — the active aspect ratio at save time (`null` when following the picture's own).
  */
 export const openImageEditorDialog = async (options) => {
     return await Dialogs.open({

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

@@ -9,9 +9,9 @@ export type ImageEditorDynamicAspectRatio = {
     allowFreeCrop: true;
 };
 export type ImageEditorDialogOptions = {
+    /** The picture to edit — same-origin, a `blob:` / `data:` URL, or a server that sends CORS headers; anything else fails to load. */
     url: string;
     fillColor?: string;
-    showImageShadow?: boolean;
     mode?: 'contain' | 'cover';
     aspectRatio?: number | ImageEditorDynamicAspectRatio;
 };

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

@@ -1,86 +1,131 @@
-<script lang="ts">import { ColorPicker } from '../../color-picker';
+<script lang="ts">import { Button } from '../../button';
+import { ColorPicker } from '../../color-picker';
+import { Divider } from '../../divider';
 import { Icon } from '../../icon';
-import { IconText } from '../../icon-text';
-import { Popover } from '../../popover';
+import { ToolbarIconButton } from '../../page-toolbar';
+import { Popover, PopoverItem } from '../../popover';
+import { Tooltip } from '../../tooltip';
 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 IconArrowReset from '@fluentui/svg-icons/icons/arrow_reset_20_regular.svg?raw';
+import IconRotateRight from '@fluentui/svg-icons/icons/arrow_rotate_clockwise_20_regular.svg?raw';
+import IconRotateLeft from '@fluentui/svg-icons/icons/arrow_rotate_counterclockwise_20_regular.svg?raw';
+import IconCheckmark from '@fluentui/svg-icons/icons/checkmark_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 IconGridDots from '@fluentui/svg-icons/icons/grid_dots_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;
-});
+const ZOOM_PRESETS = [1.5, 2, 3];
+const ALIGN_FRACTIONS = [0, 0.5, 1];
+const zoomPercent = $derived(Math.round(cropper.zoom * 100));
+const ratioLabel = $derived(cropper.ratioLabel ?? loc.original);
 </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>
+{#snippet modeLabel(label: string, active: boolean)}
+  <span class="img-cropper-toolbar__mode">
+    {label}
+    {#if active}
+      <Icon src={IconCheckmark} />
+    {/if}
+  </span>
+{/snippet}
 
+<div
+  class="img-cropper-toolbar"
+  role="toolbar"
+  aria-label={loc.toolbar}
+  tabindex="-1"
+  onpointerdown={(event) => event.stopPropagation()}
+  onwheel={(event) => event.stopPropagation()}>
   {#if cropper.ratioOptions}
-    <div class="img-cropper-toolbar__ratio">
-      <span class="img-cropper-toolbar__label">{loc.ratio}</span>
-      <Popover position="top" panel={false}>
-        {#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>
-      </Popover>
-    </div>
+    <Popover position="top-start" aria-label={loc.ratio} --sc-kit--popover--content--min-width="7.5rem">
+      {#snippet trigger()}
+        <span class="img-cropper-toolbar__ratio-trigger">
+          <Button type="presentational" size="sm" variant="ghost">{ratioLabel}</Button>
+        </span>
+      {/snippet}
+      {#each cropper.ratioOptions as option (String(option.value))}
+        <PopoverItem on={{ click: () => cropper.changeAspectRatio(option.value) }}>{option.value === null ? loc.original : option.label}</PopoverItem>
+      {/each}
+    </Popover>
+    <Divider orientation="vertical" />
   {/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}
+  <Tooltip text={loc.zoomOut}>
+    <ToolbarIconButton
+      icon={IconZoomOut}
+      aria-label={loc.zoomOut}
+      disabled={!cropper.ready || cropper.zoom <= cropper.minZoom + 0.001}
+      on={{ click: cropper.zoomOut }} />
+  </Tooltip>
+  <Popover position="top" aria-label={loc.zoom}>
+    {#snippet trigger()}
+      <span class="img-cropper-toolbar__zoom-trigger">
+        <Button type="presentational" size="sm" variant="ghost">{zoomPercent}%</Button>
+      </span>
+    {/snippet}
+    <PopoverItem on={{ click: cropper.fill }}>{@render modeLabel(loc.fillFrame, cropper.restingMode === 'cover')}</PopoverItem>
+    <PopoverItem divider on={{ click: cropper.fit }}>{@render modeLabel(loc.fitFrame, cropper.restingMode === 'contain')}</PopoverItem>
+    {#each ZOOM_PRESETS as preset (preset)}
+      <PopoverItem on={{ click: () => cropper.setZoom(preset) }}>{Math.round(preset * 100)}%</PopoverItem>
+    {/each}
+  </Popover>
+  <Tooltip text={loc.zoomIn}>
+    <ToolbarIconButton icon={IconZoomIn} aria-label={loc.zoomIn} disabled={!cropper.ready || cropper.zoom >= cropper.maxZoom} on={{ click: cropper.zoomIn }} />
+  </Tooltip>
+
+  <Divider orientation="vertical" />
+
+  <Tooltip text={loc.freePosition}>
+    <ToolbarIconButton icon={IconArrowMove} aria-label={loc.freePosition} active={cropper.free} disabled={!cropper.ready} on={{ click: cropper.toggleFree }} />
+  </Tooltip>
+  <Tooltip text={loc.cropMode}>
+    <ToolbarIconButton
+      icon={IconCrop}
+      aria-label={loc.cropMode}
+      active={cropper.cropMode}
+      disabled={!cropper.ready}
+      on={{ click: () => cropper.setCropMode(!cropper.cropMode) }} />
+  </Tooltip>
+  {#if cropper.hasSelection}
+    <Tooltip text={loc.applyCrop}>
+      <ToolbarIconButton
+        icon={IconCheckmark}
+        aria-label={loc.applyCrop}
+        on={{ click: cropper.applyCrop }}
+        --sc-kit--toolbar-icon-button--color="var(--sc-kit--color--accent)" />
+    </Tooltip>
+  {/if}
+  <Popover position="top" aria-label={loc.align} --sc-kit--popover--content--min-width="0">
+    {#snippet trigger()}
+      <ToolbarIconButton icon={IconGridDots} presentational />
+    {/snippet}
+    <div class="img-cropper-toolbar__align" role="group" aria-label={loc.align}>
+      {#each ALIGN_FRACTIONS as fy (fy)}
+        {#each ALIGN_FRACTIONS as fx (fx)}
+          <button type="button" class="img-cropper-toolbar__align-dot" aria-label={loc.alignPosition(fx, fy)} onclick={() => cropper.align(fx, fy)}></button>
+        {/each}
+      {/each}
     </div>
+  </Popover>
+  <Tooltip text={loc.rotateLeft}>
+    <ToolbarIconButton icon={IconRotateLeft} aria-label={loc.rotateLeft} disabled={!cropper.ready} on={{ click: () => cropper.rotate(-1) }} />
+  </Tooltip>
+  <Tooltip text={loc.rotateRight}>
+    <ToolbarIconButton icon={IconRotateRight} aria-label={loc.rotateRight} disabled={!cropper.ready} on={{ click: () => cropper.rotate(1) }} />
+  </Tooltip>
+
+  <Divider orientation="vertical" />
+
+  <Tooltip text={loc.reset}>
+    <ToolbarIconButton icon={IconArrowReset} aria-label={loc.reset} disabled={!cropper.ready} on={{ click: cropper.reset }} />
+  </Tooltip>
+
+  {#if cropper.showFillColor}
+    <Divider orientation="vertical" />
+    <ColorPicker value={cropper.fillColor} label={loc.fill} variant="field" size="sm" clearable on={{ change: (value) => (cropper.fillColor = value) }} />
   {/if}
 
   {#if children}
@@ -90,136 +135,59 @@ const selectedRatioLabel = $derived.by(() => {
 
 <!--
 @component
-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)` |
 -->
 
 <style>.img-cropper-toolbar {
-  --_img-cropper-toolbar--color: var(--sc-kit--img-cropper-toolbar--color, var(--sc-kit--color--text--primary));
   --_img-cropper-toolbar--background: var(--sc-kit--img-cropper-toolbar--background, var(--sc-kit--color--bg--panel));
-  --_img-cropper-toolbar--border-color: var(--sc-kit--img-cropper-toolbar--border-color, var(--sc-kit--color--border));
-  --_img-cropper-toolbar--active-color: var(--sc-kit--img-cropper-toolbar--active-color, var(--sc-kit--color--accent));
-  container-type: inline-size;
+  --sc-kit--divider--gap: 0;
+  --sc-kit--color-picker--width: 8.75rem;
   display: flex;
   align-items: center;
-  min-width: 0;
-  gap: 0.5rem;
-  --sc-kit--icon-text--icon--font-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);
+  gap: var(--sc-kit--space--1);
+  padding: var(--sc-kit--space--1);
+  border: 1px solid var(--sc-kit--color--border);
+  border-radius: var(--sc-kit--radius--lg);
   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;
+  box-shadow: var(--sc-kit--shadow--lg);
+  cursor: default;
+  z-index: 1;
 }
 .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);
+  --sc-kit--button--width: 5.25rem;
 }
-.img-cropper-toolbar__ratio-item:hover {
-  background: var(--sc-kit--color--bg--hover);
+.img-cropper-toolbar__zoom-trigger {
+  --sc-kit--button--width: 4.25rem;
 }
-.img-cropper-toolbar__fill {
+.img-cropper-toolbar__mode {
   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;
+  justify-content: space-between;
+  gap: var(--sc-kit--space--2);
+}
+.img-cropper-toolbar__align {
+  display: grid;
+  grid-template-columns: repeat(3, 1.5rem);
+  gap: 0.25rem;
+  padding: var(--sc-kit--space--2);
+}
+.img-cropper-toolbar__align-dot {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
   padding: 0;
-  --sc-kit--icon--size: 1rem;
+  border: 1px solid var(--sc-kit--color--border--strong);
+  border-radius: var(--sc-kit--radius--sm);
+  background: var(--sc-kit--color--bg--field);
+  cursor: pointer;
 }
-.img-cropper-toolbar__fill-reset:hover {
-  color: var(--_img-cropper-toolbar--active-color);
+.img-cropper-toolbar__align-dot:hover {
+  border-color: var(--sc-kit--color--accent);
+  background: var(--sc-kit--color--accent--softer);
 }</style>