https://app.integrity.sh/assets/ImageTransforms-N5xRjg8K.js

1import{e as S,B as F,d as l,t as f,i as t,h as B,F as M}from"./vendor-DlQ3_EJQ.js";import{b$ as N,B as h,c0 as O,c1 as z,c2 as H,c3 as L,c4 as $,c5 as y,c6 as W}from"./index-DT-jUL5v.js";import{S as j,C as K}from"./section-DTJMh0R-.js";import{S as q}from"./demo-Bdes_ce8.js";import"./crdt-BucyUbPf.js";import"./icons-D87AzXDb.js";import"./prosemirror-D78K0BXw.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof globalThis<"u"?globalThis:typeof self<"u"?self:{};e.SENTRY_RELEASE={id:"04c7456d3"};var a=new e.Error().stack;a&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[a]="44468676-ea3f-4852-adaa-5e0025e84f53",e._sentryDebugIdIdentifier="sentry-dbid-44468676-ea3f-4852-adaa-5e0025e84f53")}catch{}})();var G=f('<div class="flex items-center gap-2">'),J=f('<div class="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-4 items-start">'),Q=f('<div class=space-y-6><div class=flex></div><div class="text-xs font-mono text-base-muted">crop <!> · flipX <!> · flipY <!> · rotate <!>° · width </div><div class=max-w-xl>'),U=f('<div class=space-y-1><div class="text-xs text-base-muted font-mono">');const d={url:"/files/transform-marker.svg",width:800,height:500},X={url:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=500&fit=crop",width:800,height:500},V=e=>{if(!e)return"none";const a=s=>s.toFixed(2);return`x ${a(e.x)} · y ${a(e.y)} · w ${a(e.w)} · h ${a(e.h)}`},c={x:.5,y:0,w:.5,h:.5},Z=[{label:"identity"},{label:"flipX",flipX:!0},{label:"flipY",flipY:!0},{label:"flipX + flipY",flipX:!0,flipY:!0},{label:"rotate 90",rotate:90},{label:"rotate 180",rotate:180},{label:"rotate 270",rotate:270},{label:"rotate 90 + flipX",rotate:90,flipX:!0},{label:"crop top-right",crop:c},{label:"crop + flipX",crop:c,flipX:!0},{label:"crop + rotate 90",crop:c,rotate:90},{label:"crop + rotate 270 + flipY",crop:c,rotate:270,flipY:!0}],C="playbook-image",ne=()=>{const[e,a]=S(d),[s,b]=S(null),[r,u]=F({crop:null,flipX:!1,flipY:!1,rotate:0}),Y=N({nodeId:C,attr:o=>r[o],write:o=>u(o)}),I=()=>{u({crop:null,flipX:!1,flipY:!1,rotate:0}),b(null),$()},E=()=>[{group:"image-transform",items:z(Y)},{group:"image-download",items:H({fileId:()=>null,fileName:()=>null})}];return l(K,{description:"Image crop / flip / rotate, applied in CSS — the same <img> stays mounted, so a transform lands within a frame and never refetches the bytes. Crop is armed from the toolbar, then drawn by dragging on the image; the bottom-right handle resizes. Download (after the divider) saves the original upload, never the transformed view — this bench has no uploaded file behind it, so it lands on its error toast.",status:"ready",filePath:"web/src/components/ui/blocks/File/FilePreview/TransformedImage.jsx",get children(){var o=Q(),g=o.firstChild,n=g.nextSibling,T=n.firstChild,v=T.nextSibling,D=v.nextSibling,x=D.nextSibling,k=x.nextSibling,_=k.nextSibling,R=_.nextSibling,w=R.nextSibling;w.nextSibling;var A=n.nextSibling;return t(o,l(j,{label:"Playground",get children(){var i=G();return t(i,l(h,{variant:"ghost",get active(){return e()===d},onClick:()=>a(d),children:"Marker"}),null),t(i,l(h,{variant:"ghost",get active(){return e()===X},onClick:()=>a(X),children:"Photo"}),null),t(i,l(h,{variant:"outline",onClick:I,children:"Reset"}),null),i}}),g),t(g,l(O,{groups:E})),t(n,()=>V(r.crop),v),t(n,()=>String(!!r.flipX),x),t(n,()=>String(!!r.flipY),_),t(n,()=>r.rotate||0,w),t(n,(()=>{var i=B(()=>!!s());return()=>i()?`${Math.round(s())}px`:"auto"})(),null),t(A,l(L,{get width(){return e().width},get customWidth(){return s()},get crop(){return r.crop},get flipX(){return r.flipX},get flipY(){return r.flipY},get rotate(){return r.rotate},get isCropActive(){return W(C)},onCropEnd:$,onResize:b,onCrop:i=>u({crop:i}),get children(){return l(y,{get url(){return e().url},get width(){return e().width},get height(){return e().height},get crop(){return r.crop},get flipX(){return r.flipX},get flipY(){return r.flipY},get rotate(){return r.rotate}})}})),t(o,l(q,{label:"Transform matrix",get children(){var i=J();return t(i,l(M,{each:Z,children:p=>(()=>{var m=U(),P=m.firstChild;return t(P,()=>p.label),t(m,l(y,{get url(){return d.url},get width(){return d.width},get height(){return d.height},get crop(){return p.crop},get flipX(){return p.flipX},get flipY(){return p.flipY},get rotate(){return p.rotate}}),null),m})()})),i}}),null),o}})};export{ne as ImageTransformsSection};