1import{r as x}from"./rolldown-runtime.C1f3BsDW.js";import"./inertia.BE4YqsTM.js";import{Qr as v}from"./icons.ChOq_Y4q.js";import{t as k}from"./react-core.CAMe6Z4j.js";import"./utils.CgzVjNgC.js";import{jt as o,k as h}from"./entry-client.DX3aUoe5.js";import"./dist.CoNAZqlp.js";import"./dist.DxccqHSW.js";import"./dist.BhzTvz6X.js";import"./es2015.Cr2X04_P.js";import"./dist.DbqQa_sy.js";import{a as z,n as w,o as N,r as j,t as T}from"./dialog.Bb7MGeDP.js";import"./dist.D4LCotyC.js";import"./dist.C1cc-Zbw.js";import{t as X}from"./slider.BZoarXCr.js";import{t as Y}from"./section-label.Cq6cQeLu.js";import{s as D}from"./transitionConfig.CdUOd4v5.js";var m=x(v(),1),t=x(k(),1),S=({transitionId:e,className:a})=>(0,t.jsxs)("div",{className:o("relative w-full aspect-video rounded overflow-hidden bg-zinc-900",a),children:[(0,t.jsx)("div",{className:o("absolute inset-0 bg-zinc-600",`tp--${e}--a`)}),(0,t.jsx)("div",{className:o("absolute inset-0 bg-primary/80",`tp--${e}--b`)}),(0,t.jsx)("span",{className:"absolute top-0.5 left-1 text-[8px] font-mono text-white/50 z-10",children:"A"}),(0,t.jsx)("span",{className:"absolute top-0.5 right-1 text-[8px] font-mono text-white/50 z-10",children:"B"})]}),I=(0,m.memo)(S),b="transition-preview-styles";if(typeof document<"u"&&!document.getElementById(b)){const e=document.createElement("style");e.id=b,e.textContent=` 2 /* ===== Basic ===== */ 3 4 /* Cut â instant swap */ 5 .tp--cut--a { animation: tp-cut-a 2s ease infinite; } 6 .tp--cut--b { animation: tp-cut-b 2s ease infinite; } 7 @keyframes tp-cut-a { 0%,49.9%{opacity:1} 50%,100%{opacity:0} } 8 @keyframes tp-cut-b { 0%,49.9%{opacity:0}
8 50%,100%{opacity:1} } 9 10 /* Fade / Dissolve / Distance / Fade Grays â crossfade */ 11 .tp--fade--a, .tp--dissolve--a, .tp--distance--a, .tp--fadegrays--a 12 { animation: tp-xfade-a 2s ease infinite; } 13 .tp--fade--b, .tp--dissolve--b, .tp--distance--b, .tp--fadegrays--b 14 { animation: tp-xfade-b 2s ease infinite; } 15 @keyframes tp-xfade-a { 0%,30%{opacity:1} 70%,100%{opacity:0} } 16 @keyframes tp-xfade-b { 0%,30%{opacity:0} 70%,100%{opacity:1} } 17 18 /* ===== Dip ===== */ 19 20 /* Dip to Black */ 21 .tp--dip_to_black--a { animation: tp-dip-a 2s ease infinite; } 22 .tp--dip_to_black--b { animation: tp-dip-b 2s ease infinite; } 23 @keyframes tp-dip-a { 0%,25%{opacity:1} 50%,100%{opacity:0} } 24 @keyframes tp-dip-b { 0%,50%{opacity:0} 75%,100%{opacity:1} } 25 26 /* Dip to White â same timing, bg-zinc-900 shows as "white" gap */ 27 .tp--dip_to_white--a { animation: tp-dip-a 2s ease infinite; z-index:2; } 28 .tp--dip_to_white--b { animation: tp-dip-b 2s ease infinite; z-index:1; } 29 30 /* ===== Slide ===== */ 31 32 .tp--slide_left--a { animation: tp-sl-l-a 2s ease infinite; } 33 .tp--slide_left--b { animation: tp-sl-l-b 2s ease infinite; } 34 @keyframes tp-sl-l-a { 0%,30%{transform:translateX(0)} 70%,100%{transform:translateX(-100%)} } 35 @keyframes tp-sl-l-b { 0%,30%{transform:translateX(100%)} 70%,100%{transform:translateX(0)} } 36 37 .tp--slide_right--a { animation: tp-sl-r-a 2s ease infinite; } 38 .tp--slide_right--b { animation: tp-sl-r-b 2s ease infinite; } 39 @keyframes tp-sl-r-a { 0%,30%{transform:translateX(0)} 70%,100%{transform:translateX(100%)} } 40 @keyframes tp-sl-r-b { 0%,30%{transform:translateX(-100%)} 70%,100%{transform:translateX(0)} } 41 42 .tp--slide_up--a { animation: tp-sl-u-a 2s ease infinite; } 43 .tp--slide_up--b { animation: tp-sl-u-b 2s ease infinite; } 44 @keyframes tp-sl-u-a { 0%,30%{transform:translateY(0)} 70%,100%{transform:translateY(-100%)} } 45 @keyframes tp-sl-u-b { 0%,30%{transform:translateY(100%)} 70%,100%{transform:translateY(0)} } 46 47 .tp--slide_down--a { animation: tp-sl-d-a 2s ease infinite; } 48 .tp--slide_down--b { animation: tp-sl-d-b 2s ease infinite; } 49 @keyframes tp-sl-d-a { 0%,30%{transform:translateY(0)} 70%,100%{transform:translateY(100%)} } 50 @keyframes tp-sl-d-b { 0%,30%{transform:translateY(-100%)} 70%,100%{transform:translateY(0)} } 51 52 /* ===== Wipe (clip-path reveal) ===== */ 53 54 .tp--wipe_left--a { z-index:1; } 55 .tp--wipe_left--b { z-index:2; animation: tp-wp-l 2s ease infinite; } 56 @keyframes tp-wp-l { 0%,30%{clip-path:inset(0 100% 0 0)} 70%,100%{clip-path:inset(0 0 0 0)} } 57 58 .tp--wipe_right--a { z-index:1; } 59 .tp--wipe_right--b { z-index:2; animation: tp-wp-r 2s ease infinite; } 60 @keyframes tp-wp-r { 0%,30%{clip-path:inset(0 0 0 100%)} 70%,100%{clip-path:inset(0 0 0 0)} } 61 62 .tp--wipe_up--a { z-index:1; } 63 .tp--wipe_up--b { z-index:2; animation: tp-wp-u 2s ease infinite; } 64 @keyframes tp-wp-u { 0%,30%{clip-path:inset(100% 0 0 0)} 70%,100%{clip-path:inset(0 0 0 0)} } 65 66 .tp--wipe_down--a { z-index:1; } 67 .tp--wipe_down--b { z-index:2; animation: tp-wp-d 2s ease infinite; } 68 @keyframes tp-wp-d { 0%,30%{clip-path:inset(0 0 100% 0)} 70%,100%{clip-path:inset(0 0 0 0)} } 69 70 /* ===== Smooth (blur + slide) ===== */ 71 72 .tp--smooth_left--a { animation: tp-sm-l-a 2s ease infinite; } 73 .tp--smooth_left--b { animation: tp-sm-l-b 2s ease infinite; } 74 @keyframes tp-sm-l-a { 0%,30%{transform:translateX(0);opacity:1} 70%,100%{transform:translateX(-30%);opacity:0} } 75 @keyframes tp-sm-l-b { 0%,30%{transform:translateX(30%);opacity:0} 70%,100%{transform:translateX(0);opacity:1} } 76 77 .tp--smooth_right--a { animation: tp-sm-r-a 2s ease infinite; } 78 .tp--smooth_right--b { animation: tp-sm-r-b 2s ease infinite; } 79 @keyframes tp-sm-r-a { 0%,30%{transform:translateX(0);opacity:1} 70%,100%{transform:translateX(30%);opacity:0} } 80 @keyframes tp-sm-r-b { 0%,30%{transform:translateX(-30%);opacity:0} 70%,100%{transform:translateX(0);opacity:1} } 81 82 .tp--smooth_up--a { animation: tp-sm-u-a 2s ease infinite; } 83 .tp--smooth_up--b { animation: tp-sm-u-b 2s ease infinite; }
84 @keyframes tp-sm-u-a { 0%,30%{transform:translateY(0);opacity:1} 70%,100%{transform:translateY(-30%);opacity:0} } 85 @keyframes tp-sm-u-b { 0%,30%{transform:translateY(30%);opacity:0} 70%,100%{transform:translateY(0);opacity:1} } 86 87 .tp--smooth_down--a { animation: tp-sm-d-a 2s ease infinite; } 88 .tp--smooth_down--b { animation: tp-sm-d-b 2s ease infinite; } 89 @keyframes tp-sm-d-a { 0%,30%{transform:translateY(0);opacity:1} 70%,100%{transform:translateY(30%);opacity:0} } 90 @keyframes tp-sm-d-b { 0%,30%{transform:translateY(-30%);opacity:0} 70%,100%{transform:translateY(0);opacity:1} } 91 92 /* ===== Diagonal (clip-path corner reveals) ===== */ 93 94 .tp--diag_tl--a { z-index:1; } 95 .tp--diag_tl--b { z-index:2; animation: tp-dg-tl 2s ease infinite; } 96 @keyframes tp-dg-tl { 0%,30%{clip-path:polygon(0 0,0 0,0 0)} 70%,100%{clip-path:polygon(0 0,200% 0,0 200%)} } 97 98 .tp--diag_tr--a { z-index:1; } 99 .tp--diag_tr--b { z-index:2; animation: tp-dg-tr 2s ease infinite; } 100 @keyframes tp-dg-tr { 0%,30%{clip-path:polygon(100% 0,100% 0,100% 0)} 70%,100%{clip-path:polygon(-100% 0,100% 0,100% 200%)} } 101 102 .tp--diag_bl--a { z-index:1; } 103 .tp--diag_bl--b { z-index:2; animation: tp-dg-bl 2s ease infinite; } 104 @keyframes tp-dg-bl { 0%,30%{clip-path:polygon(0 100%,0 100%,0 100%)} 70%,100%{clip-path:polygon(0 -100%,200% 100%,0 100%)} } 105 106 .tp--diag_br--a { z-index:1; } 107 .tp--diag_br--b { z-index:2; animation: tp-dg-br 2s ease infinite; } 108 @keyframes tp-dg-br { 0%,30%{clip-path:polygon(100% 100%,100% 100%,100% 100%)} 70%,100%{clip-path:polygon(100% -100%,-100% 100%,100% 100%)} } 109 110 /* ===== Slice (stripe reveals) ===== */ 111 112 .tp--hlslice--a, .tp--hrslice--a, .tp--vuslice--a, .tp--vdslice--a { z-index:1; } 113 114 .tp--hlslice--b { z-index:2; animation: tp-hls 2s ease infinite; } 115 @keyframes tp-hls { 0%,30%{clip-path:inset(0 100% 0 0)} 70%,100%{clip-path:inset(0 0 0 0)} } 116 117 .tp--hrslice--b { z-index:2; animation: tp-hrs 2s ease infinite; } 118 @keyframes tp-hrs { 0%,30%{clip-path:inset(0 0 0 100%)} 70%,100%{clip-path:inset(0 0 0 0)} } 119 120 .tp--vuslice--b { z-index:2; animation: tp-vus 2s ease infinite; } 121 @keyframes tp-vus { 0%,30%{clip-path:inset(100% 0 0 0)} 70%,100%{clip-path:inset(0 0 0 0)} } 122 123 .tp--vdslice--b { z-index:2; animation: tp-vds 2s ease infinite; } 124 @keyframes tp-vds { 0%,30%{clip-path:inset(0 0 100% 0)} 70%,100%{clip-path:inset(0 0 0 0)} } 125 126 /* ===== Shape ===== */ 127 128 .tp--circle_open--a { z-index:1; } 129 .tp--circle_open--b { z-index:2; animation: tp-co 2s ease infinite; } 130 @keyframes tp-co { 0%,30%{clip-path:circle(0% at 50% 50%)} 70%,100%{clip-path:circle(75% at 50% 50%)} } 131 132 .tp--circle_close--a { z-index:2; animation: tp-cc 2s ease infinite; } 133 .tp--circle_close--b { z-index:1; } 134 @keyframes tp-cc { 0%,30%{clip-path:circle(75% at 50% 50%)} 70%,100%{clip-path:circle(0% at 50% 50%)} } 135 136 .tp--rect_crop--a { z-index:1; } 137 .tp--rect_crop--b { z-index:2; animation: tp-rc 2s ease infinite; } 138 @keyframes tp-rc { 0%,30%{clip-path:inset(50% 50% 50% 50%)} 70%,100%{clip-path:inset(0 0 0 0)} } 139 140 .tp--circle_crop--a { z-index:1; } 141 .tp--circle_crop--b { z-index:2; animation: tp-ccr 2s ease infinite; } 142 @keyframes tp-ccr { 0%,30%{clip-path:circle(0% at 50% 50%)} 70%,100%{clip-path:circle(75% at 50% 50%)} } 143 144 .tp--horz_open--a { z-index:2; animation: tp-ho 2s ease infinite; } 145 .tp--horz_open--b { z-index:1; } 146 @keyframes tp-ho { 0%,30%{clip-path:inset(0 0 0 0)} 70%,100%{clip-path:inset(0 50% 0 50%)} } 147 148 .tp--horz_close--a { z-index:1; } 149 .tp--horz_close--b { z-index:2; animation: tp-hc 2s ease infinite; } 150 @keyframes tp-hc { 0%,30%{clip-path:inset(0 50% 0 50%)} 70%,100%{clip-path:inset(0 0 0 0)} } 151 152 .tp--vert_open--a { z-index:2; animation: tp-vo 2s ease infinite; } 153 .tp--vert_open--b { z-index:1; } 154 @keyframes tp-vo { 0%,30%{clip-path:inset(0 0 0 0)} 70%,100%{clip-path:inset(50% 0 50% 0)} } 155 156 .tp--vert_close--a { z-index:1; } 157 .tp--vert_close--b { z-index:2; animation: tp-vc 2s ease infinite; } 158 @keyframes tp-vc { 0%,30%{clip-path:inset(50% 0 50% 0)}
158 70%,100%{clip-path:inset(0 0 0 0)} } 159 160 /* ===== Other ===== */ 161 162 .tp--radial--a { z-index:1; } 163 .tp--radial--b { z-index:2; animation: tp-rad 2s linear infinite; } 164 @keyframes tp-rad { 0%,30%{clip-path:polygon(50% 50%,50% 0,50% 0,50% 0,50% 0,50% 0)} 50%{clip-path:polygon(50% 50%,50% 0,100% 0,100% 100%,50% 100%,50% 100%)} 70%,100%{clip-path:polygon(50% 50%,50% 0,100% 0,100% 100%,0 100%,0 0)} } 165 166 .tp--pixelize--a { animation: tp-pix-a 2s ease infinite; } 167 .tp--pixelize--b { animation: tp-pix-b 2s ease infinite; } 168 @keyframes tp-pix-a { 0%,35%{opacity:1;filter:blur(0)} 50%{opacity:0;filter:blur(4px)} 100%{opacity:0} } 169 @keyframes tp-pix-b { 0%,35%{opacity:0} 50%{opacity:0;filter:blur(4px)} 65%,100%{opacity:1;filter:blur(0)} } 170 171 .tp--squeezeh--a { animation: tp-sqh-a 2s ease infinite; } 172 .tp--squeezeh--b { animation: tp-sqh-b 2s ease infinite; } 173 @keyframes tp-sqh-a { 0%,30%{transform:scaleX(1)} 70%,100%{transform:scaleX(0)} } 174 @keyframes tp-sqh-b { 0%,30%{transform:scaleX(0)} 70%,100%{transform:scaleX(1)} } 175 176 .tp--squeezev--a { animation: tp-sqv-a 2s ease infinite; } 177 .tp--squeezev--b { animation: tp-sqv-b 2s ease infinite; } 178 @keyframes tp-sqv-a { 0%,30%{transform:scaleY(1)} 70%,100%{transform:scaleY(0)} } 179 @keyframes tp-sqv-b { 0%,30%{transform:scaleY(0)} 70%,100%{transform:scaleY(1)} } 180 181 .tp--zoomin--a { animation: tp-zi-a 2s ease infinite; } 182 .tp--zoomin--b { animation: tp-zi-b 2s ease infinite; } 183 @keyframes tp-zi-a { 0%,30%{transform:scale(1);opacity:1} 70%,100%{transform:scale(1.5);opacity:0} } 184 @keyframes tp-zi-b { 0%,30%{transform:scale(0.5);opacity:0} 70%,100%{transform:scale(1);opacity:1} } 185 186 .tp--hblur--a { animation: tp-hb-a 2s ease infinite; } 187 .tp--hblur--b { animation: tp-hb-b 2s ease infinite; } 188 @keyframes tp-hb-a { 0%,30%{opacity:1;filter:blur(0)} 50%{filter:blur(3px)} 70%,100%{opacity:0;filter:blur(0)} } 189 @keyframes tp-hb-b { 0%,30%{opacity:0;filter:blur(0)} 50%{filter:blur(3px)} 70%,100%{opacity:1;filter:blur(0)} } 190 `,document.head.appendChild(e)}var q=D(),A=({open:e,onOpenChange:a,currentType:s,currentDuration:n,onApply:c})=>{const[p,f]=(0,m.useState)(s||"cut"),[l,d]=(0,m.useState)(Number(n)||.5),y=i=>{i&&(f(s||"cut"),d(Number(n)||.5)),a(i)},u=()=>{c(p,p==="cut"?.5:l),a(!1)},g=()=>{c("cut",.5),a(!1)};return(0,t.jsx)(T,{open:e,onOpenChange:y,children:(0,t.jsxs)(w,{className:"sm:max-w-2xl max-h-[85dvh] flex flex-col",children:[(0,t.jsxs)(z,{children:[(0,t.jsx)(N,{className:"text-sm font-semibold text-foreground",children:"Transition"}),(0,t.jsx)(j,{className:"text-xs text-muted-foreground",children:"Choose how this shot moves into the next"})]}),(0,t.jsx)("div",{className:"flex-1 overflow-y-auto space-y-3 pr-1 -mr-1",children:q.map(({category:i,transitions:_})=>(0,t.jsxs)("div",{children:[(0,t.jsx)(Y,{className:"mb-1.5",children:i}),(0,t.jsx)("div",{className:"grid grid-cols-5 gap-1.5",children:_.map(r=>(0,t.jsx)(C,{transition:r,isSelected:p===r.id,onSelect:()=>f(r.id)},r.id))})]},i))}),(0,t.jsxs)("div",{className:"space-y-3 pt-3 border-t border-border shrink-0",children:[p!=="cut"&&(0,t.jsxs)("div",{className:"space-y-2",children:[(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[(0,t.jsx)("label",{className:"text-xs text-muted-foreground",children:"Duration"}),(0,t.jsxs)("span",{className:"text-xs font-mono text-foreground",children:[l.toFixed(1),"s"]})]}),(0,t.jsx)(X,{value:[l],onValueChange:([i])=>d(i),min:.3,max:3,step:.1,className:"w-full"}),(0,t.jsxs)("div",{className:"flex justify-between text-[10px] text-muted-foreground/60",children:[(0,t.jsxs)("span",{children:[.3,"s"]}),(0,t.jsxs)("span",{children:[3,"s"]})]})]}),(0,t.jsxs)("div",{className:"flex items-center justify-between",children:[(0,t.jsx)(h,{variant:"ghost",size:"sm",onClick:g,className:"text-muted-foreground hover:text-foreground",disabled:s==="cut",children:"Remove transition"}),(0,t.jsx)(h,{size:"sm",onClick:u,children:"Apply"})]})]})]})})},C=({transition:e,isSelected:a,onSelect:s})=>{const n=e.icon;return(0,t.jsxs)("button",{type:"button",onClick:s,"aria-pressed":a,title:e.name,className:o("flex flex-col items-center gap-1 p-1.5 rounded-lg border transition-colors outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",a?"border-primary/60 bg-primary/10":"border-border bg-card/50 hover:border-border-strong hover:bg-surface-hover"),children:[(0,t.jsx)(I,{transitionId:e.id,className:"w-full"}),(0,t.jsxs)("div",{className:"flex items-center gap-1",children:[(0,t.jsx)(n,{className:"h-2.5 w-2.5 text-muted-foreground shrink-0"}
190),(0,t.jsx)("span",{className:"text-[9px] text-foreground/80 leading-none truncate",children:e.name})]})]})},it=A;export{it as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.