@streamscloud/kit 0.63.0 → 0.65.0

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>

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>;