alinea 2.0.0-preview.9 → 2.0.0-rc2

package/dist/dashboard/app/ExplorerTabs.js

@@ -0,0 +1,42 @@
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/ExplorerTabs.tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "alinea/components";
+
+// src/dashboard/app/ExplorerTabs.module.css
+var ExplorerTabs_default = {
+  "ExplorerTabs": "alinea-ExplorerTabs",
+  "ExplorerTabs-panel": "alinea-ExplorerTabs-panel",
+  "ExplorerTabsPanel": "alinea-ExplorerTabs-panel",
+  "ExplorerTabs-bar": "alinea-ExplorerTabs-bar",
+  "ExplorerTabsBar": "alinea-ExplorerTabs-bar"
+};
+
+// src/dashboard/app/ExplorerTabs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(ExplorerTabs_default);
+function ExplorerTabs({
+  tabs,
+  value,
+  onValueChange,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    Tabs,
+    {
+      className: styles.ExplorerTabs(),
+      value,
+      onValueChange,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.ExplorerTabs.bar(), children: /* @__PURE__ */ jsx(TabsList, { "aria-label": "Overview tabs", children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, { value: tab.key, children: tab.label }, tab.key)) }) }),
+        /* @__PURE__ */ jsx(TabsContent, { value, className: styles.ExplorerTabs.panel(), children })
+      ]
+    }
+  );
+}
+export {
+  ExplorerTabs
+};

package/dist/dashboard/app/ExternalLinkPicker.js

@@ -1,7 +1,7 @@
 import "../../chunks/chunk-CQ52GEHY.js";
 
 // src/dashboard/app/ExternalLinkPicker.tsx
-import { Button, Checkbox, Label, TextField } from "alinea/components";
+import { Button, Checkbox, Field, TextField, useDialog } from "alinea/components";
 import { useState } from "react";
 import {
   DashboardModal,
@@ -11,8 +11,7 @@ import {
   DashboardModalFormBody,
   DashboardModalFormFooter,
   DashboardModalFormHeader,
-  DashboardModalTitle,
-  useDashboardModal
+  DashboardModalTitle
 } from "./ui/DashboardModal.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ExternalLinkPicker({
@@ -21,15 +20,21 @@ function ExternalLinkPicker({
   submitLabel,
   onConfirm
 }) {
-  return /* @__PURE__ */ jsx(DashboardModal, { children: /* @__PURE__ */ jsx(
-    ExternalLinkPickerDialog,
+  return /* @__PURE__ */ jsx(
+    DashboardModal,
     {
-      initialValue,
-      selectionMode,
-      submitLabel,
-      onConfirm
+      "aria-label": selectionMode === "multiple" ? "External links" : "External link",
+      children: /* @__PURE__ */ jsx(
+        ExternalLinkPickerDialog,
+        {
+          initialValue,
+          selectionMode,
+          submitLabel,
+          onConfirm
+        }
+      )
     }
-  ) });
+  );
 }
 function ExternalLinkPickerDialog({
   initialValue,
@@ -37,7 +42,7 @@ function ExternalLinkPickerDialog({
   submitLabel,
   onConfirm
 }) {
-  const modal = useDashboardModal();
+  const modal = useDialog();
   const initialUrl = initialValue?.url ?? "";
   const initialTitle = initialValue?.title ?? "";
   const [url, setUrl] = useState(initialUrl);
@@ -58,50 +63,35 @@ function ExternalLinkPickerDialog({
     });
     modal.close();
   }
-  return /* @__PURE__ */ jsx(
-    DashboardModalDialog,
-    {
-      "aria-label": selectionMode === "multiple" ? "External links" : "External link",
-      variant: "explorer",
-      children: /* @__PURE__ */ jsxs(DashboardModalForm, { onSubmit, children: [
-        /* @__PURE__ */ jsxs(DashboardModalFormHeader, { children: [
-          /* @__PURE__ */ jsx(DashboardModalTitle, { children: selectionMode === "multiple" ? "External links" : "External link" }),
-          /* @__PURE__ */ jsx(DashboardModalCloseButton, {})
-        ] }),
-        /* @__PURE__ */ jsxs(DashboardModalFormBody, { children: [
-          /* @__PURE__ */ jsx(
-            TextField,
-            {
-              label: "URL",
-              value: url,
-              onChange: setUrl,
-              errorMessage: urlError,
-              isInvalid: Boolean(urlError),
-              isRequired: true
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            TextField,
-            {
-              label: "Label",
-              value: title,
-              onChange: setTitle,
-              isRequired: true
-            }
-          ),
-          /* @__PURE__ */ jsx(Label, { label: "Target", children: /* @__PURE__ */ jsx(
-            Checkbox,
-            {
-              isSelected: openInNewTab,
-              onChange: setOpenInNewTab,
-              label: "Open link in new tab"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx(DashboardModalFormFooter, { children: /* @__PURE__ */ jsx(Button, { type: "submit", intent: "primary", children: submitLabel ?? "Add link" }) })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsx(DashboardModalDialog, { variant: "explorer", children: /* @__PURE__ */ jsxs(DashboardModalForm, { onSubmit, children: [
+    /* @__PURE__ */ jsxs(DashboardModalFormHeader, { children: [
+      /* @__PURE__ */ jsx(DashboardModalTitle, { children: selectionMode === "multiple" ? "External links" : "External link" }),
+      /* @__PURE__ */ jsx(DashboardModalCloseButton, {})
+    ] }),
+    /* @__PURE__ */ jsxs(DashboardModalFormBody, { children: [
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "URL",
+          value: url,
+          onValueChange: setUrl,
+          error: urlError,
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        TextField,
+        {
+          label: "Label",
+          value: title,
+          onValueChange: setTitle,
+          required: true
+        }
+      ),
+      /* @__PURE__ */ jsx(Field, { label: "Target", children: /* @__PURE__ */ jsx(Checkbox, { checked: openInNewTab, onCheckedChange: setOpenInNewTab, children: "Open link in new tab" }) })
+    ] }),
+    /* @__PURE__ */ jsx(DashboardModalFormFooter, { children: /* @__PURE__ */ jsx(Button, { type: "submit", color: "primary", children: submitLabel ?? "Add link" }) })
+  ] }) });
 }
 export {
   ExternalLinkPicker

package/dist/dashboard/app/FileKind.d.ts

@@ -0,0 +1,8 @@
+import type { IconType } from 'alinea/components/types';
+/** The icon of a file without an image preview, in the color of its kind */
+export interface FileKindVisual {
+    icon: IconType;
+    iconColor?: string;
+}
+/** The visual of a file by its extension, with or without the leading dot */
+export declare function fileKindVisual(extension: string | null | undefined): FileKindVisual;

package/dist/dashboard/app/FileKind.js

@@ -0,0 +1,40 @@
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/FileKind.ts
+import { fileKindExtensions } from "alinea/core/media/FileKinds";
+import {
+  IcRoundAudioFile,
+  IcRoundCode,
+  IcRoundDescription,
+  IcRoundFolderZip,
+  IcRoundImage,
+  IcRoundInsertDriveFile,
+  IcRoundPictureAsPdf,
+  IcRoundSlideshow,
+  IcRoundTableChart,
+  IcRoundVideoFile
+} from "../icons.js";
+var other = { icon: IcRoundInsertDriveFile };
+var visuals = {
+  image: { icon: IcRoundImage },
+  pdf: { icon: IcRoundPictureAsPdf, iconColor: "var(--alinea-red-500)" },
+  document: { icon: IcRoundDescription, iconColor: "var(--alinea-blue-700)" },
+  spreadsheet: { icon: IcRoundTableChart, iconColor: "var(--alinea-green-600)" },
+  presentation: { icon: IcRoundSlideshow, iconColor: "var(--alinea-orange-700)" },
+  archive: { icon: IcRoundFolderZip, iconColor: "var(--alinea-yellow-600)" },
+  video: { icon: IcRoundVideoFile },
+  audio: { icon: IcRoundAudioFile },
+  code: { icon: IcRoundCode }
+};
+var visualOfExtension = new Map(
+  Object.entries(fileKindExtensions).flatMap(
+    ([kind, extensions]) => visuals[kind] ? extensions.map((extension) => [extension, visuals[kind]]) : []
+  )
+);
+function fileKindVisual(extension) {
+  const key = extension?.replace(/^\./, "").toLowerCase();
+  return key && visualOfExtension.get(key) || other;
+}
+export {
+  fileKindVisual
+};

package/dist/dashboard/app/ImageEditor.d.ts

@@ -0,0 +1,13 @@
+import { type ImageEdit } from 'alinea/core/media/ImageTransform';
+export interface ImageEditorProps {
+    src: string;
+    /** Dimensions of the image as the browser shows it */
+    width: number;
+    height: number;
+    /** The edit to start from */
+    edit?: ImageEdit;
+    onApply(edit: ImageEdit | undefined): void;
+    onCancel(): void;
+}
+/** Rotates and crops an image before it is uploaded */
+export declare function ImageEditor({ src, width, height, edit, onApply, onCancel }: ImageEditorProps): import("react").JSX.Element;

package/dist/dashboard/app/ImageEditor.js

@@ -0,0 +1,302 @@
+import {
+  dist_default
+} from "../../chunks/chunk-I4OYYAX5.js";
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/ImageEditor.tsx
+import { Button, Select, SelectItem, Text } from "alinea/components";
+import {
+  rotatedSize
+} from "alinea/core/media/ImageTransform";
+import { useRef, useState } from "react";
+import { IcRoundRotateLeft, IcRoundRotateRight, IcRoundUndo } from "../icons.js";
+import { CroppedImage } from "./CroppedImage.js";
+
+// src/dashboard/app/ImageEditor.module.css
+var ImageEditor_default = {
+  "ImageEditor-canvas": "alinea-ImageEditor-canvas",
+  "ImageEditorCanvas": "alinea-ImageEditor-canvas",
+  "ImageEditor-image": "alinea-ImageEditor-image",
+  "ImageEditorImage": "alinea-ImageEditor-image",
+  "ImageEditor-crop": "alinea-ImageEditor-crop",
+  "ImageEditorCrop": "alinea-ImageEditor-crop",
+  "ImageEditor-size": "alinea-ImageEditor-size",
+  "ImageEditorSize": "alinea-ImageEditor-size",
+  "ImageEditor-shade": "alinea-ImageEditor-shade",
+  "ImageEditorShade": "alinea-ImageEditor-shade",
+  "ImageEditor-toolbar": "alinea-ImageEditor-toolbar",
+  "ImageEditorToolbar": "alinea-ImageEditor-toolbar",
+  "is-se": "alinea-is-se",
+  "isSe": "alinea-is-se",
+  "ImageEditor-stage": "alinea-ImageEditor-stage",
+  "ImageEditorStage": "alinea-ImageEditor-stage",
+  "is-ne": "alinea-is-ne",
+  "isNe": "alinea-is-ne",
+  "ImageEditor-crop-handle": "alinea-ImageEditor-crop-handle",
+  "ImageEditorCropHandle": "alinea-ImageEditor-crop-handle",
+  "is-nw": "alinea-is-nw",
+  "isNw": "alinea-is-nw",
+  "is-n": "alinea-is-n",
+  "isN": "alinea-is-n",
+  "is-s": "alinea-is-s",
+  "isS": "alinea-is-s",
+  "ImageEditor-shade-hole": "alinea-ImageEditor-shade-hole",
+  "ImageEditorShadeHole": "alinea-ImageEditor-shade-hole",
+  "ImageEditor": "alinea-ImageEditor",
+  "ImageEditor-aspect": "alinea-ImageEditor-aspect",
+  "ImageEditorAspect": "alinea-ImageEditor-aspect",
+  "is-w": "alinea-is-w",
+  "isW": "alinea-is-w",
+  "ImageEditor-crop-grid": "alinea-ImageEditor-crop-grid",
+  "ImageEditorCropGrid": "alinea-ImageEditor-crop-grid",
+  "is-sw": "alinea-is-sw",
+  "isSw": "alinea-is-sw",
+  "is-e": "alinea-is-e",
+  "isE": "alinea-is-e"
+};
+
+// src/dashboard/app/ImageEditor.tsx
+import {
+  DashboardModalContent,
+  DashboardModalFooter
+} from "./ui/DashboardModal.js";
+import {
+  fitCrop,
+  fullCrop,
+  isFullCrop,
+  moveCrop,
+  resizeCrop,
+  rotateCrop
+} from "./ImageEditorCrop.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var styles = dist_default(ImageEditor_default);
+var aspects = {
+  free: { label: "Free" },
+  original: { label: "Original" },
+  "1:1": { label: "Square", ratio: 1 },
+  "4:3": { label: "Landscape 4:3", ratio: 4 / 3 },
+  "3:2": { label: "Landscape 3:2", ratio: 3 / 2 },
+  "16:9": { label: "Landscape 16:9", ratio: 16 / 9 },
+  "3:4": { label: "Portrait 3:4", ratio: 3 / 4 },
+  "2:3": { label: "Portrait 2:3", ratio: 2 / 3 },
+  "9:16": { label: "Portrait 9:16", ratio: 9 / 16 }
+};
+var cornerHandles = ["nw", "ne", "se", "sw"];
+var edgeHandles = ["n", "e", "s", "w"];
+function ImageEditor({
+  src,
+  width,
+  height,
+  edit,
+  onApply,
+  onCancel
+}) {
+  const [rotate, setRotate] = useState(edit?.rotate ?? 0);
+  const [crop, setCrop] = useState(edit?.crop ?? fullCrop);
+  const [aspect, setAspect] = useState("free");
+  const stage = useRef(null);
+  const drag = useRef(void 0);
+  const rotated = rotatedSize(width, height, rotate);
+  const ratio = aspectRatio(aspect);
+  const relativeRatio = aspect === "original" ? 1 : ratio && ratio * rotated.height / rotated.width;
+  const pixels = {
+    width: Math.round(crop.width * rotated.width),
+    height: Math.round(crop.height * rotated.height)
+  };
+  const cropStyle = {
+    left: `${crop.x * 100}%`,
+    top: `${crop.y * 100}%`,
+    width: `${crop.width * 100}%`,
+    height: `${crop.height * 100}%`
+  };
+  function turn(direction) {
+    setRotate(
+      (current) => (current + direction * 90 + 360) % 360
+    );
+    setCrop((current) => rotateCrop(current, direction));
+    setAspect((current) => flipAspect(current));
+  }
+  function selectAspect(next) {
+    setAspect(next);
+    const nextRatio = aspectRatio(next);
+    if (next === "original") setCrop(fullCrop);
+    else if (nextRatio)
+      setCrop(
+        (current) => fitCrop(current, nextRatio * rotated.height / rotated.width)
+      );
+  }
+  function startDrag(event, handle) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag.current = { handle, crop, x: event.clientX, y: event.clientY };
+  }
+  function moveDrag(event) {
+    const start = drag.current;
+    const rect = stage.current?.getBoundingClientRect();
+    if (!start || !rect) return;
+    if (!event.buttons) return endDrag();
+    const dx = (event.clientX - start.x) / rect.width;
+    const dy = (event.clientY - start.y) / rect.height;
+    setCrop(
+      start.handle ? resizeCrop(start.crop, start.handle, dx, dy, relativeRatio) : moveCrop(start.crop, dx, dy)
+    );
+  }
+  function endDrag() {
+    drag.current = void 0;
+  }
+  function onCropKeyDown(event) {
+    const step = event.shiftKey ? 0.1 : 0.01;
+    const delta = {
+      ArrowLeft: [-step, 0],
+      ArrowRight: [step, 0],
+      ArrowUp: [0, -step],
+      ArrowDown: [0, step]
+    }[event.key];
+    if (!delta) return;
+    event.preventDefault();
+    setCrop((current) => moveCrop(current, delta[0], delta[1]));
+  }
+  function reset() {
+    setRotate(0);
+    setCrop(fullCrop);
+    setAspect("free");
+  }
+  function apply() {
+    const result = {
+      ...rotate ? { rotate } : {},
+      ...isFullCrop(crop) ? {} : { crop }
+    };
+    onApply(result.rotate || result.crop ? result : void 0);
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DashboardModalContent, { children: /* @__PURE__ */ jsxs("div", { className: styles.ImageEditor(), children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.ImageEditor.toolbar(), children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon-lg",
+            icon: IcRoundRotateLeft,
+            "aria-label": "Rotate left",
+            onClick: () => turn(-1)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "icon-lg",
+            icon: IcRoundRotateRight,
+            "aria-label": "Rotate right",
+            onClick: () => turn(1)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            "aria-label": "Aspect ratio",
+            size: "sm",
+            className: styles.ImageEditor.aspect(),
+            value: aspect,
+            onValueChange: (value) => selectAspect(value ?? "free"),
+            required: true,
+            children: Object.entries(aspects).map(([key, { label }]) => /* @__PURE__ */ jsx(SelectItem, { value: key, children: label }, key))
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            as: "span",
+            size: "sm",
+            color: "muted",
+            className: styles.ImageEditor.size(),
+            children: [
+              pixels.width,
+              " \xD7 ",
+              pixels.height,
+              " px"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", icon: IcRoundUndo, onClick: reset, children: "Reset" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: styles.ImageEditor.canvas(), children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: stage,
+          className: styles.ImageEditor.stage(),
+          style: {
+            // Fit the canvas, leaving out its padding
+            width: `min(100%, calc((var(--alinea-image-editor-height) - 32px) * ${rotated.width / rotated.height}))`
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              CroppedImage,
+              {
+                src,
+                width,
+                height,
+                edit: { rotate },
+                className: styles.ImageEditor.image()
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: styles.ImageEditor.shade(), children: /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: styles.ImageEditor.shade.hole(),
+                style: cropStyle
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "group",
+                "aria-label": "Crop area, use the arrow keys to move it",
+                tabIndex: 0,
+                className: styles.ImageEditor.crop(),
+                style: cropStyle,
+                onKeyDown: onCropKeyDown,
+                onPointerDown: (event) => startDrag(event),
+                onPointerMove: moveDrag,
+                onPointerUp: endDrag,
+                onPointerCancel: endDrag,
+                onLostPointerCapture: endDrag,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: styles.ImageEditor.crop.grid() }),
+                  (relativeRatio ? cornerHandles : [...cornerHandles, ...edgeHandles]).map((handle) => /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "data-handle": handle,
+                      className: styles.ImageEditor.crop.handle(handle),
+                      onPointerDown: (event) => startDrag(event, handle)
+                    },
+                    handle
+                  ))
+                ]
+              }
+            )
+          ]
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(DashboardModalFooter, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outline", color: "secondary", onClick: onCancel, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { color: "primary", onClick: apply, children: "Apply" })
+    ] })
+  ] });
+}
+function aspectRatio(aspect) {
+  const preset = aspects[aspect];
+  return "ratio" in preset ? preset.ratio : void 0;
+}
+function flipAspect(aspect) {
+  const [width, height] = aspect.split(":");
+  if (!height) return aspect;
+  const flipped = `${height}:${width}`;
+  return flipped in aspects ? flipped : "free";
+}
+export {
+  ImageEditor
+};

package/dist/dashboard/app/ImageEditorCrop.d.ts

@@ -0,0 +1,19 @@
+import type { ImageCrop } from 'alinea/core/media/ImageTransform';
+/** Handles on the edges and corners of the crop area */
+export type CropHandle = 'n' | 'e' | 's' | 'w' | 'ne' | 'se' | 'sw' | 'nw';
+export declare const fullCrop: ImageCrop;
+export declare function isFullCrop(crop: ImageCrop): boolean;
+/** The crop of the same pixels once the image turns a quarter clockwise
+ * (1) or counterclockwise (-1) */
+export declare function rotateCrop(crop: ImageCrop, direction: 1 | -1): ImageCrop;
+/**
+ * The largest crop with a ratio (of relative width to relative height)
+ * that fits the image, centered on the current crop
+ */
+export declare function fitCrop(crop: ImageCrop, ratio: number): ImageCrop;
+export declare function moveCrop(crop: ImageCrop, dx: number, dy: number): ImageCrop;
+/**
+ * Drag a handle of the crop. With a ratio the opposite corner stays in
+ * place and the crop keeps its ratio.
+ */
+export declare function resizeCrop(crop: ImageCrop, handle: CropHandle, dx: number, dy: number, ratio?: number): ImageCrop;

package/dist/dashboard/app/ImageEditorCrop.js

@@ -0,0 +1,90 @@
+import "../../chunks/chunk-CQ52GEHY.js";
+
+// src/dashboard/app/ImageEditorCrop.ts
+var fullCrop = { x: 0, y: 0, width: 1, height: 1 };
+var minSize = 0.05;
+function isFullCrop(crop) {
+  return crop.x <= 0 && crop.y <= 0 && crop.width >= 1 && crop.height >= 1;
+}
+function rotateCrop(crop, direction) {
+  if (direction === 1)
+    return {
+      x: 1 - (crop.y + crop.height),
+      y: crop.x,
+      width: crop.height,
+      height: crop.width
+    };
+  return {
+    x: crop.y,
+    y: 1 - (crop.x + crop.width),
+    width: crop.height,
+    height: crop.width
+  };
+}
+function fitCrop(crop, ratio) {
+  let width = 1;
+  let height = 1 / ratio;
+  if (height > 1) {
+    height = 1;
+    width = ratio;
+  }
+  const centerX = crop.x + crop.width / 2;
+  const centerY = crop.y + crop.height / 2;
+  return {
+    x: clamp(centerX - width / 2, 0, 1 - width),
+    y: clamp(centerY - height / 2, 0, 1 - height),
+    width,
+    height
+  };
+}
+function moveCrop(crop, dx, dy) {
+  return {
+    ...crop,
+    x: clamp(crop.x + dx, 0, 1 - crop.width),
+    y: clamp(crop.y + dy, 0, 1 - crop.height)
+  };
+}
+function resizeCrop(crop, handle, dx, dy, ratio) {
+  let left = crop.x;
+  let top = crop.y;
+  let right = crop.x + crop.width;
+  let bottom = crop.y + crop.height;
+  const west = handle.includes("w");
+  const east = handle.includes("e");
+  const north = handle.includes("n");
+  const south = handle.includes("s");
+  if (ratio && (west || east) && (north || south)) {
+    const dragWidth = east ? right + dx - left : right - (left + dx);
+    const dragHeight = south ? bottom + dy - top : bottom - (top + dy);
+    const maxWidth = east ? 1 - left : right;
+    const maxHeight = south ? 1 - top : bottom;
+    const width = clamp(
+      Math.max(dragWidth, dragHeight * ratio),
+      minSize,
+      Math.min(maxWidth, maxHeight * ratio)
+    );
+    const height = width / ratio;
+    return {
+      x: east ? left : right - width,
+      y: south ? top : bottom - height,
+      width,
+      height
+    };
+  }
+  if (west) left = clamp(left + dx, 0, right - minSize);
+  if (east) right = clamp(right + dx, left + minSize, 1);
+  if (north) top = clamp(top + dy, 0, bottom - minSize);
+  if (south) bottom = clamp(bottom + dy, top + minSize, 1);
+  return { x: left, y: top, width: right - left, height: bottom - top };
+}
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+export {
+  fitCrop,
+  fullCrop,
+  isFullCrop,
+  moveCrop,
+  resizeCrop,
+  rotateCrop
+};

package/dist/dashboard/app/ImagePicker.d.ts

@@ -1,5 +1,5 @@
-import { type ExplorerOptions } from 'alinea/dashboard/atoms/explorer';
 import { type ReactNode } from 'react';
+import type { ExplorerOptions } from '../atoms/explorer.js';
 export interface ImagePickerOptions extends ExplorerOptions {
     label?: ReactNode;
 }