@studiolxd/brand 38.12.4

package/dist/_shared/imagecropdialog.js

@@ -0,0 +1,504 @@
+import '../imagecropdialog.css';
+import { Spinner as e } from "../spinner.js";
+import { Button as t } from "../button.js";
+import { Alert as n } from "../alert.js";
+import { Modal as r } from "../modal.js";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import s, { PureComponent as c, createRef as l, useRef as u, useState as d } from "react";
+//#region node_modules/.pnpm/react-image-crop@11.1.2_react@19.2.4/node_modules/react-image-crop/dist/index.js
+var f = {
+	x: 0,
+	y: 0,
+	width: 0,
+	height: 0,
+	unit: "px"
+}, p = (e, t, n) => Math.min(Math.max(e, t), n), m = (...e) => e.filter((e) => e && typeof e == "string").join(" "), h = (e, t) => e === t || e.width === t.width && e.height === t.height && e.x === t.x && e.y === t.y && e.unit === t.unit;
+function g(e, t, n, r) {
+	let i = y(e, n, r);
+	return e.width && (i.height = i.width / t), e.height && (i.width = i.height * t), i.y + i.height > r && (i.height = r - i.y, i.width = i.height * t), i.x + i.width > n && (i.width = n - i.x, i.height = i.width / t), e.unit === "%" ? v(i, n, r) : i;
+}
+function _(e, t, n) {
+	let r = y(e, t, n);
+	return r.x = (t - r.width) / 2, r.y = (n - r.height) / 2, e.unit === "%" ? v(r, t, n) : r;
+}
+function v(e, t, n) {
+	return e.unit === "%" ? {
+		...f,
+		...e,
+		unit: "%"
+	} : {
+		unit: "%",
+		x: e.x ? e.x / t * 100 : 0,
+		y: e.y ? e.y / n * 100 : 0,
+		width: e.width ? e.width / t * 100 : 0,
+		height: e.height ? e.height / n * 100 : 0
+	};
+}
+function y(e, t, n) {
+	return !e.unit || e.unit === "px" ? {
+		...f,
+		...e,
+		unit: "px"
+	} : {
+		unit: "px",
+		x: e.x ? e.x * t / 100 : 0,
+		y: e.y ? e.y * n / 100 : 0,
+		width: e.width ? e.width * t / 100 : 0,
+		height: e.height ? e.height * n / 100 : 0
+	};
+}
+function b(e, t, n, r, i, a = 0, o = 0, s = r, c = i) {
+	let l = { ...e }, u = Math.min(a, r), d = Math.min(o, i), f = Math.min(s, r), p = Math.min(c, i);
+	t && (t > 1 ? (u = o ? o * t : u, d = u / t, f = s * t) : (d = a ? a / t : d, u = d * t, p = c / t)), l.y < 0 && (l.height = Math.max(l.height + l.y, d), l.y = 0), l.x < 0 && (l.width = Math.max(l.width + l.x, u), l.x = 0);
+	let m = r - (l.x + l.width);
+	m < 0 && (l.x = Math.min(l.x, r - u), l.width += m);
+	let h = i - (l.y + l.height);
+	if (h < 0 && (l.y = Math.min(l.y, i - d), l.height += h), l.width < u && ((n === "sw" || n == "nw") && (l.x -= u - l.width), l.width = u), l.height < d && ((n === "nw" || n == "ne") && (l.y -= d - l.height), l.height = d), l.width > f && ((n === "sw" || n == "nw") && (l.x -= f - l.width), l.width = f), l.height > p && ((n === "nw" || n == "ne") && (l.y -= p - l.height), l.height = p), t) {
+		let e = l.width / l.height;
+		if (e < t) {
+			let e = Math.max(l.width / t, d);
+			(n === "nw" || n == "ne") && (l.y -= e - l.height), l.height = e;
+		} else if (e > t) {
+			let e = Math.max(l.height * t, u);
+			(n === "sw" || n == "nw") && (l.x -= e - l.width), l.width = e;
+		}
+	}
+	return l;
+}
+function x(e, t, n, r) {
+	let i = { ...e };
+	return t === "ArrowLeft" ? r === "nw" ? (i.x -= n, i.y -= n, i.width += n, i.height += n) : r === "w" ? (i.x -= n, i.width += n) : r === "sw" ? (i.x -= n, i.width += n, i.height += n) : r === "ne" ? (i.y += n, i.width -= n, i.height -= n) : r === "e" ? i.width -= n : r === "se" && (i.width -= n, i.height -= n) : t === "ArrowRight" && (r === "nw" ? (i.x += n, i.y += n, i.width -= n, i.height -= n) : r === "w" ? (i.x += n, i.width -= n) : r === "sw" ? (i.x += n, i.width -= n, i.height -= n) : r === "ne" ? (i.y -= n, i.width += n, i.height += n) : r === "e" ? i.width += n : r === "se" && (i.width += n, i.height += n)), t === "ArrowUp" ? r === "nw" ? (i.x -= n, i.y -= n, i.width += n, i.height += n) : r === "n" ? (i.y -= n, i.height += n) : r === "ne" ? (i.y -= n, i.width += n, i.height += n) : r === "sw" ? (i.x += n, i.width -= n, i.height -= n) : r === "s" ? i.height -= n : r === "se" && (i.width -= n, i.height -= n) : t === "ArrowDown" && (r === "nw" ? (i.x += n, i.y += n, i.width -= n, i.height -= n) : r === "n" ? (i.y += n, i.height -= n) : r === "ne" ? (i.y += n, i.width -= n, i.height -= n) : r === "sw" ? (i.x -= n, i.width += n, i.height += n) : r === "s" ? i.height += n : r === "se" && (i.width += n, i.height += n)), i;
+}
+var S = {
+	capture: !0,
+	passive: !1
+}, C = 0, w = class e extends c {
+	static xOrds = ["e", "w"];
+	static yOrds = ["n", "s"];
+	static xyOrds = [
+		"nw",
+		"ne",
+		"se",
+		"sw"
+	];
+	static nudgeStep = 1;
+	static nudgeStepMedium = 10;
+	static nudgeStepLarge = 100;
+	static defaultProps = { ariaLabels: {
+		cropArea: "Use the arrow keys to move the crop selection area",
+		nwDragHandle: "Use the arrow keys to move the north west drag handle to change the crop selection area",
+		nDragHandle: "Use the up and down arrow keys to move the north drag handle to change the crop selection area",
+		neDragHandle: "Use the arrow keys to move the north east drag handle to change the crop selection area",
+		eDragHandle: "Use the up and down arrow keys to move the east drag handle to change the crop selection area",
+		seDragHandle: "Use the arrow keys to move the south east drag handle to change the crop selection area",
+		sDragHandle: "Use the up and down arrow keys to move the south drag handle to change the crop selection area",
+		swDragHandle: "Use the arrow keys to move the south west drag handle to change the crop selection area",
+		wDragHandle: "Use the up and down arrow keys to move the west drag handle to change the crop selection area"
+	} };
+	get document() {
+		return document;
+	}
+	docMoveBound = !1;
+	mouseDownOnCrop = !1;
+	dragStarted = !1;
+	evData = {
+		startClientX: 0,
+		startClientY: 0,
+		startCropX: 0,
+		startCropY: 0,
+		clientX: 0,
+		clientY: 0,
+		isResize: !0
+	};
+	componentRef = l();
+	mediaRef = l();
+	resizeObserver;
+	initChangeCalled = !1;
+	instanceId = `rc-${C++}`;
+	state = {
+		cropIsActive: !1,
+		newCropIsBeingDrawn: !1
+	};
+	getBox() {
+		let e = this.mediaRef.current;
+		if (!e) return {
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		};
+		let { x: t, y: n, width: r, height: i } = e.getBoundingClientRect();
+		return {
+			x: t,
+			y: n,
+			width: r,
+			height: i
+		};
+	}
+	componentDidUpdate(e) {
+		let { crop: t, onComplete: n } = this.props;
+		if (n && !e.crop && t) {
+			let { width: e, height: r } = this.getBox();
+			e && r && n(y(t, e, r), v(t, e, r));
+		}
+	}
+	componentWillUnmount() {
+		this.resizeObserver && this.resizeObserver.disconnect(), this.unbindDocMove();
+	}
+	bindDocMove() {
+		this.docMoveBound ||= (this.document.addEventListener("pointermove", this.onDocPointerMove, S), this.document.addEventListener("pointerup", this.onDocPointerDone, S), this.document.addEventListener("pointercancel", this.onDocPointerDone, S), !0);
+	}
+	unbindDocMove() {
+		this.docMoveBound &&= (this.document.removeEventListener("pointermove", this.onDocPointerMove, S), this.document.removeEventListener("pointerup", this.onDocPointerDone, S), this.document.removeEventListener("pointercancel", this.onDocPointerDone, S), !1);
+	}
+	onCropPointerDown = (e) => {
+		let { crop: t, disabled: n } = this.props, r = this.getBox();
+		if (!t) return;
+		let i = y(t, r.width, r.height);
+		if (n) return;
+		e.cancelable && e.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+		let a = e.target.dataset.ord, o = !!a, s = e.clientX, c = e.clientY, l = i.x, u = i.y;
+		if (a) {
+			let t = e.clientX - r.x, n = e.clientY - r.y, o = 0, d = 0;
+			a === "ne" || a == "e" ? (o = t - (i.x + i.width), d = n - i.y, l = i.x, u = i.y + i.height) : a === "se" || a === "s" ? (o = t - (i.x + i.width), d = n - (i.y + i.height), l = i.x, u = i.y) : a === "sw" || a == "w" ? (o = t - i.x, d = n - (i.y + i.height), l = i.x + i.width, u = i.y) : (a === "nw" || a == "n") && (o = t - i.x, d = n - i.y, l = i.x + i.width, u = i.y + i.height), s = l + r.x + o, c = u + r.y + d;
+		}
+		this.evData = {
+			startClientX: s,
+			startClientY: c,
+			startCropX: l,
+			startCropY: u,
+			clientX: e.clientX,
+			clientY: e.clientY,
+			isResize: o,
+			ord: a
+		}, this.mouseDownOnCrop = !0, this.setState({ cropIsActive: !0 });
+	};
+	onComponentPointerDown = (e) => {
+		let { crop: t, disabled: n, locked: r, keepSelection: i, onChange: a } = this.props, o = this.getBox();
+		if (n || r || i && t) return;
+		e.cancelable && e.preventDefault(), this.bindDocMove(), this.componentRef.current.focus({ preventScroll: !0 });
+		let s = e.clientX - o.x, c = e.clientY - o.y, l = {
+			unit: "px",
+			x: s,
+			y: c,
+			width: 0,
+			height: 0
+		};
+		this.evData = {
+			startClientX: e.clientX,
+			startClientY: e.clientY,
+			startCropX: s,
+			startCropY: c,
+			clientX: e.clientX,
+			clientY: e.clientY,
+			isResize: !0
+		}, this.mouseDownOnCrop = !0, a(y(l, o.width, o.height), v(l, o.width, o.height)), this.setState({
+			cropIsActive: !0,
+			newCropIsBeingDrawn: !0
+		});
+	};
+	onDocPointerMove = (e) => {
+		let { crop: t, disabled: n, onChange: r, onDragStart: i } = this.props, a = this.getBox();
+		if (n || !t || !this.mouseDownOnCrop) return;
+		e.cancelable && e.preventDefault(), this.dragStarted || (this.dragStarted = !0, i && i(e));
+		let { evData: o } = this;
+		o.clientX = e.clientX, o.clientY = e.clientY;
+		let s;
+		s = o.isResize ? this.resizeCrop() : this.dragCrop(), h(t, s) || r(y(s, a.width, a.height), v(s, a.width, a.height));
+	};
+	onComponentKeyDown = (t) => {
+		let { crop: n, disabled: r, onChange: i, onComplete: a } = this.props;
+		if (r) return;
+		let o = t.key, s = !1;
+		if (!n) return;
+		let c = this.getBox(), l = this.makePixelCrop(c), u = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? e.nudgeStepLarge : t.shiftKey ? e.nudgeStepMedium : e.nudgeStep;
+		if (o === "ArrowLeft" ? (l.x -= u, s = !0) : o === "ArrowRight" ? (l.x += u, s = !0) : o === "ArrowUp" ? (l.y -= u, s = !0) : o === "ArrowDown" && (l.y += u, s = !0), s) {
+			t.cancelable && t.preventDefault(), l.x = p(l.x, 0, c.width - l.width), l.y = p(l.y, 0, c.height - l.height);
+			let e = y(l, c.width, c.height), n = v(l, c.width, c.height);
+			i(e, n), a && a(e, n);
+		}
+	};
+	onHandlerKeyDown = (t, n) => {
+		let { aspect: r = 0, crop: i, disabled: a, minWidth: o = 0, minHeight: s = 0, maxWidth: c, maxHeight: l, onChange: u, onComplete: d } = this.props, f = this.getBox();
+		if (a || !i) return;
+		if (t.key === "ArrowUp" || t.key === "ArrowDown" || t.key === "ArrowLeft" || t.key === "ArrowRight") t.stopPropagation(), t.preventDefault();
+		else return;
+		let p = (navigator.platform.match("Mac") ? t.metaKey : t.ctrlKey) ? e.nudgeStepLarge : t.shiftKey ? e.nudgeStepMedium : e.nudgeStep, m = b(x(y(i, f.width, f.height), t.key, p, n), r, n, f.width, f.height, o, s, c, l);
+		if (!h(i, m)) {
+			let e = v(m, f.width, f.height);
+			u(m, e), d && d(m, e);
+		}
+	};
+	onDocPointerDone = (e) => {
+		let { crop: t, disabled: n, onComplete: r, onDragEnd: i } = this.props, a = this.getBox();
+		this.unbindDocMove(), !(n || !t) && this.mouseDownOnCrop && (this.mouseDownOnCrop = !1, this.dragStarted = !1, i && i(e), r && r(y(t, a.width, a.height), v(t, a.width, a.height)), this.setState({
+			cropIsActive: !1,
+			newCropIsBeingDrawn: !1
+		}));
+	};
+	onDragFocus = () => {
+		this.componentRef.current?.scrollTo(0, 0);
+	};
+	getCropStyle() {
+		let { crop: e } = this.props;
+		if (e) return {
+			top: `${e.y}${e.unit}`,
+			left: `${e.x}${e.unit}`,
+			width: `${e.width}${e.unit}`,
+			height: `${e.height}${e.unit}`
+		};
+	}
+	dragCrop() {
+		let { evData: e } = this, t = this.getBox(), n = this.makePixelCrop(t), r = e.clientX - e.startClientX, i = e.clientY - e.startClientY;
+		return n.x = p(e.startCropX + r, 0, t.width - n.width), n.y = p(e.startCropY + i, 0, t.height - n.height), n;
+	}
+	getPointRegion(e, t, n, r) {
+		let { evData: i } = this, a = i.clientX - e.x, o = i.clientY - e.y, s;
+		s = r && t ? t === "nw" || t === "n" || t === "ne" : o < i.startCropY;
+		let c;
+		return c = n && t ? t === "nw" || t === "w" || t === "sw" : a < i.startCropX, c ? s ? "nw" : "sw" : s ? "ne" : "se";
+	}
+	resolveMinDimensions(e, t, n = 0, r = 0) {
+		let i = Math.min(n, e.width), a = Math.min(r, e.height);
+		return !t || !i && !a ? [i, a] : t > 1 ? i ? [i, i / t] : [a * t, a] : a ? [a * t, a] : [i, i / t];
+	}
+	resizeCrop() {
+		let { evData: t } = this, { aspect: n = 0, maxWidth: r, maxHeight: i } = this.props, a = this.getBox(), [o, s] = this.resolveMinDimensions(a, n, this.props.minWidth, this.props.minHeight), c = this.makePixelCrop(a), l = this.getPointRegion(a, t.ord, o, s), u = t.ord || l, d = t.clientX - t.startClientX, f = t.clientY - t.startClientY;
+		(o && u === "nw" || u === "w" || u === "sw") && (d = Math.min(d, -o)), (s && u === "nw" || u === "n" || u === "ne") && (f = Math.min(f, -s));
+		let m = {
+			unit: "px",
+			x: 0,
+			y: 0,
+			width: 0,
+			height: 0
+		};
+		l === "ne" ? (m.x = t.startCropX, m.width = d, n ? (m.height = m.width / n, m.y = t.startCropY - m.height) : (m.height = Math.abs(f), m.y = t.startCropY - m.height)) : l === "se" ? (m.x = t.startCropX, m.y = t.startCropY, m.width = d, n ? m.height = m.width / n : m.height = f) : l === "sw" ? (m.x = t.startCropX + d, m.y = t.startCropY, m.width = Math.abs(d), n ? m.height = m.width / n : m.height = f) : l === "nw" && (m.x = t.startCropX + d, m.width = Math.abs(d), n ? (m.height = m.width / n, m.y = t.startCropY - m.height) : (m.height = Math.abs(f), m.y = t.startCropY + f));
+		let h = b(m, n, l, a.width, a.height, o, s, r, i);
+		return n || e.xyOrds.indexOf(u) > -1 ? c = h : e.xOrds.indexOf(u) > -1 ? (c.x = h.x, c.width = h.width) : e.yOrds.indexOf(u) > -1 && (c.y = h.y, c.height = h.height), c.x = p(c.x, 0, a.width - c.width), c.y = p(c.y, 0, a.height - c.height), c;
+	}
+	renderCropSelection() {
+		let { ariaLabels: t = e.defaultProps.ariaLabels, disabled: n, locked: r, renderSelectionAddon: i, ruleOfThirds: a, crop: o } = this.props, c = this.getCropStyle();
+		if (o) return /* @__PURE__ */ s.createElement("div", {
+			style: c,
+			className: "ReactCrop__crop-selection",
+			onPointerDown: this.onCropPointerDown,
+			"aria-label": t.cropArea,
+			tabIndex: 0,
+			onKeyDown: this.onComponentKeyDown,
+			role: "group"
+		}, !n && !r && /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-elements",
+			onFocus: this.onDragFocus
+		}, /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-bar ord-n",
+			"data-ord": "n"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-bar ord-e",
+			"data-ord": "e"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-bar ord-s",
+			"data-ord": "s"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-bar ord-w",
+			"data-ord": "w"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-handle ord-nw",
+			"data-ord": "nw",
+			tabIndex: 0,
+			"aria-label": t.nwDragHandle,
+			onKeyDown: (e) => this.onHandlerKeyDown(e, "nw"),
+			role: "button"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-handle ord-n",
+			"data-ord": "n",
+			tabIndex: 0,
+			"aria-label": t.nDragHandle,
+			onKeyDown: (e) => this.onHandlerKeyDown(e, "n"),
+			role: "button"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-handle ord-ne",
+			"data-ord": "ne",
+			tabIndex: 0,
+			"aria-label": t.neDragHandle,
+			onKeyDown: (e) => this.onHandlerKeyDown(e, "ne"),
+			role: "button"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-handle ord-e",
+			"data-ord": "e",
+			tabIndex: 0,
+			"aria-label": t.eDragHandle,
+			onKeyDown: (e) => this.onHandlerKeyDown(e, "e"),
+			role: "button"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-handle ord-se",
+			"data-ord": "se",
+			tabIndex: 0,
+			"aria-label": t.seDragHandle,
+			onKeyDown: (e) => this.onHandlerKeyDown(e, "se"),
+			role: "button"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-handle ord-s",
+			"data-ord": "s",
+			tabIndex: 0,
+			"aria-label": t.sDragHandle,
+			onKeyDown: (e) => this.onHandlerKeyDown(e, "s"),
+			role: "button"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-handle ord-sw",
+			"data-ord": "sw",
+			tabIndex: 0,
+			"aria-label": t.swDragHandle,
+			onKeyDown: (e) => this.onHandlerKeyDown(e, "sw"),
+			role: "button"
+		}), /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__drag-handle ord-w",
+			"data-ord": "w",
+			tabIndex: 0,
+			"aria-label": t.wDragHandle,
+			onKeyDown: (e) => this.onHandlerKeyDown(e, "w"),
+			role: "button"
+		})), i && /* @__PURE__ */ s.createElement("div", {
+			className: "ReactCrop__selection-addon",
+			onPointerDown: (e) => e.stopPropagation()
+		}, i(this.state)), a && /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement("div", { className: "ReactCrop__rule-of-thirds-hz" }), /* @__PURE__ */ s.createElement("div", { className: "ReactCrop__rule-of-thirds-vt" })));
+	}
+	makePixelCrop(e) {
+		return y({
+			...f,
+			...this.props.crop || {}
+		}, e.width, e.height);
+	}
+	render() {
+		let { aspect: e, children: t, circularCrop: n, className: r, crop: i, disabled: a, locked: o, style: c, ruleOfThirds: l } = this.props, { cropIsActive: u, newCropIsBeingDrawn: d } = this.state, f = i ? this.renderCropSelection() : null, p = m("ReactCrop", r, u && "ReactCrop--active", a && "ReactCrop--disabled", o && "ReactCrop--locked", d && "ReactCrop--new-crop", i && e && "ReactCrop--fixed-aspect", i && n && "ReactCrop--circular-crop", i && l && "ReactCrop--rule-of-thirds", !this.dragStarted && i && !i.width && !i.height && "ReactCrop--invisible-crop", n && "ReactCrop--no-animate");
+		return /* @__PURE__ */ s.createElement("div", {
+			ref: this.componentRef,
+			className: p,
+			style: c
+		}, /* @__PURE__ */ s.createElement("div", {
+			ref: this.mediaRef,
+			className: "ReactCrop__child-wrapper",
+			onPointerDown: this.onComponentPointerDown
+		}, t), i ? /* @__PURE__ */ s.createElement("svg", {
+			className: "ReactCrop__crop-mask",
+			width: "100%",
+			height: "100%"
+		}, /* @__PURE__ */ s.createElement("defs", null, /* @__PURE__ */ s.createElement("mask", { id: `hole-${this.instanceId}` }, /* @__PURE__ */ s.createElement("rect", {
+			width: "100%",
+			height: "100%",
+			fill: "white"
+		}), n ? /* @__PURE__ */ s.createElement("ellipse", {
+			cx: `${i.x + i.width / 2}${i.unit}`,
+			cy: `${i.y + i.height / 2}${i.unit}`,
+			rx: `${i.width / 2}${i.unit}`,
+			ry: `${i.height / 2}${i.unit}`,
+			fill: "black"
+		}) : /* @__PURE__ */ s.createElement("rect", {
+			x: `${i.x}${i.unit}`,
+			y: `${i.y}${i.unit}`,
+			width: `${i.width}${i.unit}`,
+			height: `${i.height}${i.unit}`,
+			fill: "black"
+		}))), /* @__PURE__ */ s.createElement("rect", {
+			fill: "black",
+			fillOpacity: .5,
+			width: "100%",
+			height: "100%",
+			mask: `url(#hole-${this.instanceId})`
+		})) : void 0, f);
+	}
+};
+Math.PI / 180;
+//#endregion
+//#region src/stories/molecules/ImageCropDialog/crop.ts
+async function T(e, t, n = {}) {
+	let r = n.outputSize ?? 512, i = n.mimeType ?? "image/jpeg", a = n.quality ?? .9, o = document.createElement("canvas");
+	o.width = r, o.height = r;
+	let s = o.getContext("2d");
+	if (!s) throw Error("Failed to acquire 2D canvas context");
+	let c = e.naturalWidth / e.width, l = e.naturalHeight / e.height;
+	return s.drawImage(e, t.x * c, t.y * l, t.width * c, t.height * l, 0, 0, r, r), new Promise((e, t) => {
+		o.toBlob((n) => n ? e(n) : t(/* @__PURE__ */ Error("Canvas toBlob returned null")), i, a);
+	});
+}
+function E(e, t, n) {
+	return _(g(t / n >= e ? {
+		unit: "%",
+		height: 100
+	} : {
+		unit: "%",
+		width: 100
+	}, e, t, n), t, n);
+}
+//#endregion
+//#region src/stories/molecules/ImageCropDialog/ImageCropDialog.tsx
+function D({ sourceUrl: s, title: c, description: l, circularCrop: f = !1, aspect: p = 1, outputSize: m = 512, outputMimeType: h, busy: g = !1, cancelLabel: _, confirmLabel: v, closeLabel: y, loadingLabel: b = "Cargando imagen…", errorMessage: x = "No hemos podido cargar la imagen. Prueba con otro archivo.", onConfirm: S, onClose: C, className: D }) {
+	let O = u(null), [k, A] = d(), [j, M] = d(), [N, P] = d("loading"), [F, I] = d(s);
+	s !== F && (I(s), P("loading"), A(void 0), M(void 0));
+	let L = () => {
+		A(void 0), M(void 0), C();
+	}, R = async () => {
+		let e = O.current;
+		!e || !j || j.width === 0 || (await S(await T(e, j, {
+			mimeType: h,
+			outputSize: m
+		})), L());
+	};
+	return /* @__PURE__ */ a(r, {
+		open: s !== null,
+		onClose: () => {
+			g || L();
+		},
+		title: c,
+		...y ? { closeLabel: y } : {},
+		...l == null ? {} : { description: l },
+		footerClassName: "image-crop-dialog__actions",
+		footer: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(t, {
+			variant: "outline",
+			disabled: g,
+			onClick: L,
+			children: _
+		}), /* @__PURE__ */ a(t, {
+			disabled: g || !j?.width,
+			onClick: R,
+			children: v
+		})] }),
+		children: /* @__PURE__ */ a("div", {
+			className: ["image-crop-dialog", D].filter(Boolean).join(" "),
+			children: /* @__PURE__ */ o("div", {
+				className: "image-crop-dialog__area",
+				children: [
+					N === "loading" && /* @__PURE__ */ a(e, {
+						size: "lg",
+						label: b
+					}),
+					N === "error" && /* @__PURE__ */ a(n, {
+						variant: "error",
+						description: x,
+						className: "image-crop-dialog__error"
+					}),
+					s && N !== "error" && /* @__PURE__ */ a(w, {
+						crop: k,
+						onChange: (e, t) => A(t),
+						onComplete: (e) => M(e),
+						aspect: p,
+						circularCrop: f,
+						minWidth: 64,
+						keepSelection: !0,
+						children: /* @__PURE__ */ a("img", {
+							ref: O,
+							src: s,
+							alt: "",
+							onLoad: (e) => {
+								let { width: t, height: n } = e.currentTarget;
+								P("ready"), A(E(p, t, n));
+							},
+							onError: () => P("error")
+						})
+					})
+				]
+			})
+		})
+	});
+}
+//#endregion
+export { D as t };

package/dist/_shared/logo.js

@@ -0,0 +1,19 @@
+import '../logo.css';
+import { r as e, t } from "./logoassets.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/stories/atoms/Logo/Logo.tsx
+function r({ size: r = "md", className: i }) {
+	return /* @__PURE__ */ n("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: e,
+		className: [
+			"logo",
+			`logo--${r}`,
+			i
+		].filter(Boolean).join(" "),
+		"aria-hidden": "true",
+		children: t.map((e) => /* @__PURE__ */ n("path", { d: e }, e))
+	});
+}
+//#endregion
+export { r as t };

package/dist/_shared/logoassets.js

@@ -0,0 +1,18 @@
+//#region src/stories/atoms/Logo/logoAssets.ts
+var e = "0 0 925.5 265.5", t = [
+	"M108.2,203.5c-7,0-13-1.1-18.1-3.4c-5.1-2.3-9.4-5.2-13-8.9l-10.5,9.9H62l8.3-39.2h4.6 c3.6,24.7,15.1,37,34.6,37c7.6,0,14-1.6,19.2-4.7c5.2-3.1,9.2-7.1,11.9-11.8c2.7-4.7,4-9.4,4-13.9c0-5.3-1.4-9.7-4.2-13.2 c-2.8-3.5-6.4-6.6-10.9-9.2c-4.4-2.6-9.1-5.2-14.1-7.6c-5-2.5-9.7-5.2-14.1-8.4c-4.4-3.1-8-7-10.9-11.7 c-2.8-4.7-4.2-10.4-4.2-17.3c0-7.1,1.5-13.7,4.6-19.9c3.1-6.1,7.7-11.1,13.9-14.9c6.2-3.8,14-5.7,23.5-5.7c6.6,0,12.2,1,16.7,2.9 c4.5,1.9,8.2,4.3,11,7.3l7.7-8.5h4.6L161,99h-4.6c0-6.7-1.1-12.6-3.4-17.7c-2.3-5-5.5-9-9.8-11.8c-4.2-2.8-9.4-4.2-15.5-4.2 c-4.4,0-8.9,0.9-13.5,2.6c-4.6,1.7-8.5,4.2-11.6,7.5c-3.1,3.3-4.7,7.4-4.7,12.1c0,4.7,1.4,8.6,4.3,11.8c2.9,3.2,6.6,6,11,8.5 c4.5,2.5,9.3,4.9,14.4,7.5c5.1,2.5,9.9,5.5,14.4,8.9c4.5,3.4,8.2,7.7,11,12.7c2.9,5,4.3,11.3,4.3,18.8c0,9.4-2.2,17.8-6.5,24.9 c-4.4,7.2-10.2,12.8-17.6,16.8C125.9,201.5,117.5,203.5,108.2,203.5z",
+	"M171.7,203.5c-4.5,0-8-1.2-10.5-3.5c-2.5-2.3-3.7-5.4-3.7-9.2c0-1,0.1-2,0.3-2.9c0.2-1,0.3-1.9,0.5-2.8 l21.2-87.6h19.7l-21.5,85.7c-0.4,1.6-0.6,2.9-0.7,3.9c-0.1,1-0.2,1.8-0.2,2.4c0,3.1,1.3,4.6,4,4.6c2.9,0,6.1-1.8,9.6-5.3 c3.4-3.6,7.2-9.6,11.4-18.2l3.7,1.7c-2.3,5.2-5.1,10.1-8.4,14.9c-3.3,4.8-7,8.7-11.1,11.8C181.7,201.9,176.9,203.5,171.7,203.5z M161.2,122.9v-4.6h49.1v4.6H161.2z",
+	"M225.4,203.3c-4.7,0-8.7-1.2-12.1-3.6c-3.4-2.4-5.2-6.2-5.2-11.5c0-2.3,0.4-5,1.1-8.1l15.1-61.8h19.1 l-15.8,66.1c-0.1,0.9-0.3,1.7-0.5,2.5c-0.2,0.8-0.3,1.6-0.3,2.3c0,2.1,0.6,3.6,1.9,4.6c1.3,1,2.9,1.5,4.9,1.5 c2.8,0,5.7-0.9,8.6-2.6c2.9-1.7,5.8-4.1,8.5-7.3c2.7-3.1,5.1-6.7,7.3-10.8c2.1-4,3.9-8.5,5.2-13.2l-4,22.1H258 c-3.8,5-8.4,9.6-13.9,13.7C238.6,201.2,232.4,203.3,225.4,203.3z M209.8,122.9v-4.6H239v4.6H209.8z M273.6,203.3 c-2.3,0-4.7-0.5-7-1.6c-2.3-1-4.2-2.8-5.7-5.3c-1.5-2.5-2.2-6-2.2-10.4c0-1.7,0.2-3.7,0.5-5.9c0.3-2.2,0.8-4.7,1.4-7.4l13.1-54.5 h18.8L278.6,174c-0.9,3.8-1.5,7-2,9.7c-0.5,2.6-0.7,4.8-0.7,6.3c0,3.7,1.2,5.5,3.7,5.5c2.6,0,5.4-1.9,8.6-5.8 c3.1-3.9,6.4-9.4,9.8-16.5l3.7,1.7c-2.5,5.9-5.1,10.9-7.9,15.2c-2.8,4.2-5.9,7.5-9.1,9.8C281.3,202.2,277.7,203.3,273.6,203.3z",
+	"M322.7,203.5c-5.4,0-10.4-1.3-15.1-4c-4.7-2.6-8.4-6.4-11.2-11.4c-2.8-5-4.2-11-4.2-18.1 c0-7.1,1.4-13.9,4.3-20.4c2.9-6.5,6.7-12.3,11.4-17.3c4.7-5,9.9-9,15.6-11.9c5.7-2.9,11.4-4.3,17-4.3c5.4,0,9.6,1.3,12.5,3.8 c2.9,2.5,5.2,5.7,6.8,9.7h1.3l-4.2,16.7c0.2-1.2,0.4-2.4,0.5-3.5c0.1-1.1,0.1-2.1,0.1-2.9c0-5.2-1.5-9.5-4.4-13.1 c-2.9-3.6-6.6-5.3-10.9-5.3c-3.7,0-7.1,1.4-10.1,4c-3.1,2.7-5.8,6.2-8.1,10.6c-2.3,4.4-4.3,9.1-6,14.3c-1.7,5.2-2.9,10.2-3.7,15.3 c-0.8,5-1.2,9.5-1.2,13.4c0,6.6,1.1,11.4,3.4,14.3c2.3,2.9,5.5,4.3,9.7,4.3c2.3,0,4.9-0.6,7.7-1.9c2.8-1.3,5.7-3.9,8.7-7.9 c3-4,5.9-10,8.6-17.9l-2.2,18.4h-1.3c-2.3,4.3-5.6,7.9-9.8,10.9C333.8,202,328.7,203.5,322.7,203.5z M362.5,203.5 c-4.2,0-7.5-1.2-10.1-3.7c-2.6-2.5-3.9-6.6-3.9-12.3c0-1.8,0.2-4,0.5-6.4c0.3-2.5,0.8-5.2,1.6-8.1l26.3-110.6h19.7l-29.8,120.9 c-0.4,1.6-0.6,2.9-0.7,3.9c-0.1,1-0.2,1.8-0.2,2.4c0,3.1,1.4,4.6,4.2,4.6c3.1,0,6.3-1.8,9.8-5.3c3.5-3.6,7.5-9.6,11.9-18.2 l3.7,1.7c-2.7,5.4-5.6,10.5-8.7,15.3s-6.7,8.6-10.6,11.6C372.2,202,367.6,203.5,362.5,203.5z M358.4,66.9v-4.6h35.9v4.6H358.4z",
+	"M393.2,122.9v-4.6h28.5v4.6H393.2z M401.7,203.5c-4.5,0-8-1.2-10.5-3.5c-2.5-2.3-3.7-5.4-3.7-9.2 c0-1,0.1-2,0.3-2.9c0.2-1,0.3-1.9,0.5-2.8l16-66.8h19.7l-16.4,65c-0.4,1.6-0.6,2.9-0.7,3.9c-0.1,1-0.2,1.8-0.2,2.4 c0,3.1,1.3,4.6,4,4.6c2.9,0,6.1-1.8,9.6-5.3c3.4-3.6,7.2-9.6,11.4-18.2l3.7,1.7c-2.3,5.2-5.1,10.1-8.4,14.9 c-3.3,4.8-7,8.7-11.1,11.8C411.7,201.9,406.9,203.5,401.7,203.5z M420.3,91.1c-3.4,0-6.3-1.2-8.7-3.6c-2.4-2.4-3.6-5.3-3.6-8.7 c0-3.6,1.2-6.5,3.6-8.9c2.4-2.4,5.3-3.6,8.7-3.6c3.6,0,6.5,1.2,8.9,3.6c2.4,2.4,3.6,5.4,3.6,8.9c0,3.4-1.2,6.3-3.6,8.7 C426.8,89.9,423.8,91.1,420.3,91.1z",
+	"M458,203.5c-6.7,0-12.6-1.5-17.7-4.6c-5-3.1-9-7.2-11.8-12.4c-2.8-5.2-4.2-11-4.2-17.4 c0-6.5,1.4-12.9,4.3-19.2c2.9-6.3,6.8-12,11.7-17.1c4.9-5.1,10.5-9.1,16.7-12.1c6.3-3,12.8-4.5,19.7-4.5c6.7,0,12.6,1.5,17.7,4.4 c5,2.9,9,6.9,11.8,12c2.8,5,4.2,10.7,4.2,17.1c0,6.5-1.4,12.9-4.3,19.3c-2.9,6.4-6.8,12.2-11.7,17.4c-4.9,5.2-10.5,9.4-16.7,12.5 C471.4,201.9,464.8,203.5,458,203.5z M458.3,198.9c5,0,9.5-1.7,13.3-5.2s7.1-8,9.8-13.6c2.6-5.6,4.6-11.7,6-18.2 c1.3-6.6,2-12.9,2-19c0-6.5-1-11.8-2.9-15.9c-1.9-4.1-5.5-6.2-10.8-6.2c-4.9,0-9.3,1.8-13.1,5.3c-3.8,3.6-7,8.2-9.7,13.9 c-2.6,5.7-4.6,11.9-6,18.6c-1.4,6.7-2,13.1-2,19.2c0,6.9,1,12.1,2.9,15.7C450,197.1,453.4,198.9,458.3,198.9z",
+	"M547.6,201.4V69.7h20.2v113.1h60.4v18.7H547.6z",
+	"M631.6,201.4l49.3-74.3l2.2-0.1l35.6-57.3h22.4l-45.4,69.9h-1.8l-39.7,61.8H631.6z M722.6,201.4l-40.8-62.2 l-1.4-0.1l-46.1-69.5h23.3l37.4,57.3h1.8l49.6,74.4H722.6z",
+	"M751.6,201.4V69.7h45.1c20.2,0,36.3,6,48.5,18c12.1,12,18.2,27.9,18.2,47.8c0,19.8-6.1,35.8-18.4,47.8 c-12.2,12.1-28.4,18.1-48.3,18.1H751.6z M771.9,183.3h24.4c14.2,0,25.4-4.3,33.8-12.8c8.4-8.5,12.6-20.1,12.6-34.6v-0.1 c0-14.7-4.1-26.3-12.4-34.9c-8.2-8.6-19.6-12.9-34-12.9h-24.4V183.3z"
+], n = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${e}" fill="currentColor" role="img" aria-label="Studio LXD">
+  <title>Studio LXD</title>
+${t.map((e) => `  <path d="${e}" />`).join("\n")}
+</svg>
+`;
+//#endregion
+export { n, e as r, t };

package/dist/_shared/messagetimestamp.js

@@ -0,0 +1,16 @@
+import { t as e } from "./env.js";
+//#region src/stories/molecules/_shared/messageTimestamp.ts
+var t = {
+	hour: "2-digit",
+	minute: "2-digit"
+};
+function n(n, r = "es-ES", i = t) {
+	if (n == null) return null;
+	let a = n instanceof Date ? n : new Date(n);
+	return Number.isNaN(a.getTime()) ? (e() && console.warn(`[UserMessage/AssistantMessage] \`timestamp\` no es interpretable: ${JSON.stringify(n)}. Se espera un \`Date\` o una cadena ISO 8601 (ej. "2026-08-27T14:32:00Z"), no una hora ya formateada. No se pinta ninguna marca de tiempo.`), null) : {
+		dateTime: a.toISOString(),
+		label: new Intl.DateTimeFormat(r, i).format(a)
+	};
+}
+//#endregion
+export { n as t };